javascript - 为什么我的坦克没有出现？

Question

我画了一张瓦片 map :

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

这是我的启动代码:

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

drawScreen() 绘制瓦片 map 。我想在瓦片 map 之后绘制坦克，但不将其放入 drawScreen() 中，因为我想在稍后设置动画并移动坦克(无需再次调用 drawScreen()。

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

Answer 1

我猜你没有阅读我在你上一个答案中传递给你的链接，并以最简单的方式接受了另一个人的攻击。啧啧啧……

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

编辑:

我的机器上现在有你的全部代码，这里是解决你的问题的步骤，因为我给了你很多提示，现在我会根据你的需要给你代码:

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

当然，您可以在关键事件处理程序上调用 animate 和 draw 函数并消除间隔，但这样您就可以添加更多动画以在不等待玩家输入的同一函数上运行，例如 NPC 的 (非拼写字符)。