diff --git a/Shooting-game/Simon game/app.js b/Shooting-game/Simon game/app.js new file mode 100644 index 0000000..a066baa --- /dev/null +++ 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 ${level}
`; + 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 new file mode 100644 index 0000000..a588ae7 --- /dev/null +++ b/Shooting-game/Simon game/index.html @@ -0,0 +1,28 @@ + + + + + + + + Document + + + +

Simon Game

+

Press any key to start the game

+
+
+
p
+
s
+
+
+
o
+
b
+
+
+ + + + + \ No newline at end of file diff --git a/Shooting-game/Simon game/style.css b/Shooting-game/Simon game/style.css new file mode 100644 index 0000000..70a4415 --- /dev/null +++ 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; +} \ No newline at end of file