apna-college · Vijaykumar775 · Oct 4, 2024
diff --git a/Simon Game/index.html b/Simon Game/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simon says Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <h1>Simon says Game</h1>
+    <h3></h3>
+    <h2>Press any Key to Start</h2>
+
+    <div class="btn-container">
+        <div class="line-one">
+            <div class="btn red" type="button" id="red"></div>
+            <div class="btn yellow" type="button" id="yellow"></div>
+        </div>
+        <div class="line-two">
+            <div class="btn green" type="button" id="green"></div>
+            <div class="btn purple" type="button" id="purple"></div>
+        </div>
+
+
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Simon Game/script.js b/Simon Game/script.js
@@ -0,0 +1,101 @@
+let gameSeq = [];
+let userSeq = [];
+let btns = ["red", "yellow", "green", "purple"];
+
+let started = false;
+let level = 0;
+
+let h2 = document.querySelector("h2");
+
+document.addEventListener("keypress", function () {
+    if (started == false) {
+        started = true;
+        levelUp();
+    }
+});
+
+function gameFlash(btn) {
+    btn.classList.add("flash");
+    setTimeout(() => {
+        btn.classList.remove("flash");
+    }, 250);
+}
+
+function userFlash(btn) {
+    btn.classList.add("userFlash")
+    setTimeout(() => {
+        btn.classList.remove("userFlash")
+    }, 250);
+}
+
+function levelUp() {
+    userSeq = [];
+    level++;
+    h2.innerText = `Level : ${level}`;
+    let randomIndex = Math.floor(Math.random() * 3) + 1;
+    let randomColor = btns[randomIndex];
+    let randBtn = document.querySelector(`.${randomColor}`)
+    gameSeq.push(randomColor);
+    gameFlash(randBtn);
+}
+
+function checkAns(idx) {
+    if (userSeq[idx] === gameSeq[idx]) {
+        if (userSeq.length == gameSeq.length) {
+            setTimeout(levelUp, 1500);
+        }
+    } else {
+        h2.innerHTML = `Game Over !, <b>Your Score was ${level}</b> <br> Press Any Key To Start`;
+        document.querySelector("body").style.backgroundColor = "red";
+        setTimeout(function () {
+            document.querySelector("body").style.backgroundColor = "white";
+        }, 250);
+
+        highScore();
+        reset();
+    }
+}
+
+
+function btnPress() {
+    let btn = this;
+    userFlash(btn);
+
+    userColor = btn.getAttribute("id");
+    userSeq.push(userColor);
+    checkAns(userSeq.length - 1);
+}
+
+let allBtns = document.querySelectorAll(".btn");
+
+for (allbtns of allBtns) {
+    allbtns.addEventListener("click", btnPress);
+}
+
+
+function reset() {
+    started = false;
+    gameSeq = [];
+    userSeq = [];
+    level = 0;
+}
+
+let HighScore = true;
+let highScoreValue = 0;
+
+
+function highScore() {
+    if(HighScore == true){
+     let h3 =  document.querySelector("h3");
+     h3.innerText = `Your HighScore = ${highScoreValue}`;
+    }
+    if (level > highScoreValue) {
+      HighScore = true;
+      highScoreValue = level;
+      let h3 = document.querySelector("h3");
+      h3.innerText = `New High Score = ${highScoreValue}`;
+    } else {
+      HighScore = false;
+     }
+};
+
diff --git a/Simon Game/style.css b/Simon Game/style.css
@@ -0,0 +1,39 @@
+body{
+    text-align: center;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.btn-container{
+    display: flex;
+    justify-content: center;
+}
+
+.btn{
+    height: 200px;
+    width: 200px;
+    border: 4px solid black;
+    border-radius: 20px;
+    margin: 1.5rem;
+    cursor: pointer;
+}
+
+.red{
+    background-color: red;
+}
+.yellow{
+    background-color: yellow;
+}
+.green{
+    background-color: green;
+}
+.purple{
+    background-color: purple;
+}
+
+.flash{
+    background-color: white;
+}
+
+.userFlash{
+    background-color: black;
+}