Merge pull request #2376 from 1911aditi/master

added an extension for color memory challenge.
Sulagna-Dutta-Roy · Jul 14, 2024 · 207d563 · 207d563
2 parents 69847c6 + 86782fa
commit 207d563
Show file tree

Hide file tree

Showing 4 changed files with 153 additions and 0 deletions.
diff --git a/Color Memory Challenge/index.html b/Color Memory Challenge/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Color Memory Challenge</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id="game-container">
+        <h1>Color Memory Challenge</h1>
+        <div id="color-boxes"></div>
+        <button id="start-button">Start Game</button>
+        <div id="message"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Color Memory Challenge/manifest.json b/Color Memory Challenge/manifest.json
@@ -0,0 +1,10 @@
+{
+    "manifest_version": 3,
+    "name": "Color Memory Challenge",
+    "version": "1.0",
+    "description": "Test your memory with colors!",
+    "action": {
+        "default_popup": "index.html"
+    },
+    "permissions": []
+}
diff --git a/Color Memory Challenge/script.js b/Color Memory Challenge/script.js
@@ -0,0 +1,82 @@
+const colorBoxes = document.getElementById('color-boxes');
+const startButton = document.getElementById('start-button');
+const message = document.getElementById('message');
+
+let colors = [];
+let sequence = [];
+let userInput = [];
+let round = 0;
+
+// Start the game
+startButton.addEventListener('click', startGame);
+
+function startGame() {
+    round = 0;
+    sequence = [];
+    message.textContent = '';
+    generateSequence();
+}
+
+// Generate a random color sequence
+function generateSequence() {
+    colors = ['red', 'blue', 'green', 'yellow', 'purple', 'orange', 'pink', 'cyan'];
+    sequence.push(colors[Math.floor(Math.random() * colors.length)]);
+    displaySequence();
+}
+
+// Display the sequence to the user
+function displaySequence() {
+    colorBoxes.innerHTML = '';
+    sequence.forEach((color, index) => {
+        setTimeout(() => {
+            createColorBox(color);
+            if (index === sequence.length - 1) {
+                setTimeout(() => {
+                    getUserInput();
+                }, 1000);
+            }
+        }, index * 1000);
+    });
+}
+
+// Create a color box
+function createColorBox(color) {
+    const box = document.createElement('div');
+    box.className = 'box';
+    box.style.backgroundColor = color;
+    colorBoxes.appendChild(box);
+}
+
+// Get user input
+function getUserInput() {
+    colorBoxes.innerHTML = '';
+    colors.forEach(color => {
+        const box = document.createElement('div');
+        box.className = 'box';
+        box.style.backgroundColor = color;
+        box.addEventListener('click', () => handleUserClick(color));
+        colorBoxes.appendChild(box);
+    });
+}
+
+// Handle user clicks
+function handleUserClick(color) {
+    userInput.push(color);
+    checkUserInput();
+}
+
+// Check user input
+function checkUserInput() {
+    const currentRound = userInput.length - 1;
+    if (userInput[currentRound] !== sequence[currentRound]) {
+        message.textContent = 'Wrong! Game Over.';
+        return;
+    }
+    if (userInput.length === sequence.length) {
+        userInput = [];
+        round++;
+        setTimeout(() => {
+            generateSequence();
+        }, 1000);
+    }
+}
diff --git a/Color Memory Challenge/style.css b/Color Memory Challenge/style.css
@@ -0,0 +1,43 @@
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+}
+
+#game-container {
+    text-align: center;
+    background: #fff;
+    border: 1px solid #ddd;
+    padding: 20px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+}
+
+#color-boxes {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    margin-bottom: 20px;
+}
+
+.box {
+    width: 60px;
+    height: 60px;
+    margin: 5px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+button {
+    padding: 10px 20px;
+    font-size: 18px;
+    cursor: pointer;
+}
+
+#message {
+    margin-top: 20px;
+    font-size: 18px;
+}