Simon_Game

PriyanshuValiya · Dec 10, 2023 · d4eb220 · d4eb220
1 parent a1030a6
commit d4eb220
Show file tree

Hide file tree

Showing 3 changed files with 147 additions and 0 deletions.
diff --git a/simon.css b/simon.css
@@ -0,0 +1,41 @@
+.body{
+    text-align: center;
+    background-color: rgb(102, 102, 230);
+}
+
+.white{
+    color: white;
+}
+
+.btn{
+    height: 200px;
+    width: 200px;
+    border: 3px solid black;
+    border-radius: 20%;
+    margin: 2.2rem;
+}
+
+.btn-container{
+    display: flex;
+    justify-content: center;
+}
+
+.red{
+    background-color: rgb(253, 32, 32);
+}
+.green{
+    background-color: rgb(2, 182, 2);
+}
+.blue{
+    background-color: aqua;
+}
+.yellow{
+    background: yellow;
+}
+
+.flash{
+    background-color: white;
+}
+.userFlash{
+    background-color: black;
+}
diff --git a/simon.html b/simon.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Game Zone</title>
+    <link rel="stylesheet" href="simon.css"> 
+</head>
+<body class="body">
+    <h1 class="white">Simon Game</h1>
+    <h2 class="white">Press Any Key To Start The Game</h2>
+    <div class="btn-container">
+        <div class="line-one">
+        <div class="btn red" type="button" id="red"></div>
+        <div class="btn blue" type="button" id="blue"></div></div>
+        <div class="line-two">
+        <div class="btn green" type="button" id="green"></div>
+        <div class="btn yellow" type="button" id="yellow"></div></div>
+    </div>
+
+
+    <script src="simon.js"></script>
+</body>
+</html>
diff --git a/simon.js b/simon.js
@@ -0,0 +1,82 @@
+let gameSeq = [];
+let userSeq = [];
+
+let btns = ["red", "yellow", "green", "blue"];
+
+let started = false;
+let level = 0;
+
+let h2 = document.querySelector("h2");
+
+// Step 1 : Start the Game.
+document.addEventListener("keypress", function(){
+    if(started == false){
+        console.log("Game Is Started !");
+        started = true;
+        levelUp();
+    }
+});
+
+function gameFlash(btn){
+   btn.classList.add("flash");
+   setTimeout(function(){
+  btn.classList.remove("flash");
+   }, 250);
+}
+
+function userFlash(btn){
+    btn.classList.add("userFlash");
+    setTimeout(function(){
+   btn.classList.remove("userFlash");
+    }, 250);
+ }
+
+// Step 2 : To Flash any Button and do level-up.
+function levelUp(){
+    userSeq = [];
+    level++;
+    h2.innerText = `Level ${level}`;
+
+   // Random Button Choose.
+   let randIdx = Math.floor(Math.random() * 3);
+   let randColor = btns[randIdx];
+   let randBtn = document.querySelector(`.${randColor}`);
+   gameSeq.push(randColor);
+   console.log(gameSeq);
+   gameFlash(randBtn);
+}
+
+function checkAns(idx){
+    if(userSeq[idx] === gameSeq[idx]){
+       if(userSeq.length == gameSeq.length){
+        setTimeout(levelUp, 1000);
+       }
+    } else {
+        h2.innerHTML = `Game Over :(<br> Your Score Is : <b>${level}</b><br>Press Any Key To Restart The Game`;
+        document.querySelector("body").style.backgroundColor = "red";
+        setTimeout(function(){
+        document.querySelector("body").style.backgroundColor = "rgb(102, 102, 230)";  
+        }, 150);
+        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(btn of allBtns) {
+    btn.addEventListener("click", btnPress);
+}
+
+function reset(){
+    started = false;
+    gameSeq = [];
+    userSeq = [];
+    level = 0;
+}