当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Why isn't my tank showing up?

问题描述:

I've drawn a tile map:

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

Here's my startup code:

function startUp() {

drawScreen();

// Draw the tank

context.drawImage(tileSheet, tankSourceX, tankSourceY, tileWidth, tileHeight, tankX, tankY, tileWidth, tileHeight);

}

drawScreen() draws the tile map. I want to draw the tank after the tile map, but without putting it in drawScreen() because I want to animate and move the tank later on (without having to call drawScreen() again.

Why doesn't my tank show up?

网友答案:

I'm gessing you don't read the link I've passed you on your last answer and took the aprouch of the other guy with seemed easiest. tisk, tisk...

Anyway, to solve this, you will have to draw your tank inside the drawScreen() method as before, but you will have to call the animation function of the tank from inside the key moviment events. This way, the tank will draw stopped when not moving and draw animated when moving as your original question.

Edit:

I've got your entire code now on my machine and here are the steps to solve your problem, since I've gave you many hints, now I'll give you the code as you want:

1- The code responsible for the initialization of the animation and select the frame of the animation to be shown is inverted. The counter frameIndex need to be initialized before the tankSourceX and 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- Place theses variables that define the frame inside the animation function, whre you change the animation frame, so the frameIndex changes the tankSourceX and tankSourceY values:

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- Your drawing and animation function can be called by your event handlers or by a interval like on the begining:

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

4- Initialize a variable as the tank state:

var tankState = "stopped";

5- On the animation function, put a check for this variable to change the frames:

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- Change your event handlers to set the tankState as moving:

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

7- Reset the tankState on the keyup event:

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

Off course you can call the animate and draw functions on the key event handlers and eliminate the intervals, but this way you can add more animations to be runned on the same function that do not wait for the players input, like NPC's (non plaing characters).

网友答案:

In the call context.drawImage(tileSheet, ... you should pass the tank image instead of tileSheet which I guess is the map itself.

分享给朋友:
您可能感兴趣的文章:
随机阅读: