Simon game

   




HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simon Game</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <h1>Simon Game</h1>
    <h3>Press any key to start game</h3>

    <div class="btn-container">
        <div type="button" id="red" class="btn red"></div>
        <div type="button" id="green" class="btn green"></div>
        <div type="button" id="purple" class="btn purple"></div>
        <div type="button" id="yellow" class="btn yellow"></div>
    </div>


    <script src="app.js"></script>
</body>
</html>

----------------------------------------------------------

CSS Code

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    text-align: center;
    margin: 1rem 0;
}

.btn-container {
    width: fit-content;
    padding: 2rem;
    margin: auto;
    text-align: center;
    display: grid;
    grid-gap: .8rem;
    grid-template-columns: repeat(2, 180px);
}

.btn {
    height: 170px;
    width: 170px;
    border-radius: 20%;
    cursor: pointer;
    border: 8px solid #2d3436;
}

.red {
    background-color: #d63031;
}
.green {
    background-color: #00b894;
}
.purple {
    background-color: #e84393;
}
.yellow {
    background-color: #ffeaa7;
}


/* Javascript class */

.flash {
    background-color: #fff;
}

.userFlash {
    background-color: #393737;
}
---------------------------------------------------------------------

javaScript Code


let gameSeq = [];
let userSeq = [];
let colors = ["red", "yellow", "green", "purple" ];

let started = false;
let level = 0;

// step = 1
document.addEventListener("keypress", function (event) {
    if (started == false) {
        started = true;
        console.log("game started");

        levelUp();
    }
});


// step = 2
let h3 = document.querySelector("h3");

function levelUp() { 

    userSeq = []; // because user enter gameSequence 0 to last index
    
    level++;
    h3.innerText = `Level ${level}`;

    // flash random btn
    let randIdx = Math.floor(Math.random() * 3);
    let randColor = colors[randIdx];
    let randBtn = document.querySelector(`.${randColor}`);
    // add random color into game sequence array
    gameSeq.push(randColor);
    console.log(gameSeq);
    gameFlash(randBtn);
}

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


// step - 3

let allBtn = document.querySelectorAll(".btn-container .btn");

for (btn of allBtn) {
    btn.addEventListener("click", btnPress);
}

function btnPress() {
    let btn = this;
    userFlash(btn);
    let userColor = btn.getAttribute("id");
    userSeq.push(userColor); // push user pressed color into array
    checkSequence(userSeq.length-1);
}

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


function checkSequence(idx) {
    if (userSeq[idx] === gameSeq[idx]) {
        if (userSeq.length == gameSeq.length) {
            setTimeout(levelUp, 1000);
        }
    }
    else {
        h3.innerHTML = `Game Over!! Your score is <b> ${level} </b> <br> Press any key to start`;
        document.querySelector("body").style.background = "red";
        setTimeout(function () {
            document.querySelector("body").style.background = "white";
        }, 250);
        reset();
    }
}

function reset() {
    started = false;
    gameSeq = [];
    userSeq = [];
    level = 0;
}
======================================================