Play Hangman Game Online - Free HTML Hangman - 常规

<html>
<head>
    <title>Hangman Game</title>
    <style>
        #hangman {
            font-size: 2em;
        }
    </style>
</head>
<body>
    <h1>Hangman Game</h1>
    <div id='hangman'>
        <p>
            _ _ _ _
        </p>
    </div>
    <div>
        <form onsubmit='return false'>
            <label>Guess a letter: </label>
            <input type='text' id='guessLetter' oninput='guessLetter()'/>
        </form>
    </div>
    <div>
        <p>Wrong guesses:</p>
        <span id='wrongGuesses'></span>
    </div>
    <script>
        let word = 'apple';
        let correctLetters = [];
        const wrongLetters = [];
        let guessLetterInput = document.querySelector('#guessLetter');
        let hangmanPara = document.querySelector('#hangman p');
        let wrongGuessesPara = document.querySelector('#wrongGuesses');
<pre><code>    function guessLetter() {
        let letter = guessLetterInput.value;
        if (letter.length === 1) {
            if (word.indexOf(letter) === -1) {
                wrongLetters.push(letter);
                wrongGuessesPara.innerHTML = wrongLetters.join(' ');
            } else {
                correctLetters.push(letter);
                let displayLetters = '';
                for (let i = 0; i &lt; word.length; i++) {
                    let currentLetter = word[i];
                    if (correctLetters.indexOf(currentLetter) === -1) {
                        displayLetters += '_';
                    } else {
                        displayLetters += currentLetter;
                    }  
                }
                hangmanPara.innerHTML = displayLetters;
            }
        }
        guessLetterInput.value = '';
    }
&lt;/script&gt;
</code></pre>
</body>
</html>