script.js

console.log("script is intalizing...");

let gameseq = [];
let userseq = [];
let button = ["yellow", "red", "blue", "purple"];

let started = false;
let level = 0;
let highestscore = 0;

let h3 = document.querySelector("h3");
let allbtn = document.querySelectorAll(".box");
let high = document.querySelector(".highest");

document.addEventListener("keypress", () => {
    if (!started) {
        console.log("game started")
        started = true;
        levelup();
    }
})

let randombtn = Math.floor(Math.random() * 4);

function levelup() {
    level++;
    h3.innerText = `Level ${level}`;
    let randomind = Math.floor(Math.random() * 4);
    let randomcolor = button[randomind];
    let randombtn = document.querySelector(`.${randomcolor}`);
    btnflash(randombtn, "flash");
    gameseq.push(randomcolor);
    userseq = [];

}

function checkans(index) {

    if (userseq[index] == gameseq[index]) {
        if (userseq.length == gameseq.length) {
            setTimeout(levelup, 500);
        }
    } else {
        highestscore = Math.max(highestscore, level * 2);
        h3.innerHTML = `Game Over ! Your Score was ${level * 2} <br><br>press any to restart`;
        high.innerHTML = `Highest Score : ${highestscore}`;
        document.querySelector("body").style.backgroundColor = "red";
        setInterval(() => {
            document.querySelector("body").style.backgroundColor = "white";
        }, 150)

        reset();
    }
}
let usercolor;

function btnflash(btn, cls) {
    btn.classList.add(cls);
    setTimeout(() => {
        btn.classList.remove(cls);
    }, 250)

    usercolor = btn.getAttribute("id");

}



function btnpressed() {
    let btn = this;
    btnflash(btn, "userflash");
    userseq.push(usercolor);
    console.log(gameseq)
    checkans(userseq.length - 1);
}

for (let btn of allbtn) {
    btn.addEventListener("click", btnpressed);
}

function reset() {
    started = false;
    gameseq = [];
    userseq = [];
    level = 0;

}