Question

好的，所以我有一个简单的程序可以在角色走路时改变步行动画（这显然不是完整的程序）：

document.addEventListener('keydown', function (event) {

    if (event.keyCode == 37) { //left arrow
        walkSound.play();
        playerXPos -= playerSpeed;
        if (currentSkin == playerWalkSkins.length-1) {
            currentSkin = 0;
        }
        else {
            currentSkin++;
        }
    }

    else if (event.keyCode == 39) { //right arrow
        walkSound.play();
        playerXPos += playerSpeed;
        if (currentSkin == playerWalkSkins.length-1) {
            currentSkin = 0;
        }
        else {
            currentSkin++;
        }
    }
}, false);

但是，我想要一些代码，当角色没有走路时，动画会转到不同的皮肤。

在psudocode中，这基本上就是我想要的：

if (pressing left or right key) {
    //animate walking
}     
else {
    //stand still img
}

非常感谢能帮助我的人！

Answer 1

您可以将onkeyup事件与onkeydown事件结合使用，以跟踪按下的键。

根据Bas的回答，这是一个更完整的代码示例：

var left_key_pressed = false;
var right_key_pressed = false;

document.addEventListener('keydown', function (event) {
    if (event.keyCode == 37) { //left arrow
        left_key_pressed = true;
        update_walking_state();
    } else if (event.keyCode == 39) { //right arrow
        right_key_pressed = true;
        update_walking_state();
    }
}, false);

document.addEventListener('keyup', function (event) {

    if (event.keyCode == 37) { //left arrow
        left_key_pressed = false;
        update_walking_state();
    } else if (event.keyCode == 39) { //right arrow
        right_key_pressed = false;
        update_walking_state();
    }
}, false);

function update_walking_state() {
    if (left_key_pressed) {
        // walk left
    } else if (right_key_pressed) {
        // walk right
    } else {
        // hammer time
    }
}

function ticker() {
    if (left_key_pressed) {
        walkSound.play();
        playerXPos -= playerSpeed;
    } else if (right_key_pressed) {
        walkSound.play();
        playerXPos += playerSpeed;
    }
}

setInterval(ticker, 100); // run every 100ms

Answer 2

正如许多评论中已经提到的那样，keyup是你的朋友。一些代码可以让你轻松（虽然@Halcyon的信用）：

var keyleft = False;
var keyright = False;

document.addEventListener('keydown', function (event) {

    if (event.keyCode == 37) { //left arrow
        walkSound.play();
        keyleft = True;
        playerXPos -= playerSpeed;
        if (currentSkin == playerWalkSkins.length-1) {
            currentSkin = 0;
        }
        else {
            currentSkin++;
        }
    }

    else if (event.keyCode == 39) { //right arrow
        walkSound.play();
        keyright= True;
        playerXPos += playerSpeed;
        if (currentSkin == playerWalkSkins.length-1) {
            currentSkin = 0;
        }
        else {
            currentSkin++;
        }
    }
}, false);

document.addEventListener('keyup', function (event) {

    if (event.keyCode == 37) { //left arrow
        keyleft = False;
    }

    else if (event.keyCode == 39) { //right arrow
        keyright= False;     
    }
    if (keyleft==False && keyright==False){
        //your code here
    }
}, false);

Javascript检测是否没有按某个键

2 个答案: