Question

我试图做一些新的事情。创建一个没有画布的完整的JavaScript游戏。这将是一个简单的平台游戏，其中包含不同大小和颜色的方块，适用于玩家，障碍物等。到目前为止，我发现非常具有挑战性的是运动。我找到了绕过大多数其他问题的方法，但我无法弄清楚如何实现平滑的Platformer风格的步行和跳跃。我的尝试导致玩家成功移动但总是停下来进行另一次移动而不是同时执行两个动作。例如：右，停，跳，停，右，停，跳。这是我使用的脚本（没有键的动作）。我对如何创建平滑的Platformer风格的步行和跳跃的建议持开放态度。

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循环中运行的单独函数中执行相应的操作。

希望它有所帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Javascript Platformer风格运动

1 个答案: