Hang子手遊戲 - 不能讓循環停止扣除生命 - 否則工作

Question

作爲一對其他人在這裏，我正在嘗試建立一個hang子手遊戲的課堂。 所有的東西都或多或少的好，但不知何故，我努力阻止腳本生活=== 0。該腳本會繼續運行，只是不斷扣除生活......

我試圖追加if語句在幾個方面，但必須失去了一些東西......

可能有人來看看，並幫助我理解我我做錯了嗎？

Git-Hub

 
var word = "Flower"; 
 
var gameOptions = ["Flower", "Fruit", "Table", "Chair", "Love", "Family", "Water", "Picture", "Refrigerator", "Giraffe"] 
 
// The word we will use to play, will be randomized later 
 
var gameOptionsLength; // The comptuer needs to know the length of the array, so we can set the upper limit for the random function 
 
var computerChoice; // Computer will pick random word from gameOptions array 
 
var gameWord; // This variable will transform the computer choosen string into an upper case string 
 
var gamewordLength; // In order to show the right character amout to be guessed, we need to know the word length 
 
var blanks= ""; 
 
var winword=""; 
 
var userInput; 
 
var lives = 6; // According to Wikipedia, the user has 6 lives 
 
var alphabet; 
 
var outputElement; 
 
var guessedLetters = []; // stores the letters the user guessed 
 

 
gameOptionsLength = gameOptions.length; 
 

 
computerChoice=gameOptions[Math.floor(Math.random() * gameOptionsLength)]; 
 
     console.log("computer choice " + computerChoice); 
 

 
gameWord = computerChoice.toUpperCase(); 
 
gamewordLength = gameWord.length; 
 

 
var j = 0; // Creates the blanks i.e. Flower has 6 characters and needs 6 blanks _ _ _ _ _ _ 
 
while (j < gamewordLength) { 
 
    blanks += " _"; 
 
    j++; 
 
    } 
 

 
var j = 0; // Creates the blanks i.e. Flower has 6 characters and needs 6 blanks _ _ _ _ _ _ 
 
while (j < gamewordLength) { 
 

 
    winword += " "+ gameWord.charAt(j); 
 
    j++; 
 

 

 

 
alphabet = 'abcdefghijklmnopqrstuvwxyz'.split(''); 
 
outputElement = $('#guessed-letters'); 
 

 

 
$(document).on('keyup', function (event) { 
 
    var key = event.key.toLowerCase(); 
 
    if (alphabet.indexOf(key) !== -1) { 
 
    // the key is a letter in the alphabet 
 
    if (guessedLetters.indexOf(key) === -1) { 
 
     // the key has not been guessed 
 
     guessedLetters.push(key); 
 
     var string = guessedLetters.join(''); // join the letters together to one single string 
 
     outputElement.text(string); 
 
    } 
 
    } 
 
}); 
 

 

 
var paragraph = document.getElementById("demo").innerHTML = "The word you are looking for has " + gamewordLength + " characters, can you guess it?"; 
 
var paragraph1 = document.getElementById("blanks").innerHTML = "Word:"+blanks; 
 
var pLives = document.getElementById("pLives").innerHTML = " Lives: " + lives; 
 

 
document.onkeyup = function(event){ 
 
     userInput = event.key; 
 
     userInput = userInput.toUpperCase(); 
 

 
     console.log("the userInput is " + userInput) // 
 
     
 
    
 

 
    var index = gameWord.indexOf(userInput); 
 

 
     if (index >= 0) { 
 
     for (var i = 0; i < gamewordLength; i++){ 
 
     console.log("Here is the gamword from within the loop:" + " "+ blanks); 
 
     var index = gameWord.indexOf(userInput,i); // indexOf checks whether a character is within a string, if the character exists the return value is >=0 
 
     console.log(index); 
 
     \t console.log("that works, the right position is " +index); 
 
\t \t blanks = blanks.split(''); 
 
\t \t blanks[index*2+1] = userInput; 
 
\t \t blanks = blanks.join(''); 
 
\t \t console.log("here are the new blanks:" + " "+ blanks); 
 
\t \t var paragraph1 = document.getElementById("blanks").innerHTML = "Word:"+blanks; 
 
\t \t \t \t 
 
\t }} 
 

 

 
\t else { 
 
\t // deducting lives if indexOf === -1, as the user selected character does not exist in the string 
 
\t \t lives = lives -1; 
 
\t \t console.log("lives = " +lives) 
 
\t \t var pLives = document.getElementById("pLives").innerHTML = " Lives: " + lives; 
 
\t } 
 

 

 
\t if (lives === 0){ 
 
\t \t var gameOver = document.getElementById("gameOver").innerHTML = " GameOver - refresh the site to play again!"; 
 
\t \t } 
 
\t 
 
\t \t \t \t 
 
\t else if (blanks === winword) { 
 
\t \t var winner = document.getElementById("winner").innerHTML = "Well done, you guessed the right word!!"; 
 
\t } 
 

 
}}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Hangman Game</title> 
 
\t <link rel="stylesheet" href="assets/css/style.css"> 
 
\t <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 

 
</head> 
 
<body> 
 

 
<h1>Hangman</h1> 
 
<p id="demo"></p> 
 
    <!-- Js includes the following text: The word you are looking for has " + gamewordLength + " characters, can you guess it?"; --> 
 
<h1 id="blanks"></h1> <!-- If word is "Love", there will be 4 - - - - --> 
 
<h1 id="pLives"></h1> <!-- Lives: --> 
 
<h1 id="gameOver"></h1> <!-- GameOver --> 
 
<h1 id="winner"></h1> <!--Winner --> 
 
<h3>You already used the following letters:</h3> 
 
<h3 id="guessed-letters"></h3> <!--Displays used letters --> 
 

 
<!-- <div id="display"></div> 
 
    <div id="buttons"></div> 
 
    <div id="AllKeys"> 
 
    <button id="allButtons">A</button> --> 
 

 
</div> 
 

 
<script src="assets/javascript/game.js"></script> 
 

 
</body> 
 
</html>

Answer 1

我沒有查看整個代碼，但我看到你在一個循環中加入你的事件偵聽器。這意味着將會有重複的聽衆綁定，這可能不是你想要的。

第二個while (j < gamewordLength) {循環終止於代碼的底部。似乎應該儘早關閉它。

var j = 0; // Creates the blanks i.e. Flower has 6 characters and needs 6 blanks _ _ _ _ _ _ 
while (j < gamewordLength) { 

    winword += " "+ gameWord.charAt(j); 
    j++; 


//} <----- should be closed here? 


alphabet = 'abcdefghijklmnopqrstuvwxyz'.split(''); 
outputElement = $('#guessed-letters'); 


$(document).on('keyup', function (event) { 
    // ...and so on... 

因此，這可能會導致您的處理程序多次調用每個事件，取決於gamewordLength值。

Answer 2

我想我想通了

1st）我用了spanky的建議。

2日），我改變了第一else語句

從

else { 
// deducting lives if indexOf === -1, as the user selected character does 
not exist in the string 
    lives = lives -1; 
    console.log("lives = " +lives) 
    var pLives = document.getElementById("pLives").innerHTML = " Lives: " + 
lives; 

到

else if { index < 0 && lives >0){ 
// deducting lives if indexOf === -1, as the user selected character does 
not exist in the string 
    lives = lives -1; 
    console.log("lives = " +lives) 
    var pLives = document.getElementById("pLives").innerHTML = " Lives: " + 
lives; 

））

這並獲得成功。你可以找到github

更新的版本謝謝你們 - 這真是幫了