Gravity Inside Html5 Canvas

I'm trying to do a copy of the original super mario game using html5 canvas just for fun and to learn more about the canvas tool and it's animation but i am stuck at making Mario d

Solution 1:

Here's a jumping Mario http://jsfiddle.net/2tLCk/22/.

If jumping is 1 - going up. If jumping is 2 - going down.

if(jumping){
     if(jumping == 1) {
          if(character.y > 140) character.y -= gravity;
          else jumping = 2;
     } elseif(jumping == 2) {
          if(character.y < 184) character.y += gravity;
          else{
               character.y = 184;
               jumping = false;
               character.CurentPos = 6;
          }
     }
}elseif(keydown.up) {
    jumping = 1;
    character.CurentPos = 11;
}

And you would probably want to use this https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame instead of setInterval().

Solution 2:

You basically want the gravitiy to be always active, not only when pushing the down key. When jumping (key up) you have to add to vy. Like this:

if(keydown.up) {
         vy += -2;   
    }
    vy += gravity;
    if(character.y > 184) { // simple collision detection for ground floor
        vy = 0;
        character.y = 184;
    }
    //character.CurentPos = 11;//character.x += character.speed;
    character.y += vy;

see http://jsfiddle.net/pjQb3/

Solution 3:

I would do something like this:

// Global forces
character.vy += gravity;

// User inputif (keydown.up) {
  character.vy += -2;
}

// Final locationif (character.y + character.vy >= 184) {
  // Update player location.
  character.y += character.vy;
} else {
  // Player was about to move past ground so place player directly on ground// and reset velocity.
  character.y = 184;
  character.vy = 0;
}