Javascript Simon Game, how to check the answer

Question

I am trying to make a simon game with Javascript for school. I currently have the code set up to create an array sequence of colors on it's own and have also successfully saved the users answers into it's own array, which gets cleared upon a new sequence. I am now trying to see if said color sequence matches the users color sequence, but I am unsure how to check this without any loopholes. The best I have gotten is being able to test the userClicks array length to the gamePattern array length and to ensure that the last click was indeed correct, but can't figure out a good way to test if the entire userClicks array is equivalent to the gamePattern array. I will also run into the problem that the array must be filled in an allotted time, I'll probably use the setTimout() function to achieve this. There must be an easier way to test if a given array is equal to another.

/*************VARIABLES*************/
//store colors
var buttonColors = [
    "green", //0
    "red", //1
    "yellow", //2
    "blue" //3
]
//Game Pattern Storage
var gamePattern = [ /*Added From nextSequence*/ ];
var userClicks = [ /* Added from userClickHistory*/ ];

var level = 0;
var gameOn = false;

/******************BASIC FUNCTIONS*********************/

/*AWAIT KEYPRESS TO BEGIN GAME*/
//some document listener to look for keypress changing gameOn to `true`
//display the level to user
//activate nextSequence();

//log user clicks after nextSequence has executed, check the userClicks vs gamePattern
$(`.btn`).click(function () {
    var buttonClicked = $(this).attr(`id`);
    userClicks.push(buttonClicked);
    animate(buttonClicked);
    playSound(buttonClicked);

    checkAnswer(userClicks);
});

function checkAnswer(userClicksArray) {
    //display the current level to user
    //NOT SURE WHAT TO DO ANYMORE
}

/************* NEXT SEQUENCE TO PROGRESS GAME *********/
function nextSequence() {
    userClickPattern = [];
    level++;
    console.log(level);

    randomNumber = Math.floor(Math.random() * 4)
    randomChosenColor = buttonColors[randomNumber];
    gamePattern.push(randomChosenColor);
    animate(randomChosenColor);
    playSound(randomChosenColor);
}


/******************** SOUNDS AND ANIMATIONS*************************************/

//buttons animations
function animate(clickedButton) {
    $(`#` + clickedButton).fadeOut(100).fadeIn(100);
};

//Play a sound in corellation to randomChosenColor
function playSound(color) {
    var sound = new Audio('sounds/' + color + '.mp3');
    sound.play();
};

Answer 1

You should start by comparing the lengths and if they are the same, just loop through the arrays and check that the value at each index is the same.

If the array is "flat" (no nested arrays or objects), this works nicely. If you have nested objects, you'll need something like this: How to compare arrays in JavaScript?

function checkAnswer(gamePattern, userClicks) {
  const len = gamePattern.length;

  if (len !== userClicks.length) {
    // The lengths of the arrays don't match
    return false;
  }
  
  for (let i = 0; i < len; i++) {
    if (gamePattern[i] !== userClicks[i]) {
      // The values at the same index don't match
      return false;
    }
  }

  return true;
}

console.log(checkAnswer(['red', 'blue', 'green'], ['red', 'blue', 'green']));
console.log(checkAnswer(['red', 'blue', 'green'], ['red', 'yellow', 'green']));