Заставить изображение подпрыгнуть (и отступить)

Question

Я делаю платформенную игру на JavaScript, и мне нужна некоторая помощь.

Как сделать так, чтобы изображение подпрыгнуло 50px в JavaScript, когда пробел нажимается и возвращается к определенной позиции?

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

Нам было интересно расширить это, чтобы изображение продолжало подпрыгивать вверх и вниз

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

Answer 3

Я работаю над тем же самым. Вот моя ссылка на проект github https://github.com/beothorn/webcomicsgame

Посмотрите на MainCharacter.js на

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

Вы можете раскошелиться, если хотите, но я делаю это с помощью canvas.