Simple HTML Guessing Game: Play Now!
<!DOCTYPE html>
<html>
<head>
<title>Simple HTML Guessing Game</title>
<pre><code><style>
body {
background: #444;
padding: 0;
margin: 0;
}
#game-container {
width: 300px;
height: 200px;
margin: 40px auto;
background: #fff;
border: 5px solid #000;
padding: 20px;
text-align: center;
}
#score {
margin-top: 20px;
font-size: 20px;
font-weight: bold;
}
</style>
</code></pre>
</head>
<body>
<div id='game-container'>
<h1>Guess the Number!</h1>
<p>I'm thinking of a number between 1 and 10. Can you guess it?</p>
<input type='text' id='guess-input' />
<button id='guess-btn'>Guess</button>
<p id='score'>Score: 0</p>
</div>
<script>
// Generate a random number between 1 and 10
let randomNumber = Math.floor(Math.random() * 10) + 1;
// Get the elements we'll need
let guessInput = document.querySelector('#guess-input');
let guessBtn = document.querySelector('#guess-btn');
let scoreEl = document.querySelector('#score');
// Set the initial score
let score = 0;
// Listen for a click on the guess button
guessBtn.addEventListener('click', function() {
// Get the guess from the input field
let guess = parseInt(guessInput.value);
// Check if the guess is correct
if (guess === randomNumber) {
// Increase the score
score++;
// Update the score element
scoreEl.textContent = 'Score: ' + score;
// Generate a new random number
randomNumber = Math.floor(Math.random() * 10) + 1;
}
});
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmc4 著作权归作者所有。请勿转载和采集!