💥 Collisions & Hitboxes
Your hero can move and jump — but right now it would float straight through everything like a ghost. 👻 A real game needs to know the exact moment two things touch: when you land on a platform, grab a coin, or bump an enemy.
The trick behind ALL of that is one simple idea: invisible boxes.
The big idea: everything has an invisible box
The game wraps an invisible rectangle — a hitbox— around every single thing: your hero, each platform, every coin. It doesn't really “see” the pictures; it just keeps track of these boxes.
Then, every time around the loop, it asks one tiny question over and over: do these two boxes overlap? If yes — touch!— and it runs a rule: land on the platform, collect the coin, take a hit. That's it. That one overlap check is behind almost everything that “happens” in a game.
Your turn: see the boxes touch
Here's your hero again — now in a world with platforms and coins. Turn on Show the boxes and watch the hitboxes light up the instant they overlap. Land on the platforms and grab all the coins.
Click the game, then ← → to move and ↑ / Space to jump. Land on the platforms and grab every coin!
📦 Hitboxes
Every object has an invisible box. When two boxes overlap, that's a “touch”.
▸🔧 Peek inside: the coins are a “list,” checked by a “loop”
How does the game check all four coins at once? The coins live together in a list (a row of boxes), and every single loop the game runs one rule down the whole list: “for each coin, did the hero touch it?”Four coins or four hundred, it's the same one rule. Lists and loops are a huge part of how games handle lots of things at once.
🧰 Play with it in the Toolkit →Discovery missions
Try each one, tick it off, then peek at the secret.
🟫Jump up onto a floating platform. How does the hero know to STOP there instead of falling through?
🪙Walk into a coin. What happens the exact instant you touch it?
👁️Toggle “Show the boxes” on and off. Are the boxes exactly the same as the pictures?
🟩Stand still on a platform with the boxes shown. What colour does that platform's box turn?
🏆Collect all 4 coins.
🌟 You leveled up! You now know:
- 📦 Every object has an invisible box around it called a hitbox.
- ❓ Each loop, the game asks: do two boxes overlap?
- ✨ Overlap = “touch” → run a rule (land, collect, or bonk).
- 🟫 Landing on a platform IS a collision — the box check holds you up.
- 🔁 A whole game is thousands of box-overlap checks, every second.
🎬 Behind the scenes — what's next?
Your game now has platforms, coins, and real collisions. But the hero is still just a plain red square! 🟥 Next, we turn that square into an actual character that's drawn — and bring it to life so it walks and jumps with real animation. 👇