为什么我的坦克还没出现？

Question

我画了一张瓦片地图：

http://www.exeneva.com/html5/movingTankExample/

下面是我的启动代码：

function startUp() {
  drawScreen();   
  // Draw the tank
  context.drawImage(tileSheet, tankSourceX, tankSourceY, tileWidth, tileHeight, tankX, tankY, tileWidth, tileHeight);
}

drawScreen()绘制平铺地图。我想在瓷砖贴图之后绘制坦克，但不想将它放在drawScreen()中，因为我想稍后为坦克设置动画并移动它(而不必再次调用drawScreen()。

为什么我的坦克没出现？

Answer 1

我猜你没有读到我在你最后一次回答时传给你的链接，然后偷看了另一个看起来最简单的人。tisk，tisk...

无论如何，为了解决这个问题，你必须像以前一样在drawScreen()方法中绘制你的坦克，但是你必须从关键点运动事件中调用坦克的动画函数。这样，坦克将在不移动时停止绘制，而在移动时绘制动画作为您的原始问题。

编辑：

我已经把你的全部代码放在我的机器上了，下面是解决你的问题的步骤，因为我已经给了你很多提示，现在我会给你你想要的代码：

1-反转负责初始化动画和选择要显示的动画帧的代码。在tankSourceX和tankSourceY之前，需要初始化计数器frameIndex

// Counter to keep track of the current index of animationFrames
var frameIndex = 0;
// Tank tiles
var tankSourceX = Math.floor(animationFrames[frameIndex] % tilesPerRow) * tileWidth;
var tankSourceY = Math.floor(animationFrames[frameIndex] / tilesPerRow) * tileHeight; 

2-在更改动画帧时，将这些定义帧的变量放入动画函数中，以便frameIndex更改tankSourceX和tankSourceY值：

function animateMovement() { 
    // Animation frames
    frameIndex += 1;
    if (frameIndex == animationFrames.length) {
        frameIndex = 0;
    }
tankSourceX = Math.floor(animationFrames[frameIndex] % tilesPerRow) * tileWidth;
tankSourceY = Math.floor(animationFrames[frameIndex] / tilesPerRow) * tileHeight; 
}

3-您的绘图和动画函数可以由事件处理程序调用，也可以像开始时那样按时间间隔调用：

var animateInterval = setInterval(animateMoviment, 200);
var drawingInterval = setInterval(drawScreen, 200);

4-将变量初始化为坦克状态：

var tankState = "stopped";

5-在动画函数中，选中此变量以更改帧：

function animateMovement() { 
    if (tankState == "moving") {
        // Animation frames
        frameIndex += 1;
        if (frameIndex == animationFrames.length) {
            frameIndex = 0;
        }
        tankSourceX = Math.floor(animationFrames[frameIndex] % tilesPerRow) * tileWidth;
        tankSourceY = Math.floor(animationFrames[frameIndex] / tilesPerRow) * tileHeight; 
    }
}

6-更改事件处理程序以将tankState设置为moving

e = e?e:window.event;
tankState = "moving";
...

7-重置keyup事件上的tankState：

document.onkeyup = function(e) {
    tankMoveX = 0;
    tankMoveY = 0;
    tankState = "stopped";
}

当然，您可以在按键事件处理程序上调用animate和draw函数并消除间隔，但通过这种方式，您可以添加更多的动画在相同的函数上运行，而不需要等待玩家输入，如NPC(非编排字符)。

Answer 2

在调用context.drawImage(tileSheet, ...时，您应该传递坦克图像，而不是tileSheet，我猜这就是地图本身。