diff --git a/simon.css b/simon.css new file mode 100644 index 0000000..88a981a --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/simon.html b/simon.html new file mode 100644 index 0000000..00e92a8 --- /dev/null +++ b/simon.html @@ -0,0 +1,24 @@ + + + + + + Game Zone + + + +

Simon Game

+

Press Any Key To Start The Game

+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/simon.js b/simon.js new file mode 100644 index 0000000..ccdd487 --- /dev/null +++ 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 :(
Your Score Is : ${level}
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; +} \ No newline at end of file