Simon game and evil reset button

Simon game and evil reset button
0

#1

Hello fellow campers!
I’ve been stuck on Simon game halfway through for awhile now and need your help.

Here is the problem:
Computer plays the sequence just fine and I can repeat it without problem until game finishes. Currently set for 5 button sequences for testing purposes. Press the “Start” button again, it still works.
When i hit the “Stop & Reset” button the problem starts. Again, computer plays fine but I get two inputs from my button press. Like it didn’t close playerPlays function from first game.
Can you please point me to the solution. Thank you in advance!

Here is the link to my Codepen:

http://codepen.io/sulvelserija/pen/GWexMV

And here is the JS code:

var playNum = [];
var strict = 0;

function counter(){
$(’#counter’).html(playNum.length);
}
counter();

function compPlays(){
document.getElementById(“msg”).innerHTML =“Computer Plays!”;
playNum.push(Math.floor(Math.random() * 4 + 1));
counter();
console.log(playNum);
var i = 0;

var game = playNum.length-1;
var moves = setInterval(function(){
var current = playNum[i];
 if(current === 1){
   document.getElementById("msg").innerHTML ="Computer Plays!";
    $('#1').css("background", "lightgreen");
   new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3').play();
   setTimeout(function(){
     $('#1').css("background", "darkgreen");
    }, 600);
  }
   if(current === 2){
     document.getElementById("msg").innerHTML ="Computer Plays!";
    $('#2').css("background", "#ff8080");
     new Audio('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3').play();
   setTimeout(function(){
     $('#2').css("background", "darkred");
    }, 600);
  }
    if(current === 3){
      document.getElementById("msg").innerHTML ="Computer Plays!";
 $('#3').css("background", "lightblue");
      new Audio('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3').play();
    setTimeout(function(){
     $('#3').css("background", "darkblue");
    }, 600);
  }
    if(current === 4){
      document.getElementById("msg").innerHTML ="Computer Plays!";
 $('#4').css("background", "#ffff99");
      new Audio('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3').play();
    setTimeout(function(){
     $('#4').css("background", "#FF8800");
    }, 600);
  }

 if (i === game) {
  document.getElementById("msg").innerHTML ="You Play!";
  clearInterval(moves);
}
 i++;

}, 1000);
playerPlays();
}

function playerPlays(){

var x = 0;
var tempArr = [];

$("#1").on(“click”, function(){

if(playNum[x] === 1){
tempArr.push(1);
x++;
console.log(x);
console.log(tempArr);
$(’#1’).css(“background”, “lightgreen”);
new Audio(‘https://s3.amazonaws.com/freecodecamp/simonSound1.mp3’).play();
var time = setTimeout(function(){
$(’#1’).css(“background”, “darkgreen”);
}, 600);
if(tempArr.length === playNum.length){
tempArr = [];
if(playNum.length === 5){
document.getElementById(“msg”).innerHTML =“You Win!”;
playNum = [];
counter();
return;
}
return compPlays();
}
}
});
$("#2").on(“click”, function(){

if(playNum[x] === 2){
tempArr.push(2);
x++;
console.log(x);
console.log(tempArr);
$(’#2’).css(“background”, “#ff8080”);
new Audio(‘https://s3.amazonaws.com/freecodecamp/simonSound2.mp3’).play();
var time = setTimeout(function(){
$(’#2’).css(“background”, “darkred”);
}, 600);
if(tempArr.length === playNum.length){
tempArr = [];
if(playNum.length === 5){
document.getElementById(“msg”).innerHTML =“You Win!”;
playNum = [];
counter();
return;
}
return compPlays();
}
}
});
$("#3").on(“click”, function(){
if(playNum[x] === 3){
tempArr.push(3);
x++;
console.log(x);
console.log(tempArr);
$(’#3’).css(“background”, “lightblue”);
new Audio(‘https://s3.amazonaws.com/freecodecamp/simonSound3.mp3’).play();
var time = setTimeout(function(){
$(’#3’).css(“background”, “darkblue”);
}, 600);
if(tempArr.length === playNum.length){
tempArr = [];
if(playNum.length === 5){
document.getElementById(“msg”).innerHTML =“You Win!”;
playNum = [];
counter();
return;
}
return compPlays();
}
}
});
$("#4").on(“click”, function(){
if(playNum[x] === 4){
tempArr.push(4);
x++;
console.log(x);
console.log(tempArr);
$(’#4’).css(“background”, “#ffff99”);
new Audio(‘https://s3.amazonaws.com/freecodecamp/simonSound4.mp3’).play();
var time = setTimeout(function(){
$(’#4’).css(“background”, “#FF8800”);
}, 600);
if(tempArr.length === playNum.length){
tempArr = [];
if(playNum.length === 5){
document.getElementById(“msg”).innerHTML =“You Win!”;
playNum = [];
counter();
return;
}
return compPlays();

}
}
});
}

$(’#restart’).on(“click”, function(){
playNum = [];
counter();
});

$(’#strict’).click(function(){
if (strict === 0){
strict = 1;
$(’.circleOnOrOff’).css(‘background’, ‘green’);
}else {
strict = 0;
$(’.circleOnOrOff’).css(‘background’, ‘red’);
}
});

$(’#start’).click(function(){
compPlays();
});


#2

Hello there!

I had a quick look and could not reproduce the problem that you described, perhaps you changed the code between now and then?

In any case, there are a couple of issues that I noticed:

  • I’m not exactly sure what it is but something in the code seems to be making everything inside that pen slower. My MacBook is definitely not the most up-to-date, but I’ve never had this problem with larger and/or more resource-intensive projects
  • You can declare all of the audio clips as objects so that you don’t have to repeat the code over and over again. I’m not can’t remember if doing so will actually put them into memory (I am guessing that it will). There are definitely options for audio to be preloaded (please consult the MDN reference). Hopefully someone with more experience can comment on this. In any case, what you can do is var clip1 = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound1.mp3") and simply do clip1.play() when you want to play the clip
  • There is a lot of code repetition in both the playerPlays() and comPlays() functions—you can trim all of it down by a lot if you simply pass the key number into a function as a variable
  • There is no global counter to keep track of the current turn—if you keep pressing “Start Game” it doesn’t start from the beginning, but increases the counter instead

Since it’s not a minor problem, and the game seems half complete without some of logic that I consider essential to the game implemented, my advice is to play a working version of the game and describe to yourself what happens after each button press. Good luck! :slight_smile: