在二維畫布中沿對角線移動JavaScript遊戲

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事件發生時，我打電話給我的舉動（）函數：

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

此舉（）函數調用我的main（）函數，它只是再次繪製地圖。 我試圖避免循環遊戲，而是每次玩家移動時更新地圖。

所以我的問題出現，當我嘗試對角線移動。我能夠做到這一點，但是一旦我釋放第二個按鍵，我的角色就​​會停止。

例如： 右鍵按下，然後向上按鍵，字符向東北方向移動。 向上鍵釋放，玩家停止。

但是，如果我釋放右鍵，角色會繼續向上移動。

另一個小故障是當我左右按住時，角色會左移， 但我希望它停止移動。

請請，請幫助我我瘋了。謝謝！

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

Answer 2

您提到您希望播放器在您同時按下左右鍵時停止移動。看樣子，你應該能夠很容易地與if語句替換else if語句move，導致類似於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(); 
}