How do I make my gameOver function in Javascript jQuery work?

I’m new to JS and I’mm doing a project but I keep having trouble with the feature that resets the game when you fail. When you press the wrong button in a memorizing game, it will reset but then the game breaks.

HTML & CSS

<!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>

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;
}

//varibles
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();
  userSequence();
}

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

I’ve asked chatGPT but it always gave me advanced stuff that I didn’t know what it did and I’d like to understand my code so if I ever come across a similar problem, I can solve it. When you press the wrong button (div element), it goes into game over, but in a glitched version. Anytime you click something, it will always be wrong even if it’s the right one. I’d like it to act normally.

You need to sign in to view this answers

Related Post