Memory Game is a Light & Sound Memory game to apply for CodePath's SITE Program.
Submitted by: Juan Rodriguez
Time spent: 8 hours spent in total
Link to project: https://glitch.com/edit/#!/light-and-sound-1jc1?path=README.md%3A11%3A14
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:
- N/A
- If you used any outside resources to help complete your submission (websites, books, people, etc) list them here.
- What was a challenge you encountered in creating this submission (be specific)? How did you overcome it? (recommended 200 - 400 words)
A challenge I encountered in creating this submission was understanding what it was that the HTML, CSS, and JavaScript code was actually doing to the website I was building. I was not only trying to build the website with help of the Code Path instructions, but I was also trying to learn and understand what everything was doing. One of the concepts I had trouble understanding was how it was that the different language files were able to interact with each other, which is something that was new to me. I was able to understand this new form of coding by not thinking of the languages as separate but rather thinking of them as extensions. The JavaScript and CSS files are like modules that get imported to the code to help complete the website. With the help of the Code Path resources I learned how JavaScript uses DOM to interact with the content and structure of the page or rather the HTML. I also then understood how the CSS uses the ids and classes within the HTML file to apply certain properties to the objects with those tags. Along with some research of my own I also understood how the HTML file also incorporated the functions written in the JavaScript file and the CSS styles to format the content and make it interactive. This new found understanding helped me to incorporate a function of my own to further the capabilities of the website. I was able to write a JavaScript function that would randomize the pattern which the website shows to the player every time they play.
- What questions about web development do you have after completing your submission? (recommended 100 - 300 words)
Personally, I am a very curious person so when I completed the submission my first question was: “what other types of websites can you build these tools (JavaScript, HTML, and CSS)?”. Another question I had was: “what other tools could you use to improve the websites you build to make them more interactive and have more capabilities?”. Before having started this project I had heard the words “frameworks” and “databases” associated with web development, which made me more curious to learn back-end development which was not done in the project. After finishing this submission I can say that I will definitely explore web development further on my own and learn about what other types of websites can be built as well as both front-end and back-end development.
- 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 spend the time making the game more fun and interactive. I would try to also give the player more control over the game so that it is more enjoyable. One way I would make the game more fun is making the tones the buttons play more of a melody and not as harsh. This would just have to do with altering the sounds to make them more pleasing to hear. I would add an option to also input the amount of rounds the player wants to go through to allow them to play for as long as they want. I would lastly make the time the sounds play in speed up as the rounds go on to engage the player more and retain attention because the time it takes to complete the sequence can get long. All of these additional features would help the player enjoy the game more and make the game more interactive overall.
My 5-minute Interview Recording
Copyright Juan Rodriguez
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.