/Sutton

A fruity fun memory game with live demo ready!

Primary LanguageJavaScript

Sutton - 🥝 A Fruity Memory Game! 🍍

FLEX 323, May 15, 2021

image

🔴 Introduction

Sutton is the name of the game! Users must think fast as they play a game of memory. Each round, a random fruity sequence is displayed to the player. Players must repeat the pattern using a fantastic input pad. Players can try their best to memorize longer and more challenging streaks!

🔴 Technologies used

🔴 Installation Instructions

  1. Clone this repo
  2. Navigate to the locally established directory
  3. Open index.html

🔴 MVP User Stories

  • As a player, I want to be able to start a new game, so that I can play multiple times in a row.
  • As a player, I want the game to light up a sequence of input pads, so that I have a pattern to reproduce.
  • As a player, I want the game to animate the pads, so that I know my moves are registered.
  • As a player, I want the game to track my score, so that I know how good my memory is and how long the pattern has become.
  • As a player, I want the game to alert me when I make a mistake, so that I know the game is over.

🔴 Wireframes

Simple Gameplay image Challenging Gameplay image Game Over Condition image Mobile Friendly View

image

🔴 Major Hurdles

The biggest hurdle I overcame this project was ensuring there would be no animation clipping (due to asynchronous code). I was able to ensure that when the game sequence is displayed, animations don't overlap. I also made sure that the user can play quickly and that the animations don't prevent input during their turn from being rejected. I implemented multiple tactics to satisfy animation timing requirements. That includes Promise statements, setTimeout functions, and async await calls.

This project also served as a formal introduction to css... my first front-end UI!

🔵 Stretch Goals (Not Mandatory):

  • Mobile friendly layout
  • Adjustable difficulty (user can increase the quantity of unique memory pads)
  • Integrate 3rd party API
  • Colorblind mode

Timeframes

Task Priority Estimated Time Time Invested Actual Time
Setting up site framework H 1.5 hrs X hrs 2 hrs
Creating game logic H 4.25 hrs X hrs 5 hrs
Styling game (css) M 4.25 hrs X hrs 6 hrs
Building out game animations (responsive styling) M 4 hrs X hrs 8 hrs
Accessibility Styling L 1 hrs 0 hrs X hrs
Adjustable game difficulty L 4 hrs X hrs 4 hrs
Total n/a 25 hrs X hrs 24 hrs

Project Schedule

Day Deliverable Status
5/3 Project proposal / wireframe pitch complete
5/4 Site framework / start game logic complete
5/5 Finish game logic & css complete
5/8 Responsive styling complete
5/11 Accessibility / start adjustable difficulty incomplete / complete
5/12 Finish adjustable difficulty & playtime based scoring complete / incomplete
5/13 Persistent scoring w/ usernames incomplete
5/14 Finalize MVP complete
5/14 Clean up stretch features complete
5/14 Submit project as an issue to the cohort gallery complete
5/14 Prepare for demo complete
5/15 Presentation complete