Zurücksetzen von Variablen auf Original, Vanille Javascript?

-2

Ich mache ein einfaches Hangman-Spiel in Vanille Javascript und möchte das Spiel nach einem Spieler Verluste zurücksetzen. Genauer gesagt möchte ich: 1. Setzen Sie die Variable "guessRemain" zurück 2. Löschen Sie die "rate" ID, so dass keiner der erratenen Buchstaben angezeigt wird 3. Wählen Sie ein anderes zufälliges Wort aus dem Array.Zurücksetzen von Variablen auf Original, Vanille Javascript?

Vielen Dank im Voraus für Ihre Hilfe!

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

Quelle

2017-11-19 becky armstrong

Sie könnten entweder die Seite aktualisieren oder machen und rufen eine 'init()' Funktion Dies legt die Anfangswerte Ihrer Variablen fest. –

Stellen Sie einfach die Variable, so auf "reset" guessRemain Sie gerade

guessRemain = 10;

in Ihrem Reset-Funktion geben würde, das gleiche für alle anderen Variablen gehen würde.

Was die Guesses bereits auf der Webseite angezeigt, Sie etwas ähnlich wie diese

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

Hoffnung tun würde, das hilft :)

Quelle

2017-11-19 03:52:52

Das hat den Trick gemacht, danke @jack –

First off, deaktivieren Sie das guess Element irgendwo in den Schritten 1 -6, indem Sie innerHTML auf einen leeren String setzen. Nehmen Sie sich die Schritte 1-6 und steckte sie in eine Funktion initialize wie so genannt:

bearbeiten: deklarieren die Variablen wins, losses, guessRemain, foodWords, randomWords, count, remainingLetters außerhalb der Funktion unten, so dass Sie‘ Zugang zu ihnen ll

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"); 

}

Rufen sie die Funktion initialize() irgendwo in Ihrem Code in Ihrem onkeyup Handler (außerhalb des onkeyup Handler) Ihr Spiel zum ersten Mal zu initialisieren.

Jetzt können Sie die Funktion initialize immer wieder verwenden, wenn Sie Ihr Spiel zurücksetzen möchten. Zum Beispiel können Sie so etwas wie dies tun, wenn das Spiel vorbei (Platz diesen Code in Ihrem onkeyup Handler nach unten hin) ist:

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

Quelle

2017-11-19 04:14:07

Zurücksetzen von Variablen auf Original, Vanille Javascript?

Antwort

Verwandte Themen