18-在整个画布上移动图像

4.4.6　在整个画布上移动图像

既然已经实现了坦克轨迹的动画，下面就让坦克“移动”起来。只需绘制坦克轨迹动画，并对坦克位置应用简单的移动矢量，即可实现移动动画的模拟。

为此，创建两个变量来储存当前坦克的x轴和y轴的位置。这样做代表会将拼图左上角的拼板绘制到画布上。在前面的示例中，值都被设为50，这里也一样。

var x = 50;
var y = 50;

然后，为每个轴设置一个移动矢量值。大家都知道，这是deltaX (dx)以及deltaY (dy)。它们代表到x轴或者y轴位置的增量或改变。因为坦克是朝上的，所以把dy设为−1，dx设为0。

var dx = 0;
var dy = -1;

这使得在每个帧片段中，坦克都能沿y轴向上移动一个像素，并沿x轴不变。

在drawScreen()函数中，每个帧片断都被调用。将dx和dy的值设为x坐标和y坐标的值，然后将它们应用到drawImage()函数中。

y = y+dy;
x = x+dx;
context.drawImage(tileSheet, sourceX, sourceY,32,32,x,y,32,32);

这里没有在画布调用drawImage()函数的位置时使用（50，50）硬代码，而是将其替换为当前的x坐标和y坐标。所有代码如例4-6所示。

例4-6　素材动画和移动

var tileSheet = new Image();
tileSheet.addEventListener('load', eventSheetLoaded , 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 eventSheetLoaded(){
　startUp();
}
function drawScreen(){
　 y = y+dy;
　 x = x+dx;
　//绘制背景以显示出画布边缘
　context.fillStyle = "#aaaaaa";
　context.fillRect(0,0,500,500);
　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);
　frameIndex++;
　if (frameIndex==animationFrames.length){
　　 frameIndex=0;
　}
}
function startUp(){
　　gameLoop();
}
function gameLoop() {
　　window.setTimeout(gameLoop, 100);
　　drawScreen();
}

通过运行例4-6，读者可以看到坦克在画布上缓慢地向上移动，同时，它的轨迹也在8块拼板上播放。

拼图上只有位置朝上的坦克图像。如果让这个坦克朝其他方向移动，也可以按以下方式实现，二者选其一即可。第一个方法是在拼图上创建更多的拼块，来代表左、右、下这些位置。不过，这个方法需要做很多工作，还需要为拼图创建更大的源图像。第二个方法是下节将要介绍的在图像上应用旋转变换。