Code like LEGO
Code like LEGO
A LEGO brick has one shape and clicks onto other bricks. You can swap one brick without knocking down the whole castle.
Code can work the same way. A module is a file with one job. Lots of small modules click together to make the whole game.
Hyper Shards, in blocks
- ship.jsHow the ship moves, shoots and takes damage.
- enemies.jsThe alien ships: how they spawn, fly and attack.
- score.jsPoints, combos and the high score.
- main.jsStarts the game and tells the other blocks when to do their job.
Bolt says: One job per file. If you can't describe a file's job in one short sentence, it's probably doing too much.
Quick check
In Hyper Shards, the score stops counting when you hit an alien. Which file do you open first?
- ship.js
- score.js
- main.js
Show the answer
score.js
Counting points is score.js's one job, so that's the best place to start looking. With one giant file, you'd have to search everywhere.
Numbers live in balance.json
Speeds, health, damage and prices are numbers we change a lot. So we keep them out of the code, in a data file called balance.json.
JSON is a simple text format for data. It looks like this:
{ "shipSpeed": 6, "laserDamage": 2, "sprigHealth": 10 }
The game reads this file when it starts. To make lasers stronger, you change one number. No code needed.
How the blocks connect
Blocks need to talk to each other. When an alien is destroyed, enemies.js needs to tell score.js to add points.
So score.js exports a function, which means it shares it. Then enemies.js imports it, which means it plugs it in:
import { addPoints } from './score.js';
Now enemies.js can call addPoints(10).
Quick check
If laser damage is stored in balance.json, making lasers stronger means rewriting ship.js.
- True
- False
Show the answer
False
The number lives in balance.json, so you just change it there, for example from 2 to 3. The code in ship.js stays the same.
Bug hunt
1import { addPoint } from './score.js';2 3export function destroyAlien(alien) {4 alien.alive = false;5 addPoints(10);6}
score.js exports a function called addPoints. Hyper Shards now crashes as soon as it loads enemies.js. Which line is the bug?
- Line 1
- Line 4
- Line 5
Show the answer
Line 1
Line 1 asks score.js for addPoint, without the s. Names must match exactly, and score.js has no addPoint to share, so the import fails.
Why the AI loves small files
- It can focusA small file fits easily in the AI's attention, so it doesn't lose track.
- Fewer surprise bugsYou can say "only change enemies.js", so the rest of the game stays safe.
- Easy to reviewA change to one short file makes a short diff (the list of changed lines) that you can actually read.
Quick check
Why does an AI helper make fewer mistakes with small modules?
- It can focus on one small job without losing track
- Small files make the computer run faster
- The AI is only allowed to read 10 lines
Show the answer
It can focus on one small job without losing track
A small file with one job is easy to understand completely. The AI is less likely to break something far away, and you can check its work quickly.
Before we break it apart
Splitting a giant file into modules is a big change. We'll ask Claude for a plan, then move one block at a time and test after each one.
But big changes need a safety net first: save points we can go back to if something goes wrong halfway. Those come from a tool called Git, which we drive by typing commands in the terminal.
Bolt says: Next lesson: debugging, how to find a bug without guessing. Then Git commits, the save points that keep our games safe.
Fact-checked 9 October 2026
- MDN: JavaScript modules developer.mozilla.org
- MDN: import developer.mozilla.org
- JSON.org: Introducing JSON json.org