在2D canvas JavaScript游戲中對角移動

Question

我已經在網上搜尋了這個答案。 如果它埋在StackOverflow中，請向我表示歉意。

我正在開發2D canvas JavaScript游戲。

我正在處理onkeydown和onkeyup事件的箭頭鍵輸入。
我將此輸入存儲在稱為“鍵”的對象中。

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類似的功能：

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);