Question

我正在尝试为我的编码训练营设计这款this子手游戏，我以为我可以发挥所有功能……但是好像每次尝试运行代码时，它都无法正常工作。具体来说，字母不会显示在页面上（这是the子手游戏的重点）。（我对编码非常陌生，因此，如果我没有太大的道理，或者我的代码太烂，我感到抱歉）。

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

// 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

一些更正

首先，布尔值也是变量，因此应正确声明它们：

// 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()。

建议

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

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

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

Answer 2

首先。您的示例没有html，这对于某些人来说是不好的，如果它显然是JS问题，那么为什么不忽略它们呢？尤其是因为它们只是向我们显示要筛选的值，所以console.log()或document.write()应该可以正常工作。

我看不到winners()或losers()的任何出现，并且在updateScreen()之后没有checkGuess()的出现，因此可能存在字母未显示的问题。同样，checkGuess对我来说似乎有些奇怪，但是我会单独检查一下，然后说一声。

所以...在设置中，您致电

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

    // resetting after rounds
    blanksLetters = [];

哪个将blankLetters设置为“ _”的数组，然后使用blankLetters = [];删除所有内容。那没有道理。

然后您在blankLetters中使用checkGuess，但这没关系，因为您不想尝试从中读取内容。只是保存到它。这就是为什么这对我来说似乎很奇怪。但这没关系。

我运行了这段代码（您的代码的简化版）：

let wrongGuesses = [];
let maxGuesses = 10;
let ansWord = "TenLetters";
let blanks = andWord.length;
let blanksLetters = [];
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].toUpperCase() === letter.toUpperCase()) {
                letterInWord = true;
                blanksLetters[i] = letter;
            }
        }
    // }

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

};

我必须在您的if语句中添加.toUpperCase()，因为您忘记这样做了。当您在onkeyup中调用checkGuess(letter)时，您将发送整个数组而不是一个猜测。将其更改为checkGuess(guessedLetter)。并做出了猜测，好像我在键盘上单击了“ e”一样：

checkGuess("E");

它奏效了。日志为：

true
Array(8) [ <1 empty slot>, "e", <2 empty slots>, "e", <2 empty slots>, "e" ]

摘要：

let wrongGuesses = [];
let maxGuesses = 10;
let ansWord = "TenLetters";
let blanks = ansWord.length;
let blanksLetters = [];
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].toUpperCase() === letter.toUpperCase()) {
            letterInWord = true;
            blanksLetters[i] = letter;
        }
    }
// }

if (!letterInWord) {
    wrongGuesses.push(letter);
    maxGuesses--; 
};
console.log(letterInWord);
console.log(blanksLetters);

};
checkGuess("E")

为我的作业设计Javascript Hangman猜谜游戏，但无法获取代码

2 个答案:

一些更正

问题

建议