HTML and CSS Reference
In-Depth Information
The result is that on each frame tick, our tank will move one pixel up on the y-axis and
zero pixels on the x-axis.
Inside drawScreen() (which is called on each frame tick), we will add the dx and dy
values to the x and y values, and then apply them to the drawImage() function:
y = y+dy;
x = x+dx;
context.drawImage(tileSheet, sourceX, sourceY,32,32,x,y,32,32);
Rather than use the hardcoded 50,50 for the location of the drawImage() call on the
canvas, we have replaced it with the current x,y position. Let's examine the entire code
in Example 4-6 .
Example 4-6. Sprite animation and movement
var tileSheet = new Image();
tileSheet.addEventListener('load', eventShipLoaded , false);
tileSheet.src = "tanks_sheet.png";
var animationFrames = [1,2,3,4,5,6,7,8];
var frameIndex = 0;
var dx = 0;
var dy = -1;
var x = 50;
var y = 50;
function eventShipLoaded() {
function drawScreen() {
y = y+dy;
x = x+dx;
//draw a background so we can see the Canvas edges
context.fillStyle = "#aaaaaa";
var sourceX = Math.floor(animationFrames[frameIndex] % 8) *32;
var sourceY = Math.floor(animationFrames[frameIndex] / 8) *32;
context.drawImage(tileSheet, sourceX, sourceY,32,32,x,y,32,32);
if (frameIndex==animationFrames.length) {
function startUp(){
Search WWH ::

Custom Search