javascript - 为我的家庭作业设计 Javascript 刽子手猜谜游戏，但无法让代码工作

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 4 年前。

Improve this question

我正在尝试为我的编码训练营设计这个刽子手游戏，我以为我已经完成了所有功能...但看起来每次我尝试运行我的代码时，它都不起作用。具体来说，这些字母不会显示在页面上(这是刽子手游戏的重点)。 (我对编码非常陌生，所以如果我没有多大意义......或者如果我的代码一团糟，我很抱歉)。

我不太确定控制台是否正确记录了所有内容。我觉得我可能有很多错误，当我进入控制台时，这些错误并没有全部被调用。我认为这些信件没有被调用，但我不太确定如何更改它。

// My list of favorite 90s shows ... and their word options
var words = ["Sister Sister", "Saved by the Bell", "Family Matters", "All That", "Friends", "The Fresh Prince of Bel-Air"]
var letter = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "-", "_"];

// game counters 
var blanks = 0; // blanks
var wins = 0; // number of wins 
var losses = 0; // number of losess
var maxGuesses = 10; // how many guesses the player has
var guessesRemaining = 0; // how many guesses are remaining 

// players guesses 
var blanksLetters = []; // both blank and solved letters
var guessedLetters = []; // stores guessed letters
var wrongGuesses = []; // stores wrong guesses
var ansWordArr = [];
var ansWord = "";

// the token booleans
isFinished = true; 
letterInWord = true;

setup();

// other important functionality for keys
document.onkeyup = function(event) { // captures key clicks
    // Converts all key clicks to uppercase letters... because that's more FUN.
    var guessedLetters = String.fromCharCode(event.which).toUpperCase();

    // Runs the code to check for correctness.
    checkGuess(letter);


};

/**
 * Helper functions
 */
// start game 
function setup() {

    // start game
    maxGuesses = 10;

    // word is randomly chosen from the list
    ansWord = words[Math.floor(Math.random() * words.length)];

    // split word into individual letters
    ansWordArr = ansWord.split("");

    // count number of letters in word
    blanks = ansWordArr.length;

    // adds "_" to blanks ... here's my for loop
    for (var i = 0; i < blanks; i++) { 
        blanksLetters.push("_");
    }

    // resetting after rounds
    blanksLetters = [];
    gessesRemaining = maxGuesses; 
    guessedLetters = [];
    wrongGuesses = []; 

    // testing
    console.log(ansWord); // to print word in console 
    console.log(blanksLetters); // to print blanks in console

    // to warn the player of running out of guesses
    document.getElementById("numGuesses").style.color = "";

    //show the selected elements on the screen 
    updateScreen();

    // display gifs of shows 
    document.getElementById("giphy-embed").src = "";
};

 // updating HTML 
 function updateScreen() {
    document.getElementById("wins").innerText = wins; // prints wins, restarts game
    document.getElementById("losses").innerText = losses; // prints losses, restarts game
    document.getElementById("guesses").innerText = guessesRemaining; // prints guesses left
    document.getElementById("ansWord").innerText = ansWordArr.join(""); // prints blanks and guesses 
    document.getElementById("wrongGuesses").innerText = wrongGuesses.join(""); // prints incorrect letters
    document.getElementById("guessedLetters").innerText = guessedLetters; // prints guessed letters
};

// check for winners 
function winner() {
    // add +1 to the player's score, given that there's no more "_" in ansWord.
    if (ansWordArr.toString() === guessedLetters.toString()) {
        wins++;
        alert("BOO-YAH!!!");
        isFinished = true;

        // if answer is correct, play gif of that show 
        if(ansWord === "Sister Sister") {
            document.getElementById("giphy-embed").src = "https://giphy.com/gifs/RxyLmP3eQyCvS/html5";
        }
        else if(ansWord === "Saved By the Bell") {
            document.getElementById("giphy-embed").src = "https://giphy.com/gifs/1HPzxMBCTvjMs/html5";
        }
        else if(ansWord === "Family Matters") {
            document.getElementById("giphy-embed").src = "https://giphy.com/gifs/3o85g8TYvayD4rhj9u/html5";
        }
        else if(ansWord === "All That") {
            document.getElementById("giphy-embed").src = "https://giphy.com/gifs/l4Ep1CAHPrPAEe1So/html5";
        }
        else if(ansWord === "Friends") {
            document.getElementById("giphy-embed").src = "https://giphy.com/gifs/C4msBrFb6szHG/html5";
        }
        else if(ansWord === "The Fresh Prince of Bel-Air") {
            document.getElementById("giphy-embed").src = "https://giphy.com/gifs/Mxygn6lbNmh20/html5";
        }
    };
};

// key activity 
function checkGuess(letter) {

    // current state
    var letterInWord = false;

    // If letter is in the word
    // if (letterInWord) {
        for (var i = 0; i < blanks; i++) {
            if (ansWord[i] === letter) {
                letterInWord = true;
                blanksLetters[i] = letter;
            }
        }
    // }

    if (!letterInWord) {
        wrongGuesses.push(letter);
        maxGuesses--; 
    };
    console.log(letterInWord);
    console.log(blanksLetters);

}; 

// check for losers 
function loser() {
    // if guessesRemaining = 0, add +1 to losses
    if (maxGuesses === 0) {
        losses++;
        alert("As If!");
        isFinished = true;

        //play the loser gif
        document.getElementById("giphy-embed").src = "https://giphy.com/gifs/3og0IEeKFFlzaykixW/html5";
        document.getElementById("losses").style.color = "#FF0000";
    }
};

当我进行猜测时，我希望字母出现在页面上。

Answer 1

一些更正

首先， bool 值也是变量，因此应该正确声明它们:

// the token booleans
let isFinished = true; 
let letterInWord = true;

建议使用ECMAScript6规范，因此请使用 const 表示常量值，使用 let 表示变量，而不是使用旧的 var 关键字。

空白字符串对 css 没有太大意义:

// to warn the player of running out of guesses
document.getElementById("numGuesses").style.color = "white";

问题

letter 变量是一个数组，在调用 checkGuess(letter) 后，您可以将数组与字符进行比较:

let letter = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "-", "_"]
.
.
.
if (ansWord[i] === letter) {
   letterInWord = true;
   blanksLetters[i] = letter;
}

你永远不会调用winners()或losers()。

建议

1. 向我们展示该游戏的 HTML 代码。
2. 将 checkGuess(letter) 更改为 checkGuess("A") 或其他字母，看看会发生什么。
3. 做

console.log('\nloser');
loser();
console.log('\nwinner');
winner();

在 setup() 函数中的 updateScreen() 之后，看看会发生什么。