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.

Image of Boulder Bop game in action

In this section


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.