在 2d canvas JavaScript 游戏中沿对角线移动

Question

我在网上搜索了这个答案。如果它被埋在某个地方的 Whosebug 答案中，我深表歉意。

我正在开发一款 2d canvas 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

您提到您希望播放器在您同时按下左右键时停止移动。看起来你应该能够通过用 if 语句替换 move 中的 else if 语句来轻松地做到这一点，从而产生类似于

的 move 函数

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 canvas JavaScript 游戏中沿对角线移动

Moving diagonally in 2d canvas JavaScript game

javascript

keyboard

2d

canvas