Create

collect the balls V2

Collect the Balls is a fast-paced arcade game where players catch falling colorful balls with a paddle to earn points. The game features a menu system, a shop to buy score multipliers, customizable paddle skins, and progressively increasing difficulty as you score more points.

Open in Editor Remix View in Gallery

🧪 Try This!

Experiment with the code by making these changes:

  1. Make balls worth more points — Changing the base points per catch from 10 to 25 rewards players faster and makes the game feel more generous
  2. Speed up ball spawning — Lowering the spawn rate from every 60 frames to every 30 frames doubles the difficulty and intensity
  3. Make the paddle wider — Increasing the paddle width from 110 to 180 makes catching balls easier and gives beginners a better experience
  4. Change the background color — Swapping the background RGB from dark (30, 30, 40) to a bright color like (255, 200, 150) completely transforms the visual mood
  5. Unlock all skins by default — Changing the Red skin default to 'true' for all skins lets players experiment without grinding; great for testing
Prefer the full editor? Open it there →

📖 About This Sketch

Collect the Balls V2 is a complete arcade game built in p5.js with a polished menu system, purchasable upgrades, and visual customization. The game spawns colorful balls that fall down the screen while you control a paddle to catch them and rack up points. It teaches state management (switching between menu, playing, shop, and game-over screens), collision detection between the paddle and falling objects, dynamic difficulty scaling, and how to build an interactive UI with buttons that show and hide based on game state.

The code is organized around a central game-state system: the `gameState` variable determines what gets drawn each frame, and buttons are shown or hidden accordingly. You'll learn how to structure a multi-screen game, manage player inventory (purchased skins and multipliers), and create satisfying game feedback through score displays and UI messages. By studying this sketch, you'll see how professional game architecture scales from a simple animation loop into a complete playable experience.

⚙️ How It Works

  1. When the sketch loads, setup() creates the canvas, initializes the player paddle in the middle-bottom of the screen, and creates all the buttons for menus, shops, and game controls.
  2. The draw() loop runs continuously and uses a switch statement on `gameState` to decide what to display: the menu, the active game, the shop, the skin shop, or the game-over screen.
  3. While playing, new balls spawn at random x positions at the top of the screen every 60 frames, each with a random color and size.
  4. Every frame, existing balls move downward at a speed that increases with both the current frame count and the player's score, creating a difficulty ramp.
  5. The paddle follows the mouse horizontally and stays locked to the bottom of the screen; collision detection checks if any ball overlaps the paddle, and if so, adds points multiplied by the current score multiplier.
  6. If a ball reaches the bottom without being caught, the game ends and transitions to the game-over screen where the player can restart or return to the menu.
  7. In the shop screens, players can spend accumulated score to purchase multipliers (2x, 4x, 8x, etc.) or unlock new paddle skins (colors and rainbow animation), each with different costs.

🎓 Concepts You'll Learn

State managementCollision detectionDynamic difficulty scalingUI button handlingGame loops and frame-based animationArray manipulation (spawning and removing objects)Mouse input handling

📝 Code Breakdown

setup()

setup() runs once at the start and is where you initialize your canvas, objects, and buttons. Every button created here needs a callback function (mousePressed) to define what happens when clicked.

🔬 This loop creates buttons for all skins and marks Red as purchased. What happens if you change the condition to `skin.name === 'Rainbow'` instead? Which skin would now start unlocked?

  skins.forEach((skin) => {
    const btn = createButton(`${skin.name} (${skin.cost})`);
    btn.mousePressed(() => handleSkinPurchase(skin));
    skinButtons.push({ btn, skin });
    purchasedSkins[skin.name] = skin.name === 'Red';
  });
function setup() {
  createCanvas(windowWidth, windowHeight);
  player = { x: width / 2, y: height - 60, w: 110, h: 25 };

  startButton = createButton('Start Game');
  startButton.mousePressed(startGame);

  shopButton = createButton('Shop');
  shopButton.mousePressed(() => switchState('shop'));

  skinButton = createButton('Skin Shop');
  skinButton.mousePressed(() => switchState('skins'));

  backButton = createButton('Back');
  backButton.mousePressed(() => switchState('menu'));

  playAgainButton = createButton('Play Again');
  playAgainButton.mousePressed(() => {
    resetGame();
    switchState('playing');
  });

  menuButton = createButton('Menu');
  menuButton.mousePressed(() => {
    resetGame();
    switchState('menu');
  });

  upgrades.forEach((upgrade) => {
    const btn = createButton(upgrade.label);
    btn.mousePressed(() => buyMultiplier(upgrade));
    upgradeButtons.push({ btn, upgrade });
  });

  skins.forEach((skin) => {
    const btn = createButton(`${skin.name} (${skin.cost})`);
    btn.mousePressed(() => handleSkinPurchase(skin));
    skinButtons.push({ btn, skin });
    purchasedSkins[skin.name] = skin.name === 'Red';
  });

  styleButtons();
  updateButtons();
}
Line-by-line explanation (10 lines)

🔧 Subcomponents:

for-loop Upgrade button creation upgrades.forEach((upgrade) => {

Dynamically creates a clickable button for each multiplier upgrade

for-loop Skin button creation skins.forEach((skin) => {

Dynamically creates a clickable button for each available skin

createCanvas(windowWidth, windowHeight);
Creates a canvas that fills the entire browser window
player = { x: width / 2, y: height - 60, w: 110, h: 25 };
Initializes the paddle as an object with position (x, y), width (w), and height (h) at the bottom-center of the canvas
startButton = createButton('Start Game');
Creates an HTML button element labeled 'Start Game' that will appear on screen
startButton.mousePressed(startGame);
Attaches a callback function that runs when the Start Game button is clicked
upgrades.forEach((upgrade) => {
Loops through the upgrades array to create a button for each score multiplier
btn.mousePressed(() => buyMultiplier(upgrade));
Connects each upgrade button to the buyMultiplier function, passing the specific upgrade data
skins.forEach((skin) => {
Loops through the skins array to create a button for each paddle customization option
purchasedSkins[skin.name] = skin.name === 'Red';
Marks the Red skin as already owned; all other skins start as unpurchased
styleButtons();
Applies consistent styling (color, size, border-radius) to all buttons
updateButtons();
Positions all buttons and sets which ones should be visible based on the current game state

draw()

draw() runs 60 times per second and is the heart of the game loop. The switch statement is a clean way to organize multi-screen games: one variable controls which function gets called, making it easy to add new screens later.

function draw() {
  background(30, 30, 40);

  switch (gameState) {
    case 'menu':
      drawMenu();
      break;
    case 'playing':
      drawGame();
      break;
    case 'shop':
      drawShop();
      break;
    case 'skins':
      drawSkins();
      break;
    case 'gameOver':
      drawGameOver();
      break;
  }

  drawScoreDisplay();
}
Line-by-line explanation (5 lines)

🔧 Subcomponents:

switch-case Game state router switch (gameState) {

Routes to the correct draw function based on which screen the player is on

background(30, 30, 40);
Clears the canvas with a dark gray-blue color every frame, preventing trails and overlaps
switch (gameState) {
Checks the current game state and calls the appropriate drawing function
case 'menu':
If gameState is 'menu', draw the main menu
case 'playing':
If gameState is 'playing', draw the active game with falling balls and paddle
drawScoreDisplay();
Always draws the score and multiplier in the top-left corner, on top of any screen

drawGame()

drawGame() is the core of the gameplay loop. It spawns new balls, updates their positions, draws them, detects collisions with the paddle, and ends the game if a ball is missed. The difficulty scaling ensures the game gets progressively harder, rewarding skilled players with a real challenge.

🔬 This four-part collision checks if a ball's center and edges overlap the paddle. What if you remove one of the conditions (like the left side check)? Try commenting out one line with // to see what happens.

    if (
      item.y + item.size / 2 > player.y &&
      item.y - item.size / 2 < player.y + player.h &&
      item.x > player.x &&
      item.x < player.x + player.w
    ) {
      score += 10 * scoreMultiplier;
      items.splice(i, 1);
      continue;
    }
function drawGame() {
  const difficulty = min(12, 1 + frameCount / 900 + score / 2000);

  if (frameCount % 60 === 0) {
    items.push({
      x: random(20, width - 20),
      y: 0,
      size: random(20, 40),
      speed: random(2 + difficulty * 0.8, 4.5 + difficulty * 0.8),
      color: color(random(255), random(255), random(255))
    });
  }

  for (let i = items.length - 1; i >= 0; i--) {
    const item = items[i];
    item.y += item.speed;

    fill(item.color);
    noStroke();
    ellipse(item.x, item.y, item.size);

    if (
      item.y + item.size / 2 > player.y &&
      item.y - item.size / 2 < player.y + player.h &&
      item.x > player.x &&
      item.x < player.x + player.w
    ) {
      score += 10 * scoreMultiplier;
      items.splice(i, 1);
      continue;
    }

    if (item.y - item.size / 2 > height) {
      triggerGameOver();
      return;
    }
  }

  player.x = constrain(mouseX - player.w / 2, 0, width - player.w);
  drawPlayer();
}
Line-by-line explanation (12 lines)

🔧 Subcomponents:

calculation Dynamic difficulty scaling const difficulty = min(12, 1 + frameCount / 900 + score / 2000);

Increases ball speed over time and with score, capping at a maximum to prevent game-breaking speed

conditional Ball spawn condition if (frameCount % 60 === 0) {

Spawns a new ball once every 60 frames (once per second)

for-loop Update and draw all balls for (let i = items.length - 1; i >= 0; i--) {

Moves every ball down, draws it, checks collisions, and removes balls that are caught or missed

conditional Paddle collision check if ( item.y + item.size / 2 > player.y && item.y - item.size / 2 < player.y + player.h && item.x > player.x && item.x < player.x + player.w ) {

Tests if a falling ball overlaps the paddle using AABB (axis-aligned bounding box) collision

conditional Ball missed check if (item.y - item.size / 2 > height) {

Detects when a ball has fallen off the bottom of the screen without being caught

const difficulty = min(12, 1 + frameCount / 900 + score / 2000);
Calculates a difficulty number that increases as the game runs longer and the player scores more; min(12, ...) caps it at 12 so the game never becomes unplayable
if (frameCount % 60 === 0) {
Uses modulo to spawn a new ball every 60 frames (since draw runs at 60 fps, this is one ball per second)
x: random(20, width - 20),
Spawns balls at random horizontal positions, with a small margin from the left and right edges
speed: random(2 + difficulty * 0.8, 4.5 + difficulty * 0.8),
Ball speed is random within a range that increases with difficulty; the 0.8 multiplier means difficulty affects speed gradually
color: color(random(255), random(255), random(255))
Each ball gets a random RGB color, creating visual variety
for (let i = items.length - 1; i >= 0; i--) {
Loops backwards through the items array (from last to first) so removing items doesn't skip any
item.y += item.speed;
Moves the ball downward each frame by its speed value
ellipse(item.x, item.y, item.size);
Draws the ball as a circle at its current position with its current size
if ( item.y + item.size / 2 > player.y && item.y - item.size / 2 < player.y + player.h && item.x > player.x && item.x < player.x + player.w ) {
Four-way collision check: tests if the ball's top, bottom, left, and right edges all overlap the paddle's rectangle
score += 10 * scoreMultiplier;
Awards 10 points multiplied by the current score multiplier (so with a 2x multiplier, you get 20 points)
items.splice(i, 1);
Removes the caught ball from the items array so it stops being drawn
player.x = constrain(mouseX - player.w / 2, 0, width - player.w);
Moves the paddle to follow the mouse horizontally, but constrains it so it never leaves the canvas

drawPlayer()

drawPlayer() demonstrates how to add visual flair: the rainbow skin uses an array of colors and the frameCount to cycle through them smoothly. This pattern is useful for any animation that repeats—health bars, loading screens, or rotating icons.

🔬 This code switches between two drawing modes: rainbow animation or a solid color. What happens if you add a new color like '#00ff00' (bright green) to the rainbow array?

  if (selectedSkin.color === 'rainbow') {
    const rainbow = ['#ff595e', '#ffca3a', '#8ac926', '#1982c4', '#6a4c93', '#ff9f1c'];
    const idx = Math.floor(frameCount / 5) % rainbow.length;
    fill(rainbow[idx]);
  } else {
    fill(selectedSkin.color);
  }
function drawPlayer() {
  if (selectedSkin.color === 'rainbow') {
    const rainbow = ['#ff595e', '#ffca3a', '#8ac926', '#1982c4', '#6a4c93', '#ff9f1c'];
    const idx = Math.floor(frameCount / 5) % rainbow.length;
    fill(rainbow[idx]);
  } else {
    fill(selectedSkin.color);
  }
  noStroke();
  rect(player.x, player.y, player.w, player.h, 12);
}
Line-by-line explanation (5 lines)

🔧 Subcomponents:

conditional Rainbow animation if (selectedSkin.color === 'rainbow') {

Selects a different rainbow color each frame if the rainbow skin is equipped

if (selectedSkin.color === 'rainbow') {
Checks if the player has the special rainbow skin equipped
const rainbow = ['#ff595e', '#ffca3a', '#8ac926', '#1982c4', '#6a4c93', '#ff9f1c'];
Array of 6 colors (red, yellow, green, blue, purple, orange) that cycle through to create a rainbow effect
const idx = Math.floor(frameCount / 5) % rainbow.length;
Calculates which color to show: frameCount increases every frame, dividing by 5 slows the animation, and % 6 cycles back to the start
fill(rainbow[idx]);
Fills the paddle with the color at the calculated index in the rainbow array
rect(player.x, player.y, player.w, player.h, 12);
Draws the paddle as a rounded rectangle with radius 12 at the stored position and size

switchState()

switchState() is a helper function that centralizes the logic for changing screens. By bundling state change, message clear, and button update together, the code stays organized and less error-prone.

function switchState(newState) {
  gameState = newState;
  uiMessage = '';
  updateButtons();
}
Line-by-line explanation (3 lines)
gameState = newState;
Updates the global gameState variable, which controls which screen is drawn next
uiMessage = '';
Clears any previous feedback message (like 'Not enough score') so the new screen starts fresh
updateButtons();
Calls updateButtons() to show/hide and reposition buttons based on the new game state

buyMultiplier()

buyMultiplier() shows the pattern for a purchase system: check if already owned, check if affordable, deduct cost, apply benefit, and give feedback. The uiMessage variable carries the feedback to the next draw() call so players know whether their action succeeded.

function buyMultiplier(upgrade) {
  if (scoreMultiplier >= upgrade.multiplier) {
    uiMessage = `${upgrade.multiplier}x Score already active!`;
  } else if (score >= upgrade.cost) {
    score -= upgrade.cost;
    scoreMultiplier = upgrade.multiplier;
    uiMessage = `${upgrade.multiplier}x Score activated!`;
  } else {
    uiMessage = 'Not enough score.';
  }
}
Line-by-line explanation (8 lines)

🔧 Subcomponents:

conditional Already owned check if (scoreMultiplier >= upgrade.multiplier) {

Prevents buying a multiplier if you already have an equal or better one

conditional Affordability check } else if (score >= upgrade.cost) {

Only allows purchase if the player has enough accumulated score

if (scoreMultiplier >= upgrade.multiplier) {
Checks if the player already has this multiplier or a better one active
uiMessage = `${upgrade.multiplier}x Score already active!`;
Sets a feedback message explaining the upgrade is already owned
} else if (score >= upgrade.cost) {
If not already owned, checks if the player has enough score to afford it
score -= upgrade.cost;
Deducts the upgrade cost from the player's accumulated score
scoreMultiplier = upgrade.multiplier;
Activates the new multiplier so all future catches award more points
uiMessage = `${upgrade.multiplier}x Score activated!`;
Sets a positive feedback message confirming the upgrade was purchased
} else {
If the player can't afford the upgrade
uiMessage = 'Not enough score.';
Displays a message telling the player they need more points

handleSkinPurchase()

handleSkinPurchase() follows the same pattern as buyMultiplier() but adds an extra step: checking if already owned. This is good UX—players don't have to repay for skins they already bought, and clicking a purchased skin instantly equips it.

function handleSkinPurchase(skin) {
  if (purchasedSkins[skin.name]) {
    selectedSkin = skin;
    uiMessage = `${skin.name} equipped!`;
  } else if (score >= skin.cost) {
    score -= skin.cost;
    purchasedSkins[skin.name] = true;
    selectedSkin = skin;
    uiMessage = `${skin.name} purchased & equipped!`;
  } else {
    uiMessage = 'Not enough score.';
  }
}
Line-by-line explanation (8 lines)

🔧 Subcomponents:

conditional Already purchased check if (purchasedSkins[skin.name]) {

If the skin is already owned, just equip it instead of charging the player

conditional Purchase affordability check } else if (score >= skin.cost) {

Only allows purchase if the player has enough score

if (purchasedSkins[skin.name]) {
Checks if the player already owns this skin
selectedSkin = skin;
Sets this skin as the active paddle color
uiMessage = `${skin.name} equipped!`;
Tells the player the skin is now active
} else if (score >= skin.cost) {
If not owned, checks if the player can afford it
score -= skin.cost;
Deducts the skin cost from the player's score
purchasedSkins[skin.name] = true;
Marks this skin as purchased so it won't charge again
selectedSkin = skin;
Immediately equips the newly purchased skin
uiMessage = `${skin.name} purchased & equipped!`;
Gives positive feedback that the purchase succeeded

updateButtons()

updateButtons() demonstrates how to manage visibility and layout for a multi-screen UI. By calling it every time gameState changes, you ensure buttons are always in the right place and visible on the right screen. This is much cleaner than scattering show/hide logic throughout the code.

🔬 This loop spaces upgrade buttons 52 pixels apart vertically. What happens if you change `i * 52` to `i * 100`? Would they spread out more or squeeze together?

  upgradeButtons.forEach(({ btn }, i) => {
    if (gameState === 'shop') {
      btn.show();
      btn.position(width - 280, height / 2 - 110 + i * 52);
    } else {
      btn.hide();
    }
  });
function updateButtons() {
  startButton.position(width / 2 - 110, height / 2 + 40);
  skinButton.position(30, height / 2 - 25);
  shopButton.position(width - 170, height / 2 - 25);
  backButton.position(30, 30);
  playAgainButton.position(width / 2 - 110, height / 2 + 80);
  menuButton.position(width / 2 - 110, height / 2 + 130);

  const onMenu = gameState === 'menu';
  startButton[onMenu ? 'show' : 'hide']();
  skinButton[onMenu ? 'show' : 'hide']();
  shopButton[onMenu ? 'show' : 'hide']();

  (gameState === 'shop' || gameState === 'skins') ? backButton.show() : backButton.hide();
  (gameState === 'gameOver') ? (playAgainButton.show(), menuButton.show()) : (playAgainButton.hide(), menuButton.hide());

  upgradeButtons.forEach(({ btn }, i) => {
    if (gameState === 'shop') {
      btn.show();
      btn.position(width - 280, height / 2 - 110 + i * 52);
    } else {
      btn.hide();
    }
  });

  skinButtons.forEach(({ btn }, i) => {
    if (gameState === 'skins') {
      btn.show();
      btn.position(40, height / 2 - 110 + i * 44);
    } else {
      btn.hide();
    }
  });
}
Line-by-line explanation (7 lines)

🔧 Subcomponents:

for-loop Upgrade button positioning upgradeButtons.forEach(({ btn }, i) => {

Shows upgrade buttons in a vertical column on the shop screen, hidden on all other screens

for-loop Skin button positioning skinButtons.forEach(({ btn }, i) => {

Shows skin buttons in a vertical column on the skin shop screen, hidden on all other screens

startButton.position(width / 2 - 110, height / 2 + 40);
Centers the Start Game button horizontally and places it in the middle-lower area of the screen
const onMenu = gameState === 'menu';
Creates a boolean that is true only when the current state is 'menu'
startButton[onMenu ? 'show' : 'hide']();
Uses a ternary operator to show the button if on the menu, hide it otherwise
(gameState === 'shop' || gameState === 'skins') ? backButton.show() : backButton.hide();
Shows the Back button on shop and skins screens, hides it everywhere else
upgradeButtons.forEach(({ btn }, i) => {
Loops through each upgrade button with its index
btn.position(width - 280, height / 2 - 110 + i * 52);
Spaces upgrade buttons vertically with 52 pixels between them, starting from the right side
skinButtons.forEach(({ btn }, i) => {
Loops through each skin button to position or hide it

triggerGameOver()

triggerGameOver() is a simple clean-up function that resets the game state and transitions to the game-over screen. Wrapping this logic in a function keeps drawGame() focused on just the active gameplay.

function triggerGameOver() {
  items = [];
  switchState('gameOver');
}
Line-by-line explanation (2 lines)
items = [];
Clears all falling balls from the screen immediately
switchState('gameOver');
Transitions to the game-over screen, which will show the missed-ball message and replay options

drawScoreDisplay()

drawScoreDisplay() is called at the end of draw() every frame, so it always appears on top of all other content. This is the HUD (heads-up display)—essential game information the player needs at a glance.

function drawScoreDisplay() {
  fill(255);
  textAlign(LEFT, TOP);
  textSize(20);
  text(`Score: ${score}`, 20, 20);
  text(`Multiplier: ${scoreMultiplier}x`, 20, 50);
}
Line-by-line explanation (5 lines)
fill(255);
Sets text color to white so it shows up clearly against the dark background
textAlign(LEFT, TOP);
Aligns text from the top-left, making positioning consistent and predictable
textSize(20);
Sets font size to 20 pixels for good readability
text(`Score: ${score}`, 20, 20);
Displays the current score in the top-left, using template literals to insert the score value
text(`Multiplier: ${scoreMultiplier}x`, 20, 50);
Displays the current multiplier just below the score, so players always know their bonus

drawMenu()

drawMenu() is the simplest draw function—it just displays the title. The buttons (Start Game, Shop, Skin Shop) are positioned and shown by updateButtons() separately.

function drawMenu() {
  fill(255);
  textAlign(CENTER, CENTER);
  textSize(54);
  text('Collect the Balls!', width / 2, height / 2 - 80);
}
Line-by-line explanation (4 lines)
fill(255);
Sets text color to white
textAlign(CENTER, CENTER);
Centers the text both horizontally and vertically around the given coordinates
textSize(54);
Sets a large font size for the title
text('Collect the Balls!', width / 2, height / 2 - 80);
Draws the game title centered horizontally and offset toward the top of the screen

drawShop()

drawShop() provides context and feedback. The uiMessage variable (set by buyMultiplier()) appears here to tell the player whether their purchase succeeded, failed, or was invalid.

function drawShop() {
  const baseX = width - 280;
  fill(255);
  textAlign(LEFT, TOP);
  textSize(38);
  text('Shop', baseX, height / 4 - 50);
  textSize(18);
  text('Buy score multipliers with your points.', baseX, height / 4);
  fill(190);
  text(uiMessage, baseX, height / 4 + 120);
}
Line-by-line explanation (7 lines)
const baseX = width - 280;
Defines a left-alignment x-coordinate for all shop text, positioned toward the right side of the screen
textSize(38);
Large font for the 'Shop' heading
text('Shop', baseX, height / 4 - 50);
Draws the 'Shop' title near the top
textSize(18);
Smaller font for instructions
text('Buy score multipliers with your points.', baseX, height / 4);
Explains to the player what they can do in the shop
fill(190);
Changes to a darker gray for the feedback message so it visually separates from the main text
text(uiMessage, baseX, height / 4 + 120);
Displays the result of the most recent purchase attempt (success or failure message)

drawSkins()

drawSkins() mirrors drawShop() but for cosmetic upgrades. The uiMessage here is set by handleSkinPurchase(), making the function structure consistent and easy to understand.

function drawSkins() {
  const baseX = 40;
  fill(255);
  textAlign(LEFT, TOP);
  textSize(38);
  text('Skin Shop', baseX, height / 4 - 50);
  textSize(18);
  text('Purchase and equip skins using your score.', baseX, height / 4);
  fill(190);
  text(uiMessage, baseX, height / 4 + 80);
}
Line-by-line explanation (4 lines)
const baseX = 40;
Positions skin shop text on the left side of the screen
text('Skin Shop', baseX, height / 4 - 50);
Draws the 'Skin Shop' title
text('Purchase and equip skins using your score.', baseX, height / 4);
Explains that players can buy new paddle colors and styles
text(uiMessage, baseX, height / 4 + 80);
Displays purchase feedback messages

drawGameOver()

drawGameOver() provides clear feedback that the game has ended and presents the next action. The red color choice reinforces the sense of failure and draws the eye.

function drawGameOver() {
  fill(255, 90, 90);
  textAlign(CENTER, CENTER);
  textSize(48);
  text('You missed a ball!', width / 2, height / 2 - 40);
  textSize(24);
  text('Play again or return to the menu.', width / 2, height / 2 + 10);
}
Line-by-line explanation (4 lines)
fill(255, 90, 90);
Sets text to a reddish color to indicate failure and grab attention
textSize(48);
Large dramatic font for the failure message
text('You missed a ball!', width / 2, height / 2 - 40);
Displays the game-over message centered on screen
text('Play again or return to the menu.', width / 2, height / 2 + 10);
Tells the player what options are available

styleButtons()

styleButtons() uses a spread operator and array methods to style all buttons in one place. This is a DRY (Don't Repeat Yourself) pattern: change the color here and every button updates. The spread operator (...) is crucial for flattening the nested button structures into a single array.

function styleButtons() {
  const buttons = [
    startButton, shopButton, skinButton, backButton,
    playAgainButton, menuButton,
    ...upgradeButtons.map(({ btn }) => btn),
    ...skinButtons.map(({ btn }) => btn)
  ];
  buttons.forEach(btn => {
    btn.style('font-size', '18px');
    btn.style('padding', '10px 20px');
    btn.style('border', 'none');
    btn.style('border-radius', '12px');
    btn.style('background-color', '#4CAF50');
    btn.style('color', '#fff');
    btn.style('cursor', 'pointer');
    btn.hide();
  });
}
Line-by-line explanation (7 lines)

🔧 Subcomponents:

calculation Button collection with spread operator ...upgradeButtons.map(({ btn }) => btn),

Flattens nested button objects into a single array for styling

const buttons = [
Creates a new array containing all buttons in the game
...upgradeButtons.map(({ btn }) => btn),
Uses spread operator and map to extract just the button objects from the upgradeButtons array (which contains {btn, upgrade} objects)
buttons.forEach(btn => {
Loops through every button to apply consistent styling
btn.style('font-size', '18px');
Sets button text size
btn.style('border-radius', '12px');
Creates rounded corners on all buttons
btn.style('background-color', '#4CAF50');
Sets the button background to a green color
btn.hide();
Starts with all buttons hidden; updateButtons() will show the correct ones for each screen

windowResized()

windowResized() is a special p5.js function that automatically fires when the browser window is resized. By calling resizeCanvas() and updateButtons(), the game stays playable at any window size.

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  updateButtons();
}
Line-by-line explanation (2 lines)
resizeCanvas(windowWidth, windowHeight);
Automatically resizes the canvas to match the current browser window dimensions
updateButtons();
Repositions all buttons for the new canvas size so nothing goes off-screen

📦 Key Variables

player object

Stores the paddle's position (x, y), width (w), and height (h) so it can be drawn and collision-tested

let player = { x: width / 2, y: height - 60, w: 110, h: 25 };
items array

Array of falling ball objects, each with position, size, speed, and color; updated every frame

let items = [];
score number

Accumulates points as the player catches balls; spent on upgrades and skins

let score = 0;
scoreMultiplier number

Multiplies points earned per catch (1x, 2x, 4x, etc.); purchased from the shop

let scoreMultiplier = 1;
gameState string

Tracks the current screen: 'menu', 'playing', 'shop', 'skins', or 'gameOver'; controls what is drawn each frame

let gameState = 'menu';
uiMessage string

Holds feedback messages (e.g., 'Not enough score') that are displayed in the shop/skins screens and cleared on state changes

let uiMessage = '';
purchasedSkins object

Maps skin names to boolean values indicating whether the player owns them; used to show purchased skins without re-charging

let purchasedSkins = { 'Red': true, 'Blue': false };
selectedSkin object

Stores the currently equipped skin object (with name, color, and cost); used by drawPlayer() to color the paddle

let selectedSkin = skins[0];
upgrades array

Array of multiplier upgrade objects, each with a label, multiplier value, and cost; used to create shop buttons

const upgrades = [{ label: 'Buy 2x Score', multiplier: 2, cost: 1000 }, ...];
skins array

Array of skin objects, each with a name, color (hex or 'rainbow'), and cost; used to create skin shop buttons and populate the skin system

const skins = [{ name: 'Red', color: '#ff4d4d', cost: 500 }, ...];

🔧 Potential Improvements (6)

Here are some ways this code could be enhanced:

BUG drawGame() collision detection

Collision detection uses the ball's center (item.x) but only checks if it falls within the paddle's horizontal range; this can allow small balls to slip between paddle edges

💡 Use radius-based collision: check if distance from ball center to paddle center is less than (ball.size/2 + paddle.width/2), or tighten the horizontal bounds to account for ball radius

PERFORMANCE drawGame() ball spawning

Every spawned ball persists in the items array even after it leaves the screen; if the player leaves the game running for hours, memory grows unbounded

💡 Remove balls that are far below the screen in the loop: before checking collision, add `if (item.y > height + 100) { items.splice(i, 1); continue; }` to clean up off-screen objects

STYLE buyMultiplier() and handleSkinPurchase()

Both functions have nearly identical logic (check if owned, check if affordable, deduct cost, set message); this duplication makes the code harder to maintain

💡 Extract a helper function like `handlePurchase(currentValue, cost, newValue, itemName)` that both functions call, reducing code duplication and bug risk

FEATURE drawGame()

Players can't see their current difficulty level; they have no way to know if balls are about to get much harder

💡 Display the difficulty value (or a 'Wave' number) in drawScoreDisplay() or drawGame() so players see the progression: `text(`Difficulty: ${difficulty.toFixed(1)}`, 20, 80);`

BUG resetGame()

score is not reset, so after game over, the scoreMultiplier persists into the next game; this allows exploiting: lose with a 16x multiplier, restart, and earn 16x points immediately

💡 Add `score = 0;` to resetGame() so each game starts fresh, or alternatively make multiplier a property of the game session rather than a global state

FEATURE Game state management

There's no pause button during gameplay; players can't take a break without losing their game

💡 Add a 'pause' gameState and a pause button in drawGame(); when paused, stop spawning/moving balls and show a 'Resume' button

🔄 Code Flow

Code flow showing setup, draw, drawgame, drawplayer, switchstate, buymultiplier, handleskinpurchase, updatebuttons, triggergameover, drawscoresisplay, drawmenu, drawshop, drawskins, drawgameover, stylebuttons, windowresized

💡 Click on function names in the diagram to jump to their code

graph TD start[Start] --> setup[setup] setup --> draw[draw loop] draw --> state-switch[state-switch] state-switch -->|draw game| drawgame[drawGame] state-switch -->|draw menu| drawmenu[drawMenu] state-switch -->|draw shop| drawshop[drawShop] state-switch -->|draw skins| drawskins[drawSkins] state-switch -->|draw game over| drawgameover[drawGameOver] drawgame --> spawn-check[spawn-check] spawn-check -->|if true| ball-update-loop[ball-update-loop] ball-update-loop --> collision-detection[collision-detection] ball-update-loop --> miss-detection[miss-detection] ball-update-loop -->|draw balls| drawplayer[drawPlayer] drawplayer --> rainbow-check[rainbow-check] drawgame --> difficulty-calculation[difficulty-calculation] click setup href "#fn-setup" click draw href "#fn-draw" click drawgame href "#fn-drawgame" click drawplayer href "#fn-drawplayer" click state-switch href "#sub-state-switch" click spawn-check href "#sub-spawn-check" click ball-update-loop href "#sub-ball-update-loop" click collision-detection href "#sub-collision-detection" click miss-detection href "#sub-miss-detection" click rainbow-check href "#sub-rainbow-check" click difficulty-calculation href "#sub-difficulty-calculation" drawshop --> button-creation-loop[button-creation-loop] button-creation-loop -->|create buttons| updatebuttons[updateButtons] updatebuttons -->|update visibility| menu-button-visibility[menu-button-visibility] drawskins --> skin-button-creation[skin-button-creation] skin-button-creation -->|create skin buttons| updatebuttons buymultiplier --> already-owned-check[already-owned-check] already-owned-check --> afford-check[afford-check] afford-check -->|if affordable| purchase-affordability[purchase-affordability] purchase-affordability -->|if successful| updatebuttons handleskinpurchase --> already-purchased-check[already-purchased-check] already-purchased-check -->|if not owned| purchase-affordability click buymultiplier href "#fn-buymultiplier" click handleskinpurchase href "#fn-handleskinpurchase" click updatebuttons href "#fn-updatebuttons" click button-creation-loop href "#sub-button-creation-loop" click skin-button-creation href "#sub-skin-button-creation" click menu-button-visibility href "#sub-menu-button-visibility" click already-owned-check href "#sub-already-owned-check" click afford-check href "#sub-afford-check" click already-purchased-check href "#sub-already-purchased-check" click purchase-affordability href "#sub-purchase-affordability" click button-array-spread href "#sub-button-array-spread" draw --> drawscoresisplay[drawScoreDisplay] drawscoresisplay -->|draw HUD| draw

❓ Frequently Asked Questions

What visual elements can users expect in the Collect the Balls V2 sketch?

The sketch features colorful falling balls that users must catch with a paddle, enhancing the visual appeal with vibrant colors and dynamic gameplay.

How can players interact with the Collect the Balls V2 game?

Users can navigate through a menu to start the game, visit the shop to buy upgrades and skins, and control their paddle to catch falling balls for points.

What creative coding techniques are showcased in the Collect the Balls V2 sketch?

This sketch demonstrates concepts such as game state management, user interface creation, and the implementation of score multipliers and customization options.

Explore More

collect the balls V3

Similar technique — read the docs

collect the balls!

Similar technique — read the docs

AI Bouncing Ball V2 - Xelsed p5flash-alpha02

Similar technique — read the docs

escape tsunamis for brainrots v2 (Remix)

Similar technique — read the docs

p5js.ai

Create your own sketches with AI assistance

Gallery

Browse more creative coding examples

User Guide

Learn how to use p5js.ai

Preview

collect the balls V2 - p5.js creative coding sketch preview
Sketch Preview
Code flow diagram showing the structure of collect the balls V2 - Code flow showing setup, draw, drawgame, drawplayer, switchstate, buymultiplier, handleskinpurchase, updatebuttons, triggergameover, drawscoresisplay, drawmenu, drawshop, drawskins, drawgameover, stylebuttons, windowresized
Code Flow Diagram