-
Notifications
You must be signed in to change notification settings - Fork 164
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
9 changed files
with
227 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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!🥳 |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.