Help with simon game challenge

Ok, so I am stuck on the last challenge right before I get my front end certificate. This challenge has been quite daunting for me, and while I have some of the basic stuff down, I still have a lot to go, and I am coming here asking for advice on how to move forward in order to finish this project. The things I already have done are:

  1. HTML/CSS the way I like it
  2. Buttons are able to react to an array through JS
  3. First button in array plays when I hit a “start” button

Other than that, I still need to add a lot of stuff, one of the main things being User input. The problem I’m struggling with is I can’t think of a good way to take an input from the user, and immediately check it with which button should have been pressed. I’ve tried a few different things and nothing has really worked all that well, so now I turn to the forums for some advice going forward.

first of all, i’m int he exact same boat. I’m even half way done with data vis cert and back end cert, and the only thing left on the front end cert is that damn simon game.

I’m a little further on than you are.

You say you’ve tried a few different things…what have you tried so far? It’d be easier to offer feedback…could be what you’ve tried is a good idea and just needs different implementation.

So far my main obstacles are taking user data, and then checking to see if it matches that current round, then adding a new random turn to the next round. I have thought about maybe adding an array as all of the player’s moves, but I don’t know how I’d check it instantaneously the second the player get’s something wrong the in the sequence. As well, I don’t know how I would be able to move onto another sequence after my first one is done. I’ve been doing this all on github if you would like to take a look at what I’ve got goin on.

Disregard the descriptions of the commits, they’re more of a mental note than much else, but I decided to use github so that I could learn how the whole system works while I learn how to code this

Hey, I finished this yesterday and it was the hardest one in a way. This is how I solved it.

When you hit start, the computer should select one button randomly and play it, then add an element to a special array arr0 for the random choices eg 1, 2, 3 or 4 corresponding with the button picked.
Then when it’s your turn, when you click a button, it should add an element to a special array arr1 of your choices. If the last element in your array corresponds with the element in the same position eg arr0[3] === arr1[3] in the computer’s array, then it is correct. If not, it is wrong.

From this I think you can figure out how to proceed to the next level and work it out.

1 Like

@ed-kahara Thanks! That really helped me in my next step, however, now I face the issue that while the program is able to see that a first input is correct, after the first round it goes back to mush. Please help. The Javascript to my project is linked below.

i created the entire sequence of 20 at once for the computer to play sequentially. If it’s the first round, it plays the first element, 2nd round, plays the first 2, etc.

When it is the players turn, it checks the player input against the “correct” answer by comparing the input & the sequecne in the players turn with the array already generated.

I’m going to do some reorganizing first, because this code is kind of everywhere.
First, put everything that will happen to buttonOne when it is clicked into one function eg
function buttonOneHit () {
//play sound one
//light up button one
}
button one on click function() {
buttonOneHit()
}
having a different function for light up is also irritating. Just put the light up 1 code in the buttonOneHit function, it will make adding and removing attributes unnecessary. The setTimeout in light up is pointless when you already have a setTimeOut in animate, plus its 300ms which means it animates instantly anyway.

also in new round

Second,
why does sequence already have one element inside it. It should be empty when start is clicked so any random button can be selected.
do var x = the random number between 1 and 4, actually your random number is between 0 and 3 here, not 1 and 4
so make x = math.floor(math.random() * 4) + 1
then push that number into sequence

also in animate function, replace setInterval with setTimeOut and don’t clear interval, in fact using the variable is unnecessary.

try this
function animate(i) {
setTimeOut(function() {
if(sequence[i] === 1) {
buttonOneHit()
}
//do this if else up to button 4
i++
if(I < sequence.length) {animate(i)}
}, 600)
}
every 600ms it will play the next tune

then in newRound put animate(0) instead of animate(sequence) so it knows to loop through sequence from the first song as you move on to he next level

third
I can’t tell which level I am in
set var level = 1
then when the correct sequence has been repeated level++ is done and the next level is printed
here your check function is the issue
when you click a button there are two possibilities when a number is pushed into playerSequence:
either playerSequence.length === sequence.length or not equal
if they are equal in length and the last elements in both arrays are equal, do level++ and run nextRound(), and also empty playerSequence. A new number will be added to sequence when next round runs again, and when animate runs it will start again from scratch, lighting up previously used lit buttons and adding a new one at the end. Then because playerSequence is empty now, you can restart the button clicks

if not equal in length, then check whether the last element in playerSequence is equal to the element in the same position in sequence,
if it is show that it is wrong and run animate() so it replays the sequence again, and empty playerSequence so you can start the round over

so correct your check function appropriately

You can clean up code a bit and make reusable components by accessing the buttons via jquery using child. I’m not looking at my code but if you have
(Using crappy pseudocode bc on mobile plus challenges with markup on mobile

div id=board. //parent
div //child 0
Div //child 1
Div //child 2
Div //child 3
/div /*end board div

You can access each of the 4 children of board by positions 0,1,2,3. Check jquery docs for syntax. This lets you use one call to get “this” child by id, then plan corresponding sound using same child number for the array element

I agree. Thanks for making it clearer.