How to create a 2D casual HTML5 game

In this topic, we help you choose between WebGL, canvas, and SVG as a gaming platform. Then, using the JavaScript functional inheritance pattern, we show you how to create a causal 2D game called Boulder Bop using SVG.

In this section

Topic	Description
WebGL, Canvas, or SVG? Chose the right API	Of the three primary HTML5 graphics APIs, SVG can be a good choice for 2D casual games, such as Boulder Bop.
HTML5 game skeleton code for Boulder Bop	When thinking about how to structure an HTML5 game, it can help to look at an example. Let's look at the basic structure of Boulder Bop to get some ideas.
Animating a 2D SVG HTML5 game	It's hard to separate animation from a great game. Here we look briefly at how to animate a 2D HTML game like our Boulder Bop example.
Detecting collisions in a 2D HTML5 game	Many games need to determine when one game object has collide into another. This topic discusses Boulder Bop's collision detection.
Touch input for an HTML5 game	This topic describes why Boulder Bop is automatically touch enabled in Internet Explorer 10 and later.
HTML5 game control flow	Because Boulder Bop is somewhat complex, it can be helpful to walk through a typical flow of control scenario for the game, which is just what this topic does.
Debugging an HTML5 game	Because debugging is nearly always a part of game development, let's look some basic ways to debug your HTML5 game as you develop it. If you are an experience developer, you can skip this topic.
Replacing setInterveral with requestAnimationFrame in a HTML5 game	Here we describe how to improve Boulder Bop's performance by replacing its setInterval with requestAnimationFrame.
Additional resources for HTML5 game development	Check out some great resources for browser-based game development.