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 one time. Gravity does the rest of the work. The player rises, slows down, stops, and falls. You never have to write the curve yourself.

Landing, and not jumping twice

isJumping is a true-or-false value. It stops you from jumping again while you are in the air. The code sets it to true when you leave the ground. The code sets it back to false 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. Leave out the !player.isJumping part at first. Hold the up arrow and the player flies. Now add that part and try again. You get one jump. You must land before you can jump again.

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.