Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/trevor4n/sutton
A fruity fun memory game with live demo ready!
https://github.com/trevor4n/sutton
api axios cicd css fetch game general-assembly javascript memory mmp nodejs
Last synced: about 1 month ago
JSON representation
A fruity fun memory game with live demo ready!
- Host: GitHub
- URL: https://github.com/trevor4n/sutton
- Owner: trevor4n
- Created: 2021-05-06T20:36:56.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-11T07:16:51.000Z (almost 2 years ago)
- Last Synced: 2024-07-30T17:35:02.072Z (5 months ago)
- Topics: api, axios, cicd, css, fetch, game, general-assembly, javascript, memory, mmp, nodejs
- Language: JavaScript
- Homepage: https://main--trevor4n-sutton.netlify.app/
- Size: 1.17 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 
# Sutton - 🥝 A Fruity Memory Game! 🍍
## FLEX 323, May 15, 2021
## 🔴 Introduction
Sutton is the name of [the game!](https://main--trevor4n-sutton.netlify.app/) 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
- HTML
- CSS (Grid & Flex)
- JavaScript
- Fetch API
- Axios isomorphic client
- **[Unsplash API](https://unsplash.com/?utm_source=sutton&utm_medium=referral)**
- **[Netlify (Hosted)](https://main--trevor4n-sutton.netlify.app/)**
## 🔴 Installation Instructions
1. Clone this repo
2. Navigate to the locally established directory
3. Open index.html
## 🔴 MVP User Stories
- [x] As a player, I want to be able to start a new game, so that I can play multiple times in a row.
- [x] As a player, I want the game to light up a sequence of input pads, so that I have a pattern to reproduce.
- [x] As a player, I want the game to animate the pads, so that I know my moves are registered.
- [x] 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.
- [x] 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
Challenging Gameplay
Game Over Condition
Mobile Friendly View
## 🔴 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):
- [x] Mobile friendly layout
- [x] 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](https://main--trevor4n-sutton.netlify.app/) | complete
|5/15| Presentation | complete
### [Link to project proposal](https://git.generalassemb.ly/flex-323/project-1/issues/15)