Lesson 5: Gravity & Jumping

In real Minecraft, you fall down when there's nothing under you and you jump with the spacebar. Let's make our game work the same way using physics! 🍎⬇️

What is Velocity?

Velocity is just a fancy word for speed with a direction. In our game, the player has a vertical velocity called vy:

• When vy is positive, the player moves down
• When vy is negative, the player moves up (like jumping!)
• When vy is 0, the player isn't moving up or down

let playerY = 100;   // The player's vertical position
let vy = 0;          // The player's vertical velocity (starts at 0)

What is Gravity?

Gravity is a force that pulls things downward. In our game, we simulate gravity by adding a small number to vy every frame. This makes the velocity get bigger and bigger (faster and faster downward) — just like real falling!

const GRAVITY = 0.5;  // How strong gravity is

function gameLoop() {
  // Gravity pulls the player down by increasing vy
  vy = vy + GRAVITY;

  // Move the player by their velocity
  playerY = playerY + vy;

  // ... draw everything ...
}

The Ground: Stopping the Fall

Without a ground, the player would fall forever! We need to check if the player has reached the ground level, and if so, stop them:

const GROUND_Y = 280;  // Where the ground is

// In the game loop:
vy = vy + GRAVITY;
playerY = playerY + vy;

// Check if player hit the ground
if (playerY >= GROUND_Y) {
  playerY = GROUND_Y;  // Snap to ground level
  vy = 0;              // Stop falling
  onGround = true;     // Remember we're on the ground
}

Jumping!

Jumping is beautifully simple: when the player presses Space (and they're on the ground), we set vy to a negative number. Since negative = up, the player shoots upward! Gravity then naturally pulls them back down.

const JUMP_FORCE = -10;  // Negative = upward!

// In the game loop:
if (keys['Space'] && onGround) {
  vy = JUMP_FORCE;   // Launch upward!
  onGround = false;  // We're in the air now
}

Try It! Press Space to Jump, A/D to Move

The Complete Physics Code

Here's everything put together. Notice how all the physics is just a few lines!

let playerX = 100, playerY = 100;
let vy = 0;
let onGround = false;
const GRAVITY = 0.5;
const JUMP_FORCE = -10;
const MOVE_SPEED = 4;
const GROUND_Y = 280;

function gameLoop() {
  // Clear the screen
  ctx.clearRect(0, 0, 600, 350);

  // --- Horizontal movement ---
  if (keys['KeyA']) playerX -= MOVE_SPEED;
  if (keys['KeyD']) playerX += MOVE_SPEED;

  // --- Jumping ---
  if (keys['Space'] && onGround) {
    vy = JUMP_FORCE;
    onGround = false;
  }

  // --- Gravity ---
  vy += GRAVITY;
  playerY += vy;

  // --- Ground collision ---
  if (playerY >= GROUND_Y) {
    playerY = GROUND_Y;
    vy = 0;
    onGround = true;
  }

  // --- Boundaries ---
  if (playerX < 0) playerX = 0;
  if (playerX > 576) playerX = 576;

  // Draw the scene...
  drawPlayer(playerX, playerY);

  requestAnimationFrame(gameLoop);
}