javascript - 在 Vanilla JavaScript Hangman 游戏中触发 "Win"

标签 javascript function random return counter

所以我已经问了几个关于这个 Hangman 游戏的问题(并得到了很棒的答案),但我一直被我的“记分员”绊倒。该游戏也几乎可以满足我的所有需求,但只有在填写整个单词后按下随机键后才会记录“获胜”...

<!DOCTYPE html>
<html>
<head>
    <title>Hangman</title>
</head>
<body>
    <h1>Hangman!</h1>

    <p>
        <font size="+3"><span id="answer"></span></font>
    </p>
    <p>Lives: <span id="counter"></span></p>
    <p id="wrongGuesses"></p>
    <p>Wins: <span id="wins"></span></p>
    <p>Losses: <span id="losses"></span></p>


    <script type="text/javascript">

var word;

var guess;      //user guess
var letters = [];       //correctly guessed letters
var wrongLetters = [];      //incorrectly guessed letters
var counter;        //counts correct letters
var losses = 0;
var wins = 0;


document.getElementById("losses").innerHTML = losses;
document.getElementById("wins").innerHTML = wins;

var wordList = ["cat", "dog", "wolf", "laser", "apple"];        //FILL LIST LATER!!


//randomly chooses a word from the array and replaces letters with underscores
function start() {
    word = wordList[Math.floor(Math.random() * wordList.length)];
    counter = 7;
    document.getElementById("counter").innerHTML = counter;
    for (i = 0; i < word.length; i++) {
        letters[i] = "__";
    }

    document.getElementById("answer").innerHTML = letters.join(" ");
    console.log(word);

}


//checks if letter is in the word or not
function checkLetter() {
    document.onkeyup = function(event) {
        guess = event.key.toLowerCase();
        //var found = false;
        for (i = 0; i < word.length; i++) {
            if (guess === word[i]) {
                letters[i] = guess;
                document.getElementById("answer").innerHTML = letters.join(" ");
                //found = true;
            } 
        }
        //wrong letters go into the wrongLetters array and are displayed
        //if (found) return;
        if (wrongLetters.indexOf(guess) < 0) {
            wrongLetters.push(guess);
            document.getElementById("wrongGuesses").innerHTML = wrongLetters.join(" ");
            //every wrong guess subtracts one from the counter
            counter--;
            console.log(counter);
            document.getElementById("counter").innerHTML = counter;
            //when counter reaches 0 it's Game Over
            //+1 to the losses if 7 words are missed

            if (counter > 0 && letters.join("") === word) {             //THE ISSUE
                document.getElementById("wins").innerHTML = wins + 1;
                console.log(wins);
                confirm("YOU WIN! Play Again?");
                    wins++;
                    counter = 7;
                    letters = [ ];
                    wrongLetters = [ ];
                start();
            }

            else if (counter === 0) {
                document.getElementById("losses").innerHTML = losses + 1;
                console.log(losses);
                confirm("YOU LOOSE... play again?"); {
                    losses++;
                    counter = 7;
                    letters = [];
                    wrongLetters = [];
                    start();
                }
            }
        }
    }
}


start();
checkLetter();

</script>
</body>
</html>

这是我目前所拥有的,这是一个 jsfiddle 链接:https://jsfiddle.net/t57zfv3t/11/ 我知道主要问题是 found bool 和 return,但我似乎找不到解决它的方法。如果有人有任何见解,将不胜感激,我提前向我已经为此烦恼的任何人道歉。谢谢!!

最佳答案

如果找到字母,即使它是一个完整的单词匹配,你也会返回,所以也要在条件中检查它

//wrong letters go into the wrongLetters array and are displayed
if (found && letters.join("") !== word) return;

关于javascript - 在 Vanilla JavaScript Hangman 游戏中触发 "Win",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46143879/

相关文章:

random - 如何在 Rust 中生成一串具有特定大小的随机 ASCII 可打印字符?

python - 在 Python 中生成随机的 6 位数字 ID

javascript - 拆分前两个空格的字符串

javascript - 使用 UI Utils 进行 Angular 表单验证

javascript - jQuery $.each 与 JavaScript .forEach

javascript - 在 JavaScript 中,构造函数和作为构造函数调用的函数返回对象之间有什么区别?

javascript - 悬停时在 div 中的两个范围之间切换

javascript - 如何获取网页中使用的DOM元素的数量

javascript - JS 函数返回函数,共享应该私有(private)的数据

scala - ScalaCheck 的 Gen.pick 真的是随机的吗?