Simple HTML Guessing Game: Play in Your Browser
Simple HTML Guessing Game
This is a straightforward guessing game you can play right in your browser. The computer picks a random number between 1 and 10, and your mission is to guess it correctly. If you miss, you get hints, allowing you to keep guessing until you win!
How to Play
- Open your web browser and go to https://codepen.io/anon/pen/oJvKbO to access the game.
- Type a number between 1 and 10 into the input field.
- Click the 'Guess' button.
- If you're right, you win! Otherwise, the game will tell you if your guess was too high or too low. Keep trying until you guess the correct number!
The Code Behind the Game
<!DOCTYPE html>
<html>
<head>
<title>Simple HTML Game</title>
</head>
<body>
<h1>Guessing Game</h1>
<p>Guess a number between 1 and 10:</p>
<input type="text" id="guessInput">
<button onclick="checkGuess()">Guess</button>
<p id="result"></p>
<script>
function checkGuess() {
var randomNumber = Math.floor(Math.random() * 10) + 1;
var guess = parseInt(document.getElementById("guessInput").value);
if (guess === randomNumber) {
document.getElementById("result").innerHTML = "You win!";
} else if (guess > randomNumber) {
document.getElementById("result").innerHTML = "Your guess is too high. Try again.";
} else {
document.getElementById("result").innerHTML = "Your guess is too low. Try again.";
}
}
</script>
</body>
</html>
Ready to Play?
Give it a try and see if you can guess the number! It's a fun way to test your logic and have a bit of fun while learning about basic HTML and JavaScript.
原文地址: https://www.cveoy.top/t/topic/lmcV 著作权归作者所有。请勿转载和采集!