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!
- HTML
- CSS (Grid & Flex)
- JavaScript
- Fetch API
- Axios isomorphic client
- Unsplash API
- Netlify (Hosted)
- Clone this repo
- Navigate to the locally established directory
- Open index.html
- 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.
Simple Gameplay
Challenging Gameplay
Game Over Condition
Mobile Friendly View
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!
- Mobile friendly layout
- Adjustable difficulty (user can increase the quantity of unique memory pads)
- Integrate 3rd party API
- Colorblind mode
| 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 |
| 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 |