使图像跳起来（然后回落）

Question

我正在用JavaScript制作平台游戏，我需要一些帮助。

当空格键按下然后回落到某个位置时，如何使图像在JavaScript中跳起50px？

Answer 1

如果你的意思是在重力跳跃时跳跃 - 你需要一个抛物线公式。

例如：http://jsfiddle.net/pimvdb/7JFU3/。

var x = 0;

var interval = setInterval(function() {
    x++;
    image.style.top = 50 - (-0.1 * x * (x - 50)) + 'px';

    if(x >= 50) clearInterval(interval);
}, 20);

Answer 2

我正在做同样的事情。这是我的github项目链接https://github.com/beothorn/webcomicsgame

查看

处的MainCharacter.js

if(gameCommandState.up){
    if(this.canJump(game))
      this.element.yAccelerate(-this.yAcceleration);
}

你可以根据需要进行分叉，但我是用画布来做的。

Answer 3

我们很乐意扩展这个以使图像保持上下跳动

var x = 0;               var goingUp = true;

          var interval = setInterval(function() {
              if(goingUp==true) {
                x++;
                if(x >= 50) {
                    goingUp=false;
                    //alert("go down")
                }
              } else {
                x--;
                if(x <= -50) {
                    goingUp=true;
                    //alert("go up")
                }
              }
              $('#demo').css('top', 50 - (-0.1 * x * (x - 50)));
          }, 20);