diff --git a/Simon Game/index.html b/Simon Game/index.html new file mode 100644 index 0000000..c1310e9 --- /dev/null +++ b/Simon Game/index.html @@ -0,0 +1,31 @@ + + + + + + + Simon says Game + + + + +

Simon says Game

+

+

Press any Key to Start

+ +
+
+
+
+
+
+
+
+
+ + +
+ + + + \ No newline at end of file diff --git a/Simon Game/script.js b/Simon Game/script.js new file mode 100644 index 0000000..32afe87 --- /dev/null +++ b/Simon Game/script.js @@ -0,0 +1,101 @@ +let gameSeq = []; +let userSeq = []; +let btns = ["red", "yellow", "green", "purple"]; + +let started = false; +let level = 0; + +let h2 = document.querySelector("h2"); + +document.addEventListener("keypress", function () { + if (started == false) { + started = true; + levelUp(); + } +}); + +function gameFlash(btn) { + btn.classList.add("flash"); + setTimeout(() => { + btn.classList.remove("flash"); + }, 250); +} + +function userFlash(btn) { + btn.classList.add("userFlash") + setTimeout(() => { + btn.classList.remove("userFlash") + }, 250); +} + +function levelUp() { + userSeq = []; + level++; + h2.innerText = `Level : ${level}`; + let randomIndex = Math.floor(Math.random() * 3) + 1; + let randomColor = btns[randomIndex]; + let randBtn = document.querySelector(`.${randomColor}`) + gameSeq.push(randomColor); + gameFlash(randBtn); +} + +function checkAns(idx) { + if (userSeq[idx] === gameSeq[idx]) { + if (userSeq.length == gameSeq.length) { + setTimeout(levelUp, 1500); + } + } else { + h2.innerHTML = `Game Over !, Your Score was ${level}
Press Any Key To Start`; + document.querySelector("body").style.backgroundColor = "red"; + setTimeout(function () { + document.querySelector("body").style.backgroundColor = "white"; + }, 250); + + highScore(); + 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 (allbtns of allBtns) { + allbtns.addEventListener("click", btnPress); +} + + +function reset() { + started = false; + gameSeq = []; + userSeq = []; + level = 0; +} + +let HighScore = true; +let highScoreValue = 0; + + +function highScore() { + if(HighScore == true){ + let h3 = document.querySelector("h3"); + h3.innerText = `Your HighScore = ${highScoreValue}`; + } + if (level > highScoreValue) { + HighScore = true; + highScoreValue = level; + let h3 = document.querySelector("h3"); + h3.innerText = `New High Score = ${highScoreValue}`; + } else { + HighScore = false; + } +}; + diff --git a/Simon Game/style.css b/Simon Game/style.css new file mode 100644 index 0000000..1c2cd54 --- /dev/null +++ b/Simon Game/style.css @@ -0,0 +1,39 @@ +body{ + text-align: center; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +.btn-container{ + display: flex; + justify-content: center; +} + +.btn{ + height: 200px; + width: 200px; + border: 4px solid black; + border-radius: 20px; + margin: 1.5rem; + cursor: pointer; +} + +.red{ + background-color: red; +} +.yellow{ + background-color: yellow; +} +.green{ + background-color: green; +} +.purple{ + background-color: purple; +} + +.flash{ + background-color: white; +} + +.userFlash{ + background-color: black; +}