Coding my first game with JavaScript: Simon says

The challenge

So, I've decided to walk my path into Web Development with the Web Development Course of Angela Yu on Udemy. And this is one of the so-called "Boss Challenges" she proposed for the first JavaScript section. In this challenge, you have to do this:

Simon says Game

Of course, I can access the solution right away. But I wanted to see if I could get to a solution by myself. So, I am writing this post on the go, as I go through the problem.

First stage: analysis

My mind isn't on the "developer" status yet. So I really need to make a route map even for the simplest apps.
So, I headed to draw.io and made a flow of what the program should do. This helps me understand better what steps I should follow. And this is what I came up with after analysing the App Brewery example:

Second stage: let's code

Ok, so I went through the following with no major problems:

1. Creating the arrays to store the sequence of number/colors
2. Stored the 6 sounds in an "audio" array, creating the new Audio in order to access to them easily
3. Making the game starting with the "enter key"
4. As my random function was creating numbers that I had to relate with classes named after the colors, I came up with a function that would play the corresponding sound and some effects every time you pressed a button
5. Capturing the user's click and "translating" the color into a number. Also with a swith function. Once it checked the color (the class) it pushed the number into the array.

The problem

I sort of figured out how the sequence had to be. But I couldn't make the comparison between arrays to work. I kinda knew that first I had to check the values in the same position of the arrays. And also, that after that, I should check if the length of the user array was equal to the system array. Then, launch a new sequence.

I tried lots of ways and variables. After one day stuck in the same problem, I decided to see how Angela had solved it. Feeling a bit defeated, to be honest.
Of course, she had drier and neater code than I did. But for my surprise, I was in the right way. The logic, the functions and steps achieved the same goals.

So the problem was in how I was getting the value entered by the user. Which she solved with this line of code:


checkSequence(sequenceUser.length-1);


So, once you entered that, everything worked.

How I felt during the process

I feel in the need to share this, for anyone who might be going through the same I am.
At the beginning, I was feeling great. I could come up with the logic quite easily, even the way I solved how to turn the numbers into colors, sounds, etc.

However, when I got stuck in the checkSequence function I felt frustrated, irritated, a bit of rage sometimes... and of course disappointed to myself.

Looking at the solutions felt like a huge defeat to me. But then I tried not to be so harsh to myself. And see I what I had actually solved on my own, even though it wasn't as smarter and dryer as It could.

Refactoring code isn't right now my priority. It will be in the future. But so far, I am focused on making things work.

At the end, when I come across these challenges and get stuck. I think that it is good to suffer the struggle. Trying to think of a solution on my own. But you really need to see solutions, right? Otherwise, how would you ever know that things can be done with different resources or just other methods?

The results

If you want to play around, here is the final game:

Nany's Simon Game

And you can check the code in my Github Repo.

Thank you for reading!

P/S: My record is 13. Feel free to comment down your highest score!