Simons game help

1

Hey guys im doing the simon’s game on front end js projects and I am not able to solve this

The point here is that when the user starts the game, it randomly generates the game state and then renders it using renderState function, but unfortunately the addEventsListener function seems to be firing a function as soon as it adds an event listener to a box in renderState which results in computer completng the user’s state which is basically intend to be completed by the user by clicking it with the help of userStateListener() function

var userStateListener = function(color){
  console.log("THIS SHOULD FIRE AFTER CLICKING")
  userState.push(color);
}

var renderState = function(msg){
  //alert(msg);
  for(var i =0; i < currentState.length; i++){
    document.getElementById(currentState[i]).style.background = "white";
    document.getElementById(currentState[i]).addEventListener("click", userStateListener(currentState[i]), false);
  }
  setTimeout(function(){
    for(var i =0; i < currentState.length; i++){
      document.getElementById(currentState[i]).style.background = currentState[i];
    }
  }, 1000)
}

Can you guys help me why it’s going wrong?

2

Try using this.

document.getElementById(currentState[i]).onclick = userStateListener(currentState[i]);
3

Nope doesnt work! it’s basically the same thing

1 Like
4

You should post your codepen, that would be helpful

1 Like
5

I dont have a codepen on this right now but here’s the HTML and js files

HTML FILE

<!DOCTYPE html>
<html>
  <head>
    <title>Simon's game</title>
    <link rel="stylesheet" type="text/css" href="styles/simon.css" />
  </head>
  <body>
    <div class="game">
      <div class="dash">
        <button onClick="initialPrompt(false)">Start</button>
        <button onClick="isCorrect(checkMatch(currentState, userState))">Check</button>
      </div>
      <div class="row">
        <div class="box" id="blue">
        </div>
        <div class="box" id="red">
        </div>
      </div>
      <div class="row">
        <div class="box" id="green">
        </div>
        <div class="box" id="yellow">
        </div>
      </div>
    </div>
    <script src="scripts/game.js"></script>
  </body>
</html>

JAVASCRIPT


var colors = ["red", "blue", "green", "yellow"];
var currentState = [];
var userState = [];
var generateState = function(){
  var randomColor = colors[Math.floor(Math.random() * colors.length)];
  currentState.push(randomColor);
}
var gameStep = 0;
var maxStep = 5;
var resetState = function(){
  currentState = [];
  userState= [];
  gameStep = 0;
}

var userStateListener = function(color){
  console.log("THIS SHOULD FIRE AFTER CLICKING")
  userState.push(color);
}

var renderState = function(msg){
  //alert(msg);
  for(var i =0; i < currentState.length; i++){
    document.getElementById(currentState[i]).style.background = "white";
    document.getElementById(currentState[i]).addEventListener("click", userStateListener(currentState[i]), false);
  }
  setTimeout(function(){
    for(var i =0; i < currentState.length; i++){
      document.getElementById(currentState[i]).style.background = currentState[i];
    }
  }, 1000)
}



var checkMatch = function(currentState, userState){
  var match = false
  for(var i=0; i < currentState.length; i++){
    if(currentState[i] === userState[i]){
      match = true;
    } else{
      match = false;
    }
  }
  return match;
}

var isCorrect = function(bool){
  for(var i =0; i < currentState.length; i++){
    document.getElementById(currentState[i]).removeEventListener("click", userStateListener(currentState[i]), false);
  }2
  if(bool){
    gameStep++;
    console.log("Removed user click")
    console.log(currentState, userState);
    initialPrompt(true);
  } else {
    renderState();
  }
}

var initialPrompt = function(recursive){
  if(recursive === false){
    generateState();
    renderState();
  } else if(recursive === true) {
    if(gameStep < maxStep){
      generateState();
      renderState();
    } else{
      resetState();
      initialPrompt(false);
    }
  }
}
6

You should create the codepen and then post it here, I can’t help you without that for now