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.
.png)
In this section
| Topic | Description |
|---|---|
Of the three primary HTML5 graphics APIs, SVG can be a good choice for 2D casual games, such as 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. |
|
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. |
|
Many games need to determine when one game object has collide into another. This topic discusses Boulder Bop's collision detection. |
|
This topic describes why Boulder Bop is automatically touch enabled in Internet Explorer 10 and later. |
|
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. |
|
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. |
Check out some great resources for browser-based game development. |