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:
- Creating the arrays to store the sequence of number/colors
- Stored the 6 sounds in an "audio" array, creating the new Audio in order to access to them easily
- Making the game starting with the "enter key"
- 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
- 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!
Top comments (5)
I just played and got to 11. This version is a little different from other Simons I have played. In other versions, such as the one in this YouTube clip play the entire sequence to begin each round. Perhaps, this tutorial wanted to leave that part out because it adds more complexity. Not important really, just something I noticed.
What caught my eye was reflection/frustration part of your article. I just came over to read a few articles after running into a rough patch in my current project and throwing my hands up. It sounds like your on the right track though.
Hi!! Yes, I noticed that too. It is actually harder this way isn't it haha?
It wouldn't be that hard to make it play the whole sequence first.
This I just said sounds like the things that you think only takes a few minutes and keeps you up all night haha.
I felt that I needed to share the frustration part. My dev friends said to me that it is feeling I will constantly feel hehehe. So I think it is good to say all the newbies that frustration is good, as long as you overcome it.
Did you manage to solve your problem at the end?
I didn't. I put it on a lengthy todo list!! I am still a relative newbie (2+ years in), but I would say I run into some sort of small frustration daily. As time goes by though, I notice more moments of self gratification when I do figure out whatever the problem is.
Sure! Conflict makes us grow. That's what psychologists say about couples. I guess we can say the same about code. Haha
I just created an account here to say thank you! I´ve read a couple of your posts and they are soy encouraging! I´m an accountant, in my 30s too. and two months ago I realized I wanted a change and here I'am totally stuck, coding my own Simon says!! haha
Anyway.. thanks for the tips!