CODEWITHSUNDEEP
javascriptjquery
Sora
Sora

Reputation: 2551

make a div return to it's original position when animating to top( like jumping effect )

this is my code :

var pane = $('#Container'),
        box = $('#PLayer'),
        w = pane.width() - box.width(),
        d = {},
        x = 3;

    function newv(v, a, b) {
        var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
        return n < 0 ? 0 : n > w ? w : n;
    }

    $(window).keydown(function (e) { d[e.which] = true; });
    $(window).keyup(function (e) { d[e.which] = false; });

    setInterval(function () {
        box.css({
            left: function (i, v) { return newv(v, 37, 39); },
            top: function (i, v) { return newv(v, 38, 40); }
        });
    }, 20);

    <div id="Container" class="Container">
    <div id="PLayer"  class="player" ></div>
      </div>

by this code i managed to make the div animate by using the arrow key but how can i make that jumping effect ? like the one used here

Upvotes: 0

Views: 257

Answers (2)

ejfrancis
ejfrancis

Reputation: 3035

If you want to do something similar to that platformer game you linked (which is awesome), why not just check out the source code for it? http://taffatech.com/Platformer.js 

if(Player.isUpKey == true)
{


if(!Player.jumping){
       Player.jumping = true;
       Player.velY = -Player.speed*2;
      }


}

If you look there you see he's not actually using CSS animations, but recalculating the player's position every frame. If the player hit's the up key, their y velocity is increased, and then every frame this is called to move the player

//gravity would be a numeric variable, this makes the player  constantly move 
//back downwards when they leave the ground

Player.velY += gravity;      

//adjusting the player's position according to new 
//calculated x and y velocity

Player.x += Player.velX;    
Player.y += Player.velY;

This is similar to how most game engines work, recalculating the scenario and forces each frame so they can constantly react to what's going on. Instead of animations, a physics engine is doing the math and moving things accordingly on screen.

Upvotes: 0

Chase Adams
Chase Adams

Reputation: 478

Here's a link to a fork of your fiddle:

http://jsfiddle.net/dJut2/

I made two changes:

  1. Jquery wanted top to have an initial value while using the 2-argument callback inside .css(...), so I set it to 50% in CSS: .player{ ... top: 50%; }

  2. I added "gravity" using another ternary check inside the input response/collision function. It checks against whether 38/the up-key is passed as an input case and adds 2 to the top: ... + (a==38 ? 2 : 0)

By the way, verbose variable names or comments could really make your code easier to read. Also, ternary operators aren't as efficient or readable as some if statements. Lastly, you should break your input response and collision functionality into specific cases so you can edit them each specifically later without having to refactor.

Lastly, if you want to simulate a 'jump', you'll need to have some kind of timed input case. This can be accomplished automatically with an acceleration variable (set it to a number, subtract it from the top every frame, and decrement it every frame flooring at 0 when on the ground; the gravity I added can be removed in this case) or some kind of specific animation (subtract 4 every frame for 20 frames).

Upvotes: 2

Related Questions