by Neha Bhole
Timeline: 6 days
🕹️ Try Simon
Simon is a classic, fun and engaging web browser game that puts your short-term memory to the test! With each level, the sequence of light and sounds becomes longer, challenging players to remember and repeat the pattern. Developed using HTML, CSS, and JavaScript, this game is sure to provide hours of entertainment while also sharpening your memory skills. Give it a try and see how far you can go!
Built in 7 days, I chose to build this game to get a better a understanding of asynchronous functions.
To play, click here: Simon
Simon is a desktop only game and can only be played on a web browser using the mouse. No installations required.
- Type your name or alias in the input box and click enter.
- Click the simon button in the center of the color tabs to start.
- Wait, watch and remember Simon's order of color and sounds.
- When its your turn, click the color tabs in the same order as Simon.
- Remember, you get 5 seconds to respond once its your turn!
- If your order matches Simon's, you level up.
- If you make a mistake or dont wait for Simon to finish his turn, game over.
Timeframe: This project was built in 6 days.
Team: This is a solo project built by: Neha Bhole 📨
Technologies used for this project are:
- HTML5
- CSS
- JavaScript
- Deployed on GitHub Pages
- Node.js and Jest used for testing
Project Requirements:
- Render a game in the browser.
- Include win/loss logic and render win/loss messages in HTML.
- Include separate HTML, CSS & JavaScript files.
- Deploy game online using GitHub Pages.
Wireframe was hand drawn for this project.
Pseudocode can be found here: Simon Pseudocode
Below is a screenshot of the pseudocode.
To create Simon, I started by designing and building the user interface using HTML and CSS. I wanted to create a simple interface that would allow players to easily interact with the game and focus on the challenge of remembering and repeating the patterns of colors and sounds.
Once the UI was in place, I began working on the JavaScript functions that would respond to user interaction and control the game logic. This included implementing the game's core functionality, such as generating random patterns of colors and sounds, recognizing when the player had made a mistake, and displaying win/loss messages to the player.
During the development process of Simon, one of the main challenges I faced was implementing the logic for the game to recognize when the player had made a mistake and respond accordingly. This required me to carefully consider the timing and sequence of the game's interactions.
One of the key wins of this project was the successful implementation of asynchronous functions, which allowed the game to run smoothly and respond quickly to user input.
Overall, building Simon was a challenging but rewarding experience that helped me to develop my skills in HTML, CSS, JavaScript and particularly async functions.
Although there are several future improvements and features that could be added to this project, I will not be working on further development at this time. As my first project in the bootcamp, I wanted to showcase what I could build in a week and demonstrate my skills in HTML, CSS, and JavaScript.
That being said, here are some ideas for future improvements and features that could be added to the game:
- Add buttons on/off, speed selector
- Add sounds for game over and level up
- Add buttons to turn simon on and off, choose speed, and number of colors and tones
- Make it responsive
This is a solo project built by: Neha Bhole 📨