在2d画布JavaScript游戏对角线移动 [英] Moving diagonally in 2d canvas JavaScript game

问题描述

我已经在网上搜寻这个答案。

I've scoured the web for this answer. If it is buried in a StackOverflow answer somewhere I apologize.

我正在开发一个2D画布JavaScript游戏。

I am working on a 2d canvas JavaScript game.

我正在处理带有onkeydown和onkeyup事件的箭头键输入。

我将这个输入存储在一个称为Keys的对象中。

I am handling arrow key input with onkeydown and onkeyup events.
I store this input in an object called Keys.

var Keys = {
    up: false,
    down: false,
    left: false,
    right: false
};

这是我的事件处理程序的样子：

This is what my event handlers look like:

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（）函数：

Then each time the keydown event occurs, I call my move() function:

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再次。
我试图避免循环的游戏，而是更新地图，每次玩家移动。

The move() function calls my main() function which just draws the map again. I'm trying to avoid looping the game, and instead update the map each time the player moves.

所以我的问题出现时，我试图移动对角线。我能够做到，但是一旦我释放第二个按键，我的字符停止。

So my problem arises when I try to move diagonally. I am able to do it, however once I release the second key pressed, my character stops.

例如：
按下右键，然后按向上键，字符向东北移动。
向上键释放，玩家停止。

For example: Right key pressed and then up key pressed, character moves northeast. Up key released, player stops.

但是，如果我释放右键，角色继续向上移动。

However, if I release the right key, the character continues moving up.

另一个故障是当我左右握住时，角色会向左移动
，但我想让它停止移动。

Another glitch is when I hold both left and right, the character will move left, but I want it to stop moving.

请，请帮助我，我要坚果。谢谢！

Please, please, please help me I'm going nuts. Thanks!

推荐答案

快速草拟一个例子，jsfiddle： http://jsfiddle.net/ofnp4vj4/

Quickly sketched an example, jsfiddle: http://jsfiddle.net/ofnp4vj4/

HTML： < div id =log>< / div>

JS：

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

这篇关于在2d画布JavaScript游戏对角线移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！