A web browser game where player is shopping at the supermarket.

Context

Aisle 1 is a game where the player is at a supermarket and has to click on items from the shelves that correspond to their grocery list.

<aside> ➡️ This was my first project during my web development course at Ironhack

</aside>

Challenge

Create a simple game with 3 states (splash screen, game, game over screen) and restart functionality using HTML, CSS, Javascript.

Solution

Aisle 1 is a simple game where the player has to buy as many items that correspond with their grocery list within the time limit.

Design Process

1. Research

First, I looked at other games on the internet, like Neopets (Meerca Chase, Hassee Bounce) or Snake which used to be popular on Nokia phones.

I also researched classic arcade games from the '80s, using sites like this one.

They all had simple winning and losing logic. Because of my tight timeline, I had to keep in mind that my game had to be something I could code in 2 days.

2. Define

When defining my idea, I thought about:

What are the basic functionalities? (MVP vs. backlog)
What is the winning/losing logic?

Below was my initial plan. However, through the progression of this project, I had to alter and change a lot of this.

Winning Logic

😎 Player spots and clicks all items on list by the end of the aisle with no mistakes/extra items

😎 Score calculated based on successful grocery trips and amount of levels gotten through/the time game lasted

Losing Logic

⚠️ A life is lost for each incorrect item clicked on each level

⚠️ Game over when 3 lives are gone

Backlog

👍 Add scoreboard, +1 per item

👍 Spinning animation of item being added to cart

👍 Shopper walking animation

👍 Bonus points item to find

MVP Functionalities

✅ Shopper with shopping cart on left side of canvas

✅ Background of a looooong shopping aisle that also moves horizontally, ends at cash register

✅ Player has to spot all items on grocery list and click on them to add to cart before passing them

✅ Starting from Week 1, increasing difficulty

✅ Shopping list