“Guess the Number” game is a simple web-based game where the player is prompted to guess a random number generated by the computer.
This game serves as a basic example of a guessing game and can be expanded upon with additional features, such as keeping track of the number of attempts, adding a countdown timer, or incorporating more complex gameplay mechanics.
Follow this video for complete guidance :
https://www.youtube.com/watch?v=AIciC5saoYg
Complete Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Guess the Number Game using JavaScript</title>
<style type="text/css">
body{
font-family: 'Arial',sans-serif;
background-color:#f4f4f4;
margin:0;
display: flex;
justify-content: center;
align-items: center;
height:100vh;
}
#container{
background-color: beige;
padding:20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
text-align: center;
}
h1{
color:#333;
}
p{
color:#555;
}
input{
padding:10px;
margin:10px;
font-size: 16px;
}
button{
padding:10px 20px;
font-size:16px;
background-color: #4caf50;
color:#fff;
border:none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover{
background-color: #45a049;
}
#message{
margin-top: 20px;
font-weight: bold;
color:#333;
}
button.danger{
display: block;
width:100%;
background-color:rgba(255,0,0,0.7);
}
</style>
</head>
<body>
<div id="container">
<h1>Guess the Number Game</h1>
<p>Guess a number between 1 and 10 :</p>
<input type="number" id="guessInput" min="1" max="10">
<button onclick="checkGuess()">Submit Guess</button>
<p id="message"></p>
<button class="danger" onclick="window.location.reload()">New Game</button>
</div>
<script type="text/javascript">
const secretNumber = Math.floor(Math.random()*10)+1;
function checkGuess(){
const playerGuess = document.getElementById('guessInput').value;
if(playerGuess == secretNumber){
showMessage('Congratulations ! You guessed the correct number');
}else{
showMessage('Sorry, Try Again');
}
}
function showMessage(message){
document.getElementById('message').innerText = message;
}
</script>
</body>
</html>
Objective
The player’s goal is to correctly guess the randomly generated number within a specified range (between 1 and 10 in this case).
Game Elements
The game interface includes a title (“Guess the Number Game”), a prompt instructing the player to guess a number between 1 and 10, an input field for entering the guess, a “Submit Guess” button to submit the guess, and a message area to display feedback.
Game Flow
- The computer generates a random number between 1 and 10 at the beginning of the game.
- The player inputs their guess into the provided text input field.
- The player clicks the “Submit Guess” button.
- The game checks if the player’s guess matches the randomly generated number.
- If the guess is correct, a congratulatory message is displayed.
- If the guess is incorrect, a message suggests trying again.
Feedback
The game provides immediate feedback to the player, informing them whether their guess was correct or if they need to try again.
Replayability
Players can play the game multiple times, as a new random number is generated each time the page is loaded or “New Game” button is clicked.
Simplicity
The game is designed to be straightforward and easy to understand, making it accessible to players of all ages.
Visual Appeal
The game has a simple and visually appealing design, with a clean layout and user-friendly interface.
