javascript - 在 2d Canvas JavaScript 游戏中沿对 Angular 线移动

Question

我在网上搜索了这个答案。如果它被隐藏在某个 StackOverflow 答案中，我深表歉意。

我正在开发 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() 函数，该函数只是再次绘制 map 。 我试图避免循环游戏，而是在玩家每次移动时更新 map 。

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

例如: 按下右键，然后按下向上键， Angular 色向东北移动。 松开向上键，玩家停止。

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

另一个问题是当我同时按住左键和右键时， Angular 色会向左移动， 但我希望它停止移动。

Answer 1

快速画了一个例子，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);