在二维画布中沿对角线移动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(); 
}