是否可以在不使用 html canvas 的情况下实现 'double-jump' 功能？

Question

我正在为我课程中的一个项目制作游戏，我想知道如何让 'character' 进行双跳（第二次空中跳跃）。这是一款无尽的奔跑游戏，玩家在屏幕上的固定位置，必须跳过屏幕上出现的障碍物并滑过障碍物。我目前可以使用跳跃和滑动功能，但需要对其进行一些微调以使其在使用中更加精确和有趣。

我试过使用 .stop() 取消跳跃动画并执行另一次跳跃。这是我要查看的 jsbin 中的代码：

http://jsbin.com/yekarel/edit?html,js,output

真的只是想看看这是否可行以及如何去做，尽管仍然欢迎任何关于整理代码的建议。谢谢

编辑：我试图避免在这个项目中使用 canvas，所以只是真正寻找不涉及 canvas.

的解决方案

Answer 1

我认为这可以通过在开头的变量声明中添加 var jumpCount = 0; 来完成，然后进行以下更改（在这种情况下，您可以删除 doubleJump() 和 fallDown2() 函数):

// jump function
$(this).keyup(function(e) {
  if(jumpCount < 2 && (e.keyCode === 0 || e.keyCode === 32)) {
    jumpCount++;
    $($character).animate({ top: '-=120px' }, {
      duration: 350,
      easing: 'linear',
      complete: function() {
        fallDown();
      }
    });
  }
});

function fallDown() {
  $($character).animate({top: '+=120px'}, {
    duration: 180,
    easing: 'linear'
  });
  jumpCount--;
}

是否可以在不使用 html canvas 的情况下实现 'double-jump' 功能？

Is it possible to implement a 'double-jump' feature without the use of html canvas?

javascript

jquery

jquery-animate