Simon is a memory game! It is similar to those awful self-intro circles where you have to remember everyone’s name and keep adding to the list… except not as awful, and kind of fun.
I got to play with border-radius again to make the buttons. I once again drew out the four squares to figure out which values to enter. I had thought of creating the “arc” shape but realized I could just put a center circle to create the same look.
It was difficult to make the buttons appear to “light up”! I tried using lighter colors and adding a white glow but they just looked duller. I went with a darker color to begin with instead. Color charts are so useful!
I wrote a few functions: one to create a game pattern, one to show the pattern, one to light up individual buttons, and one to get user input and compare it with the game pattern. The one I got stuck on was showing the pattern! All the buttons would show at the same time and it would appear as all but the newest one lighting up. I added a lot of console.log() lines to my code to figure things out! Setting a timeout before lighting up the buttons was the solution.
Another problem was I forgot to increment or reset values in different places. For example, I had a counter for the index of user input values in an array, but I forgot to reset this after moving to the next level. This would result in a fail at the following level even though the user pressed the right buttons! (Angry red background…) I need to practice writing cleaner code so that it is easier to review and check the logic. I also need to keep reading so that I’m not stuck on the same few concepts!
Day 28 – Simon