"Simon Game" Help

"Simon Game" Help
0

#1

Hello, I seem to be having a problem with my Simon Game. I cannot find a way to stall for the next button change that the program is supposed to make. As you can see from my program, the properties of the buttons are changed simultaneously and I would like to allow for some gap time in between. However, I am not sure how to do that. I have labeled the part in my code where I would want to add this functionality. It has been commented as //Help. It would be really helpful if someone can show me how I can perform this task.


#2

I am not sure if this is causing some of your problem, but if you check your console (Ctrl + Shft + I in Chrome), then you will see the following line has an error:

originalOpacity = $el.css("opacity");

Once your script errors out, nothing else happens. Fix this issue and see if anything is still broken.


#3

Thanks for your response. However even after I changed it, I do not get the pause between the button presses that I am looking for. Is their some way I can pause between when I am transitioning from changing the properties of one button to another.


#4

@mthaker1

I’d suggest using setTimeout( () => {}, i * interval) for that, where i is the number of turns and the interval is however much time you want between turns.


#5

Okay I will try that and see if it works.


#6

Have you tried to use .delay() in Jquery? This seems like what you might be wanting to accomplish.


#7

Thanks for the reply. I’ve gotten everything to work except for the delay between the flashes. I tried using .delay() in many areas however it did not work. Maybe I could get a hint as to where to place my .delay() function.


#8

I would recommend using a setTimeout function as well, and putting them somewhere inside your .click functions. I’ve tried using .delay() but it also didn’t work out for me.


#9

Yes, I just tried using the setTimeout function, I used a setTimeout function with a longer duration to light up the function and a setTimeout function with a shorter duration to reduce the opacity of the button to its original state. However, this solution does not seem to work as well. So I am not sure where to place my setTimeout function to ensure that the program works correctly. My program seems to be working well in all other categories but I just need a little pause time when transitioning between buttons.


#10

Another problem I found is that the opacity doesn’t change back to normal while the program is running. Thus, I was wondering if someone could look at what I’m doing wrong and mention things I might need to add to my program to make it work.


#11

Ok, I’ve taken a closer look at your code and come up with something:

   function displayCompTurn(){
     for(var i = 0; i < series.length;i++){
       playButtons(series[i], i);
     }
  }
  
  function playButtons(element, i){
    
  setTimeout( function () {
      if(element == "red"){
      redSound.play();
    }
    else if(element == "green"){
      greenSound.play();
    }
    else if(element == "yellow"){
      yellowSound.play();
    }
    else if(element == "blue"){
      blueSound.play();
    }
      console.log("Working");
      document.getElementById(element).style.opacity = "1";
      
      setTimeout(function(){
      document.getElementById(element).style.opacity = "0.4";
    },600);
    }, i * 650);

This sets the timeout between computer turn displays to 650ms times the number of turns, and then removes it 600ms after it’s been called. You’ll still want to add a delay between the player’s last action and the next computer turn, just for playability.


#12

Hi, thanks for your reply. I have implemented your method and it does fix some of the problems I was having. However, as per your suggesstion on adding a delay between the players’ last action and the next computer turn. I have no idea how I would this and where I would add it into my code. I tried adding it to my for loop, as so

function displayCompTurn(){
for(var i = 0; i < series.length;i++){
playButtons(series[i]);
setInterval(
function(){ widget.Rotator.rotate() },
3000
);
}
}

But I did not achieve the function that I was hoping for. So I just need help as to how and where I will need to place the delay, to achieve the desirable function.


#13

@znicholasbrown has given you the code as example of how to accomplish the delay. Take some time to study his code (putting console.log statements in if that helps you) until you understand exactly why his code works. Once you do this, you should be able to figure out how to implement the other delays you want. It is better for your learning experience that you are not handed the total solution to what you want to achieve. Even if it takes several hours or days, try to understand the why, so that you can understand how, when, and where to put such code in your existing or future projects.


#14

Thank you so much for helping me solve this problem. I found the problem with my code. It turned that there was a missing element that I forgot to include in my code and I always thought it was there when it really wasn’t. It was a careless mistake. However I would like to thank the freecodecamp forum, rmdawson71, znicholasbrown, and migohunter for providing me with advice throughout the project. Thank you very much guys.


#15

Your game has made great improvements. I do notice one thing kind that still is a problem. If you get something wrong, then there is almost no pause between when it starts to repeat the pattern again for you.


#16

I just fixed that problem. Thanks for the suggestion. I found it really helpful.