Hangman 游戏图像仅限 JavaScript

Question

每次玩家未能猜出字母时，我该如何实现这些图像？我应该把它放在哪里？当玩家猜不到1个字母时，会显示刽子手1，然后是刽子手2，然后是刽子手3等等？这是我的代码。图像在 console.log 中

 /* hangman 1

 console.log(" _|_\n|   |_____\n|         |\n|_________|");

 hangman 2

 console.log("   _____\n  |     |\n  |\n  |\n _|_\n|   |_____\n|         |\n|_________|\n");

 hangman 3

 console.log("   _____\n  |     |\n  |     o\n  |     | \n _|_    \ \n|   |_____\n|         |\n|_________|\n");

 hangman 4

 console.log("   _____\n  |     |\n  |     o\n  |    /|\\ \n _|_    \ \n|   |_____\n|         |\n|_________|\n");

 hangman 5

 console.log("   _____\n  |     |\n  |     o\n  |    /|\\ \n _|_   / \\ \n|   |_____\n|         |\n|_________|\n");

*/

// Show player their progress | .join returned answer as a string

whil (remainingLetters > 0 && lives > 0) {

    (answerArray.join(""));

    guess = readline.question(name + "'s guess (Enter 9 for lifelines or 0 to pass): ");

    guess = guess.toUpperCase();

    //if guess is more than 1 letter or no letter, alert player to guess 1 letter only

    if (guess.length !== 1) {

      console.log("Please enter 1 letter only.");

    }

    //if valid guess

    else {

      if (guesses.includes(guess)) {

        console.log("\nYou have already made this guess, please try another letter!\n");

      } else {

        guesses.push(guess);

        correctGuess = 0;

        for (var j = 0; j < Word.length; j++) {

          if (Word[j] == guess) {

            answerArray[j] = guess;

            remainingLetters--;

            correctGuess = 1;

          }

        }

       

Answer 1

我的建议是将您的各种图形存储在一个数组中，并存储当前图形的索引 - 从零开始。每次用户得到错误答案时，您都会获取console.log当前索引，然后递增索引：&nbsp;console.log(graphicsArray[graphicsIndex++]);下面有一个演示，使用按钮按下来模拟错误答案。试试看。var graphicsArray = [];graphicsArray.push(" _|_\n|&nbsp; &nbsp;|_____\n|&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|\n|_________|");graphicsArray.push("&nbsp; &nbsp;_____\n&nbsp; |&nbsp; &nbsp; &nbsp;|\n&nbsp; |\n&nbsp; |\n _|_\n|&nbsp; &nbsp;|_____\n|&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|\n|_________|\n");graphicsArray.push("&nbsp; &nbsp;_____\n&nbsp; |&nbsp; &nbsp; &nbsp;|\n&nbsp; |&nbsp; &nbsp; &nbsp;o\n&nbsp; |&nbsp; &nbsp; &nbsp;| \n _|_&nbsp; &nbsp; \ \n|&nbsp; &nbsp;|_____\n|&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|\n|_________|\n");graphicsArray.push("&nbsp; &nbsp;_____\n&nbsp; |&nbsp; &nbsp; &nbsp;|\n&nbsp; |&nbsp; &nbsp; &nbsp;o\n&nbsp; |&nbsp; &nbsp; /|\\ \n _|_&nbsp; &nbsp; \ \n|&nbsp; &nbsp;|_____\n|&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|\n|_________|\n");graphicsArray.push("&nbsp; &nbsp;_____\n&nbsp; |&nbsp; &nbsp; &nbsp;|\n&nbsp; |&nbsp; &nbsp; &nbsp;o\n&nbsp; |&nbsp; &nbsp; /|\\ \n _|_&nbsp; &nbsp;/ \\ \n|&nbsp; &nbsp;|_____\n|&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|\n|_________|\n");var graphicsIndex = 0;document.querySelector("#demo").onclick = () => {&nbsp; &nbsp; console.log(graphicsArray[graphicsIndex++]);}<button id="demo">press me</button>您将在减少生命数量的代码部分执行此操作。// ... //if (correctGuess == 1) {&nbsp; &nbsp;console.log("\nGood job! " + guess + " is one of the letters!\n");&nbsp; &nbsp;console.log(JSON.stringify(answerArray) + "\n");&nbsp; &nbsp;console.log(JSON.stringify(alphabets) + "\n");} else {&nbsp; &nbsp;lives -= 1;&nbsp; &nbsp;console.log("\nSorry. " + guess + " is not a part of the word.\n");&nbsp; &nbsp;console.log(JSON.stringify(answerArray) + "\n");&nbsp; &nbsp;console.log(JSON.stringify(alphabets) + "\n");&nbsp; &nbsp;console.log("You have " + lives + " lives remaining.\n");&nbsp; &nbsp;console.log(graphicsArray[graphicsIndex++]);}// ... //

Answer 2

使用发电机！要更好地了解什么是生成器，您可以访问此处：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*/* This function generates your images */function* hangmanGenerator() {&nbsp; &nbsp; yield console.log(" _|_\n|&nbsp; &nbsp;|_____\n|&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|\n|_________|");&nbsp; &nbsp; yield console.log("&nbsp; &nbsp;_____\n&nbsp; |&nbsp; &nbsp; &nbsp;|\n&nbsp; |\n&nbsp; |\n _|_\n|&nbsp; &nbsp;|_____\n|&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|\n|_________|\n");&nbsp; &nbsp; yield console.log("&nbsp; &nbsp;_____\n&nbsp; |&nbsp; &nbsp; &nbsp;|\n&nbsp; |&nbsp; &nbsp; &nbsp;o\n&nbsp; |&nbsp; &nbsp; &nbsp;| \n _|_&nbsp; &nbsp; \ \n|&nbsp; &nbsp;|_____\n|&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|\n|_________|\n");&nbsp; &nbsp; yield console.log("&nbsp; &nbsp;_____\n&nbsp; |&nbsp; &nbsp; &nbsp;|\n&nbsp; |&nbsp; &nbsp; &nbsp;o\n&nbsp; |&nbsp; &nbsp; /|\\ \n _|_&nbsp; &nbsp; \ \n|&nbsp; &nbsp;|_____\n|&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|\n|_________|\n");&nbsp; &nbsp; yield console.log("&nbsp; &nbsp;_____\n&nbsp; |&nbsp; &nbsp; &nbsp;|\n&nbsp; |&nbsp; &nbsp; &nbsp;o\n&nbsp; |&nbsp; &nbsp; /|\\ \n _|_&nbsp; &nbsp;/ \\ \n|&nbsp; &nbsp;|_____\n|&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|\n|_________|\n");}/* This is the istance of your image generator */const generator = hangmanGenerator();/* This is how you get the images out of your generator */generator.next().value&nbsp; /* Hangman 1*/generator.next().value&nbsp; /* Hangman 2*/generator.next().value&nbsp; /* Hangman 3*/generator.next().value&nbsp; /* Hangman 4*/generator.next().value&nbsp; /* Hangman 5*/generator.next().value&nbsp; /* No value because you're out of yields -> game over */您的代码应如下所示：//Your code...//The function definition can go wherever you want in your code as long as it's before the while loopfunction* hangmanGenerator() {&nbsp; &nbsp; yield console.log(" _|_\n|&nbsp; &nbsp;|_____\n|&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|\n|_________|");&nbsp; &nbsp; yield console.log("&nbsp; &nbsp;_____\n&nbsp; |&nbsp; &nbsp; &nbsp;|\n&nbsp; |\n&nbsp; |\n _|_\n|&nbsp; &nbsp;|_____\n|&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|\n|_________|\n");&nbsp; &nbsp; yield console.log("&nbsp; &nbsp;_____\n&nbsp; |&nbsp; &nbsp; &nbsp;|\n&nbsp; |&nbsp; &nbsp; &nbsp;o\n&nbsp; |&nbsp; &nbsp; &nbsp;| \n _|_&nbsp; &nbsp; \ \n|&nbsp; &nbsp;|_____\n|&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|\n|_________|\n");&nbsp; &nbsp; yield console.log("&nbsp; &nbsp;_____\n&nbsp; |&nbsp; &nbsp; &nbsp;|\n&nbsp; |&nbsp; &nbsp; &nbsp;o\n&nbsp; |&nbsp; &nbsp; /|\\ \n _|_&nbsp; &nbsp; \ \n|&nbsp; &nbsp;|_____\n|&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|\n|_________|\n");&nbsp; &nbsp; yield console.log("&nbsp; &nbsp;_____\n&nbsp; |&nbsp; &nbsp; &nbsp;|\n&nbsp; |&nbsp; &nbsp; &nbsp;o\n&nbsp; |&nbsp; &nbsp; /|\\ \n _|_&nbsp; &nbsp;/ \\ \n|&nbsp; &nbsp;|_____\n|&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|\n|_________|\n");}//As the generator definition you can istanciate the generator object wherever you need&nbsp;//as long as it's visible in the while loopconst generator = hangmanGenerator();// Show player their progress | .join returned answer as a stringwhile (remainingLetters > 0 && lives > 0) {&nbsp; &nbsp; (answerArray.join(""));&nbsp; &nbsp; guess = readline.question(name + "'s guess (Enter 9 for lifelines or 0 to pass): ");&nbsp; &nbsp; guess = guess.toUpperCase();&nbsp; &nbsp; //if guess is more than 1 letter or no letter, alert player to guess 1 letter only&nbsp; &nbsp; if (guess.length !== 1) {&nbsp; &nbsp; &nbsp; console.log("Please enter 1 letter only.");&nbsp; &nbsp; }&nbsp; &nbsp; //if valid guess&nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; if (guesses.includes(guess)) {&nbsp; &nbsp; &nbsp; &nbsp; console.log("\nYou have already made this guess, please try another letter!\n");&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; guesses.push(guess);&nbsp; &nbsp; &nbsp; &nbsp; correctGuess = 0;&nbsp; &nbsp; &nbsp; &nbsp; for (var j = 0; j < Word.length; j++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (Word[j] == guess) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; answerArray[j] = guess;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; remainingLetters--;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; correctGuess = 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if (correctGuess == 1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("\nGood job! " + guess + " is one of the letters!\n");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(JSON.stringify(answerArray) + "\n");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(JSON.stringify(alphabets) + "\n");&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; lives -= 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("\nSorry. " + guess + " is not a part of the word.\n");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(JSON.stringify(answerArray) + "\n");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(JSON.stringify(alphabets) + "\n");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("You have " + lives + " lives remaining.\n");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //HERE you show the hangman in the console&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; generator.next().value;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; if (remainingLetters == 0) {&nbsp; &nbsp; &nbsp; console.log("Congratulation! You managed to guess the word!\n");&nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; if (lives == 0) {&nbsp; &nbsp; &nbsp; console.log("Game Over... You failed to guess the word. The word is " + Word + ".\n")&nbsp; &nbsp; }&nbsp; }