1

我画了一张瓷砖地图：

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

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

4

2 回答 2

2

我猜你没有阅读我在你最后一个答案中传递给你的链接，并以似乎最简单的方式向另一个人靠近。啧啧啧……

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

编辑：

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

1- 负责动画初始化和选择要显示的动画帧的代码被反转。计数器frameIndex需要在tankSourceXand之前初始化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（非普通字符）。

于 2012-05-20T02:01:56.907 回答
0

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

于 2012-05-20T01:56:57.000 回答