diff --git a/Domains/Frontend/simen-say-game/app.js b/Domains/Frontend/simen-say-game/app.js new file mode 100644 index 00000000..aa65b55c --- /dev/null +++ b/Domains/Frontend/simen-say-game/app.js @@ -0,0 +1,88 @@ +let gameSeq = []; +let userSeq = []; + +let btns = ["red" , "green" , "yellow" , "purple"]; + +let started = false; + +let level = 0; + +let h2 = document.querySelector("h2"); +let body = document.querySelector("body"); + +document.addEventListener("keypress" , () => { + if(started == false){ + console.log("game is started"); + started = true; + levelUp(); + } +}) + +function gameFlash(btn){ + btn.classList.add("gameflash"); + setTimeout(function (){ + btn.classList.remove("gameflash"); + } , 250) +} + +function userFlash(btn){ + btn.classList.add("userflash"); + setTimeout(function () { + btn.classList.remove("userflash"); + } , 250) +} + +function levelUp(){ + userSeq = []; + level++; + h2.innerText = `level ${level}`; + let randomIdx = Math.floor(Math.random()*btns.length); + let randColor = btns[randomIdx]; + let randBtn = document.querySelector(`.${randColor}`); + gameSeq.push(randColor); + console.log(gameSeq); + gameFlash(randBtn); +} + + +function checkAns(idx){ + // console.log("Current level :" , level); + if(gameSeq[idx] === userSeq[idx]){ + if(gameSeq.length === userSeq.length){ + setTimeout(levelUp , 1000); + } + }else{ + h2.innerHTML= `GAME OVER! , your score was ${level}
Press any key to start the game`; + document.querySelector("body").style.backgroundColor = "red"; + setTimeout(function (){ + document.querySelector("body").style.backgroundColor = "white"; + } , 250) + reset(); + } +} + + +function btnPress(btn){ + btn = this; + userFlash(btn); + + userColor = btn.getAttribute("id"); + userSeq.push(userColor); + + checkAns(userSeq.length - 1); +} + + + +let allBtn = document.querySelectorAll(".btn"); + +for(btn of allBtn){ + btn.addEventListener("click" , btnPress); +} + +function reset(){ + started = false; + gameSeq = []; + userSeq = []; + level = 0; +} \ No newline at end of file diff --git a/Domains/Frontend/simen-say-game/index.html b/Domains/Frontend/simen-say-game/index.html new file mode 100644 index 00000000..7947d33b --- /dev/null +++ b/Domains/Frontend/simen-say-game/index.html @@ -0,0 +1,24 @@ + + + + + + Simen Say Game + + + +

Simon Game

+

Press any key to start the game

+
+
+
1
+
2
+
+
+
3
+
4
+
+
+ + + \ No newline at end of file diff --git a/Domains/Frontend/simen-say-game/style.css b/Domains/Frontend/simen-say-game/style.css new file mode 100644 index 00000000..b46b039b --- /dev/null +++ b/Domains/Frontend/simen-say-game/style.css @@ -0,0 +1,44 @@ +body{ + text-align: center; +} + +.btn{ + width: 200px; + height: 200px; + border: 10px solid black; + border-radius: 20%; + margin: 2.5rem; +} + +.btn-container{ + display: flex; + justify-content: center; +} + +.red{ + background-color: #d95980; +} + +.green{ + background-color: #53aac0; +} + +.yellow{ + background-color: #f99b45; +} + +.purple{ + background-color: #819ff9; +} + +.gameflash{ + background-color: white; +} + +.userflash{ + background-color: magenta; +} + +.color{ + background-color: red; +} \ No newline at end of file