diff --git a/project3/README.md b/project3/README.md new file mode 100644 index 0000000..18e7c46 --- /dev/null +++ b/project3/README.md @@ -0,0 +1,6 @@ +# SIMON -SAYS-GAME +This game is created using HTML,CSS,Javascript. +# How to play? +1.click on any button to start\n +2.click the flashed color +3.then new color flashes,so follow previous sequence and click all those previous colors including the new flashed color diff --git a/project3/app.js b/project3/app.js new file mode 100644 index 0000000..73444fd --- /dev/null +++ b/project3/app.js @@ -0,0 +1,70 @@ +let gameseq=[]; +let userseq=[]; +let btns=["yellow","red","purple","green"]; +let start=false; +let level=0; +let h2=document.querySelector("h2"); +let allbtns=document.querySelectorAll(".btn"); +document.addEventListener("keydown",function(){ + if(start==false){ + console.log("started"); + start=true; + } + levelup(); +}); +function btnflash(btn){ + btn.classList.add("flash"); + setTimeout(function(){ + btn.classList.remove("flash"); + },200); +} +function userflash(btn){ + btn.classList.add("userflash"); + setTimeout(function(){ + btn.classList.remove("userflash"); + },200); +} +function levelup(){ + userseq=[]; + level++; + h2.innerText=`Level ${level}`; + //choose random button + let randomcolor=btns[Math.floor(Math.random()*3)]; + let btn=document.querySelector(`.${randomcolor}`); + gameseq.push(randomcolor); + console.log(gameseq); + btnflash(btn); +} +function checkans(idx){ + + if(userseq[idx]==gameseq[idx]){ + if(userseq.length==gameseq.length){ + setTimeout(levelup,1000); + } + + }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"; + + },150); + reset(); + } +} +function btnpress(){ + let btn=this; + userflash(btn); + let usercolor=btn.getAttribute("id"); + userseq.push(usercolor); + checkans(userseq.length-1); +} +function reset(){ + start=false; + gameseq=[]; + userseq=[]; + level=0; +} +for(btn of allbtns){ + btn.addEventListener("click",btnpress); +} diff --git a/project3/index.html b/project3/index.html new file mode 100644 index 0000000..3307226 --- /dev/null +++ b/project3/index.html @@ -0,0 +1,25 @@ + + + + + + sim0n says game + + + +

Simon Says Game

+

press any key to start

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