JavaScript平台游戏风格运动

Question

我正在尝试做一些新的事情。创建一个没有画布的完整JavaScript游戏。这只是一个简单的平台游戏游戏，带有不同尺寸和颜色的正方形，适合玩家，障碍等。到目前为止，我发现这项运动非常具有挑战性。我找到了解决其他大多数问题的方法，但是我不知道如何实现平稳的平台风格步行和跳跃。我的尝试导致球员成功地移动，但总是停下来进行另一个运动，而不是同时执行这两个动作。例如：正确，停止，跳，停下来，右，停止，跳。这是我使用的脚本(没有键的操作(。我对如何创建平稳的平台风格步行和跳跃的建议持开放态度。

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>