Merge pull request #4061 from its-kritika/main

Created number_recall_game
kunjgit · Jun 3, 2024 · 84bea91 · 84bea91
2 parents 9ca25e2 + a67d429
commit 84bea91
Show file tree

Hide file tree

Showing 8 changed files with 182 additions and 1 deletion.
diff --git a/Games/Number_Recall_Game/README.md b/Games/Number_Recall_Game/README.md
@@ -0,0 +1,24 @@
+# Number Recall Game
+
+## Description
+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.
+
+# Functionality
+- 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.
+
+## 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.
+
+## Files
+- `index.html`: The main HTML file that sets up the structure of the game.
+- `styles.css`: The CSS file that styles the game.
+- `script.js`: The JavaScript file that contains the game logic.
diff --git a/Games/Number_Recall_Game/background.jpeg b/Games/Number_Recall_Game/background.jpeg
diff --git a/Games/Number_Recall_Game/index.html b/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/Games/Number_Recall_Game/script.js b/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/Games/Number_Recall_Game/style.css b/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/README.md b/README.md
@@ -331,6 +331,7 @@ This repository also provides one such platforms where contributers come over an
 | [Sudoku_light_theme](https://github.com/kunjgit/GameZone/tree/main/Games/Sudoku_light_theme)                  |
 | [Find_the_ball](https://github.com/kunjgit/GameZone/tree/main/Games/Find_the_ball)                  |
 |[Color The Page](https://github.com/kunjgit/GameZone/tree/main/Games/Color_The_Page)|
+| [Number_Recall_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Number_Recall_Game)               |
 | [Hit_the_hamster] (https://github.com/kunjgit/GameZone/tree/main/Games/Hit_the_hamster)                |
 | [Forest_Guardian](https://github.com/kunjgit/GameZone/tree/main/Games/Forst_Guardian)                  |
 | [Sudoku_light_theme](https://github.com/kunjgit/GameZone/tree/main/Games/Sudoku_light_theme)                  |
@@ -339,7 +340,8 @@ This repository also provides one such platforms where contributers come over an
 |[AquaSort_Game](https://github.com/kunjgit/GameZone/tree/main/Games/AquaSort_Game)   |
 | [Tic-Tac-Toe Game](https://github.com/kunjgit/GameZone/tree/main/Games/Tic-Tac-Toe) |
 | [Rapid_click_frenzy](https://github.com/kunjgit/GameZone/tree/main/Games/Rapid_click_frenzy)                  |
-|[Love_Calculator_Game]()|
+
+
  </center>
 
 <br>

diff --git a/assets/images/Number_recall_game (1).png b/assets/images/Number_recall_game (1).png
diff --git a/assets/images/Number_recall_game (2).png b/assets/images/Number_recall_game (2).png