From c1bb1795c5e0f5e728cf8afef1e4015c2ca7202f Mon Sep 17 00:00:00 2001 From: champ-byte Date: Fri, 31 Oct 2025 10:06:33 +0530 Subject: [PATCH] Add color memory game --- Javascript/color_memory_game/index.html | 25 +++++++++ Javascript/color_memory_game/readme.md | 22 ++++++++ Javascript/color_memory_game/script.js | 68 +++++++++++++++++++++++++ Javascript/color_memory_game/style.css | 31 +++++++++++ 4 files changed, 146 insertions(+) create mode 100644 Javascript/color_memory_game/index.html create mode 100644 Javascript/color_memory_game/readme.md create mode 100644 Javascript/color_memory_game/script.js create mode 100644 Javascript/color_memory_game/style.css diff --git a/Javascript/color_memory_game/index.html b/Javascript/color_memory_game/index.html new file mode 100644 index 0000000..b0a3d85 --- /dev/null +++ b/Javascript/color_memory_game/index.html @@ -0,0 +1,25 @@ + + + + + + Simon says agame + + + +

color_memory_game

+

Press any key to start

+
+
+
1
+
2
+
+
+
3
+
4
+
+ +
+ + + \ No newline at end of file diff --git a/Javascript/color_memory_game/readme.md b/Javascript/color_memory_game/readme.md new file mode 100644 index 0000000..9195144 --- /dev/null +++ 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 \ No newline at end of file diff --git a/Javascript/color_memory_game/script.js b/Javascript/color_memory_game/script.js new file mode 100644 index 0000000..f0140a4 --- /dev/null +++ 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 ${level}
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; +} \ No newline at end of file diff --git a/Javascript/color_memory_game/style.css b/Javascript/color_memory_game/style.css new file mode 100644 index 0000000..ff400ff --- /dev/null +++ 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; +} \ No newline at end of file