在 2d 画布 JavaScript 游戏中沿对角线移动答案

【问题标题】：Moving diagonally in 2d canvas JavaScript game在 2d 画布 JavaScript 游戏中沿对角线移动
【发布时间】：2016-03-11 08:59:57
【问题描述】：

我已经在网上搜索了这个答案。如果它被埋在某个地方的 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() 函数，它只是再次绘制地图。我试图避免循环游戏，而是在每次玩家移动时更新地图。

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

例如：按下右键，然后按下向上键，角色向东北移动。向上键松开，播放器停止。

但是，如果我松开右键，角色会继续向上移动。

另一个小故障是当我同时按住左右时，角色会向左移动，但我希望它停止移动。

【问题讨论】：

如果在window.onkeyup 函数的底部添加move();，是否会有所改善？
不，我认为这会起作用：/

标签： javascript canvas keyboard 2d

【解决方案1】：

您提到您希望玩家在同时按下左右键时停止移动。看来您应该能够通过将move 中的else if 语句替换为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();
}

【讨论】：

这确实停止了角色......但它并没有解决当我抬起第二个按下的键时，我的角色停止移动的问题。我希望角色在我松开按下的两个键之一后继续移动。

【解决方案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);

【讨论】：