Javascript Platformer风格移动

Question

我在试着做一些新的事情。创建一个没有画布的完整的javascript游戏。这只是一个简单的平台游戏，有不同大小和颜色的方块供玩家使用，障碍物等等。到目前为止，我发现做运动是非常有挑战性的。我已经找到了一种绕过大多数其他问题的方法，但我不知道如何实现平滑的Platformer风格的行走和跳跃。我的尝试导致玩家成功移动，但总是停下来执行另一个动作，而不是同时执行这两个动作。例如: Right，Stop，Jump，Stop，Right，Stop，Jump。这是我使用的脚本(没有键的操作)。我对如何创建流畅的平台风格的行走和跳跃的建议持开放态度。

document.onkeydown = KeyPressed;


function KeyPressed(k) {

var LeftBtn = 37;

var RightBtn = 39;

var UpBtn = 38;

var DownBtn = 40;

 if (k.keyCode == LeftBtn) {
     // Left Arrow Actions
 }

 if (k.keyCode == RightBtn) {
     // Right Arrow Actions
 }

 if (k.keyCode == UpBtn) {
     // Up Arrow Actions
 }
 }

Answer 1

请看下面的方法。

我使用keydown和keyup事件处理程序来记录哪些键被按下，哪些键被释放。这样我们就能知道是否同时按下了几个键。我们使用这些记录在requestAnimationFrame循环中运行的单独函数中执行相应的操作。

希望能有所帮助。

​

var codes = {37:'left', 39:'right', 38:'up', 40:'down'},
    step = 3, // pixels per keypress
    keys = {left:0, right:0, up:0, down:0};

var c = document.getElementById('c');

requestAnimationFrame(move);
document.onkeydown = KeyPressed;
document.onkeyup = KeyReleased;

function KeyReleased(k) {keys[codes[k.keyCode]] = 0}
function KeyPressed(k) {keys[codes[k.keyCode]] = 1}

function move(t) {
  c.style.left = c.offsetLeft + step * (keys.right - keys.left) + 'px';
  c.style.top = c.offsetTop + step * (keys.down - keys.up) + 'px';
  requestAnimationFrame(move);
}

html, body {overflow:hidden}
#c {
  position: absolute;
  top: 10%; left: 10%;
  font:900 400%/1 sans-serif;
}

Click here and use arrow keys to move.
<div id="c">+</div>

​