Simple HTML Guessing Game: Code & Tutorial
Simple HTML Guessing Game
This is a basic HTML guessing game where you try to guess a randomly generated number between 1 and 10.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Guessing Game</title>
<style>
body {
background-color: #e6f2ff;
text-align: center;
}
h1 {
color: #0080ff;
}
button {
background-color: #0080ff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Guessing Game</h1>
<p>Guess a number between 1 and 10</p>
<input type='number' id='guess' min='1' max='10'>
<button onclick='checkGuess()'>Submit</button>
<p id='result'></p>
<script>
// Generate random number between 1 and 10
let randomNum = Math.floor(Math.random() * 10) + 1;
function checkGuess() {
// Get player guess
let guess = document.getElementById('guess').value;
if (guess == randomNum) {
document.getElementById('result').innerHTML = 'Congratulations! You guessed correctly.';
} else {
document.getElementById('result').innerHTML = 'Sorry, that is not the correct number. Please try again.';
}
}
</script>
</body>
</html>
How to Play
- Save the code above as an HTML file (e.g., 'guessing_game.html').
- Open the HTML file in your web browser.
- Enter a number between 1 and 10 in the input field.
- Click the 'Submit' button to check your guess.
- The game will tell you if you guessed correctly or not.
Have fun playing the game!
原文地址: https://www.cveoy.top/t/topic/lmlF 著作权归作者所有。请勿转载和采集!