• Choose a category
• All
• Classic-Fiction

function drawScreen() {

// draw background and text

context.fillStyle = '#000000';

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

context.fillStyle = '#ffffff';

context.font = '20px _sans';

context.textBaseline = 'top';

context.fillText ("Player Ship - Static", 0, 180);

//drawShip

context.strokeStyle = '#ffffff';

context.beginPath();

context.moveTo(10,0);

context.lineTo(19,19);

context.lineTo(10,9);

context.moveTo(9,9);

context.lineTo(0,19);

context.lineTo(9,0);

context.stroke();

context.closePath();

}

DRAWING WITH PATHS

The list below is a refresher on drawing with paths:

Always start a new path with the context.beginPath() function call.

Set context.strokeStyle() before starting to draw the path.

Use a combination of the context.moveTo() and context.drawTo() stroke commands to paint the path lines.

End the drawing with the context.stroke() call, and close off the path with context.closePath().

We are drawing to the upper-left corner of the screen starting at 0,0. Figure 8-3 shows what this will look like.

Figure 8-3. The player ship on the canvas

The ship with thrust engaged (frame 2)

Now let’s take a look at the second frame of animation for the player ship, which is shown in Figure 8-4.

Figure 8-4. The player ship with thrust engaged

The drawScreen() function code to add this extra “thrust” graphic is very simple; see Example 8-3.

Example 8-3. Drawing the player ship with thrust

function drawScreen() {

// draw background and text

context.fillStyle = '#000000';

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

context.fillStyle = '#ffffff';

context.font = '20px _sans';

context.textBaseline = 'top';

context.fillText ("Player Ship - Thrust", 0, 180);

//drawShip

context.strokeStyle = '#ffffff';

context.beginPath();

context.moveTo(10,0);

context.lineTo(19,19);

context.lineTo(10,9);

context.moveTo(9,9);

context.lineTo(0,19);

context.lineTo(9,0);

//draw thrust

context.moveTo(8,13);

context.lineTo(11,13);

context.moveTo(9,14);

context.lineTo(9,18);

context.moveTo(10,14);

context.lineTo(10,18);

context.stroke();

context.closePath();

}

Animating on the Canvas

The player ship we just created has two frames (static and thrust), but we can only display a single frame at a time. Our game will need to switch out the frame of animation based on the state of the player ship, and it will need to run on a timer so this animation can occur. Let’s take a quick look at the code necessary to create our game timer.

Game Timer Loop

Games on HTML5 Canvas require the use of the repeated update/render loop to simulate animation. We do this by using the setInterval() JavaScript function, which will repeatedly call a function of our choosing at millisecond intervals. Each second of game/animation time is made up of 1,000 milliseconds. If we want our game to run at 30 update/render cycles per second, we call this a 30 frames per second (FPS) rate. To run our interval at 30 FPS, we first need to divide 1,000 by 30. The result is the number of milliseconds in each interval:

const FRAME_RATE = 30;

var intervalTime = 1000/FRAME_RATE;

setInterval(drawScreen, intervalTime );

By calling the drawScreen() function repeatedly on each interval, we can simulate animation.

NOTE

Sometimes we will refer to each of the frame intervals as a frame tick.

The Player Ship State Changes

We simply need to switch between the static and thrust states to simulate the animation. Let’s take a look at the full HTML file to do this. In Example 8-4, we will start to place canvasApp class-level variables in a new section just above the drawScreen() function. This will be the location going forward for all variables needing a global scope inside the canvasApp() object.

Example 8-4. The player ship state changes for thrust animation