为什么我的坦克不出现？

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()方法中绘制你的坦克，但你必须从关键的moviment事件中调用坦克的动画功能。这样，坦克将在不移动时绘制停止，并在移动时绘制动画作为原始问题。

修改

我现在已经在我的机器上获得了您的全部代码，以下是解决问题的步骤，因为我已经给了您许多提示，现在我会根据您的需要为您提供代码：

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

// 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";
}

当然你可以在关键事件处理程序上调用动画和绘制函数并消除间隔，但是这样你就可以在不等待玩家输入的相同函数上添加更多动画来运行，比如NPC（不合格的人物）。

Answer 2

在通话context.drawImage(tileSheet, ...中，您应该传递坦克图片而不是tileSheet，我猜这是地图本身。