Play Hangman Online: A Classic HTML Game
<!DOCTYPE html>
<html>
<head>
<title>Hangman</title>
</head>
<body>
<h1>Hangman</h1>
<div>
<p>Guess the word:</p>
<p><span id='word'></span></p>
</div>
<div>
<p>Guesses:</p>
<p><span id='guesses'></span></p>
</div>
<div>
<p>Lives:</p>
<p><span id='lives'></span></p>
</div>
<div>
<p>Guess a letter:</p>
<input type='text' id='letter' />
<button id='guess'>Guess</button>
</div>
<script>
const word = 'HANGMAN';
const guesses = [];
let lives = 5;
const displayWord = document.getElementById('word');
const displayGuesses = document.getElementById('guesses');
const displayLives = document.getElementById('lives');
const guessButton = document.getElementById('guess');
const letterInput = document.getElementById('letter');
<pre><code> // Function to update the display
function updateDisplay() {
let wordToDisplay = '';
for (let i = 0; i < word.length; i++) {
if (guesses.includes(word[i])) {
wordToDisplay += word[i];
} else {
wordToDisplay += '_';
}
}
displayWord.innerHTML = wordToDisplay;
displayGuesses.innerHTML = guesses;
displayLives.innerHTML = lives;
}
// Event listener for the guess button
guessButton.addEventListener('click', () => {
if (letterInput.value.length === 1) {
guesses.push(letterInput.value.toUpperCase());
if (!word.includes(letterInput.value.toUpperCase())) {
lives--;
}
letterInput.value = '';
updateDisplay();
}
if (displayWord.innerHTML === word) {
alert('You win!');
}
if (lives === 0) {
alert('You lose!');
}
});
// Initial display
updateDisplay();
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lnQY 著作权归作者所有。请勿转载和采集!