The Chrome dinosaur game looks trivial, but it teaches every core idea of a real game: a loop, gravity, spawning, collisions, and difficulty that ramps. Here's the whole thing in ~120 lines of vanilla JS + canvas — playable below.
🎮 Play it: https://dev48v.infy.uk/game/day12-dino-run.html
It's just a loop
A game is one function called ~60×/second by requestAnimationFrame: update positions, check collisions, draw. That's it.
Gravity + jump
The dino has a vy (vertical velocity). Each frame: vy += gravity; y += vy. Pressing Space sets vy to a negative number (an upward kick). Gravity pulls it back to the ground — a real jump arc from two lines of math.
Obstacles + collision
Cacti spawn off-screen right and scroll left at the current speed. Collision is an axis-aligned box overlap (AABB): if the dino's rectangle intersects a cactus's rectangle, game over.
Difficulty
Every frame the score climbs and the scroll speed nudges up. No "levels" — just a number that grows, which is why these runners feel relentless.
🔨 Full step-by-step build (game loop → physics → spawning → AABB → score/state) is on the page: https://dev48v.infy.uk/game/day12-dino-run.html
Part of GameFromZero. 🌐 https://dev48v.infy.uk
Top comments (0)