SIMON SAY GAME JS Mini-Project

 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simon Say Game</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Simon Say Game</h1>
    <h2>press any key to start the game</h2>
    <h3>Highest Score:---</h3>
    <div class="btn-container">
        <div class="line-one">

            <div class="btn green" type="button" id="green" ></div>
            <div class="btn yellow" type="button" id="yellow" ></div>
        </div>
        <div class="line-two">

            <div class="btn red" type="button" id="red"></div>
            <div class="btn blue" type="button" id="blue"></div>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

CSS

body{
    text-align: center;
}
.btn-container{
    justify-content: center;
    display: flex;
}
.btn{
    height: 150px;
    width: 150px;
    border: 5px solid black;
    border-radius: 20%;
    margin: 1.5rem;
}

.green{
    background-color: green;
}
.red{
    background-color: red;

}
.yellow{
    background-color: yellow;

}
.blue{
    background-color: blue;

}
.flash{
    background-color: white;
}

JS

let gameSeq = [];
let userSeq = [];
let level = 0;
let start = false;
let h2 = document.querySelector("h2");
let h3 = document.querySelector("h3");

let btns = ["green", "red", "yellow", "blue"];
let highestScore = 0;
let currScore = 0;
document.addEventListener("keypress", function () {
  if (start == false) {
    // console.log("Game started");
    start = true;
    levelUp();
  }
});
function btnFlash(btn) {
  btn.classList.add("flash");
  setTimeout(function () {
    btn.classList.remove("flash");
  }, 250);
}
function levelUp() {
  userSeq = [];
  level++;
  h2.innerText = `Level ${level}`;

  let randIdx = Math.floor(Math.random() * 3);
  let randColor = btns[randIdx];
  let randBtn = document.querySelector(`.${randColor}`);
  // console.log(randIdx);
  // console.log(randColor);
  // console.log(randBtn);
  gameSeq.push(randColor);
  // console.log(gameSeq);
  btnFlash(randBtn);
}

function btnPress() {
  // console.log(this);
  let btn = this;
  let userColor = btn.getAttribute("id");
  userSeq.push(userColor);
  // console.log(userSeq);

  btnFlash(btn);
  checkAns(userSeq.length - 1);
}
function checkAns(idx) {
  if (userSeq[idx] == gameSeq[idx]) {
    if (userSeq.length == gameSeq.length) {
      setTimeout(levelUp, 1000);
    }
  } else {
    currScore = level;
    if (currScore > highestScore) {
      highestScore = currScore;
      h3.innerText = `highest Score: ${highestScore}`;
    }
    h2.innerHTML = `Game Over!! your score was <b>${level}<b> <br>Press any key to start`;
    document.querySelector("body").style.backgroundColor = "red";
    setTimeout(function () {
      document.querySelector("body").style.backgroundColor = "white";
    }, 200);
    reset();
  }
}
function reset() {
  start = false;
  gameSeq = [];
  userSeq = [];
  level = 0;
}

let allBtns = document.querySelectorAll(".btn");
for (btn of allBtns) {
  btn.addEventListener("click", btnPress);
}







Comments

Post a Comment