تفاصيل العمل

# Guessing Game

This is a simple guessing game implemented in JavaScript. The game allows the user to guess a number and provides feedback based on the correctness of the guess. The game can be played by interacting with the web page elements or using keyboard shortcuts.

## How to Play

1. Open the game in a web browser.

2. The game interface consists of a guess input field, a "Check!" button, an "Again" button, and a message display area.

3. The number to be guessed is randomly generated between 0 and 20 at the start of the game.

4. Enter your guess in the guess input field.

5. To submit your guess, either press the "Enter" key or click the "Check!" button.

6. The game will provide feedback on your guess:

- If your guess is correct, the message display will show "Correct " and the box animation will change.

- If your guess is incorrect, the game will indicate whether you need to go up or down.

7. Your current score is displayed next to the score label.

8. The high score achieved during the current session is displayed next to the high score label.

9. To play again, click the "Again" button or press the "r" key on your keyboard.

10. The game will reset, and you can start guessing again.

## Code Overview

The JavaScript code for the game handles the game logic and DOM manipulation. Here's a summary of the code's functionality:

- The game uses `getElementById` to retrieve references to various HTML elements in the game interface, such as the box, buttons, score, and message display.

- The `add` method is used to add the CSS class `waveAnimation` to the box element, creating a wave animation effect.

- The `setRandom` function generates a random number between 0 and 20 and assigns it to the `theRandomNumber` variable.

- The `display` function updates the text content of the message display element with the provided text.

- The `resetGame` function resets the game state to its initial values:

- The message display shows "Start Guessing . . .".

- A new random number is generated.

- The score is set to 20.

- The box animation is reactivated.

- The `checkNumber` function is called when the user submits a guess:

- The user's guess is retrieved from the input field.

- If the guess is empty or not a valid number, an appropriate message is displayed.

- If the guess is correct, the box element's CSS classes are modified, the high score is updated, and the message display shows "Correct ".

- If the guess is incorrect, the score is decreased, and the message display indicates whether the guess should go up or down.

- Event listeners are attached to the document and specific elements to handle user interactions:

- When the "Enter" key is pressed, the `checkNumber` function is called.

- When the "r" key is pressed, the `resetGame` function is called.

- When the "Check!" button is clicked, the `checkNumber` function is called.

- When the "Again" button is clicked, the `resetGame` function is called.

Feel free to modify and enhance the code to suit your specific needs or to add additional features to the game.

Have fun playing the guessing game!

بطاقة العمل

اسم المستقل Mehdi A.
عدد الإعجابات 0
عدد المشاهدات 16
تاريخ الإضافة
تاريخ الإنجاز

المهارات المستخدمة