Problem with Simon Game pushing values more than once

Code Feedback
1

Hi all, I have a problem with my Simon Game which I can’t seem to debug. Relevant code snippet below and the whole of the code can be found here: https://github.com/JamesRiall/Simon-Game

Essentially the program is adding “red”, “green”, “blue” or “yellow” to the array clicksInRound whenever the relevant panel on the game is clicked. I can then use this clicksInRound array to check against the sequence the player should be following to either do nothing (if the selection is right but they haven’t completed the round yet), move them onto the next level (if selection is correct and they’ve completed that round’s sequence) or reset the game (if wrong).

My problem is that when I play through the game, the clicksInRound array is having too many values pushed to it. Below is the result of console.log of clicksInRound when I play a game and click on yellow twice (with yellow the first color in the generated sequence):

The output I want here is just “yellow” for the first two lines (the first click my selection is yellow in round one, and then second click my selection is yellow only so far in round two). However, I’m getting the third line [“yellow”, “yellow”] which is throwing out all of my checks. If I click yellow then blue in the second round, my clicksInRound array will be [“yellow”, “yellow”, “blue”] when I want my output to be [“yellow”, “blue”]

Can anyone diagnose the problem from the code snippet below or from my full code on GitHub?

Thanks!

//function to check if the click is incorrect or correct.
function checkClickIsCorrect() {
  console.log(clicksInRound);
  if (currentRoundSequence[whereInRound-1] != clicksInRound[whereInRound-1]) {
    if (strict === true) {
      //GAME OVER NOISE AND MESSAGE
      running = false;
      $("#start-reset").html("Start");
      round = 0;
      $("#round").html(round);
      clearSequence();
    } else if (strict === false) {
      //ERROR MESSAGE AND ROUND RESTART MESSAGE
      round--;
      newRound();
    }
  } else if (arraysEqual(currentRoundSequence, clicksInRound) === true) {
    newRound();
  }
}

//check array iteratively to see if they are equal
function arraysEqual(arr1, arr2) {
  if (arr1.length !== arr2.length) {
    return false;
  }
  for (var i = arr1.length; i--;) {
    if (arr1[i] !== arr2[i])
      return false;
  }
  return true;
}

//Function to run at the beginning of every new round.
function newRound() {

  //function to generate new round sequence
  function generateNewRoundSequence() {
    for (i = 0; i < round; i++) {
      currentRoundSequence.push(sequence[i]);
    }
  }

  //if player gets to round 21 (i.e. completes 20 separate rounds) then they have
  //achieved victory.
  if (round === 21) {
    //SOME COOL VICTORY STUFF
  } else {
    //add one to the round counter
    round++;

    //reset clicks in round var
    clicksInRound = [];

    //reset whereInRound var
    whereInRound = 0;

    //update round display
    $("#round").html(round);

    //display the sequence for the current round.
    displayCurrentSequence(round);

    //wipe the currentRoundSequence array;
    currentRoundSequence = [];

    //update the currentRoundSequence array to reflect the addition of the next step.
    generateNewRoundSequence();

    //what to do when user clicks color panel while playing
    $(".game-button").click(function() {
      if (sequencePlaying === false && running === true) {
        if ($(this).is("#red")) {
          playRedInSequence();
          clicksInRound.push("red");
          whereInRound++;
          checkClickIsCorrect();
        } else if ($(this).is("#blue")) {
          playBlueInSequence();
          clicksInRound.push("blue");
          whereInRound++;
          checkClickIsCorrect();
        } else if ($(this).is("#yellow")) {
          playYellowInSequence();
          clicksInRound.push("yellow");
          whereInRound++;
          checkClickIsCorrect();
        } else if ($(this).is("#green")) {
          playGreenInSequence();
          clicksInRound.push("green");
          whereInRound++;
          checkClickIsCorrect();
        }
      }
    });
  }
}
```
2

console.log(clicksInRound); (third line of your snippet) will print out the entire array each time - that’s why it’s getting longer. You have to specify the index if you just want to print one value.

Did you want to just print out the previous color? Maybe try something like console.log(clicksInRound[whereInRound]); to just print out a specific index. Also call checkClickIsCorrect() before increasing whereInRound.

3

clicksInRound should display the colors I have clicked within this round and then reset once the round has completed. With the console.log I’m trying to print out the contents of the array after every click in the game to see what it’s doing - at the moment too many values are being pushed to the array with some clicks.

This is the problem at the moment.

Assume the random generated sequence is R, G, Y, B, R.

Round 1 - player should click R once and the round is completed. clicksInRound should hold R once the correct button is clicked and then clear back to an empty array once the round is completed.

Round 2 - player click R first (now clicksInRound = [R]) then G second (now clicksInRound = [R, G]).

However, when I do this in my program - round 1 works fine, but for round 2 -

  • on the first click of R in round 2, clicksInRound = [R, R] and the game resets because the player inputted sequence is wrong. It seems that when I click on the second round onwards, clicking the colors is adding more than one value to the clicksInRound array rather than just adding once value to the newly emptied array.