Platformer physics are the cornerstone of classic arcade game design. Creating realistic movement, gravity, and precise collision detection on a <canvas> element requires moving past React state updates and writing raw mathematical equations.
Use A/D or Arrows to Move & Space to Jump (Double Jump in Mid-Air!). Reach the end flag to win!
Leap across textured platforms with smooth double jumps! Collect rotating fruits, dodge spike pits, stomp fully animated **Pink Man** sprites, dodge smashing **Rock Heads**, and jump over spiky **Spike Heads** to survive!
1. Simulating Physical Forces (Gravity & Inertia)
To make your mascot feel heavy and physical, you cannot simply move it by fixed increments on a button press. Instead, you simulate continuous acceleration and friction:
- Velocity and Acceleration: Pressing left or right applies a steady force (
vx += 0.45), mimicking muscles running. - Air resistance & Friction: Multiplying velocities by
0.85on every frame simulates physical friction, causing the player to slide to a natural halt rather than stopping instantly. - Continuous Gravity: Every single frame, gravity pulls the mascot downwards (
vy += 0.5), which is resolved instantly when they make contact with solid block hitboxes.
2. Multi-Platform Landing Collisions (AABB)
Resolving collisions on floating blocks requires Axis-Aligned Bounding Box (AABB) math. If the mascot's coordinates overlap with a floating platform, we verify if they were falling downwards (vy > 0) and landing on top. If so, we snap their y to the platform's surface and zero out their vertical velocity, marking them as grounded: true.
3. Procedural Enemies and Squashing
Our Goomba enemy patrols its platform boundaries, reversing direction upon hitting boundaries. If the player overlaps with the enemy while falling downwards, we register a squashed state—the enemy dies, and the player receives a spring-loaded vertical boost! If they hit from any other side, it triggers a game reset.