Gravity and Jumping

What this stage does

Click the game and press the up arrow or W to jump. The player rises, slows down, falls, and lands on the ground. You cannot jump again until you land.

How gravity works

Jumping is not "move the player up". It is one number that changes on every frame. velocityY is how fast the player is moving up or down right now.

player.velocityY -= gravity;   // gravity pulls down, so it takes speed away
player.y += player.velocityY;  // move by the current speed

A jump sets velocityY to a large positive number, once. Gravity does everything after that. The player rises, slows, stops, and falls. You get the curve for free.

Landing, and not jumping twice

isJumping is a true-or-false value. It stops you jumping again while you are in the air. It is set when you leave the ground and cleared when you land.

// Jump only when we are on the ground
if ((keys["ArrowUp"] || keys["KeyW"]) && !player.isJumping) {
    player.velocityY = player.jumpPower;
    player.isJumping = true;
}

// ...after gravity has moved the player:
if (player.y <= groundTop) {
    player.y = groundTop;        // put the feet exactly on the ground
    player.velocityY = 0;        // stop falling
    player.isJumping = false;    // you may jump again
}

Build it step by step

1. 1

   Add the new numbers

   Add jumpPower, velocityY, and isJumping to the player object. Add gravity as a constant near the top of the file. groundTop is already there from the last stage.

2. 2

   Add gravity only

   Add the two gravity lines to update(). Nothing else. Reload. The player falls straight through the floor and disappears. That is correct for now.

3. 3

   Add the floor

   Add the ground check. The player now falls and lands. There is still no jump.

4. 4

   Add the jump

   Add the jump key check, but leave out the !player.isJumping part at first. Hold the up arrow and you fly. Now add the check and try again. You get one jump, and you must land before the next one.

5. 5

   Tune the feel

   Change gravity to 0.2, then to 1.5. Change jumpPower to 8, then to 25. Two numbers control how the whole game feels. Spend real time here.