game.js

var buttonColours = ["red", "blue", "green", "yellow"]; 
var gamePattern = [];
var userClickedPattern = [];

var started = false;
var level = 0;
var value = -1;
var helpOpened = false;
var abtOpened = false;
var playing = false;
$("#about").click(function(){

  if (abtOpened){
    $(".btn").slideDown(200);
    $("#help").text("Show help");
    $("#foot").text("@Jems Apps and Games");
    $("body").removeClass("abtBody");
    $("#jemPic").fadeOut(300);
    $("#bioTxt").fadeOut(300);
    $("#bioTxt2").fadeOut(300);
    $("#bioTxt3").fadeOut(300);
    abtOpened = false

  } else{
    
  $(".btn").slideUp(200);
  $("#help").text("Close help");
  $("body").addClass("abtBody");
  $("#jemPic").fadeIn(300);
  $("#bioTxt").fadeIn(300);
  $("#bioTxt2").fadeIn(300);
  $("#bioTxt3").fadeIn(300);


  abtOpened = true;
  }
});

$("#help").click(function(){
  if (helpOpened){
    $(".btn").slideDown(200);
    $("#help").text("Show help");
    $("#foot").text("@Jems Apps and Games");

    helpOpened = false;

  } else{
    
  $(".btn").slideUp(200);
  $("#foot").text("First follow the pattern generated by the game-play and try to remember the previous patterns drawn by it then simply append them at the back of the current game-play.  For example, if the computer generated Red-Red-Green using three consicutive steps, then you should remember all those three patterns generated by the game-play and you should respond accordingly.");
  $("#help").text("Close help");
  helpOpened = true;
  }
});

$(document).keydown(function() { 

  if (!started) { 
    nextSequence();
    started = true;
    playMid();
  } 
});










$("#startButton").click(function(){
  if (!started) { 
    nextSequence();
    started = true;
    playMid();
}
});







$(".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, Press Any Key to Restart");

      setTimeout(function () {
        $("body").removeClass("game-over");
      }, 200);

      startOver();
      setTimeout(function (){
        var variables = [];
        for (var x = 1; x <= userClickedPattern.length; x++ ){
          variables.push(" "+userClickedPattern[x]);
        }

      }, 0)

    }
}
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); 
  if(!playing){
    playMid();
  }
}
function animatePress(currentColor) {
  $("#" + currentColor).addClass("pressed");
  setTimeout(function () { 
    $("#" + currentColor).removeClass("pressed");
  }, 100);
}
function playMid(){
  var whilePlay = new Audio("sounds/while.wav");
  if(!playing){
    whilePlay.play();
    playing = true;
    whilePlay.addEventListener("ended", ()=> {
    playing = false;
    whilePlay.play();

    });
  } 
}
function playSound(name) {
  var audio = new Audio("sounds/" + name + ".mp3");
  audio.play(); 
}
function startOver() {
if(level > value)
{
  value = level;
  $("#thiss").text("Max Level: " + value); 
  $("#thiss").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100); 
} 
  level = 0;
  gamePattern = [];
  started = false;
}