setup()
setup() runs once when the sketch starts. It is the ideal place to initialize all global state: create the canvas, set starting variables, generate content (trees, ducks), attach event listeners, and call helper setup functions like setupAudio() and buildShopUI().
function setup() {
cnv = createCanvas(windowWidth, windowHeight, WEBGL);
// Setup player health UI
playerHealth = playerMaxHealth;
updatePlayerHealthBar(playerHealth, playerMaxHealth);
document.getElementById('start-btn').addEventListener('click', async () => {
cnv.elt.requestPointerLock();
await userStartAudio(); // Start audio context on user gesture
if (musicLoop && !musicLoop.isPlaying) {
musicLoop.start(); // Start the background music
}
});
// Generate environment structures based on the initial world
// This will clear ducks and generate trees for the initial activeWorld
generateEnvironmentTrees(activeWorld);
// Only spawn ducks if not starting in The Arena
if (activeWorld !== 'theArena') {
for (let i = 0; i < 15; i++) ducks.push(new Target());
}
setupAudio();
buildShopUI();
// Restart button listener
document.getElementById('restart-btn').addEventListener('click', () => {
location.reload(); // Simple reload to restart the game
});
}Line-by-line explanation (9 lines)
🔧 Subcomponents:
calculation
WEBGL Canvas Setup
cnv = createCanvas(windowWidth, windowHeight, WEBGL);
Creates a fullscreen 3D canvas using WEBGL mode, which enables 3D transforms, lighting, and cameras
calculation
Player Health Setup
playerHealth = playerMaxHealth;
Sets the player's starting health to maximum (100) and updates the health bar UI
calculation
Pointer Lock Event
document.getElementById('start-btn').addEventListener('click', async () => {
Listens for START button click, locks the mouse pointer to the canvas, and starts background music
calculation
World Generation
generateEnvironmentTrees(activeWorld);
Procedurally generates 200+ trees/structures positioned randomly around the world based on the active world type
conditional
Initial Duck Spawn
if (activeWorld !== 'theArena') {
for (let i = 0; i < 15; i++) ducks.push(new Target());
}
Spawns 15 duck targets at game start, unless playing in The Arena mode which has only bosses
cnv = createCanvas(windowWidth, windowHeight, WEBGL);- Creates a fullscreen WEBGL canvas stored in variable cnv. WEBGL mode enables 3D graphics, transforms, and lighting—essential for the 3D game world
playerHealth = playerMaxHealth;- Sets player starting health to 100 (the max value). This variable is checked every frame to determine if the player has died
updatePlayerHealthBar(playerHealth, playerMaxHealth);- Calls a function to update the HTML health bar UI to show full health at startup
cnv.elt.requestPointerLock();- When START is clicked, locks the mouse pointer to the canvas so mouse movement doesn't leave the window—essential for first-person control
await userStartAudio();- Modern browsers require user interaction before playing audio. This waits for the audio context to be ready before starting music
generateEnvironmentTrees(activeWorld);- Fills the trees array with 200+ randomly-positioned tree/structure objects unique to the active world type (forest, desert, arctic, etc.)
if (activeWorld !== 'theArena') { for (let i = 0; i < 15; i++) ducks.push(new Target()); }- Creates 15 duck target objects and adds them to the ducks array. The Arena mode skips this because it has only bosses
setupAudio();- Initializes p5.sound synths for gunshots, hit sounds, and background music loops
buildShopUI();- Dynamically generates HTML for the shop overlay, listing all weapons, bird targets, and worlds with their costs and descriptions
