Our player falls, but it doesn't feel real. True gravity isn't constant velocity—it's constant acceleration. Let's implement physics that make movement feel natural.

Gravity is acceleration, not speed. Objects don't fall at a fixed rate—they fall faster and faster over time.

Understanding Gravity

Currently, our player moves down by 1 pixel every frame. With real gravity:

• Frame 1: velocity = 1px, move down 1px

• Frame 2: velocity = 2px, move down 2px

• Frame 3: velocity = 3px, move down 3px

The player accelerates, creating that satisfying drop effect you feel in real platformers.

Adding Velocity

First, give the player a velocity property:

class Player {   constructor() {     this.position = { x: 100, y: 100 }     this.velocity = { x: 0, y: 0 }     this.gravity = 1     // ...   } }

Applying Gravity in Update

Each frame, add gravity to velocity, then add velocity to position:

update() {   this.position.y += this.velocity.y    // Above bottom of canvas   if (this.sides.bottom + this.velocity.y < canvas.height) {     this.velocity.y += this.gravity   } else {     this.velocity.y = 0   } }

Why Reset Velocity?

When the player lands, we must set velocity.y = 0. Otherwise, even though we stop adding gravity, the accumulated velocity would push the player through the floor.

Why This Matters

This simple gravity system forms the foundation for jumping, falling off platforms, and all vertical movement in your game. When we add jumping later, gravity will naturally pull the player back down.