Images on the Canvas - HTML5 Canvas - page 142

var dy = 0;
function eventShipLoaded() {
startUp();
}
function drawScreen() {
x = x+dx;
y = y+dy;
//draw a background so we can see the Canvas edges
context.fillStyle = "#aaaaaa";
context.fillRect(0,0,500,500);
context.save();
context.setTransform(1,0,0,1,0,0)
var angleInRadians = rotation * Math.PI / 180;
context.translate(x+16, y+16)
context.rotate(angleInRadians);
var sourceX=Math.floor(animationFrames[frameIndex] % 8) *32;
var sourceY=Math.floor(animationFrames[frameIndex] / 8) *32;
context.drawImage(tileSheet, sourceX, sourceY,32,32,−16,−16,32,32);
context.restore();
frameIndex++;
if (frameIndex ==animationFrames.length) {
frameIndex=0;
}
}
function startUp(){
setInterval(drawScreen, 100 );
}
When Example 4-9 is running, you will see the tank move slowly across the screen to
the right. Its tracks animate through the series of tiles from the tile sheet on a plain gray
background.
So far, we have only used tiles to simulate sprite-based animated movement. In the next
section, we will examine how to use an image tile sheet to create a much more elaborate
background using a series of tiles.
Creating a Grid of Tiles
Many games use what is called a tile-based environment for backgrounds and level
graphics. We are now going to apply the knowledge we have learned from animating
an image on the canvas to create the background maze for our hypothetical game: No
Tanks! We will use the same tile sheet from the previous tank examples, but instead of
showing the tank sprite tiles, we will create a maze for the tank to move through. We