Path 2

🔨 Builder

You've got your hard hat on — time to build!

Read an existing pattern, copy it, fill in your own values. Something new in the game every time!

Ages 8–9  ·  5 tasks
1 2 3 4 5
🔨 Builder tip: Every task follows the same idea — find something that already exists in the code, copy its shape (the pattern), and fill it in with new values. You never need to invent from scratch; just adapt what's already there!
1

🌮 Add a new collectible type

Belly can collect donuts, pizza, ice cream and more. Let's add a new treat! You need to make two small changes — one to define the new treat, one to let the game spawn it.

Change 1 of 2 — open this file
js/entities.js
Find the COLLECTIBLE_RADII object (the radius controls how big the treat appears)
// Builder Task 1: add a new kind here!
const COLLECTIBLE_RADII = {
  donut:       16,
  pizza:       16,
  icecream:    18,
  lollipop:    14,
  hotdog:      18,
  cupcake:     15,
  candybar:    16,
  milkshake:   16,
    taco:        17,  ← add your new treat here!
};
Change 2 of 2 — open this file
js/game.js
Find the spawnCollectible function and add your treat to the kinds array
// Builder Task 1: add your new kind name here!
const kinds = [
  'donut', 'pizza', 'icecream', 'lollipop',
  'hotdog', 'cupcake', 'candybar', 'milkshake',
    'taco',   ← add this!
];
🎮
Refresh and play — your new treat will appear as a coloured circle for now. It'll look like all the other collectibles until someone draws a proper sprite for it!
💡
You just learned about: Arrays and objects An array is a list of things: ['donut', 'pizza', ...]. An object stores named values: { donut: 16, pizza: 16 }. The game picks a random item from the array each time it spawns a collectible.
2

💥 Add a new Bonkers Mode difficulty tier

The game has Easy, Normal, Hard and Chaos modes. You're going to add a new "Mega" tier that's even more extreme — and make it appear in the difficulty picker on the title screen.

Change 1 of 2 — open this file
js/game.js
Find BONKERS_CONFIGS and add a new tier after 'chaos'. Copy the chaos block and rename it 'mega'
  chaos: {
    candyCaneRequired: 5,
    flashDuration:     2.5,
    shakeDuration:     3.0,
    runDuration:       7.0,
    speedMultiplier:   4.2,
  },
  mega: {               ← add this new block!
    candyCaneRequired: 6,
    flashDuration:     3.0,
    shakeDuration:     4.0,
    runDuration:       9.0,
    speedMultiplier:   5.0,
  },
Change 2 of 2 — open this file
index.html
Find the difficulty <select> and add a new option
<select id="bonkers-mode-select">
  <option value="easy">Easy</option>
  <option value="normal">Normal</option>
  <option value="hard">Hard</option>
  <option value="chaos">Chaos</option>
    <option value="mega">MEGA 💥</option>  ← add this!
</select>
🎮
Refresh the game — "MEGA 💥" now appears in the difficulty picker on the title screen!
💡
You just learned about: Copy-and-modify The safest way to add something new is to copy something that already works and change only what needs to change. You touched two files but only added code — nothing was broken because you followed the existing pattern exactly.
3

🎯 Make a hitbox more forgiving

A hitbox is the invisible rectangle the game uses to decide if Belly touched an obstacle. Making it smaller means players get more room for error. Let's make the bicycle easier to dodge!

Open this file
js/entities.js
Find the OBSTACLE_HITBOX table at the top of the file and look for the bicycle entry
// Hitbox insets: [leftFrac, topFrac, widthFrac, heightFrac]
// Smaller widthFrac and heightFrac = smaller hitbox = easier to dodge
const OBSTACLE_HITBOX = {
  // ...
  'bicycle': [0.08, 0.20, 0.84, 0.72],
  // ...
};
Change the four numbers to shrink the hitbox
// Original — covers most of the sprite
'bicycle': [0.08, 0.20, 0.84, 0.72],

// Smaller hitbox — more forgiving!
'bicycle': [0.22, 0.30, 0.56, 0.50],
How the four numbers work: [leftFrac, topFrac, widthFrac, heightFrac]
Each is a fraction of the sprite's total size. Bigger left/top fractions push the hitbox inward. Smaller width/height fractions make it narrower and shorter.
🎮
Refresh and play. Try running right through a bicycle — you should be able to clip the edge without dying!
💡
You just learned about: Hitboxes and fractions In almost every game, the invisible collision rectangle is smaller than the visible sprite — this gives players a fair feeling. Fractions (0.0–1.0) keep the hitbox proportional no matter how big or small the sprite is.
4

✨ Add a new accessory for Belly

Belly can earn accessories by completing perfect runs (no lives lost). Add a brand new accessory to the collection — it will appear in the shop and can be unlocked just like the others!

Open this file
js/game.js
Find the ACCESSORIES array
// Builder Task 4: add a new object to this array!
const ACCESSORIES = [
  { id: 'hat',        emoji: '🎩', name: 'Magic Hat',      desc: 'Tips with style!' },
  { id: 'boots',      emoji: '👢', name: 'Power Boots',    desc: 'Spring in every step!' },
  { id: 'glasses',    emoji: '🕶️', name: 'Cool Shades',    desc: 'Looking so groovy!' },
  // ... more accessories
    { id: 'umbrella',   emoji: '☂️', name: 'Lucky Umbrella', desc: 'Stays dry, plays hard!' },  ← add yours!
];
Make it your own! Choose any emoji, give it a fun name and a silly description. Use the same shape as the other items: { id: '...', emoji: '...', name: '...', desc: '...' }
🎮
Refresh and complete a level without losing a life — your new accessory will appear in the reward screen!
💡
You just learned about: Arrays of objects An array of objects is one of the most common patterns in all of programming — a list where each item has several named properties. Adding a new item only requires matching the shape of the existing items exactly.
5

🦖 Move an obstacle to a different level

Each level has its own list of obstacles. The dinosaur normally only appears in level 1, but you can move it — or add it — to any other level. You can also make an obstacle appear more often by adding its name to the list more than once!

Open this file
js/game.js
Find the spawnObstacle function and look for the kindsByLevel object
// Builder Task 5: move names between levels, or add duplicates!
const kindsByLevel = {
  1: ['toy-small', 'toy-large', 'toy-ball', 'rattle',
     'bicycle', 'blocks', 'toy-car', 'dinosaur'],  ← try moving this!
  2: ['ant', 'worm', 'roman-pot', 'boulder', 'clock'],
  3: ['bird', 'balloon', 'plane', 'hot-air-balloon', 'blimp'],
  // ...
};
Try these experiments
// Add dinosaur to level 2 as well:
2: ['ant', 'worm', 'roman-pot', 'boulder', 'clock', 'dinosaur'],

// Make ants appear twice as often in level 2:
2: ['ant', 'ant', 'worm', 'roman-pot', 'boulder', 'clock'],

// Add a sky obstacle to the underground level (chaos mode!):
2: ['ant', 'worm', 'boulder', 'clock', 'bird'],
🎮
Play through to the level you edited — your changed obstacles will appear!
💡
You just learned about: Random selection from arrays The game picks a random item from the list each time it spawns an obstacle. A longer list gives more variety. Duplicating a name (adding it twice) makes it twice as likely to be chosen — a simple but powerful technique!
← Explorer Path ▶ Play the Game! ✨ Creator Path →