Game

Prince-GH · Sep 2, 2024 · 1505aae · 1505aae
commit 1505aae
Show file tree

Hide file tree

Showing 5 changed files with 167 additions and 0 deletions.
diff --git a/ReadMe.md b/ReadMe.md
@@ -0,0 +1 @@
+## Decode.Me
diff --git a/github.png b/github.png
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Brain Game</title>
+</head>
+<body>
+    <div class="headder">
+        <div class="logo">Decode.Me</div>
+        <a href="https://github.com/Prince-GH">
+            <img src="github.png" alt="github" width="30px" height="30px">
+        </a>
+    </div>
+    <div class="message"></div>
+    <button id="startButton">Start Game</button>
+    <div class="canvas">
+        <div class="box"><div class="num"></div></div>
+        <div class="box"><div class="num"></div></div>
+        <div class="box"><div class="num"></div></div>
+        <div class="box"><div class="num"></div></div>
+        <div class="box"><div class="num"></div></div>
+        <div class="box"><div class="num"></div></div>
+        <div class="box"><div class="num"></div></div>
+        <div class="box"><div class="num"></div></div>
+        <div class="box"><div class="num"></div></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,47 @@
+document.getElementById('startButton').addEventListener('click', startGame);
+
+function startGame() {
+    const boxes = document.querySelectorAll('.box');
+    const numbers = shuffle(Array.from({ length: 9 }, (_, i) => i + 1));
+    const message = document.querySelector('.message');
+
+    boxes.forEach((box, i) => {
+        box.querySelector('.num').textContent = numbers[i];
+        box.classList.add('flipped');
+    });
+
+    message.textContent = 'Memorize the numbers!';
+
+    setTimeout(() => {
+        boxes.forEach(box => box.classList.remove('flipped'));
+
+        message.textContent = 'Now, click on the boxes in sequence!';
+        let currentIndex = 1;
+
+        boxes.forEach(box => {
+            box.addEventListener('click', function checkClick() {
+                const num = parseInt(box.querySelector('.num').textContent);
+                if (num === currentIndex) {
+                    box.classList.add('flipped');
+                    currentIndex++;
+                    if (currentIndex > 9) {
+                        message.textContent = 'Congratulations! You won!';
+                    }
+                } else {
+                    message.textContent = 'Wrong sequence! Try again!';
+                    boxes.forEach(b => b.classList.remove('flipped'));
+                    currentIndex = 1;
+                }
+            });
+        });
+
+    }, 3000);
+}
+
+function shuffle(array) {
+    for (let i = array.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [array[i], array[j]] = [array[j], array[i]];
+    }
+    return array;
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,88 @@
+/* @import url('https://fonts.googleapis.com/css2?family=Nerko+One&display=swap'); */
+@import url('https://fonts.googleapis.com/css2?family=Handjet:wght@100..900&family=Silkscreen:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap');
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: "Handjet", sans-serif;
+    font-weight:bold;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    margin: 0;
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+}
+
+.headder{
+    width: 100%;
+    display: flex;
+    justify-content:space-between;
+    /* border: 2px solid red; */
+    padding: 20px;
+    position:absolute;
+    top:0px;
+
+    & .logo{
+        font-size:30px;
+        font-family: "Silkscreen", sans-serif;
+        font-weight: 700;
+        font-style: normal;
+    }
+}
+
+.canvas {
+    display: grid;
+    grid-template-columns: repeat(3, 100px);
+    grid-gap: 10px;
+    margin-top: 20px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: #3735c2;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 5px;
+    cursor: pointer;
+    color: white;
+    font-size: 24px;
+
+}
+
+.num {
+    display: none;
+    font-size:60px;
+}
+
+.flipped .num {
+    display: block;
+}
+
+.flipped {
+    background-color: #FF6347;
+}
+
+button {
+    padding: 10px 20px;
+    font-size: 30px;
+    letter-spacing:3px;
+    cursor: pointer;
+    border-radius: 20px;
+    background: #134d5c;
+    border: none;
+    color: white;
+}
+
+.message {
+    font-size: 30px;
+    margin-bottom: 10px;
+}