为什么我的坦克没有出现

Why isn't my tank showing up?

本文关键字：我的 为什么      更新时间：2023-09-26

>我画了一张瓷砖地图：

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((。

为什么我的坦克不出现？

我很抱歉你没有阅读链接，我已经在你的最后一个答案上通过了你，并用似乎最简单的方式接受了另一个人的嘶吼。 提斯克，提斯克...

无论如何，要解决这个问题，您必须像以前一样在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-重置键控事件上的坦克状态：

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

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

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

相关文章：