Guess My Number is an entertaining web-based game where players attempt to guess a randomly generated number between 1 and 20. Developed using HTML, CSS, and JavaScript, this project provides an interactive and engaging gaming experience for users of all ages.
Key Features:
- Dynamic User Interface: The game features a visually appealing and user-friendly interface designed with animations and transitions using CSS and the W3.CSS framework, enhancing the overall gaming experience.
- Interactive Gameplay: Players input their guesses into a text field and submit them using a ‘Check!’ button. The game provides real-time feedback on each guess, informing the player whether their guess is too high, too low, or correct.
- Scoring System: The game maintains a score that decreases with each incorrect guess. Players strive to guess the correct number with the fewest attempts possible to achieve a higher score.
- Highscore Tracking: The game tracks the player’s highest score achieved during the session, encouraging replayability and competition among players.
- Responsive Design: Designed to be responsive, the game adapts to various screen sizes, ensuring a consistent and enjoyable experience across desktop and mobile devices.
Technologies Used: HTML, CSS, JavaScript
What I learned:
- Event Handling: Guess My Number introduced me to event handling in JavaScript, allowing me to capture user input events, such as button clicks and keyboard inputs, to trigger appropriate game actions.
- Conditional Statements: Implementing conditional statements in JavaScript enabled me to create dynamic feedback messages based on the player’s guess compared to the randomly generated number.
- DOM Manipulation: Working with the Document Object Model (DOM) in JavaScript, I learned to dynamically update HTML elements to reflect changes in game state, such as updating scores and displaying feedback messages.
- CSS Animations: Utilizing CSS animations and transitions enhanced my understanding of creating engaging visual effects to improve user interaction and experience.
GitHub Link: https://github.com/ElementalVista/GuessTheNumber
