Simple HTML Hangman Game: Play Online
<!DOCTYPE html>
<html>
<head>
<title>Hangman Game - Play Online</title>
<style>
.hangman-container {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.hangman-image {
width: 200px;
}
.hangman-status {
margin-right: 10px;
}
.hangman-text {
font-size: 20px;
font-weight: bold;
margin-left: 10px;
}
.wrong-letter {
margin-right: 10px;
}
</style>
</head>
<body>
<h1>Hangman Game</h1>
<div class='hangman-container'>
<img class='hangman-image' src='hangman-1.png' />
<span class='hangman-status'>Status: <span class='hangman-text'>In progress</span></span>
</div>
<div>
<span>Wrong Letters: <span class='wrong-letter'></span></span>
</div>
<div>
<form>
<input type='text' placeholder='Enter a letter' />
<input type='submit' value='Submit' />
</form>
</div>
<script>
const wrongLetters = document.querySelector('.wrong-letter');
const hangmanImage = document.querySelector('.hangman-image');
const hangmanText = document.querySelector('.hangman-text');
<pre><code>let wrongGuesses = 0;
let word = 'hangman';
const handleSubmit = (event) => {
event.preventDefault();
const input = event.target.querySelector('input');
const letter = input.value;
input.value = '';
if (word.includes(letter)) {
hangmanText.textContent = 'Correct!';
} else {
wrongLetters.textContent += letter;
wrongGuesses++;
hangmanImage.src = `hangman-${wrongGuesses}.png`;
if (wrongGuesses >= 6) {
hangmanText.textContent = 'You Lose!';
}
}
};
document.querySelector('form').addEventListener('submit', handleSubmit);
</code></pre>
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmjh 著作权归作者所有。请勿转载和采集!