I need some help with the Simon Game

I am just feeling really irritated and lost right now. I’ve been working on this project for about three weeks now. I’ve been feeling really good about my coding until now. It makes me feel like I just suck and shouldn’t even try. But that’s a pity party and that’s not what I’m coming to you guys for.

I just need some advice/suggestions/pointed in the right direction to learn more. I can not get the flippin’ setTimeout’s to work after the human player clicks the button(s).

Like, it should go:

computer makes selection
player imitates selection correctly
computer shows same selection again plus a new one
and so on.

And I’ll feel like I’ve coded it to do that, but then when I try to play, the selections go crazy and more get added and I’m just losing my mind with it. I’ve read websites, articles, the forum, etc. and I just don’t get what I’m doing wrong on that end of things.

My Simon game (so far), although I’m not happy with where it’s at right now at all…

Ok scrap the setTimeout() … think you have 10 … look up setInterval() and clearInterval()

Dont try to write the whole project … see if you can get a small piece to work then try another piece eg when i was doing this i wasnt actually doing the project i was helping someone with there simon code and decided to see how i would write code that would flash the div color and play the sound (I was curious as to how i would do it when i got around to doing the project)
so i just created an array and called it panels = [‘red’’,‘green’,‘yellow’,‘blue’]
then worked on how to get red to flash play note go back to red, then green to flash play note go back to green etc
so this is where setInterval() comes in … setInterval() runs until you tell it to stop using clearInterval() and it runs at intervals that you set … so if you dont call clearInterval it will never stop.
setInterval takes a function and a time eg setInterval(function(){},500) which means every 500milliseconds this setInterval will run so if i assign this to a variable eg let start = setInterval(function(){},500) i can then stop it by calling clearInterval(start)
now in my case i declared start as a global eg let start; then in my function had …
start = setInterval(function(){},500)
ok that at the moment is doing nothing so i created a function to check panel color and flash it eg if it was red to change it to light red … had a variable called flash set to false and if false i play sound and set flash to true and i checked the panel number i was doing if i had 4 colors i would increase a variable i +=1 and only when i was no longer <panels.length i would call clearInterval(start)
so lets call this function compPlayNotes() i would put this in my setInterval
eg start = setInterval(function() { compPlayNotes()}) and to call it i would wrap it in a function
eg function playing() { start = setInterval(function() { compPlayNotes()}) }
and call it by … playing()

after i got this working i just cleared panels array and added a button to html … the added a click function that called a function that would randomly add a color to the panels array when i clicked it eg created a function called randomColor() all it did was choose randomly a color from a choice of red , yellow green and blue and pushed it to the panels array

when i had this working i then started looking at how to get the player to follow the pattern … but think you should just focus on the above part first and see how you get on.
ill be available to help you if you are having any problems … just dont wait 3 weeks to post

I don’t really have issues with anything that have the ‘flashes’ happen at certain times. I just can’t freaking understand it, using either setTimeout or setInterval (which I’ve been working on trying to understand and do all night) and none of it ever works. Sigh.

your still trying to do to much at the one time … just focus on comp adding a color to an array then comp flashing the board tile and playing the sound for each one that is added to the array. That would be plenty to start with and even that is a lot … if i were you i would make a practice pen just for that ignore the project and when you got it working you can then add it to the project and start on next bit (thats what i do)
anyway here is a repl using setInterval … have a look at it and see how you could use it for the project … its very similar to what i do for my simon … but without giving you the answer

This is really helping. Thank you, John. One question, because I haven’t learned ES6 yet: what does this part mean:

(flash === false)?

That is not ES6. That is a Conditional (ternary) Operator. and has been part of JavaScript since the beginning.

Okay. Well, either way, I haven’t learned that, so I didn’t know. Thanks for the link.

(flash === false)? d('Lighten color'): d('Darken color');

is the equivalent of:

if (flash === false) {
  d('Lighten color');
else {
 d('Darken color');

Ahhhh, that makes sense! I knew it was something along those lines, but I just kept confusing myself. Thanks!

Well how are you getting on … hope you keep us posted on your progress

Absolutely! I’ve been busy the past few days with work and parenting duties, so I haven’t been able to work on this as much as I’d like. But it’s Friday night, I’m off for the weekend, and I have no plans so that means coding time for me! :slight_smile: I think I’ve finally gotten the hang of setInterval, and now I’m working on what happens after it plays the sequence of active circles, or whatever you wanna call them. :stuck_out_tongue: Your code ^ up there definitely helped me a lot.