FCC Challenge — Simon Game
FCC stands for FreeCodeCamp
This article was inspired by Chingu Cohorts
On completion of the Simon Game project; I earned my FCC certificate. What a journey!
10 projects, several algorithm challenges and a major boost in my HTML, CSS & JavaScript skills. I am on my way to becoming a good developer; perhaps a great one (*winks*).
This article is about the challenges I encountered in completing the Simon Game, and how I approached it. I hope it helps someone out there facing the same problems.
The Simon Game was the most difficult challenge of the Front End Certificate. I had first encountered the project in late March, 2017 and attempted solving it. I had no idea how to go about it and considered copying someone else’s code; but didn’t even understand what I was copying. It was very disheartening. I felt inadequate, not good enough. It was a terrible feeling. This was a really difficult period of my life. I literally quit FCC, and told my best friend that FCC wasn’t for me. I went on a 3 month hiatus from FCC, to improve my HTML, CSS & JavaScript skills and build personal projects.
At the end of the 3rd month (June, 2017); I decided to apply all the things I had learnt to build the Simon Game. I completed it in 4 days. It was amazing, beautiful things happen when you persist.
What is Simon Game?
Simon Game is a simple game whose goal is for the user to repeat the pattern showed by the program. With each round a new step is added to the pattern, making the game much more difficult with every round. Additionally, the program should play a different sound for each field that is activated. On top of that, you have to enable a user to switch between strict mode, which restarts a game whenever user selects wrong field in a pattern, and normal mode which only repeats the pattern subsequent of the wrong button being pressed.
The Simon Game is a great test of your memory and an interesting challenge.
You can play the demo here.
User Requirements
The user requirements were long and I didn’t know where to start from.
- User Story: I am presented with a random series of button presses.
- User Story: Each time I input a series of button presses correctly, I see the same series of button presses but with an additional step.
- User Story: I hear a sound that corresponds to each button both when the series of button presses plays, and when I personally press a button.
- User Story: If I press the wrong button, I am notified that I have done so, and that series of button presses starts again to remind me of the pattern so I can try again
- User Story: I can see how many steps are in the current series of button presses.
- User Story: If I want to restart, I can hit a button to do so, and the game will return to a single step.
- User Story: I can play in strict mode where if I get a button press wrong, it notifies me that I have done so, and the game restarts at a new random series of button presses.
- User Story: I can win the game by getting a series of 20 steps correct. I am notified of my victory, then the game starts over.
My ToDo list:
1. Build game layout
2. Create Algorithm:
— Think about the problem
— Write Pseudocode
— Write Code
— Cross-check example 1 and example 23. Refactor Code
4. Comment Code
5. Beautify UI: add colors and google fonts.
The layout of the game was inspired by example 1
The game’s Algorithm was difficult. I had to do a lot of thinking, and having just read books 1, 2 & 3 of the YDKJS series; helped a lot in terms of variable scopes, understanding how the JavaScript engine works and how to write proper JavaScript code.
I found that thinking about the problem first i.e. writing the pseudocode for the game was the most important part.
Once I had solved the game in English, I could easily write computer code for it. Cross-checking other implementations of the Simon Game too helped.
My Simon Game was based on computer button presses and then allowing the user follow the pattern.
Here is some of the pseudocode I started with:
(1) Generate random series of button presses (1–20) steps. Store in array.
(2) Counters to keep track of computer button presses based on step (1) and user button press
(3) Computer presses button, waits for user to press button, and cross-checks. (Stores user press in array)
(4) If user button press the same as computer button press, computer moves on to the next button press.
On writing the computer code for the game, I found flaws in my thinking, and had to test and tweak my solutions until the game worked. It was a very iterative and tasking process, yet in some way; rewarding. After building the game, I made an effort to cultivate world-class practices; by refactoring my code and commenting it adequately. I hope to have a code review on some of my future work.
Results
The game was built with Vanilla JS, and it fits nicely on the screen without any Bootstrap.
You can view the live version here
The code is open source and you can view it on github
Lessons Learnt
The biggest lesson I learnt was:
You have to persist. It doesn’t matter how long it takes, no matter how slow it may seem. You’ll get what you want if you keep working at it.
The journey is the reward, and reaching is enough. The challenges make you. No matter how difficult it may seem at the moment. Just keep working, improving. You can do it. It just takes time and effort.
