Add color memory game

champ-byte · web-flow · commit c1bb1795c5e0 · 2025-10-31T10:06:33.000+05:30
diff --git a/Javascript/color_memory_game/index.html b/Javascript/color_memory_game/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>Simon says agame</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>color_memory_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 green" type="button" id="green">2</div>
+        </div>
+        <div class="line-two">
+        <div class="btn yellow" type="button" id="yellow">3</div>
+        <div class="btn purple" type="button" id="purple">4</div>
+        </div>
+        
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Javascript/color_memory_game/readme.md b/Javascript/color_memory_game/readme.md
@@ -0,0 +1,22 @@
+# Color Memory Game
+
+A fun and interactive memory game built with HTML, CSS, and JavaScript where players need to remember and select the color sequence
+
+## Features
+
+- Dynamic color sequences
+- Progressive difficulty
+- Responsive design
+
+## How to Play
+
+1. Press Start to begin
+2. Watch the color sequence
+3. Click the colors in the same order
+4. Advance to longer sequences as you succeed
+
+## Technologies Used
+
+- HTML5
+- CSS3
+- JavaScript
diff --git a/Javascript/color_memory_game/script.js b/Javascript/color_memory_game/script.js
@@ -0,0 +1,68 @@
+let gameSeq=[];
+let userSeq=[];
+let started=false;
+let level=0;
+let btns=["yellow",'red','purple','green'];
+let h2=document.querySelector('h2');
+document.addEventListener("keypress",function(){
+    if(started==false){
+    console.log("game started");
+    started=true;
+
+    levelUp();
+    }
+
+})
+function btnflash(btn){
+    btn.classList.add("flash");
+    setTimeout(function(){
+        btn.classList.remove("flash");
+    },700)
+}
+
+function levelUp(){
+    userSeq=[];
+    level++;
+h2.innerText=`level${level}`;
+let randcolor=btns[Math.floor(Math.random()*4)];
+let btn=document.querySelector(`.${randcolor}`);
+gameSeq.push(randcolor);
+console.log(gameSeq);
+btnflash(btn);
+}
+
+
+function btnpress(){
+    btnflash(this);
+    userSeq.push(this.getAttribute("id"));
+    console.log(userSeq);
+    checkAns(userSeq.length-1);
+}
+function checkAns(idx){
+    
+    if(userSeq[idx]===gameSeq[idx]){
+        if(gameSeq.length==userSeq.length){
+            setTimeout(()=>{levelUp()},1000);
+        }
+       
+    }
+    else{
+        h2.innerHTML=`Game over! Score was <b>${level}</b><br>Press any key to restart`;
+        document.querySelector("body").style.backgroundColor="red";
+        setTimeout(()=>{
+            document.querySelector("body").style.backgroundColor="white";},200);
+        reset();
+    }
+}
+
+let allBtns=document.querySelectorAll(".btn");
+for(butns of allBtns){
+    butns.addEventListener("click",btnpress);
+}
+
+function reset(){
+    gameSeq=[];
+    userSeq=[];
+    started=false;
+    level=0;
+}
diff --git a/Javascript/color_memory_game/style.css b/Javascript/color_memory_game/style.css
@@ -0,0 +1,31 @@
+body{
+    text-align: center;
+}
+.btn{
+height: 200px;
+width: 200px;
+border-radius: 20%;
+border: 10px solid black;
+margin: 2rem;
+}
+.btn-container{
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    /* gap: 20px; */
+}
+.red{
+    background-color: #d95980;
+}
+.green{
+    background-color: #63aac0;
+}
+.yellow{
+    background-color: #f99b45;
+}
+.purple{
+    background-color: rgb(226, 127, 226);
+}
+.flash{
+    background-color: white;
+}
