Question

您好我从某些互联网模板中获取了代码（使用箭头键移动对象）。从那以后，我限制了物体可以移动的区域，但是我仍然有一个问题，当我按箭头键时，物体的移动超过了必要，我只想将它向适当的方向移动20px，无论如何关键是按下了。

以下是功能：

var GameInput = (function() {

var pressedKeys = {};

function setKey(event, status) {
  var code = event.keyCode;
  var key;

  switch(code) {
    case 32:
      key = 'SPACE'; break;
    case 37:
      key = 'LEFT'; break;
    case 38:
      key = 'UP'; break;
    case 39:
      key = 'RIGHT'; break;
    case 40:
      key = 'DOWN'; break;
    default:
      // Convert ASCII codes to letters
      key = String.fromCharCode(event.keyCode);
  }

  pressedKeys[key] = status;
}

document.addEventListener('keydown', function(e) {
  setKey(e, true);
});

document.addEventListener('keyup', function(e) {
  setKey(e, false);
});



function isDown(key) {
  return pressedKeys[key];
}

return {
  isDown: isDown
};

}）（）;

调用它的函数：

function update() {


    if(GameInput.isDown('DOWN')) {
        if(player.y < canvas.height - player.sizeY) {
            player.y += 20;
        }
    }

    if(GameInput.isDown('UP')) {
        if(player.y > 0) {
            player.y -= 20;
        }
    }

    if(GameInput.isDown('LEFT')) {
        if(player.x > 0) {
            player.x -= 20;
        }
    }

    if(GameInput.isDown('RIGHT')) {
        // Don't go out of canvas
        if(player.x < canvas.width - player.sizeX) {
            player.x += 20;
        }
    }

    // You can pass any letter to `isDown`, in addition to DOWN,
    // UP, LEFT, RIGHT, and SPACE:
    // if(GameInput.isDown('a')) { ... }
}

我明白为什么它会做它的功能，但我无法将其修改为仅移动20px而无需按下按键的时间。

谢谢

Answer 1

如何使用keyup事件允许操作仅在按下新键时重复。类似的东西：

var allowRepeat = true;
document.addEventListener('keydown', function(e) {
  if (allowRepeat) {
    setKey(e, true);
  }
  allowRepeat = false;
});

document.addEventListener('keyup', function(e) {
  allowRepeat = true;
  setKey(e, false);
});

Answer 2

我认为你的逻辑有点还原，你想要的是在你的代码中禁止更新'在你的密码被触发之前'，只要没有触发keyUp事件，isDown('XXX')仍然是真的。

所以这就是你需要的:(你应该做一些重构，但这应该有效）

var GameInput = (function() {
    ....

    var _allowUpdate = {};

    function setKey(event, status) {
        var code = event.keyCode;
        var key;

        switch(code) {
            case 32:
                key = 'SPACE'; break;
            case 37:
                key = 'LEFT'; break;
            case 38:
                key = 'UP'; break;
            case 39:
                key = 'RIGHT'; break;
            case 40:
                key = 'DOWN'; break;
            default:
                // Convert ASCII codes to letters
                key = String.fromCharCode(event.keyCode);
        }
        // This checks whether it's the first time the key being pressed.
        allowUpdate[key] = !pressedKeys[key] && status;
        pressedKeys[key] = status;

    }

    function allowUpdate(key) {
        _allowUpdate[key] ;
    }

    return {
        allowUpdate: allowUpdate
    };
}

function update() {

    if(GameInput.allowUpdate('DOWN')) {
        if(player.y < canvas.height - player.sizeY) {
            player.y += 20;
        }
    }
    .....
}

js使用箭头键移动对象（仅一次）

2 个答案: