How to Use Canvas to Create a Space Game
This tutorial explains how to use HTML 5 Canvas features to develop an original arcade-style space game.
In this section
| Topic | Description |
|---|---|
Drawing the background and vehicle for a game using HTML5 canvas and JavaScript |
This topic explains how to use HTML5 canvas and JavaScript to draw a star field background and a flying vehicle for a game you create. |
Using HTML5 canvas and JavaScript to move a vehicle in a game |
This topic explains how to use HTML5 canvas and JavaScript to move the green and orange spaceship that you created in the Drawing the background and your vehicle topic. |
Using HTML5 canvas and JavaScript to detect collisions between vehicles in a game |
This topic explains how to detect collisions between your vehicle and other objects on the screen. |
Using HTML5 canvas and JavaScript to remove obstacles in a game and track scoring |
This topic includes a stand-alone annotated code sample that shows how to use HTML5 Canvas and JavaScript to remove obstacles from your vehicle and track scoring. The sample code builds on the code in the Using HTML5 canvas and JavaScript to detect collisions between vehicles in a game topic. |
HTML5 Canvas can create fast, light-weight graphics that are beneficial for game development. This section explains how to use Canvas to create a retro-style outer space flying game that will run in a webpage. This game has been designed to show the basic principles of how Canvas features can be used to develop games for the web. The object of this space game is to fly a spaceship to home base through a starfield of exploding asteroids.
This tutorial contains the complete code for running the game. The code is written in HTML5 Canvas and JavaScript, and consists of four stand-alone annotated code samples. Each sample covers a key programming task that is necessary for developing a different aspect of the game. The fourth code sample combines all the tasks together to create a full working game that you can play by using the arrow keys to move your spaceship through a starfield maze of exploding red asteroids. If you hit an asteroid, your ship will be destroyed. In order to get back safely to home base, you must avoid the asteroids or blow them up before you crash into them. Your score will be based on how many times you move your ship and how many bombs you launch.
Canvas can be used to create a variety of different web-based games. It is an effective development tool because it operates in immediate mode and renders graphics directly to the screen. Unlike retained mode systems, there are no intermediate steps that take place before the screen is drawn. As a result, Canvas’s immediate mode makes it possible to develop games that run fast and use less memory than other graphics technologies. Another benefit of Canvas is the way it uses pixels to create and read imagery on the screen. It is easy to do complex animations by changing each pixel individually. Canvas can also detect which pixels have previously been drawn on the screen. By using this feature, a game program can determine if objects are colliding. Collision detection is an essential requirement for creating fast-action game play.
The code samples in this tutorial have been written as simply as possible to show the basic principles of the four game programming tasks. The samples’ simplicity allows for easy expansion and customization so you can create your own web games. Discussion material appears at the end of the code that explains the design and structure of each part of the code, shows how the parts fit together, and includes links to further information. For more information about Canvas programming, see the MSDN Canvas Reference.