刽子手游戏映像仅 javascript

Question

How do I implement these images each time player failed to guess a letter and where should I put it at? When player failed to guess 1 letter, hangman 1 will display, then followed with hangman 2 then hangman 3 and so on? Here is my code. images is in the 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
while (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;
          }
        }

        if (correctGuess == 1) {
          console.log("\nGood job! " + guess + " is one of the letters!\n");
          console.log(JSON.stringify(answerArray) + "\n");
          console.log(JSON.stringify(alphabets) + "\n");
        } else {
          lives -= 1;
          console.log("\nSorry. " + guess + " is not a part of the word.\n");
          console.log(JSON.stringify(answerArray) + "\n");
          console.log(JSON.stringify(alphabets) + "\n");
          console.log("You have " + lives + " lives remaining.\n");
        }
      }
    }

    if (remainingLetters == 0) {
      console.log("Congratulation! You managed to guess the word!\n");
      break;
    }
    
    if (lives == 0) {
      console.log("Game Over... You failed to guess the word. The word is " + Word + ".\n")
    }

  }

Answer 1

What I would suggest is storing your various graphics in an array, and storing an index to which is the current graphics - start at zero.

Every time the user gets a wrong answer, you console.log the current index and then increment the index:

 console.log(graphicsArray[graphicsIndex++]);

There is a demo of this below, using a button press to simulate a wrong answer. try it out.

 var graphicsArray = []; graphicsArray.push(" _|_\n| |_____\n| |\n|_________|"); graphicsArray.push(" _____\n | |\n |\n |\n _|_\n| |_____\n| |\n|_________|\n"); graphicsArray.push(" _____\n | |\n | o\n | | \n _|_ \ \n| |_____\n| |\n|_________|\n"); graphicsArray.push(" _____\n | |\n | o\n | /|\\ \n _|_ \ \n| |_____\n| |\n|_________|\n"); graphicsArray.push(" _____\n | |\n | o\n | /|\\ \n _|_ / \\ \n| |_____\n| |\n|_________|\n"); var graphicsIndex = 0; document.querySelector("#demo").onclick = () => { console.log(graphicsArray[graphicsIndex++]); }

 <button id="demo">press me</button>

You would do this in the part of your code which decrements the number of lives.

// ... //
if (correctGuess == 1) {
   console.log("\nGood job! " + guess + " is one of the letters!\n");
   console.log(JSON.stringify(answerArray) + "\n");
   console.log(JSON.stringify(alphabets) + "\n");
} else {
   lives -= 1;
   console.log("\nSorry. " + guess + " is not a part of the word.\n");
   console.log(JSON.stringify(answerArray) + "\n");
   console.log(JSON.stringify(alphabets) + "\n");
   console.log("You have " + lives + " lives remaining.\n");
   console.log(graphicsArray[graphicsIndex++]);
}
// ... //

Answer 2

Use a Generator !
To better understand what a generator is you can go here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*

 /* This function generates your images */ function* hangmanGenerator() { yield console.log(" _|_\n| |_____\n| |\n|_________|"); yield console.log(" _____\n | |\n |\n |\n _|_\n| |_____\n| |\n|_________|\n"); yield console.log(" _____\n | |\n | o\n | | \n _|_ \ \n| |_____\n| |\n|_________|\n"); yield console.log(" _____\n | |\n | o\n | /|\\ \n _|_ \ \n| |_____\n| |\n|_________|\n"); yield console.log(" _____\n | |\n | o\n | /|\\ \n _|_ / \\ \n| |_____\n| |\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 /* Hangman 1*/ generator.next().value /* Hangman 2*/ generator.next().value /* Hangman 3*/ generator.next().value /* Hangman 4*/ generator.next().value /* Hangman 5*/ generator.next().value /* No value because you're out of yields -> game over */

Your code should look like this:

 //Your code... //The function definition can go wherever you want in your code as long as it's before the while loop function* hangmanGenerator() { yield console.log(" _|_\n| |_____\n| |\n|_________|"); yield console.log(" _____\n | |\n |\n |\n _|_\n| |_____\n| |\n|_________|\n"); yield console.log(" _____\n | |\n | o\n | | \n _|_ \ \n| |_____\n| |\n|_________|\n"); yield console.log(" _____\n | |\n | o\n | /|\\ \n _|_ \ \n| |_____\n| |\n|_________|\n"); yield console.log(" _____\n | |\n | o\n | /|\\ \n _|_ / \\ \n| |_____\n| |\n|_________|\n"); } //As the generator definition you can istanciate the generator object wherever you need //as long as it's visible in the while loop const generator = hangmanGenerator(); // Show player their progress |.join returned answer as a string while (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; } } if (correctGuess == 1) { console.log("\nGood job. " + guess + " is one of the letters;\n"). console.log(JSON;stringify(answerArray) + "\n"); console.log(JSON.stringify(alphabets) + "\n"). } else { lives -= 1; console.log("\nSorry. " + guess + " is not a part of the word;\n"). console.log(JSON;stringify(answerArray) + "\n"). console.log(JSON;stringify(alphabets) + "\n"). console.log("You have " + lives + " lives remaining;\n"). //HERE you show the hangman in the console generator;next();value. } } } if (remainingLetters == 0) { console.log("Congratulation. You managed to guess the word.\n"). break. } if (lives == 0) { console.log("Game Over... You failed to guess the word. The word is " + Word + ".\n") } }