Hangman游戏图像仅限javascript



每次玩家猜不到字母时,我该如何实现这些图像?我应该把它放在哪里?当玩家猜不到1个字母时,会显示刽子手1,然后是刽子手2,然后是厉子手3,依此类推?这是我的密码图像在控制台中。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  |     on  |     | n _|_     n|   |_____n|         |n|_________|n");
hangman 4
console.log("   _____n  |     |n  |     on  |    /|\ n _|_     n|   |_____n|         |n|_________|n");
hangman 5
console.log("   _____n  |     |n  |     on  |    /|\ 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")
}
}

我建议将各种图形存储在一个数组中,并存储一个索引,该索引是从零开始的当前图形。

每次用户得到错误的答案时,您console.log当前索引,然后递增索引:

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

下面有一个演示,使用按下按钮来模拟错误的答案。试试看。

var graphicsArray = [];
graphicsArray.push(" _|_n|   |_____n|         |n|_________|");
graphicsArray.push("   _____n  |     |n  |n  |n _|_n|   |_____n|         |n|_________|n");
graphicsArray.push("   _____n  |     |n  |     on  |     | n _|_     n|   |_____n|         |n|_________|n");
graphicsArray.push("   _____n  |     |n  |     on  |    /|\ n _|_     n|   |_____n|         |n|_________|n");
graphicsArray.push("   _____n  |     |n  |     on  |    /|\ n _|_   / \ n|   |_____n|         |n|_________|n");

var graphicsIndex = 0;
document.querySelector("#demo").onclick = () => {
console.log(graphicsArray[graphicsIndex++]);
}
<button id="demo">press me</button>

你可以在代码中减少生命数量的部分这样做。

// ... //
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++]);
}
// ... //

使用生成器
要更好地了解什么是生成器,您可以访问此处: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  |     on  |     | n _|_     n|   |_____n|         |n|_________|n");
yield console.log("   _____n  |     |n  |     on  |    /|\ n _|_     n|   |_____n|         |n|_________|n");
yield console.log("   _____n  |     |n  |     on  |    /|\ 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...
//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  |     on  |     | n _|_     n|   |_____n|         |n|_________|n");
yield console.log("   _____n  |     |n  |     on  |    /|\ n _|_     n|   |_____n|         |n|_________|n");
yield console.log("   _____n  |     |n  |     on  |    /|\ 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")
}
}

最新更新