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
};