• Choose a category
• All
• Classic-Fiction

var theCanvas = document.getElementById("canvas");

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

return;

}

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

if (!context) {

return;

}

//canvasApp level variables

var shipState = 0; //0 = static, 1 = thrust

function drawScreen() {

//update the shipState

shipState++;

if (shipState >1) {

shipState=0;

}

// 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 - animate", 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);

if (shipState==1) {

//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();

}

const FRAME_RATE = 40;

var intervalTime = 1000/FRAME_RATE;

setInterval(drawScreen, intervalTime );

}

When we run Example 8-4 we will see the player ship in the upper-left corner of the canvas. The static and thrust states will alternate on each frame.

Applying Transformations to Game Graphics

Our game will probably have many individual logical display objects that need to be updated on a single frame tick. We can make use of the Canvas stack (save() and restore() functions), and use the transformation matrix to ensure the final output affects only the current object we are working on—not the entire canvas.

The Canvas Stack

The Canvas state can be saved to a stack and retrieved. This is important when we are transforming and animating game objects because we want our transformations to affect only the current game object and not the entire canvas. The basic workflow for using the Canvas stack in a game looks like this:

Save the current canvas to the stack.

Transform and draw the game object.

Retrieve the saved canvas from the stack.

As an example, let’s set up a basic rotation for our player ship. We will rotate it by 1 degree on each frame. Since we are currently drawing the player ship in the top-left corner of the canvas, we are going to move it to a new location. We do this because the basic rotation will use the top-left corner of the ship as the registration point: the axis location used for rotation and scale operations. So, if we kept the ship at the 0,0 location and rotated it by its top-left corner, you would not see it half the time because its location would be off the top and left edges of the canvas. Instead, we will place the ship at 50,50.

We will be using the same HTML code as in Example 8-4, changing out only the drawCanvas() function. To simplify this example, we will remove the shipState variable and concentrate on the static state only. We will be adding in three new variables above the drawCanvas() function:

var rotation = 0; - holds the current rotation of the player ship

var x = 50; - holds the x location to start drawing the player ship

var y = 50; - holds the y location to start drawing the player ship

Example 8-5 gives the full code.

Example 8-5. Rotating an image

//canvasApp level variables

var rotation = 0;

var x = 50;

var y = 50;

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 - rotate", 0, 180);

//transformation

var angleInRadians = rotation * Math.PI / 180;

context.save(); //save current state in stack

context.setTransform(1,0,0,1,0,0); // reset to identity

//translate the canvas origin to