Play Hangman Online: Free HTML Hangman Game
<!-- HTML -->
<!DOCTYPE html>
<html>
<head>
<title>Hangman Game</title>
<style>
body {
font-family: sans-serif;
}
#game {
width: 400px;
margin: 0 auto;
}
#word {
font-size: 25px;
font-weight: bold;
text-align: center;
}
#guesses {
font-size: 20px;
font-style: italic;
text-align: center;
}
#message {
font-size: 18px;
font-style: italic;
text-align: center;
}
#guessInput {
font-size: 18px;
font-weight: bold;
}
#submitBtn {
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="game">
<h1>Hangman</h1>
<div id="word"></div>
<div id="guesses"></div>
<div id="message"></div>
<div>
<input type="text" id="guessInput" />
<input type="button" id="submitBtn" value="Guess" />
</div>
</div>
<pre><code><script>
// Variables
let word;
let guesses;
let message;
let correctGuesses;
// Selectors
const wordEl = document.querySelector('#word');
const guessesEl = document.querySelector('#guesses');
const messageEl = document.querySelector('#message');
const guessInput = document.querySelector('#guessInput');
const submitBtn = document.querySelector('#submitBtn');
// Words
const words = ['javascript', 'programming', 'computer', 'developer'];
// Generate random word
function getWord() {
return words[Math.floor(Math.random() * words.length)];
}
// Initialize game
function init() {
// Generate random word
word = getWord();
// Reset guesses
guesses = [];
correctGuesses = 0;
// Display the word
displayWord();
}
// Handle user input
function handleInput() {
// Get guessed letter
const guess = guessInput.value;
// Make sure it's a valid letter
const regex = /^[a-z]$/i;
if (!regex.test(guess)) {
setMessage('Please enter a valid letter', 'red');
} else {
// Make sure the letter hasn't been guessed
if (guesses.includes(guess)) {
setMessage('You already guessed that letter', 'red');
} else {
// Push the letter to the guesses array
guesses.push(guess);
// Check if the letter is in the word
if (word.includes(guess)) {
// Update correct guesses
correctGuesses++;
// Display the word
displayWord();
} else {
setMessage('Wrong!', 'red');
}
}
}
// Clear input
guessInput.value = '';
}
// Display the word
function displayWord() {
// Generate the HTML
let html = '';
// Loop through the word
for (let letter of word) {
if (guesses.includes(letter)) {
html += `<span>${letter}</span>`;
} else {
html += `<span>_</span>`;
}
}
// Update the DOM
wordEl.innerHTML = html;
// Check if the user won
if (correctGuesses === word.length) {
setMessage('You won!');
}
}
// Set message
function setMessage(text, color='black') {
messageEl.innerHTML = text;
messageEl.style.color = color;
}
// Event listeners
submitBtn.addEventListener('click', handleInput);
// Init game
init();
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lnjY 著作权归作者所有。请勿转载和采集!