我如何改變背景顏色以獲取我的guess_input是否正確以及遊戲何時停止？

-1

這段代碼應該是一個顏色猜測遊戲，我有一個顏色數組。用戶應該猜測顏色，當它正確時，遊戲停止。我試圖測試我的用戶輸入以使界面更好，但代碼似乎不工作，這是我的第一個完美工作的代碼。我如何改變背景顏色以獲取我的guess_input是否正確以及遊戲何時停止？

<!DOCTYPE html> 
<html> 
<head> 
    <title>Color guessing game</title> 
</head> 

<body onload="do_game()"> 
    <script> 
     var color = ["Black","Blue","Brown","Cyan","GoldenRod","Green","Maroon","Olive","Pink","Red"]; 
     var target; 
     var finished = false; 
     var guess_input; 
     var guesses; 
     var randomComputerGuess; 

     function do_game() { 
      var target_index = Math.random() * 10; 
      target = Math.floor(target_index); 


      alert(color[target]); 
      randomComputerGuess = color[target]; 

      while(!finished) { 
       guess_input = prompt("I am thinking of one of these colors: \n\n" + 
             "Black,Blue,Brown,Cyan,GoldenRod,Green, Maroon,Olive,Pink,Red \n\n" 
             + "What color am i thinking of?"); 
       guesses +=1; 
       if(randomComputerGuess == guess_input){ 
        alert("Good Job! You are correct."); 
        finished = true; 
        } 




       } 
     } 

     /*function check_guess(guess_input){ 
      if(guess_input == color[target]){ 
       alert("Congratulations! You have guessed the color! \n\n" 
         + "It took you " + guesses + "guess(es) to finish the game! \n\n" 
         + "You can see this color in the background."); 
       return true; 
      } 
     }*/ 

     Body=document.getElementsByTagName("body")[0]; 
     Body.style.background=color[target]; 


    </script> 

</body> 
</html>

現在，這是我的更新未working.i添加功能check.guess（）來檢查我的用戶輸入對某些情形一樣，如果它在陣列中心不是顏色名，或者它是在較低的位置或低於（）通過我以前的功能do.game隨機選擇的顏色更高

<!DOCTYPE html> 
<html> 
<head> 
    <title>Color guessing game</title> 
</head> 

<body onload="do_game()"> 
    <script> 
     var color = ["Black","Blue","Brown","Cyan","GoldenRod","Green","Maroon","Olive","Pink","Red"]; 
     var target; 
     var finished = false; 
     var guess_input; 
     var guesses; 
     var randomComputerGuess; 

     function do_game() { 
      var target_index = Math.random() * 10; 
      target = Math.floor(target_index); 


      alert(color[target]); 
      randomComputerGuess = color[target]; 

      while(!finished) { 
       guess_input = prompt("I am thinking of one of these colors: \n\n" + 
             "Black,Blue,Brown,Cyan,GoldenRod,Green, Maroon,Olive,Pink,Red \n\n" 
             + "What color am i thinking of?"); 
       guesses +=1; 
       finished = check_guess(); 
       /*if(randomComputerGuess == guess_input){ 
        alert("Good Job! You are correct."); 
        finished = true; 
        }*/ 
       } 
     } 

     function check_guess(guess_input){ 
      if(color.indexOf(guess_input) == -1){ 
       alert("Sorry, I do no not recognize your color. \n\n" 
         + "Please try again."); 
         return false; 
      } 

      if(guess_input > randomComputerGuess){ 
       alert("Sorry, your guess is not correct! \n\n" 
         + "Hint: Your color is alphabetically higher than mine. \n\n" 
         + "Please try again. "); 
         return false; 
      } 

      if(guess_input < randomComputerGuess){ 
       alert("Sorry, your guess is not correct! \n\n" 
         + "Hint: Your color is alphabetically lower than mine. \n\n" 
         + "Please try again. "); 
       return false; 
      } 

      if(guess_input == randomComputerGuess){ 
       alert("Congratulations! You have guessed the color! \n\n" 
         + "It took you " + guesses + "guess(es) to finish the game! \n\n" 
         + "You can see this color in the background."); 
       return true; 
      } 
     } 

     Body=document.getElementsByTagName("body")[0]; 
     Body.style.background=color[target]; 


    </script> 

</body> 
</html>

來源

2016-11-26 damolaview

什麼是不工作？你有錯誤嗎？如果是這樣，錯誤是什麼？代碼中的哪個位置會出現錯誤？ –

我最終破解了它。問題是我設置函數check_guess（）只參數guess_input。在我將支架留空之後。一切都開始完美。謝謝@ Scott Marcus，您讓我更加努力地調試此代碼。我現在面臨的唯一挑戰是如何改變我的背景顏色以獲取我的猜測輸入是否正確，以及何時遊戲停止？ – damolaview

當你發現，你沒有經過你的猜測到你check_guess功能，但除此之外，你有很多不必要的碼。這是一個清理後的版本，可以在最後顯示顏色。代碼中還有評論來解釋這些變化。

window.addEventListener("DOMContentLoaded", function(){ 
 

 
    // Changed colors to lower case so they can be compared to lower case later 
 
    var colors = ["black","blue","brown","cyan","goldenrod","green","maroon","olive","pink","red"]; 
 
    var target = null; 
 
    var guess_input = null; 
 
    var guesses = 0; 
 
    var randomComputerGuess = null; 
 

 
    // Math.random() will return a random number between 0 (inclusive) and 1 (exclusive) 
 
    // I've change your multiplier to 11 so that you can concievably get 10 from the operation 
 
    // I've also combined target_index and target to just one variable 
 
    var target = Math.floor(Math.random() * 11); 
 
     
 
    randomComputerGuess = colors[target]; 
 

 
    console.log("Random color is: " + randomComputerGuess); 
 

 
    // while(true/false) creates an opportunity for an infinite loop, which 
 
    // is bad practice. Instead, make loop have a definite end point 
 
    // In this scenario, the user will have 3 guesses before the game ends 
 
    while(guesses < 3) { 
 
      
 
    guess_input = prompt("I am thinking of one of these colors: \n\n" + 
 
          colors.join(", ") + "\n\n" + 
 
          "What color am i thinking of?"); 
 
     
 
    // Added .toLowerCase() so guess doesn't have to be case-sensitive 
 
    check_guess(guess_input.toLowerCase()); 
 
       
 
    guesses++; // Increase the guess count 
 
       
 
    } 
 
      
 
    function check_guess(guess_input){ 
 
      
 
    var retVal = false; 
 
    var message = null; 
 
    
 
    // The first check looks for no entry or user hitting cancel 
 
    if(guess_input === "" || guess_input === null) { 
 
     message = "You didn't enter a value!"; 
 
    } else if(guess_input < randomComputerGuess){ 
 
     message = "Sorry, your guess is not correct! \n\n" + 
 
        "Hint: Your color is alphabetically higher than mine. \n\n" + 
 
        "Please try again."; 
 
    } else if(guess_input > randomComputerGuess){ 
 
     message = "Sorry, your guess is not correct! \n\n" + 
 
        "Hint: Your color is alphabetically lower than mine. \n\n" + 
 
        "Please try again."; 
 
    } else if(guess_input.toLowerCase() === colors[target].toLowerCase()){    
 
     message = "Congratulations! You have guessed the color! \n\n" + 
 
       "It took you " + guesses + " guess(es) to finish the game! \n\n" +   
 
       "You can see this color in the background."; 
 
     guesses = 3; 
 
     retVal = true; 
 
    } 
 

 
    alert(message); 
 
    return retVal; 
 
     
 
    } 
 

 
    document.getElementsByTagName("body")[0].style.background = colors[target]; 
 
});

來源

2016-11-26 22:24:26

我如何改變背景顏色以獲取我的guess_input是否正確以及遊戲何時停止？

回答

相關問題