🖥️ How to do these tasks:
Open the game in your browser. Then open the code file in a simple text editor (Notepad on Windows, TextEdit on Mac, or VS Code). Change the value, save the file, and refresh the browser to see your change in the game!
Open the game in your browser. Then open the code file in a simple text editor (Notepad on Windows, TextEdit on Mac, or VS Code). Change the value, save the file, and refresh the browser to see your change in the game!
1
🎨 Change Belly's colour
Belly is pink — but she doesn't have to be! A single line of code controls her colour. Find it and change it to any colour you like.
Step 1 — open this file
js/entities.js
Step 2 — find this line (it's near the top, inside the Belly class)
// Explorer Task 1: change this colour! this.color = '#ff79b4'; // ← this is Belly's colour
Step 3 — change the colour code
The #ff79b4 is a colour code — a # sign followed by 6 characters. Try one of these:
'#00ccff' ← sky blue '#ffdd00' ← sunny yellow '#ff6600' ← orange '#44ff88' ← mint green '#cc44ff' ← purple
🎮
Save the file, refresh the game, and Belly will be your new colour!
💡
You just learned about: Variables
A variable stores a piece of information — like a colour.
The code
this.color = '#ff79b4'
means "set my colour to pink". Changing the text changes what the variable stores.
2
⬆️ Change how high Belly jumps
Want Belly to jump like a rocket? Or barely hop off the ground? One number controls the jump height.
Step 1 — open this file
js/entities.js
Step 2 — find this line (near the very top of the Belly class)
static NORMAL_JUMP_IMPULSE = -9; // Explorer Task 2!
Step 3 — try different numbers
-5 ← tiny hop -9 ← normal jump (the default) -14 ← big jump -20 ← mega jump (nearly hits the top!)
Why negative? On a screen, going up means a
smaller number — so negative numbers push Belly upward. The bigger
the negative number, the higher she goes!
🎮
Press Space or tap the game after refreshing — Belly now jumps to your new height!
💡
You just learned about: Constants and negative numbers
A constant is a number with a name — like
NORMAL_JUMP_IMPULSE.
Naming it means you can find and change it easily. In game physics,
negative vertical speed means moving upward.
3
🍬 Change how many candy canes trigger Bonkers Mode
Bonkers Mode is the wild super-speed rush you get by collecting candy canes. You can make it trigger after just one candy cane — or make it much harder to unlock!
Step 1 — open this file
js/game.js
Step 2 — find the BONKERS_CONFIGS block and look for the
normal sectionnormal: { candyCaneRequired: 3, ← change this number! candyCaneSpawnMin: 700, runDuration: 5.0, speedMultiplier: 3.0, // ... more settings },
Step 3 — try these values
1 ← Bonkers after just one candy cane! 3 ← normal (the default) 6 ← much harder to unlock 10 ← nearly impossible (good luck!)
🎮
Collect candy canes in the game and see how quickly (or slowly!) Bonkers Mode triggers.
💡
You just learned about: Objects
An object stores a group of settings together — like a box with labelled compartments.
candyCaneRequired: 3
means "the candyCaneRequired setting has a value of 3".
Change the number, change the game!
4
🏃 Change the starting game speed
The game starts at a speed of 160 pixels per second. Change this to make the game feel really slow and relaxed — or terrifyingly fast!
Step 1 — open this file
js/game.js
Step 2 — find the CONFIG block at the very top of the file
const CONFIG = { INITIAL_SPEED: 160, ← change this! (px/second) SPEED_RAMP: 2, ← how fast speed increases // ... more settings };
Step 3 — try these values
60 ← very slow — easy for beginners 160 ← normal speed (the default) 300 ← fast from the start! 500 ← good luck catching anything...
Bonus: Try also changing
SPEED_RAMP: 2
to 0 — the speed will
never increase and the game stays the same speed forever!
🎮
Refresh and start the game — everything scrolls at your new speed from the very first second!
💡
You just learned about: The CONFIG block
Grouping all the tunable numbers together in one place (a CONFIG block)
means you can find and tweak any value quickly without hunting through
hundreds of lines of code. This is a real trick that professional game developers use!
5
🌅 Change the sky colour
The level 1 sky is a gradient blend of three blue colours. Change them to create a sunset, a stormy sky, or even a night sky!
Step 1 — open this file
js/renderer.js
Step 2 — find the
drawBackgroundLevel1 function and look for the sky gradient// Explorer Task 5: change the colour strings! const sky = ctx.createLinearGradient(0, 0, 0, groundY); sky.addColorStop(0, '#5bc8ff'); ← top of sky sky.addColorStop(0.65, '#a8e4ff'); ← middle of sky sky.addColorStop(1, '#d4f0ff'); ← bottom of sky
Step 3 — try one of these sky themes
// Sunset sky sky.addColorStop(0, '#220066'); sky.addColorStop(0.65, '#cc3300'); sky.addColorStop(1, '#ffaa00'); // Night sky sky.addColorStop(0, '#020015'); sky.addColorStop(0.65, '#0a0a44'); sky.addColorStop(1, '#1a1a66'); // Candy-floss sky sky.addColorStop(0, '#ff88cc'); sky.addColorStop(0.65, '#ffbbee'); sky.addColorStop(1, '#fff0ff');
🎮
Refresh and start the game on level 1 — the whole sky is now your new colours!
💡
You just learned about: Gradients and functions
A gradient smoothly blends between colours. Each
addColorStop(position, colour)
call is a function — it does a job (adding a colour) when you call it.
The position is a number between 0 (top) and 1 (bottom).