Pre-work - Memory Game

Memory Game is a Light & Sound Memory game to apply for CodePath's SITE Program.

Submitted by: Andre Limos

Time spent: 5 hours spent in total

Link to project: https://glitch.com/edit/#!/fuschia-chief-lady

Required Functionality

The following required functionality is complete:

Game interface has a heading (h1 tag), a line of body text (p tag), and four buttons that match the demo app
"Start" button toggles between "Start" and "Stop" when clicked.
Game buttons each light up and play a sound when clicked.
Computer plays back sequence of clues including sound and visual cue for each button
Play progresses to the next turn (the user gets the next step in the pattern) after a correct guess.
User wins the game after guessing a complete pattern
User loses the game after an incorrect guess

The following optional features are implemented:

Any HTML page elements (including game buttons) has been styled differently than in the tutorial
Buttons use a pitch (frequency) other than the ones in the tutorial
More than 4 functional game buttons
Playback speeds up on each turn
Computer picks a different pattern each time the game is played
Player only loses after 3 mistakes (instead of on the first mistake)
Game button appearance change goes beyond color (e.g. add an image)
Game button sound is more complex than a single tone (e.g. an audio file, a chord, a sequence of multiple tones)

The following additional features are implemented:

Keyboard support (just qwert)
Secret coded added when game not running (for fun) :0

Video Walkthrough (GIF)

Reflection Questions

If you used any outside resources to help complete your submission (websites, books, people, etc) list them here.

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent https://www.w3schools.com/colors/colors_picker.asp https://www.digitalocean.com/community/tutorials/how-to-work-with-strings-in-javascript https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow https://www.w3schools.com/js/js_random.asp

What was a challenge you encountered in creating this submission (be specific)? How did you overcome it? (recommended 200 - 400 words)

I initially had trouble figuring out how to implement keyboard support to the website. Aside from marking the corresponding keys to each of the game's buttons, I had to make sure each of the keys had the same guessing function as clicking each button. Implementing functions that detects keyboard input and applies it to a function took some research and trial and error. At first there was an issue while playtesting to where if you held the key for too long, the game would think you inputted the same key twice since you're holding it down and mark you wrong for it. I circumvented this by only having the game register it as a guess when you release the key, but the visual and audio cues of the button are still in place when you first press down on the key.

What questions about web development do you have after completing your submission? (recommended 100 - 300 words)

I would like to learn more about file manipulation as college courses I have taken has given me entry level knowledge on file manipulation through web applications.

If you had a few more hours to work on this project, what would you spend them doing (for example: refactoring certain functions, adding additional features, etc). Be specific. (recommended 100 - 300 words)

With a bit more time and expertise, I would've wanted to have a leaderboard to compete against because as of now there is no forseeable "end" unless someone can reach 1024 points. In addition to that, I would've liked to make the website prettier, more stylized buttons and a more pleasing color pallette.

Interview Recording URL Link

My 5-minute Interview Recording

License