🧺 Catch the Stars

🎮 How to play

Reach the goal score before you run out of lives. Stars you catch earn points; stars that hit the floor cost lives.

• ◀ ▶ buttons, or the ← → arrow keys: Move the basket left and right.

⚙️ Your functions

You write these functions. The game calls them when something happens.

• onCatch()

  Runs every time a star lands in your basket.

  function onCatch() {
    score = score + 1;
  }

• onMiss()

  Runs every time a star hits the floor.

  function onMiss() {
    lives = lives - 1;
  }

🎚️ Settings you can change

Variables at the top of your code are the game's settings. Change a value, press Play, and see what happens.

player = "🧺"

The emoji you move (any emoji works).

item = "⭐"

The emoji that falls from the sky.

goal = 10

Reach this score to win.

lives = 3

Misses you are allowed. At 0 the game is over.

speed = 2

From 1 (slow) to 5 (fast). You can change it while playing!

score = 0

Your points. The game starts it at 0 and you change it in your functions. set by the game

🪜 Step by step

Each step shows code you can add to the end of your game's code. A function or variable written later replaces the earlier one, so you never have to delete anything.

1. 1Play the starter

   Press Play and catch a few stars. Every catch runs onCatch, and score = score + 1 adds one point. Every miss runs onMiss and takes a life.

   function onCatch() {
     score = score + 1;
   }

2. 2Make stars worth more

   Change the number you add. Now every star is worth 5 points.

   function onCatch() {
     score = score + 5;
   }

3. 3React with if

   Use if to change the game when something happens. Here, once your score reaches 8 the game jumps to speed 4. The sign >= means "bigger than or equal to".

   function onCatch() {
     score = score + 1;
     if (score >= 8) {
       speed = 4;
     }
   }

4. 4Keep a counter

   A counter variable remembers how many you have caught. The % sign gives the remainder after dividing, so catches % 3 === 0 is true on every 3rd catch. Those get a +5 bonus.

   let catches = 0;
   
   function onCatch() {
     catches = catches + 1;
     score = score + 1;
     if (catches % 3 === 0) {
       score = score + 5;
     }
   }

5. 5Misses that slow you down

   A miss can change any variable, not just lives. Here a miss costs a life and slows the game down, but Math.max keeps the speed from going below 1.

   function onMiss() {
     lives = lives - 1;
     speed = Math.max(1, speed - 1);
   }

// 🎮 Catch the Stars!
let player = "🧺";   // the thing you move
let item = "⭐";       // what falls from the sky
let goal = 10;         // reach this score to win
let lives = 3;
let speed = 2;        // 1 (slow) to 5 (fast)

function onCatch() {
  score = score + 1;
}

function onMiss() {
  lives = lives - 1;
}

💡 Ideas to try

• Make a game about catching pizza 🍕 with a plate 🍽️ as the player.
• Give the player 5 lives, but make misses cost 2 points as well.
• Start slow and make the game faster every 3 stars.
• Make the goal 50 and add a bonus for every 10th catch.

Tips

• Change one thing at a time, then press Play to see what happened.
• If your code has a mistake, the game shows the line number so you can find it fast.

🎓 Lessons for this game

• 🎮Your first gameFree
• 💯Score more pointsFree
• ❤️Lives and dangerFree
• 🚀Level up with ifFree
• 🔒Bonus starsPremium
• 🔒Danger zonePremium