diff --git a/Simon Says/Readme.md b/Simon Says/Readme.md new file mode 100644 index 00000000..e69de29b diff --git a/Simon Says/app.js b/Simon Says/app.js new file mode 100644 index 00000000..bb6c4c63 --- /dev/null +++ b/Simon Says/app.js @@ -0,0 +1,72 @@ +let gameSeq = []; +let userSeq = []; +let start = false; +let level = 0; +let btns = ["red","yellow", "green","purple"]; +let startBtn = document.querySelector(".start-btn"); +let resetBtn = document.querySelector(".reset-btn"); +let h2 = document.querySelector("h2"); +let allBtns = document.querySelectorAll(".btn") + + +startBtn.addEventListener("click", function (event) { + if(start == false){ + console.log("Game has been Started"); + start = true; + + levelUp(); + } +}); +function gameFlash(btn){ + btn.classList.add("flash"); + setTimeout(function () { + btn.classList.remove("flash"); + },250); +} +function userFlash(btn){ + btn.classList.add("user-flash"); + setTimeout(function () { + btn.classList.remove("user-flash"); + },250); +} + function levelUp(){ + userSeq = []; + level++; + h2.innerText = `Level ${level}`; + let randIdx = Math.floor(Math.random() * 3); + let randColr = btns[randIdx]; + let randBtn = document.querySelector(`.${randColr}`); + gameSeq.push(randColr); + 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} Please Press Reset Button`; + startBtn.setAttribute("disable", true) + allBtns.setAttribute("disable", true) + + } + } + function btnPress(){ + let btn = this; + userFlash(btn); + let btnColr = btn.getAttribute("id"); + userSeq.push(btnColr); + checkAns(userSeq.length-1); + } + + for(btn of allBtns) { + btn.addEventListener("click", btnPress); + } + resetBtn.addEventListener('click', function () { + start = false; + gameSeq = []; + userSeq = []; + level = 0; + levelUp(); + }); diff --git a/Simon Says/index.html b/Simon Says/index.html new file mode 100644 index 00000000..d6e6dcdd --- /dev/null +++ b/Simon Says/index.html @@ -0,0 +1,29 @@ + + + + + + + Simon Says + + +

Simon Says Game

+

Press Start Button To Start The Game

+ + +
+
+
+
+ +
+
+
+
+ +
+
+ + + + \ No newline at end of file diff --git a/Simon Says/style.css b/Simon Says/style.css new file mode 100644 index 00000000..43a76bd7 --- /dev/null +++ b/Simon Says/style.css @@ -0,0 +1,54 @@ +body{ + text-align:center; + background-color: #3b82f6; +} +.btn{ + height:150px; + width:200px; + border-radius: 20%; + border: 10px solid black; + margin:1.5rem; +} +.btn-container{ + display:flex; + justify-content:center; +} + +.red{ + background-color:#63aa; +} +.yellow{ + background-color:#f99b45; + +} +.green{ + background-color:#d95980; + +} +.purple{ + background-color:#819ff9; + +} +.start-btn{ + height:30px; + width:80px; + text-align:center; + border-radius:50%; + border:1px Solid black; + color:black; + +} +.flash{ + background-color: white; +} +.user-flash{ + background-color:green; +} +.reset-btn{ + height:30px; + width:80px; + text-align:center; + border-radius:50%; + border:1px Solid black; + margin-left:50px; +} \ No newline at end of file