Reports

I took a look, and here are the observations I've made.

First, I checked the value of your victory condition when gameOver(); is called in checkAnswer();.

console.log("gamePattern ", gamePattern[currentLevel - 1])
console.log("userClickedPattern ", userClickedPattern[currentLevel - 1])
gameOver();

In the first iteration of your game, everything works fine, but there is indeed an issue starting from the second iteration, that is, after the first Game Over. From then on, your gamePattern becomes undefined. However, if I log in your nextSequence(); function, gamePattern is defined.

It seems the issue originates elsewhere. As @JaromandaX and @Barmar explained, you call userSequence(); at the start of each game, which results in multiple entries for a single button click.

How to avoid this? You currently have two solutions:

Ensure that userSequence(); is only called once Remove previous entries when userSequence(); is called again For the first solution, you can simply do:

//start game
function startGame() {
  nextSequence();
}

//start game
$('body').keydown(function() {
    if (started == false) {
        startGame();
        started = true;
    }
});
userSequence();

For the second, we’ll use off() This way, $('.btn').click becomes $('.btn').off('click').click.

Which gives us:

const buttonColors = ['red', 'blue', 'green', 'yellow'];
let gamePattern = [];

let userClickedPattern = [];
let userChosenColor;

let level = 0;
let started = false;

function playSound(name) {
  let sound = new Audio('./sounds/' + name + '.mp3');
  sound.play();
}

function gameOver() {
  playSound('wrong');
  setTimeout(function() {
    $('body').removeClass('game-over');
  }, 500);
  $('#level-title').text('Game Over, Press Any Key to Restart');
  $('body').addClass('game-over');

  started = false;
  level = 0;
  gamePattern = [];
}

//get a sequence
function nextSequence() {
  userClickedPattern = [];
  level++;
  $('#level-title').text('Level ' + level);

  let randomNumber = Math.floor(Math.random() * 4);
  let randomColor = buttonColors[randomNumber];
  gamePattern.push(randomColor);

  for (let i = 0; i < gamePattern.length; i++) {
    setTimeout(function() {
      $('#' + gamePattern[i]).animate({
        opacity: 0.25
      }, 100);
      setTimeout(function() {
        $('#' + gamePattern[i]).animate({
          opacity: 1
        }, 100);
      }, 25);

      playSound(gamePattern[i]);
    }, (500 * (i + 1)));
  }
}

//get the user sequence stuff
function animatePress(currentColor) {
  setTimeout(function() {
    $('#' + currentColor).removeClass('pressed');
  }, 100);
  $('#' + currentColor).addClass('pressed');
}

function userSequence() {
  $('.btn').click(function() {
    userChosenColor = $(this).attr('id');
    userClickedPattern.push(userChosenColor);

    animatePress(userChosenColor);
    playSound(userChosenColor);

    checkAnswer(userClickedPattern.length);
  });
}

//check if answer is right or wrong
function checkAnswer(currentLevel) {
  // let rightCounter = 0;
  // if (gamePattern.length == currentLevel) {
  //   for (let i = 0; i < gamePattern.length; i++) {
  //     if (gamePattern[i] == userClickedPattern[i]) {
  //       rightCounter++;
  //     } else {gameOver();}
  //   }
  //   if (rightCounter == gamePattern.length) {
  //     setTimeout(function () {
  //       userClickedPattern = [];
  //       nextSequence();
  //     }, 500);
  //   } else {gameOver();}
  // }
  if (gamePattern[currentLevel - 1] == userClickedPattern[currentLevel - 1]) {
    if (gamePattern.length == currentLevel) {
      setTimeout(function() {
        nextSequence();
      }, 500);
    }
  } else {
    gameOver();
  }
}

//start game
function startGame() {
  nextSequence();
}

//start game
$('body').keydown(function() {
    if (started == false) {
    startGame();
    started = true;
}
});
userSequence(); // <-- Moved userSequence() here to fix the issue

body {
  text-align: center;
  background-color: #011F3F;
}

#level-title {
  font-family: 'Press Start 2P', cursive;
  font-size: 3rem;
  margin: 5%;
  color: #FEF2BF;
}

.container {
  display: block;
  width: 50%;
  margin: auto;
}

.btn {
  margin: 25px;
  display: inline-block;
  height: 200px;
  width: 200px;
  border: 10px solid black;
  border-radius: 20%;
}

.game-over {
  background-color: red;
  opacity: 0.8;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.pressed {
  box-shadow: 0 0 20px white;
  background-color: grey;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Simon</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
</head>

<body>
  <h1 id="level-title">Press Any Key to Start</h1>
  <div class="container">
    <div lass="row">

      <div type="button" id="green" class="btn green">

      </div>

      <div type="button" id="red" class="btn red">

      </div>
    </div>

    <div class="row">

      <div type="button" id="yellow" class="btn yellow">

      </div>
      <div type="button" id="blue" class="btn blue">

      </div>

    </div>

  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="./game.js"></script>
</body>

</html>

79159311