Merge pull request #80 from Deepasha1406/main

Chayandas07 · web-flow · commit a946b5490eaa · 2024-10-16T16:52:39.000+05:30
Added Simon Game
diff --git a/Shooting-game/Simon game/app.js b/Shooting-game/Simon game/app.js
@@ -0,0 +1,82 @@
+let gamesq=[];
+let usersq=[];
+let btns = ["pink","orange","skyBlue","blue"];
+
+let started = false;
+let level = 0;
+
+let h2 = document.querySelector("h2");
+
+document.addEventListener("keypress",function(){
+    if(started==false){
+        console.log("game 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);
+   }
+
+ function levelUp(){
+ usersq=[];
+ level++;
+ h2.innerText = `level ${level}`;
+
+let ranidx = Math.floor(Math.random() * 3);
+let rancol = btns[ranidx];
+let renbtn = document.querySelector(`.${rancol}`);
+gamesq.push(rancol);
+console.log(gamesq)
+gameFlash(renbtn);
+}
+
+function checkans(idx){
+if(usersq[idx]==gamesq[idx]){
+    if(usersq.length==gamesq.length){
+        setTimeout(levelUp,1000);
+    }
+}else{
+    h2.innerHTML = `Game Over! Your score was <b>${level}</b> <Br> `;
+    document.querySelector("body").style.backgroundColor = "red";
+    setTimeout(function(){
+    document.querySelector("body").style.backgroundColor = "white";
+    },150)
+    
+}
+}
+
+
+
+function btnPress(){
+   let btn = this;
+   userFlash(btn);
+
+   usercol = btn.getAttribute("id");
+   usersq.push(usercol);
+
+   checkans(usersq.length-1);
+}
+
+let allbtns = document.querySelectorAll(".btn")
+for(btn of allbtns){
+    btn.addEventListener("click",btnPress);
+}
+
+function Reset(){
+    started = false;
+    gamesq = [];
+    usersq = [];
+    level = 0;
+}
diff --git a/Shooting-game/Simon game/index.html b/Shooting-game/Simon game/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Document</title>
+</head>
+
+<body>
+    <h1>Simon Game</h1>
+    <h2>Press any key to start the game</h2>
+    <div class="box">
+        <div class="line-one">
+            <div class="btn pink" type="button" id="pink">p</div>
+            <div class="btn skyBlue" type="button" id="skyblue">s</div>
+        </div>
+        <div class="line-two">
+            <div class="btn orange" type="button" id="orange">o</div>
+            <div class="btn blue" type="button" id="blue">b</div>
+        </div>
+    </div>
+
+    <script src="app.js"></script>
+</body>
+
+</html>
diff --git a/Shooting-game/Simon game/style.css b/Shooting-game/Simon game/style.css
@@ -0,0 +1,39 @@
+body{
+    text-align: center;
+}
+.btn{
+    height: 200px;
+    width: 200px;
+    border-radius: 20%;
+    border: 10px solid black;
+    margin: 2rem;
+}
+
+.box{
+    display: flex;
+    justify-content: center;
+}
+
+.pink{
+    background-color: palevioletred;
+}
+
+.skyBlue{
+    background-color: aquamarine;
+}
+
+.orange{
+    background-color: orange;
+}
+
+.blue{
+    background-color: rgb(79, 79, 201);
+}
+
+.flash{
+    background-color: white;
+}
+
+.userflash{
+    background-color: green;
+}
