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

Question

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

我尝试使用 .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--;
}