upieez/project-1-sei-21

Match The Donut Game

PROJECT-1-SEI-21 DOCUMENTATION

Motivation

1. This game will help me understand CSS better and improve on it
2. This game will also help me to review my javascript basics and logic

Resources

• Good free game art I took is from OpenGameArt & freepik
  • Credit to William for the donut icons
  • Credit to upkylak for the box
• Websites I used for syntax references are:
  • w3schools
  • MDN Web Docs
• Fonts Family I took is from Google Fonts
• Animation css I took is from Daniel Eden

Creating a wireframe

The wireframes are the floor plan for your website, creating a vessel for which design and content can flow into.

1. First step is to draw up a rough sketch of how my final design will look like. This will help me to break down step by step on how the logic of my game will be.

2. Second step is to identify where I need to place my divs in my HTML and also consider whether or not I should use bootstrap(?) (i.e having my donut box as a background image so that I can place my selected donuts on top of the box)

3. Third step is to identify what javascript syntax I would need to use (i.e storing my donuts in an array as a string)

4. Fourth step is to do the logic aspect of the game.

MVP

• Be able to click on the donut and have it to populate the box
• Be able to display donut images on the side bar, donut box and the objective
• Show the user that the donut matches

Gameplay

Match the donut into the donut box from the objective and send out the order. Match the correct amount to gain points to and get the highest score!

---

Stage 1

• Creating my HTML and implementing the divs inside of it as per my rough sketch
• Create the styling to have a basic visual implantation of how my design of the game should be like
• Create basic javascript function to have the base game running (i.e adding the donut to the donut box, checking the donut box has the same amount of donut in the objective)

Stage 2

• Reformat javascript codes to be able to implement donut visuals into the game.
• Randomize the donut array to display different amount of it every time it refreshes.
• Clear the donut array whenever it is correct
• Format the style to make it look slightly more visually appealing

Stage 3

• Able to select different types of donut
• Able to generate different types of donut in the objective
• Able to check and submit that the types of donut and number is correct

Stage 4

• Create a gameover with a restart button screen
• Create a startgame screen with instructions
• Animate the game

Further ideas (in progress)

• Have a function to drag it instead of clicking
• Create a difficulty page
• Each difficulty will have different amount of donut selection
  • Easy will have 6 donuts to choose from and you only need to fill max of three donuts
  • Medium will have 9 and fill up max 6 donuts
  • Hard will have 12 donuts and fill up max 9 donuts
• Store highscore points
• Play music in the game
• Instead of creating a point system, change it to gain money instead and instead of having difficulty, you can progress the game by buying more donuts to add to your collection. Each donut you unlock can be sold to earn more money! The objective is to see if you can unlock all the donut by the end of the game and to get as much money as possible!