• Choose a category
• All
• Classic-Fiction

if (!theCanvas || !theCanvas.getContext) {

return;

}

var context = theCanvas.getContext("2d");

if (!context) {

return;

}

drawScreen();

function drawScreen() {

context.fillStyle = '#ffaaaa';

context.fillRect(0, 0, 200, 200);

context.fillStyle = '#000000';

context.font = '20px _sans';

context.textBaseline = 'top';

context.fillText ("Canvas!", 0, 0);

}

}

This example will do nothing more than place a 200×200 gray box on the canvas and write “Canvas!” starting at 0,0. We will be replacing the drawScreen() function for most of the next few examples. Figure 8-1 illustrates Example 8-1.

Figure 8-1. The basic HTML file for Chapter 8

Next, we will begin to make our Asteroids-like game, which we’ve named Geo Blaster Basic. See Figure 8-7 for an example of the final game in action.

Our Game’s Design

We are not going to assume that everyone who reads this chapter knows of or understands Atari’s classic arcade game Asteroids. So, let’s start by taking a peek at Asteroids’ 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.

Using Paths to Draw the Game’s Main Character

Paths offer us a very simple but powerful way to mimic the vector look of the classic Asteroids game. We could use bitmap images for this purpose, but in this chapter we are going to focus on creating our game in code with no external assets. Let’s take a look at the two frames of animation we will create for our player ship.

The static player ship (frame 1)

The main frame of the player ship will be drawn with paths on a 20×20 grid, as shown in Figure 8-2.

Figure 8-2. The player ship

Using the basic HTML file presented in Example 8-1, we can simply swap the drawScreen() function with the code in Example 8-2 to draw the ship.

Example 8-2. Drawing the player ship