Need Help With selecting Random Color Select To Light Up: Simon Says Game

Need Help With selecting Random Color Select To Light Up: Simon Says Game
0.0 0

#1

Could anyone please help me with selecting a random color in my htm to light up .I have figured out how light up single color if player click’s a color but cant figure how to randomly allow the computer to lit up a color. Here is my code at codepen
https://codepen.io/Ajax-2031/pen/XegKaP. Things i have tried was an array filled with the html colors classes names ex var colors = [".red",".blue",".yellow",".green"]; colors = Math.floor(Math,random() * colors.length);


#2

You need to create a function that simulates Simon’s turn. Using code you tried before:

colors = [".red",".blue",".yellow",".green"];

you could then use the Math.random function (see the applicable FCC challenge here) to generate an index between 0 and 3 (inclusive).

Next, your function would do something similar as the click event handlers in your current code (see below).

$('.red').css("opacity",0.23);
setTimeout(function(){
    $('.red').css("opacity", 1);
}, 100);

Instead of hard coding the class reference (i.e. “.red”) you would use the index created from your random number code to retrieve the one of the elements in the colors array. and assign it to a use a variable like classVariable. You should already know how to reference a specific element in an array. If not, you should review Accessing Array Data with Indexes

$(classVariable).css("opacity",0.23);
setTimeout(function(){
    $(classVariable).css("opacity", 1);
}, 100);

Now that you have created your new function which will light up a random button, you need to call it in order to see the result. For demonstration purposes only, why not put at the end of one of your existing button click event handers? See below for an example. In the example, I use an additional setTimeout to delay Simon’s random button press by 1 second.

$(".red").click(function(){
  // your existing code below
  $('.red').css("opacity",0.23);
  setTimeout(function(){
    $('.red').css("opacity", 1);
  }, 100);
  // your existing code above

  setTimeout(function() { // this will delay Simon for 1 second
   yourNewFunction();
  }, 1000); // end of Simon timout
});

You now understand how to make Simon randomly light up a button. Hopefully, this has given you some new insight on how to progress further with your project. I would like to make one suggestion to make your code DRY. You have 4 click events that basically do the same thing (changes opacity to 0.23, waits a 0.1 seconds and then changes opacity back), plus the Simon move (in my example) does it too. See if you can take advantage of the code I have given you here to reduce the number of lines of repetitive code in your solution. You will thank me later when the project has many more lines of code.


#3

I have shorten my code and added sound files to simon game. I’m having issues running a loop for the random choices of computer lighting up colors in simon game. It is not changing colors opacity back to normal when lighting up colors. My current project linkhttps://codepen.io/Ajax-2031/pen/gGGqpx


#4

Your for loop finishes before the callback function in your setTimeout executes, so by the time it finally does execute, ranSelect has the last color it had at the end of the for loop. So, only the last color assigned to ranSelect during the last iteration will have opacity turned back to 1.

You can declare it use the keyword let instead of var and it will create closure over ranSelect, so retains the value even in the setTimeout callback function.

            setTimeout(function() {
                $(ranSelect).css("opacity", 1);
            }, 100);

I assume you are already aware that when you first click Start after the page loads, your computerDisplay function is going to randomly choose 4 colors and change opacity/play corresponding sound for color. They sounds play all at the same time, because you have no delay of any kind. You could use the same setTimeout you are using for your opacity back to 1. to create the delay.


#5

I am still having issues with mixed sounds and colors not taking turns randomly to lit up. eg red then blue or yellow then blue with interval. It seems to rapidly change colors and change sound. Here is my latest attempt at fixing the sound issue and timing of the colors randomly chosen by computer. https://codepen.io/Ajax-2031/pen/xXpgmP


#6

In the Start button click event, you have

setInterval(function() { 
    document.body.style.backgroundColor = computerDisplay(); //() to execute the function!
}, 800);

That setInterval will keep going forever and execute computerDisplay every 800ms. The computerDisplay function will then iterate and play 4 random colors/sounds.