apna-college · RimjhimKumari197 · Jan 5, 2025
diff --git a/project3/README.md 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
@@ -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<b>${level}</b><br>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
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>sim0n says game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>Simon Says Game</h1>
+    <h2>press any key to start</h2>
+    <div class="btn-container">
+        <div class="line-one">
+            <div class="btn red" type="button" id="red">1</div>
+            <div class="btn yellow" type="button" id="yellow">2</div>
+        </div>
+        <div class="line-two">
+            <div class="btn green" type="button" id="green">3</div>
+            <div class="btn purple" type="button" id="purple">4</div>
+        </div>
+
+    </div>
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/project3/style.css 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;
+}