Canvas Game Essentials - HTML5 Canvas - page 382

Our Game's Design
We are not going to assume that everyone who reads this chapter knows of or under-
stands Atari's classic arcade game Asteroids . So, let's start by taking a peek at Aste-
roids ' game-play elements.
Asteroids , designed by Ed Logg and Lyle Rains, was released by Atari in 1979. The game
pitted a lone triangular two-dimensional vector spaceship (the player ship) against
screen after screen of asteroid rocks that needed to be dodged and destroyed. Every so
often a space saucer would enter the screen attempting to destroy the player ship.
All asteroids started the game as large rocks; once they were hit, they would split into
two medium-sized rocks. When hit by a player missile, these medium-sized rocks
would then split into two small rocks. The small rocks would simply be destroyed when
hit (small was the final size for all asteroids).
When the player destroyed all the asteroids, a new screen of more and slightly faster
asteroids would appear. This went on until the player exhausted his three ships. At
each 10,000-point score mark, the player was awarded an extra ship.
All of the game objects moved (thrusting, rotating, and/or floating) freely across the
entire screen, which represented a slice of space as a flat plane. When an object went
off the side of the screen, it would reappear on the opposite side, in warp-like fashion.
Game Graphics: Drawing with Paths
Let's jump into game development on Canvas by first taking a look at some of the
graphics we will use in our game. This will help give us a visual feel for what type of
code we will need to implement.
Needed Assets
For our Asteroids -like game, Geo Blaster Basic , we will need some very simple game
graphics, including:
• A solid black background.
• A player ship that will rotate and thrust (move on a vector) across the game screen.
There will be two frames of animation for this ship: a “static” frame and a “thrust”
frame.
• A saucer that flies across the screen and shoots at the player.
• Some “rocks” for the player to shoot. We will use a simple square as our rock.
There are two different methods we can employ to draw the graphics for our game:
bitmap images or paths. For the game in this chapter, we will focus on using paths. In
Chapter 9 , we will explore how to manipulate bitmap images for our game graphics.