Question

我正在使用vanilla javascript制作一个简单的刽子手游戏，并且希望在玩家失败后重置游戏。具体来说，我想： 1.重置“guessRemain”变量 2.清除“猜测”ID，因此没有显示猜测的字母 3.从数组中选择另一个随机单词。

提前感谢您的帮助！

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="UTF-8">
  <title>Hangman Game</title>

  <link rel="stylesheet" type="text/css" href="assets\css\reset.css"/>
  <link rel="stylesheet" type="text/css" href="assets\css\style.css">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

  <script src="https://use.fontawesome.com/ca6de464ee.js"></script>

</head>
<body>
    <div id="white">
        <img src="assets\images\turkey.png" alt="turkey" class="turkeyImage">
    </div>
    <div id="orangebox">
        <h4>thanksgiving</h4>
        <h4 class="hangman">hangman</h4>
    </div>
    <div class="instructions">
        <h1>Instructions:</h1>
        <br/>
        <h2>1. Guess a Thanksgiving dish!</h2>
        <br/>
        <h3>2. Press any key to begin.</h3>
    </div>
    <div class="display">
        <p class="greywords">Current Word:</p>
        <br/>
        <p id="current"></p>
        <br/>
        <br/>
         <p class ="greywords">Number of Guesses Remaining:</p>
         <br/>
         <p id="remain"></p>
         <br>
         <br/>
         <p class="greywords">Letters Already Guessed:</p>
         <p id="guess"></p>
         <br>
         <br/>
         <p class="greywords">Wins:</p>
         <p id="win"></p>
         <br>
         <br/>
         <p class="greywords">Losses:</p>
         <p id="loss"></p>
     </div>

<!-- End of HTML -->

<script type="text/javascript">

// Step 2: create variable of the food words
var wins = 1;
var losses = 1;
var guessRemain = 10;
var foodWords = [
 "pie",
 "turkey",
 "bacon",
 "bread"
 ];


// Step 1: display remaining gueses
document.getElementById("remain").innerHTML = guessRemain;
// Step 3: create a variable to pick a random word from that array
var randomWord = foodWords[Math.floor(Math.random() * foodWords.length)];
console.log(randomWord);
//Step 4: make it count the number of letters in that word that you just picked
var count = [];
 for (var i = 0; i < randomWord.length; i++) {
 count[i] = "_ ";
 }
//Step 5: write the var on the screen
document.getElementById("current").innerHTML = count;

//Step 6: have it recognize that there are remaining letters
var remainingLetters = randomWord.length;
    console.log("I HAVE " + remainingLetters + " left");

//Step 7: function for when they click a key
document.onkeyup=function(event) {
    var userGuess = event.key;
    document.getElementById("guess").innerHTML += userGuess + " ";
    // console.log(randomWord.length);
    if (randomWord.includes(userGuess)) {
        // console.log("test");
// Step 7: if this statment is true, then modify the count variable, replace the dash in count with letter, and it has the correct position, and display the letter
    var guessIndex = randomWord.indexOf(userGuess);
    //console.log(randomWord.indexOf(userGuess));
    count[guessIndex] = userGuess
    //console.log(count);
    document.getElementById("current").innerHTML = count;
    remainingLetters--;
    console.log("I HAVE " + remainingLetters + " left");
    if (remainingLetters === 0) {
        document.getElementById("win").innerHTML = wins++;
        console.log("I have won");}
}
// Step 8: if not true, then subtract a guess

    else {
       document.getElementById("remain").innerHTML = guessRemain--;
       document.getElementById("remain").innerHTML = guessRemain;
        if (guessRemain === 0) {
        document.getElementById("loss").innerHTML = losses++;
        console.log("I have lost");
    }
            }
}
// Step 10: if there are no letters remaining in count, then add "1" to the win id and reset the page

        // if (remainingLetters === 0) {
        // document.getElementById("#win").innerHTML = winSs++;
        // console.log("I have won");
        //console.log("i win");
        // function reset() {
        // document.getElementById("display").reset();
        // }
// }
// Step 11: if there are no guesses remaining, add a "1" to the loss id and reset the page
        // if (remainingGuess < 0) {
        // document.getElementById("#loss").innerHTML = ++1;
        // function reset() {
        // document.getElementById("display").reset();
        // }
        // }

 </script>
</body>
<div class="footer">
</div>
</html>

Answer 1

只需设置变量，即可重置＆＃34; guessRemain您只需输入

即可

guessRemain = 10;

在你的重置函数中，对于任何其他变量也是如此。

至于网页上已经显示的猜测，你可以做类似的事情

document.getElementById("guess").innerHTML = "";

希望有所帮助：）

Answer 2

首先，通过将guess设置为空字符串，清除步骤1-6中某处的innerHTML元素。按照步骤1-6将它们放在一个名为initialize的函数中，如下所示：

修改：声明您的变量wins，losses，guessRemain，foodWords，randomWords，count ，remainingLetters位于以下函数之外，以便您可以在onkeyup处理程序中访问它们

var wins, losses, guessRemain, foodWords, randomWords, count, remainingLetters;

function initialize() {

    // Step 1: create variable of the food words
    wins = 1;
    losses = 1;
    guessRemain = 10;
    foodWords = [
     "pie",
     "turkey",
     "bacon",
     "bread"
     ];

    // Clear the guess
    document.getElementById("guess").innerHTML = "";

    // Step 2: display remaining gueses
    document.getElementById("remain").innerHTML = guessRemain;

    // Step 3: create a variable to pick a random word from that array
    randomWord = foodWords[Math.floor(Math.random() * foodWords.length)];
    console.log(randomWord);

    //Step 4: make it count the number of letters in that word that you just picked
    count = [];

    for (var i = 0; i < randomWord.length; i++) {
        count[i] = "_ ";
    }

    //Step 5: write the var on the screen
    document.getElementById("current").innerHTML = count;

    //Step 6: have it recognize that there are remaining letters
    remainingLetters = randomWord.length;

    console.log("I HAVE " + remainingLetters + " left");

}

在代码中的某个位置（initialize()处理程序之外）调用函数onkeyup，以便首次初始化游戏。

现在，只要您想重置游戏，就可以重复使用initialize功能。例如，你可以在游戏结束时执行类似的操作（将此代码放在onkeyup处理程序的底部）：

if (remainingLetters === 0 || remainingGuess === 0) {
    inititalize();
}

如何将变量重置为原始，vanilla Javascript？

2 个答案: