Question

我已经在网上搜索了这个答案。如果它被埋在StackOverflow的答案我道歉。

我正在开发一款2d画布JavaScript游戏。

我正在使用onkeydown和onkeyup事件处理箭头键输入我将此输入存储在名为Keys的对象中。

var Keys = {
    up: false,
    down: false,
    left: false,
    right: false
};

这就是我的事件处理程序的样子：

window.onkeydown = function(e){
     var kc = e.keyCode;
     e.preventDefault();

     if(kc === 37) Keys.left = true;
     else if(kc === 38) Keys.up = true;
     else if(kc === 39) Keys.right = true;
     else if(kc === 40) Keys.down = true;

     move();
 };

window.onkeyup = function(e){
     var kc = e.keyCode;
     e.preventDefault();

     if(kc === 37) Keys.left = false;
     else if(kc === 38) Keys.up = false;
     else if(kc === 39) Keys.right = false;
     else if(kc === 40) Keys.down = false;
};

然后每次发生keydown事件时，我都会调用我的move（）函数：

var move = function(){

    if(Keys.up){
        hero.y -= 10;
    }

    else if(Keys.down){
        hero.y += 10;
    }

    if(Keys.left){
        hero.x -= 10;
    }

    else if(Keys.right){
        hero.x += 10;
    }

    main();
}

move（）函数调用我的main（）函数，它只是再次绘制地图。我试图避免循环游戏，而是每次玩家移动时更新地图。

所以当我尝试对角移动时，我的问题就出现了。我能够做到，但是一旦我按下第二个键，我的角色就会停止。

例如：按下右键然后按下向上键，字符向东北方向移动。向上释放键，玩家停止。

但是，如果我释放正确的键，角色会继续向上移动。

另一个小问题是当我左右两个时，角色会向左移动，但我希望它停止移动。

Answer 1

您提到当您同时按下左右键时，您希望播放器停止移动。您似乎应该可以通过将else if语句替换为move语句，使用if语句来轻松完成此操作，从而产生类似于move的{{1}}函数：

var move = function(){

    if(Keys.up){
        hero.y -= 10;
    }

    if(Keys.down){
        hero.y += 10;
    }

    if(Keys.left){
        hero.x -= 10;
    }

    if(Keys.right){
        hero.x += 10;
    }

    main();
}

Answer 2

快速勾勒出一个例子，jsfiddle：http://jsfiddle.net/ofnp4vj4/

HTML： <div id="log"></div>

<强> JS：

var Keys = {
    up: false,
    down: false,
    left: false,
    right: false
};

var hero = {
    x: 0,
  y: 0
};

var log = document.getElementById("log");

window.onkeydown = function(e){
     var kc = e.keyCode;
     e.preventDefault();

     if(kc === 37) Keys.left = true;
     if(kc === 38) Keys.up = true;
     if(kc === 39) Keys.right = true;
     if(kc === 40) Keys.down = true;
 };

window.onkeyup = function(e){
     var kc = e.keyCode;
     e.preventDefault();

     if(kc === 37) Keys.left = false;
     if(kc === 38) Keys.up = false;
     if(kc === 39) Keys.right = false;
     if(kc === 40) Keys.down = false;
};



function main() {
  /* body */

    move();

  log.innerHTML = "x: "+hero.x+", y: "+hero.y;
};

function move(){

    if(Keys.up){
        hero.y -= 10;
    }

    if(Keys.down){
        hero.y += 10;
    }

    if(Keys.left) {
        hero.x -= 10;
    }

    if(Keys.right){
        hero.x += 10;
    }
}

setInterval(main, 100);

在2d画布JavaScript游戏

2 个答案: