javascript - 如何通过箭头键连续/平滑地移动元素？

Question

为了好玩，我正在使用 Javascipt 制作一个原始游戏。我已经设置了在按下箭头键时移动我的 Angular 色的功能，如下所示:

document.getElementById("character").style.top = 0;
document.getElementById("character").style.left = 0;

document.body.onkeydown = function() {
var e = event.keyCode,
    charTop = parseInt(document.getElementById("character").style.top),
    charLeft = parseInt(document.getElementById("character").style.left);

    if (e == 40) { //down function
        document.getElementById("character").style.top = (parseInt(document.getElementById("character").style.top)) + 10 + "px";
    } else if (e == 37) { //left function
        document.getElementById("character").style.left = (parseInt(document.getElementById("character").style.left)) - 10 + "px";
    } else if (e == 39) { //right function
        document.getElementById("character").style.left = (parseInt(document.getElementById("character").style.left)) + 10 + "px";
    } else if (e == 38) { //up function
        document.getElementById("character").style.top = (parseInt(document.getElementById("character").style.top)) - 10 + "px";
    }

}

它确实有效，但不是我想要的方式。我发现如果你按住一个箭头键，它会移动一次，等一下，然后继续移动直到你松手。我认为造成这种情况的原因是 Windows 的内置功能会在指定的延迟后以控制面板中设置的速度重复按下的按钮。

我更喜欢 Angular ​​色立即且连续地移动而没有延迟。我不知道该怎么做。我还希望能够定义在按钮仍被按下时再次移动的速度(它一次移动十个像素，如果重复太快，它会飞过屏幕)。

我知道 Javascript 并不是真正适合游戏编程，但希望有人能想出解决办法!谢谢!

Answer 1

这是许多依赖键盘中断来控制游戏 Angular 色的编码语言的标准问题，并不是 JavaScript 特有的。解决这个问题的方法是将按键与 Angular 色的移动分开，而不是依赖键盘事件来重绘/更新游戏。取而代之的是使用一个连续的游戏循环，它可以并且经常什么都不做(一秒钟很多次)——直到你的游戏中的某些东西发生变化。这似乎是一件奇怪的事情，但这是许多游戏设计和构建的方式——即使是在 JavaScript 中也是如此 ;)

/// store key codes and currently pressed ones
var keys = {};
    keys.LEFT = 37;
    keys.RIGHT = 39;

/// store reference to character's position and element
var character = {
  x: 100,
  y: 100,
  element: document.getElementById("character")
};

/// key detection (better to use addEventListener, but this will do)
document.body.onkeyup = 
document.body.onkeydown = function(e){
  var kc = e.keyCode || e.which;
  keys[kc] = e.type == 'keydown';
};

/// character movement update
var moveCharacter = function(dx, dy){
  character.x += dx||0;
  character.y += dy||0;
  character.element.style.left = character.x + 'px';
  character.element.style.top = character.y + 'px';
};

/// character control
var detectCharacterMovement = function(){
  if ( keys[keys.LEFT] ) {
    moveCharacter(-1);
  }
  if ( keys[keys.RIGHT] ) {
    moveCharacter(1);
  }
};

/// game loop
setInterval(function(){
  detectCharacterMovement();
}, 1000/24);

一个活生生的例子(也有上下运动):

    /// store key codes and currently pressed ones
    var keys = {};
        keys.UP = 38;
        keys.LEFT = 37;
        keys.RIGHT = 39;
        keys.DOWN = 40;

    /// store reference to character's position and element
    var character = {
      x: 100,
      y: 100,
      speedMultiplier: 2,
      element: document.getElementById("character")
    };

    /// key detection (better to use addEventListener, but this will do)
    document.body.onkeyup = 
    document.body.onkeydown = function(e){
      /// prevent default browser handling of keypresses
      if (e.preventDefault) { 
        e.preventDefault();
      }
      else {
        e.returnValue = false; 
      }
      var kc = e.keyCode || e.which;
      keys[kc] = e.type == 'keydown';
    };

    /// character movement update
    var moveCharacter = function(dx, dy){
      character.x += (dx||0) * character.speedMultiplier;
      character.y += (dy||0) * character.speedMultiplier;
      character.element.style.left = character.x + 'px';
      character.element.style.top = character.y + 'px';
    };

    /// character control
    var detectCharacterMovement = function(){
      if ( keys[keys.LEFT] ) {
        moveCharacter(-1, 0);
      }
      if ( keys[keys.RIGHT] ) {
        moveCharacter(1, 0);
      }
      if ( keys[keys.UP] ) {
        moveCharacter(0, -1);
      }
      if ( keys[keys.DOWN] ) {
        moveCharacter(0, 1);
      }
    };

    /// update current position on screen
    moveCharacter();

    /// game loop
    setInterval(function(){
      detectCharacterMovement();
    }, 1000/24);

#character {
    position: absolute;
    width: 42px;
    height: 42px;
    background: red;
    border-radius: 50%;
}

<div id="character"></div>

http://jsfiddle.net/7a106ck7/1/

以上只是基础知识，您可以进行许多优化。上面的内容也不是控制游戏 Angular 色的全部，遗憾的是，浏览器中的键盘事件是相当不可预测的(与 JavaScript 没有任何关系)，如果您会发现许多问题你开始尝试制作更复杂的控制系统，即某些键不能同时按下而不会出现问题(尤其是控制字符，如 CMD 或 CTRL)。

有一天，如果 JavaScript 有一个键盘对象，它的行为与上面的 keys 对象一样，那就太好了。这意味着您可以随时测试当前按下的任何键的状态，而无需依赖事件模型。它可能会在某个未知的 future 时间点发生，但我们必须拭目以待。

如果确实发生了，我想推荐一个功能:

Keyboard.isPressed(Keyboard.ANY)

这将有助于无数的游戏介绍/菜单屏幕(为什么我必须在看到菜单之前按任意键？我们是在梦想街机吗？)。更不用说以上内容会帮助所有仍在等待他们认为丢失的 key 的存在的人。