是否可以在不使用 html 画布的情况下实现“双跳”功能？

Question

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

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

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

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

编辑：我试图避免在这个项目中使用画布，所以只是真正寻找不涉及画布的解决方案。

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