app.js

// logic of game

let gameSeq = [];
let userSeq = [];

// array of button

let btns = ["yellow", "red", "blue", "green"];

// highest Score
let highestScore = localStorage.getItem("highestScore") || 0;
let hs = document.querySelector("h3");
hs.innerText = `Highest Score : ${highestScore}`;
let resetBtn = document.querySelector(".reset-btn");

// element Selectors
let h2 = document.querySelector("h2");
let btn = document.querySelectorAll("button");
let level = 0;
let body = document.querySelector("body");

// levelup function
function levelup() {
  h2.innerText = `Level ${++level} `;

  // elements needed to flash button
  let randomIdx = Math.floor(Math.random() * btns.length);
  let randomColor = btns[randomIdx];
  gameSeq.push(randomColor); // pushing the color to game sequence .
  let randombtn = document.querySelector(`.${randomColor}`);

  btnFlash(randombtn);

  //since when we do level up, the user must have to click from the begining of colors to the end in orders so we , will reset the user sequence .
  userSeq = [];
}

function userFlash(btn) {
  btn.classList.add("flash1");
  setTimeout(function () {
    btn.classList.remove("flash1");
  }, 100);
}

function btnFlash(btn) {
  btn.classList.add("flash");
  setTimeout(function () {
    btn.classList.remove("flash");
  }, 300);
}

//check button pres, user
function btnPress() {
  // this will give the data of which button was pressed .
  let btn = this;
  userFlash(btn);
  // pushing user color Sequence.
  let userColor = btn.getAttribute("id");
  userSeq.push(userColor);
  checkAns(userSeq.length - 1); // ????
}
//user btn click check
let allbtns = document.querySelectorAll(".btn");
for (btn of allbtns) {
  btn.addEventListener("click", btnPress);
}

// check answer
function checkAns(idx) {
  // let idx = level-1;
  if (userSeq[idx] == gameSeq[idx]) {
    // ?????
    if (userSeq.length == gameSeq.length) {
      setTimeout(levelup, 700);
    }
  } else {
    if (highestScore < level) {
      highestScore = level;
      localStorage.setItem("highestScore", highestScore);
      hs.innerText = `Highest Score : ${highestScore}`;
    }
    body.style.backgroundColor = "red";
    setTimeout(function () {
      body.style.backgroundColor = "wheat";
    }, 500);
    h2.innerHTML = `Game Over ! Your Score was <b>${level}</b> <br> Press any key to start again .`;
    reset();
  }
}
// reset the score
resetBtn.addEventListener("click", function () {
  highestScore = 0;
  localStorage.setItem("highestScore", highestScore);
  hs.innerText = `Highest Score : ${highestScore}`;
});

// start
let started = false;
document.addEventListener("keypress", function () {
  if (started == false) {
    started = true;
    levelup();
  }
});

// reset the game to start agian
function reset() {
  started = false;
  gameSeq = [];
  userSeq = [];
  level = 0;
}