I worked on this project for 3 weeks and it was mostly done. Then I had a few features to add and that took me another 4 weeks. Like many things in life, you spend 80% of your time on 20% of the things. With coding projects, it’s all about fine tuning.
I’m really happy with this one. I did not look at any other Simon game projects before working on mine. I had the general idea of how to go about creating it before even starting, and I was so stocked about it that I skipped over other projects - I figure the order isn’t that important. So this is built from scratch using only HTML, CSS and plain ol’ vanilla JavaScript (not even jQuery was used). I created the main game board with SVG-Edit and that took many hours as I had very little experience and was having trouble making it 100% symmetrical. I did some touch ups with Inkscape. Once it looked good I copied the SVG code and then cleaned it up and renamed all the id names. From there it was (mostly) easy to manipulate.
Here are the features:
- CSS animation on page load
- custom animated colorization of heading
- manipulated SVG code for lights
- disabling of buttons during game play between user actions
- mobile-friendly
- CSS animation when new high score is achieved
- displays last sequence of colours after game ends
- saves high score using local storage
- sound on/off toggle
- 3-speed toggle
- strict/lenient toggle
- custom sounds using the Audiocontext web API
- option to quit the game when no user action after a certain time
One user story is not completed; that is the game does not start over at 20 steps. I’ll add that feature before submitting.
If you have a moment can you please try it out and let me know if it doesn’t work on your platform of choice. The initial animation may not be centered for some, among other possible bugs.
Here it is:
Simon Game on Codepen
Thoughts?