CSD U3 Lesson 22 Array/Variable Help for Simon Type game

OK, I have some students wanting to make a game where a random pattern of colors shows up on the circuit playground, then they have to click on the correct colors on their app screen.
The place I’m hoping to find help is in the random colors being chosen.
I figure they could just make a bunch of variables called first, second, third… and have them generate a random color, but this seems rather “clunky” and not very efficient. Plus, how far would they go? What if the person playing the game goes beyond their number of variables?
So we’ve obviously learned a bit about arrays which seems like it may be the answer, but our arrays so far only have preset data in them and are limited by the amount of items we put in them.
So, does anyone have a cool/efficient way to generate a list of random colors for this game? If there is a way to make it so they are automatically added to an array somehow, even better.
Thanks, I’d sure like to help this group out, and learn something, myself, in the process!


I’m not sure I understand what the problem is because I don’t quite understand the way that the game is supposed to work. What does it mean for the person to go beyond their number of variables? As in they are playing it for a longer time than anticipated? Why wouldn’t you just need one variable per color LED (or an array that held that many elements?

If we could get some more info, or maybe a mock up or prototype of the game, that might help.


Let me see if I can explain it better. I really haven’t time to work on this myself.
The way I see it, a game like simon would need to generate a pattern of colors and would need to add another color to the pattern each round of the game. Considering it would be a pattern that would be growing, I was figuring it would need a different variable for every piece of data in that set.
It would generate a pattern like R, R, Y, B, G, B, Y, Y, B, R…(for each color)
I figure it would need a different variable for each one due to the fact that each one would have to be compared to the input from the user to see if it matches.
So problem is that this pattern would grow for each new round. So is there a way to continuously generate new variables? Could a for loop work for this somehow?

Got it. So the whole board would light up with the same color at one time, but it would do it in sequence, so all the LEDs would flash one color together, then a different one together, then a difference one together, etc., for a sequence that grows over time.

So, if I were a player, the whole board would flash green, then I would click green. Then the board would flash a (1)green, (2)red sequence, then I would click (1)green,(2)red in sequence, then it would flash a (1)green, (2) red, (3) blue sequence, then I would click those three numbers, so on and so on.

Yes, you can definitely use arrays to do this. You can do it in two different ways. The first is to add an element on the end by setting myArray[myArray.length] = newElement. Because the length of the array is one greater that the value of the highest index, that will work. The other way is to use the push command to push an element onto the end of the array as myArray.push(newElement).

I would suggest that the student first make sure this program will work with a set length sequence (say, four colors), then remix this original working program and try to expand it out to work for an sequenceLength length sequence, where sequenceLength is a variable that can be set at the beginning of the program (or chosen by the user at the beginning of each round), then remix that working program into one that increases the sequence length on each round.


Thanks a bunch! I used your suggestions and got most of it working myself. Now I just have to teach it to the girls working on the program. They probably won’t be as excited as I was to learn the knew lines of code, but they’ll like it.
I hate to do this, but I have one more question/issue. I can’t get the circuit playground to light up the series of colors for the game. I can generate the colors but I think the problem with getting them to light up is that I can’t create a delay between each of the colors so only the last color shows up. I thought maybe I could use a timed loop or a setTimout but they seem to generate errors since I’m trying to use them within a loop.
In any case, this is what I have so far…It’s been the toughest coding I’ve ever done!


This is a really advanced problem.

It’s really difficult to use setTimeout within a loop because usually you’re trying to change the behavior of the function that’s running, so you run into problems with variable scope. I imagine the problem that you’re seeing is that you want the function to run with a variety of variable values, but the delayed functions are only using the last variable value, whatever it is when the function is finally run, not when it’s scheduled to run by the setTimeout block.

To fix this, you have to force a local variable scope inside the for loop itself, basically creating a new variable to hold ONLY the certain instance of the value of the variable when the function is scheduled to run. I don’t have my board with me, so I had to do this just with console log statements, but you can see an example of what I did here:

You’ll need to get rid of my console.log statements and uncomment the buzzer, but I think this should work. If not, let me know and I’ll take a look at it Tuesday when I’m back in the office with the board.