ChromeGaming · its-kritika · Aug 10, 2024
diff --git a/README.md b/README.md
@@ -279,6 +279,7 @@ ________________________________________________________________________________
 |  216  | [Arkanoid_Game](.SinglePlayer%20-%20Games/Arkanoid_Game) |
 |  217  | [Brick_Breaker_Game](.SinglePlayer%20-%20Games/Brick_Breaker_Game) |
 |  218 | [Bash_Mole_Game](.SinglePlayer%20-%20Games/Bash_Mole_Game) |
+|  219 | [Number_Recall_Game](.SinglePlayer%20-%20Games/Number_Recall_Game) |
 
 
 </div>

diff --git a/SinglePlayer - Games/Banner - image/Number-Recall-Game.png b/SinglePlayer - Games/Banner - image/Number-Recall-Game.png
diff --git a/SinglePlayer - Games/Number_Recall_Game/README.md b/SinglePlayer - Games/Number_Recall_Game/README.md
@@ -0,0 +1,23 @@
+# Number Recall Game
+The Number Recall Game is a simple web-based game designed to test and improve your memory. The game presents a sequence of numbers that you must memorize and then recall correctly. The sequence grows longer with each round if you recall it correctly, and the game continues until you make a mistake.
+
+# Features
+- Displays a sequence of numbers to memorize.
+- Increases the length of the sequence with each round.
+- Simple and intuitive user interface.
+- You can track your current score.
+
+# Installation
+- Clone the repository
+- Navigate to the project directory `cd Number-Recall-Game`
+
+# Usage
+- Open the game by opening index.html in a web browser.
+- Click the `Start Game` button to begin.
+- A sequence of numbers will be displayed for a short period.
+- Memorize the sequence and enter it into the input field once it disappears.
+- Click the "Submit" button to check your input.
+- If you recall the sequence correctly, a new number will be added to the sequence, and the game continues.
+- If you input the sequence incorrectly, the game will end and display the correct sequence.
+
+# Enjoy Playing!🥳
diff --git a/SinglePlayer - Games/Number_Recall_Game/background.jpeg b/SinglePlayer - Games/Number_Recall_Game/background.jpeg
diff --git a/SinglePlayer - Games/Number_Recall_Game/index.html b/SinglePlayer - Games/Number_Recall_Game/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Number Recall Game</title>
+    <link rel = 'stylesheet' href = './style.css'>
+</head>
+<body>
+    <div class = 'container'>
+        <h1>Recall the Number</h1>
+        <div class = 'game'>
+            <div id = 'pattern' class = 'pattern'></div>
+            <input type = 'text' id = 'input' placeholder="Enter the sequence">
+            <button id = 'submit'>Submit</button>
+            <div id = 'msg'></div>
+        </div>
+        <button id = 'start'>Start Game</button>
+        <button id = 'restart'>Restart Game</button>
+    </div>
+    <p id = 'score'>Score is : 0</p>
+    <script src = './script.js'></script>
+</body>
+</html>
diff --git a/SinglePlayer - Games/Number_Recall_Game/script.js b/SinglePlayer - Games/Number_Recall_Game/script.js
@@ -0,0 +1,73 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const sequenceDiv = document.getElementById('pattern')
+    const playerInput = document.getElementById('input')
+    const submit = document.getElementById('submit')
+    const start = document.getElementById('start')
+    const restart = document.getElementById('restart')
+    const message = document.getElementById('msg')
+    const score = document.getElementById('score')
+
+    let sequence = []
+    let round = 0
+    playerInput.disabled = true
+    submit.disabled = true
+
+    //generate a random number
+    const generateNextNumber = () => {
+        return Math.floor(Math.random() * 10);
+    }
+
+    const showSequence = () => {
+        //it sets pattern to be the current sequence of numbers ( from array sequence )
+        sequenceDiv.innerText = sequence.join(' ')
+
+        //for round 1, sequenceDiv.innerText = '' will get executed after 1400ms, i.e, sequence is shown for 1400ms
+        setTimeout(() => {
+            sequenceDiv.innerText = '...'
+        }, 1000 + 200 * round) //it ensures as the game progresses and round increases, the sequence is displayed for a longer period before it is hidden.
+    }
+
+    const startGame = () => {
+        sequence = []
+        round = 0
+        currScore = 0
+        score.innerHTML = 'Score is : ' + currScore
+        message.innerText = ''
+        playerInput.value = ''
+        playerInput.disabled = false
+        submit.disabled = false
+        restart.style.display = 'block'
+        start.style.display = 'none'
+        nextRound()
+    }
+
+    //it will show next sequence of numbers
+    const nextRound = () => {
+        round++
+        sequence.push(generateNextNumber())
+        showSequence()
+    }
+
+    const checkSequence = () => {
+        //converting input value to an array
+        const playerSequence = playerInput.value.split('').map(Number)
+        if (playerSequence.join('') === sequence.join('')) {
+            // message.innerText = 'Correct!'
+            currScore += 10
+            score.innerHTML = 'Score is : ' + currScore
+            playerInput.value = ''
+            setTimeout(() => {
+                message.innerText = ''
+                nextRound();
+            }, 1000);
+        } else {
+            message.innerText = 'Game Over!' + '\n' + 'The correct sequence was: ' + sequence.join('')
+            playerInput.disabled = true
+            submit.disabled = true
+        }
+    }
+
+    submit.addEventListener('click', checkSequence)
+    start.addEventListener('click', startGame)
+    restart.addEventListener('click', startGame)
+})
diff --git a/SinglePlayer - Games/Number_Recall_Game/style.css b/SinglePlayer - Games/Number_Recall_Game/style.css
@@ -0,0 +1,58 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-image: url('./background.jpeg');
+    background-position: 10%;
+    flex-direction: column;
+}
+
+.container {
+    text-align: center;
+    backdrop-filter: blur(10px) brightness(72%);
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    width: 465px;
+    height: 43%;
+}
+
+.pattern {
+    font-size: 2em;
+    margin-bottom: 20px;
+}
+
+#input {
+    padding: 10px;
+    font-size: 1em;
+    margin-bottom: 10px;
+    outline: none;
+}
+
+#input:hover{
+    border: 2px solid navy;
+}
+
+button {
+    padding: 10px 20px;
+    font-size: 1em;
+    margin: 5px;
+    cursor: pointer;
+}
+
+#msg {
+    margin-top: 8px;
+    margin-bottom: 12px;
+    font-size: 1.1em;
+    color: rgb(122, 14, 14);
+}
+#restart{
+    display: none;
+    margin-left: 35%;
+}
+#score{
+    font-size: 1.3em;
+}
diff --git a/additionalpage/game.html b/additionalpage/game.html
@@ -10185,7 +10185,8 @@ <h4 class = "text-white uppercase game-card-title">Pop My Balloon</h4>
         <div class = "flex flex-col sm:flex-row justify-between items-start flex-wrap">
             <div class = "py-1">
                 <h4 class = "text-white uppercase game-card-title">Break the Blocks</h4>
-                <p class = "para-text">Arkanoid is a modern take on the classic Breakout game, featuring enhanced gameplay, diverse brick types, and engaging challenges. In this game, players control a paddle to bounce a ball and break various bricks arranged on the screen. The objective is to clear all the bricks while preventing the ball from falling off the bottom edge of the screen.</p>
+                <p class = "para-text">The Number Recall Game is a simple web-based game designed to test and improve your memory. The game presents a sequence of numbers that you must memorize and then recall correctly. The sequence grows longer with each round if you recall it correctly, and the game continues until you make a mistake.
+
             </div>
             <div class = "star-rating mt-2 sm:mt-0 py-1">
                 <img src = "../assets/icons/star-green.svg">
@@ -10212,6 +10213,52 @@ <h4 class = "text-white uppercase game-card-title">Break the Blocks</h4>
         </div>
     </div>
 </div>
+<!--card end--> 
+
+<!-- card starts -->
+
+<!-- ------------- -->
+<!--  Number Recall Game  -->
+<!-- ------------- -->
+<div class = "game-card">
+    <div class = "game-card-top img-fit-cover">
+        <img src = "../assets/images/Number-Recall-Game.png" alt = "">
+        <div class = "ratings-count">
+            41
+            <img src = "../assets/icons/star-black.svg" alt = "" class = "ms-2">
+        </div>
+    </div>
+    <div class = "game-card-bottom">
+        <div class = "flex flex-col sm:flex-row justify-between items-start flex-wrap">
+            <div class = "py-1">
+                <h4 class = "text-white uppercase game-card-title">Break the Blocks</h4>
+                <p class = "para-text">Arkanoid is a modern take on the classic Breakout game, featuring enhanced gameplay, diverse brick types, and engaging challenges. In this game, players control a paddle to bounce a ball and break various bricks arranged on the screen. The objective is to clear all the bricks while preventing the ball from falling off the bottom edge of the screen.</p>
+            </div>
+            <div class = "star-rating mt-2 sm:mt-0 py-1">
+                <img src = "../assets/icons/star-green.svg">
+                <img src = "../assets/icons/star-green.svg">
+                <img src = "../assets/icons/star-green.svg">
+                <img src = "../assets/icons/star-green.svg">
+                <img src = "../assets/icons/star-green-half.svg">
+            </div>
+        </div>
+        <div class = "block-wrap flex justify-between items-end">
+            <div class = "details-group">
+                <div class = "flex items-center">
+                    <p class = "font-semibold">Release Date: &nbsp;</p>
+                    <p>10.08.2024</p>
+                </div>
+                <div class = "flex items-center">
+                    <p class = "font-semibold">Updated: &nbsp;</p>
+                    <p>Action | Desktop</p>
+                </div>
+            </div>
+            <div class = "flex flex-col items-end justify-between">
+                <a target="_blank" href = "/SinglePlayer - Games/Number_Recall_Game/" class = "btn-primary uppercase">Play Now</a>
+            </div>
+        </div>
+    </div>
+</div>
 <!--card end--> 
             </div>
         </div>

diff --git a/assets/images/Number-Recall-Game.png b/assets/images/Number-Recall-Game.png