Memory Game is a Light & Sound Memory game to apply for CodePath's SITE Program.
Submitted by: Biraj Ghimire
Time spent: 5 hours spent in total
Link to project: https://glitch.com/edit/#!/the-memory-sound?path=README.md%3A9%3A42
The following required functionality is complete:
- [X]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!
Here's a walkthrough of implemented user stories:
- If you used any outside resources to help complete your submission (websites, books, people, etc) list them here.
w3schools and Stackoverflow
- What was a challenge you encountered in creating this submission (be specific)? How did you overcome it? (recommended 200 - 400 words)
While completing this project, a challenge that I ran into was not getting the buttons to light up after I would click “start.” When I was doing this project, I was moving at a steady pace, trying to learn as much as possible, and make sure that I did everything correctly. Though I was doing all of this, I still could not figure out why the buttons wouldn’t light up automatically. The majority of my time doing this project was spent trying to debug this. However, after closely reading through my code several times, I realized that it was a silly error where I had forgotten to label the numbers in order from 1-6 for the “#button1.lit” code. Though this was a small error, it made me realize the importance of small nuances when it comes to coding and how overlooking even the simplest things can make such a difference and be some of the biggest challenges.
Another challenge that I ran into wasn’t necessarily with the code itself but with my internet browser. When I got to the part about adding audio using javascript, I followed the directions step-by-step, but when I clicked on the buttons, there wasn’t any sound playing. I repeated the steps several times but I was still unable to get the sound to work. I also used stackoverflow to try and see what I was doing wrong, but I couldn’t find an error. That is when I decided to switch my browser to chrome and the sound began to work. Though this process was a hassle, I was able to deeply pay attention to the concepts and learn a lot about javascript in the process as I was trying to see what the error was.
Overall, I have learned a great deal from this experience and the whole project in general, and I am eager to continue learning more about computer science.
- What questions about web development do you have after completing your submission? (recommended 100 - 300 words)
After completing the submission, I have two main questions about web development. First, I noticed that HTML, CSS, and Javascript allow you to make amazing webpages, but let’s say I wanted to make a more complex website and add a lot of backend features to it, would I be able to do that by just knowing these languages or are there more things that you would have to combine? My second question is how can one go about making the webpage look pleasant for someone using it through a phone? In our world today, most people tend to use their mobile devices to search for almost everything, and I have noticed some websites adjust terribly to mobiles. So how can one go about doing this and also would that take a significantly longer time to do or is it just a few things that need to be added?
- 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 a few more hours to work on this project, I would try to make this game more interactive. First, I would try to add in cool additional features, like a timer and soundbar, that would make the game look more sophisticated. Then, I would focus on trying to make the game more interactive by adding a multiplayer feel to it. For example, I would try to create an account-based feature by adding a login system to the game and generate leaderboards so that people can compete against their friends to see who can get the highest score. Though I do think this would be hard and require a lot of time, I think that it can definitely be done with just HTML, CSS, and Javascript. In order to do this, I would probably use a lot of online resources, but I think that doing something like this would give me an even deeper understanding of the languages and definitely benefit me in strengthening my web development skills.
Copyright [Biraj Ghimire]
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.