game.js

$("h2").hide()
$(".la").show()
var buttonColours = ["red", "blue", "green", "yellow"]
var gamePattern = []
var userClickedPattern = []
var started = false
var level = 0
$(document).keypress(function() {//1 by pressing a key it start by giving a random color
  if (!started) {//the color generates by using the Math.random function
    $(".la").hide()
    $("#level-title").text("Level " + level)
    nextSequence()
    started = true
  }
})

$(".btn").click(function() {

  var userChosenColour = $(this).attr("id")
  userClickedPattern.push(userChosenColour)

  playSound(userChosenColour)
  animatePress(userChosenColour)

  checkAnswer(userClickedPattern.length-1)
})

function checkAnswer(currentLevel) {

    if (gamePattern[currentLevel] === userClickedPattern[currentLevel]) {
      if (userClickedPattern.length === gamePattern.length){
        setTimeout(function () {
          nextSequence()
        }, 1000)
      }
    } else {
      playSound("wrong")
      $("body").addClass("game-over")

      $("#level-title").text("Game Over, Restart to play again")
$("h2").show()
      setTimeout(function () {
        $("body").removeClass("game-over")
      }, 200)

    }
}


function nextSequence() {
  userClickedPattern = []
  level++
  $("#level-title").text("Level " + level)
  var randomNumber = Math.floor(Math.random() * 4)
  var randomChosenColour = buttonColours[randomNumber]
  gamePattern.push(randomChosenColour)

  $("#" + randomChosenColour).fadeIn(100).fadeOut(100).fadeIn(100)
  playSound(randomChosenColour)
}

function animatePress(currentColor) {
  $("#" + currentColor).addClass("pressed")
  setTimeout(function () {
    $("#" + currentColor).removeClass("pressed")
  }, 100)
}

function playSound(name) {
  var name = new Audio(name + ".mp3")
  name.play()
}
function startOver() {
  level = 0
  gamePattern = []
  started = false
}