Memory Game is a Light & Sound Memory game to apply for CodePath's SITE Program.
Submitted by: Oscar Diaz Vega
Time spent: 3 hours spent in total
Link to project: (https://glitch.com/edit/#!/morning-ajar-basil?path=script.js%3A1%3A0)
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)
- User has a limited amount of time to enter their guess on each turn
The following additional features are implemented:
- List anything else that you can get done to improve the app!
If you recorded multiple GIFs for all the implemented features, you can add them here:
-
If you used any outside resources to help complete your submission (websites, books, people, etc) list them here. [I used a javascript tutorial youtube video by Programming with Mosh to help me learn the syntax and power of javascript. I also used StackOverflow to help me develop the function which generates a random pattern for the game every time the game is started and to style the buttons.]
-
What was a challenge you encountered in creating this submission (be specific)? How did you overcome it? (recommended 200 - 400 words) [The biggest challenge I encountered was trying to figure out the logic of the game in a language I had little prior experience with. The game’s functionality was implemented with javascript so it was difficult trying to make a game with a language I did not really know how to use. Before this project, I had only ever used javascript when working through Free Code Camp’s website development course. In this course, I had step-by-step guidance, so it was easy. However, when I tried implementing the logic of this project without CodePath’s provided guide, I was really lost because my experience with javascript just wasn’t there. To overcome this, I looked at all of the references given by CodePath. For example, I read the documentation provided for the getElementById function to learn what the function does, how it works, and how it can be used in different situations. Another thing I did to overcome this lack of javascript experience was watching a tutorial for javascript on youtube. Through this tutorial, I learned why javascript is so powerful in web development and some essential methods in javascript. In the end, I used CodePath’s provided logic for the game because I simply did not know how to approach it. However, I made sure that I understood every aspect of the logic and I now believe that if I did this project from scratch, I could implement the game’s logic on my own.]
-
What questions about web development do you have after completing your submission? (recommended 100 - 300 words) [After getting some HTML, CSS, and javascript experience under my belt, I'm left wondering about other Javascript frameworks. I have heard and read a little about different javascript frameworks and libraries like Node.js, React, and AngularJS. I'm left wondering what these frameworks are for, why they are used, what makes them so popular, and what are the differences between each framework. I am also left wondering how the back ends of websites work. The light and sound memory game included mostly front-end work, so it left me thinking about how back-end programming looks. Finally, some questions I have about web development as a whole is if a web developer has to have artistic talents in some sense. I ask this because almost all popular websites nowadays are beautifully structured, so I wonder if the developers create the layout of a website and program it, or if a designer designs the layout of a website and the programmers simply program the designer's website layout?]
-
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) [If I had more time to work on this project I would first try to make the website look better. I’m a strong believer that the look of a website is among the most important aspects of a website becayse if a website looks good, more users will be inclined to visit and revisit the website in the future. Another important aspect of a website is its functionality. That’s why I would also try to improve the game. As it stands currently, my project repeats the same pattern every time anyone plays the game. So the first thing I would try to implement is a function that sets a random pattern every time the game is started. Then, I would try to implement different difficulties for the game. In easy mode, the pattern would be shown at the same speed every time, in the medium mode the speed of the pattern would increase, and in hard mode, the speed of the pattern would increase once again and the buttons would shift around.]
My 5-minute Interview Recording
Copyright [Oscar Diaz Vega]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.