2 玩家 Javascript 刽子手游戏问题提示答案

【问题标题】：2 players Javascript hangman game problem with prompt2 玩家 Javascript 刽子手游戏问题提示
【发布时间】：2021-04-26 22:59:43
【问题描述】：

我目前正在制作一个刽子手游戏，第一个玩家需要输入一个玩家 2 需要通过提示猜测的单词。当我通过提示输入单词时，它在控制台日志中，但没有显示在页面中。它应该以下斜线显示，例如：'_ _ _ _ _'，具体取决于单词的长度。如何以下斜线形式显示单词？

这是我目前所拥有的。

谢谢！

HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">


    <title>Hangman</title>
</head>

<body>
    <div class="container">
        <h1>Hangman</h1>
        <div>Wrong Guesses: <span id='mistakes'>0</span> of <span id='maxWrong'></span></div>
        <div>
            <img id='hangmanPic' src="./images/0.jpg" alt="">
            <p>Guess the word:</p>
            <p id="wordSpotlight">The word to be guessed goes here</p>
            <div id="keyboard"></div>
            <button class="btn btn-info" onClick="reset()">Reset</button>
        </div>
    </div>
</body>

</html>

脚本：

<script>
        let answer = '';
        let maxWrong = 8;
        let mistakes = 0;
        let guessed = [];
        let wordStatus = null;

        function randomWord() {
            var secretWord = prompt("Player 1, enter a word to guess", "");
            secretWord = secretWord.toUpperCase();
            console.log("Word to guess: " + secretWord);

            var secretWordArray = Array.from(secretWord);
            console.log("Word to guess (array): " + secretWordArray);

            var wordArray = [];
            for (var i = 0; i < secretWordArray.length; i++) {
                motArray[i] = " _ ";
            }
            return wordArray;
        }

        function generateButtons() {
            let buttonsHTML = 'abcdefghijklmnopqrstuvwxyz'.split('').map(letter =>
                `<button class="btn btn-lg btn-primary m-2" id='` + letter + `'onClick="chooseLetter('` + letter + `')">` + letter + `</button>`).join('');

            document.getElementById('keyboard').innerHTML = buttonsHTML;
        }

        function chooseLetter(chosenLetter) {
            guessed.indexOf(chosenLetter) === -1 ? guessed.push(chosenLetter) : null;
            document.getElementById(chosenLetter).setAttribute('disabled', true);

            if (answer.indexOf(chosenLetter) >= 0) {
                guessedWord();
                checkIfGameWon();
            } else if (answer.indexOf(chosenLetter) === -1) {
                mistakes++;
                updateMistakes();
                checkIfGameLost();
                updateHangmanPicture();
            }
        }

        function updateHangmanPicture() {
            document.getElementById('hangmanPic').src = './images/' + mistakes + '.jpg';
        }

        function checkIfGameWon() {
            if (wordStatus === answer) {
                document.getElementById('keyboard').innerHTML = 'You Won!!!';
            }
        }

        function checkIfGameLost() {
            if (mistakes === maxWrong) {
                document.getElementById('wordSpotlight').innerHTML = 'The answer was: ' + answer;
                document.getElementById('keyboard').innerHTML = 'You Lost!!!';
            }
        }

        function guessedWord() {
            wordStatus = answer.split('').map(letter => (guessed.indexOf(letter) >= 0 ? letter : " _ ")).join('');

            document.getElementById('wordSpotlight').innerHTML = wordStatus;
        }

        function updateMistakes() {
            document.getElementById('mistakes').innerHTML = mistakes;
        }

        function reset() {
            mistakes = 0;
            guessed = [];
            document.getElementById('hangmanPic').src = './images/0.jpg';

            randomWord();
            guessedWord();
            updateMistakes();
            generateButtons();
        }

        document.getElementById('maxWrong').innerHTML = maxWrong;

        randomWord();
        generateButtons();
        guessedWord();
    </script>

【问题讨论】：

有具体问题吗？
@SlavaKnyazev 如何在页面上以下斜线形式显示密码？
Array("word".length).fill(0).map(_ => "_ ").join("").trim(); ?

标签： javascript html prompt

【解决方案1】：

使用for 循环，逐个字符地遍历秘密单词，并检查它是否在guessed 数组中。如果是，则输出字符后跟一个空格。如果不是，则输出一个下划线，后跟一个空格。

如果没有猜到的字母，这将输出一行下划线。

注意大小写问题。

let output = '';
let secret = "secret";
let guessed = ['e', 't'];
for (let char of secret) {
    output += ((guessed.indexOf(char) === -1)?'_':char)+" ";
}
output = output.trim();

console.log(output);  // _ e _ _ e t

【讨论】：

它工作正常，谢谢！出现下划线，但它不是好数字（例如：秘密词：'Hello'，它显示'_ _ _ _ _ _'）。另外，当我点击秘密单词的右侧字母时，它们不会显示而不是下划线。
对于不同的单词和不同的猜测字母列表，代码的工作方式如下所示。如果你想在你的程序中使用它，请确保它使用了正确的变量。
我正在尝试，但我似乎找不到如何让它工作，抱歉我是编码界的新手。