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

时间:2016-10-08 19:46:03

标签: javascript jquery jquery-animate

我正在为我的球场上的一个项目制作一个游戏,我想知道如何让'角色'进行双跳(第二次空中跳跃)。这是一个无尽的赛跑游戏,玩家在屏幕上的固定位置,必须跳过并在障碍物上滑动,因为它们出现在屏幕上。我目前使用跳转和滑动功能,但需要进行一些微调才能使用更加精确和有趣。

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

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

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

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

1 个答案:

答案 0 :(得分:0)

我认为这可以通过在开头的变量声明中添加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--;
}