Week 5 – Game Concept

This weeks focus : 

This week is the first week I’m working on my midterm project, I decided to focus on the game concept so I can have clear direction, I planned my entire concept from A to Z, but I did not focus on the technical side because I decided the most efficient way to start is with a clear plan.

The basket adventures : game concept

Goal:

Catch falling candies to score points and survive as long as possible, while avoiding poison candies that make you lose lives.

Lives

Player starts with 3 lives.

• Lose 1 life for each poison candy caught.

• When lives = 0 → Game Over screen appears.

Scoring:

+5 points for every second survived.

+10 points for each candy caught (optional extra boost).

• Display score at the top at all times.

Difficulty:

As time goes on, falling objects spawn faster and fall quicker.

Power-up (Immunity Mode):

• A special glowing candy sometimes falls.

• When caught → player becomes immune to poison for 10 seconds.

• A countdown timer appears on screen during immunity.

Game Modes (Themes)

The four modes are mostly visual changes:

1. Witch Land:

• Background: Haunted forest.

• Good objects: candy corn, pumpkins.

• Poison: Skulls or green potion bottles.

  • Power up: Bat.

2. Unicorn Land:

• Background: Pastel rainbow sky.

• Good objects: Cupcakes, rainbow candies.

• Poison: Spiky black storm clouds.

  • Power up: Star.

3. Funky Land:

• Background: Disco dance floor.

• Good objects: Ice cream.

• Poison: Gray or dull-colored shapes.

• Power up: sunglasses.

4. Animal Kingdom:

• Background: Jungle scene.

• Good objects: Bananas,  coconuts.

• Poison: snakes.

     • power up: leaves.

Different Screens

Game Flow Description

Home Page (Adventure Selection):

• The first screen shows the message:

“Where do you want to take the basket on an adventure?”

• The player chooses one of four themes:

1. Witch Land

2. Unicorn Land

3. Funky Land

4. Animal Kingdom

• Once a theme is chosen, it moves to the Instructions Page.

Instructions Page:

• Shows the selected theme background at the top.

• Displays clear instructions:

• What the good candy looks like and that it increases your score.

• What the poison candy looks like and that it takes away one life.

• The power-up candy image and that it gives immunity for 10 seconds.

• Controls for moving the basket (left and right arrow keys).

• How the scoring works:

“You gain 5 points for every second you survive.”

• A button or message appears: “Press SPACE to start!”

Gameplay:

• The selected theme’s background is displayed.

• Player moves the basket left and right to catch falling candies.

Good candy: Increases score.

Poison candy: Decreases lives by 1.

Power-up: Activates 10-second immunity with a visible countdown timer.

• The game gets faster and harder over time.

• When lives reach 0, the game ends and moves to the Game Over screen.

Game Over Screen:

• Displays:

Final score.

• A message: “Game Over!”

• Two options for the player:

1. Restart:

• Restarts the same theme immediately.

2. Choose New Theme:

• Returns to the Home Page where they can select a different theme.

At first, I thought of making a simple game with a basket catching candies because it felt like the kind of game anyone could play to relax or pass the time. I also wanted something my little siblings could enjoy, so I asked them for their thoughts. My younger sister immediately said it should be in a magical unicorn land, while one of my brothers insisted on a spooky witch land, and my other brother said it had to be in an animal kingdom. That’s when I realized it would be more fun and interactive to add multiple themed worlds. This way, the game could appeal to a wider audience and let players choose their own adventure, making it more exciting and personal for everyone who plays.

 

Code  highlight:

Figuring out the button placement was tricky at first. I used percentages for the positions and sizes instead of fixed numbers so the buttons would stay in the right spot no matter the screen size. It took a lot of trial and error to line them up perfectly with the image, and small changes made a big difference. Even though it was frustrating, I learned how to make my game flexible and work well on different devices.

// buttons placement based on background image
const buttonsPct = {
  unicorn: { xPct: 0.16, yPct: 0.23, wPct: 0.30, hPct: 0.26 }, // top-left
  animal:  { xPct: 0.54, yPct: 0.23, wPct: 0.30, hPct: 0.26 }, // top-right
  funky:   { xPct: 0.16, yPct: 0.60, wPct: 0.30, hPct: 0.26 }, // bottom-left
  witch:   { xPct: 0.54, yPct: 0.60, wPct: 0.30, hPct: 0.26 }  // bottom-right
};

 

Leave a Reply