在Javascript中創建一個數字猜測遊戲 - 需要幫助循環

Question

到目前爲止，我已經創建了一個基本的數字猜測遊戲，該數字目前設置爲50用於測試目的。我想知道如何添加一個循環，以便用戶可以再次猜測。我還想在屏幕上看到以前的猜測。所以它應該是這樣的：

猜數遊戲！

競猜＃1：49爲低

競猜＃2：51是HIGH

競猜＃3：50是正確的

對於循環我知道我需要使用類似「，而（！猜測）「，但不知道如何實現它，我很新的這一點，任何幫助將是太棒了！

var canvas; 
canvas = openGraphics(); 

var max; 
max = 100; 

var numberToGuess; 
numberToGuess = 50; // will become Math.floor(Math.random() * max) + 1; later // 
canvas.setFont("comic sans ms", "15px", Font.Bold); 
canvas.drawString("Number Guessing Game!"); 

var guess; 
guess = prompt("Please input your first guess"); 


if(guess > numberToGuess){ 
    var message1; 
    message1 = " was HIGH"; 
    var messageanswer; 
    messageanswer = "Guess #1 : " + guess + message1; 
    canvas.drawString(messageanswer, 20,20); 
} 

if (guess < numberToGuess){ 
    var message2; 
    message2 = " was LOW"; 
    var messageanswer2; 
    messageanswer2 = "Guess #1 : " + guess + message2; 
    canvas.drawString(messageanswer2, 20,20); 
} 

if (guess == numberToGuess){ 
    var message3; 
    message3 = " was CORRECT"; 
    var messageanswer3; 
    messageanswer3 = "Guess #1 : " + guess + message3; 
    canvas.drawString(messageanswer3, 20,20); 
} 

canvas.paint(); 

Answer 1

你是正確的，你需要使用一個類型while循環，不斷讓輸入直到數字被猜中。

請記住，您將需要使用dowhile循環，因爲您希望在代碼運行之後檢查條件，而不是之前。

像這樣的工作：

var guess; 
var numberToGuess = 50; 

do { 
    // check previous guess and alert low/high message 
    if (guess) { 
     if (guess > numberToGuess) { 
      alert("Your guess was too high."); 
     } 
     else { 
      alert("Your guess was too low."); 
     } 
    } 

    guess = prompt("Please input your guess"); 
} while (guess != numberToGuess); 

alert("You guessed correctly!"); 

很明顯，你可以添加自己的計數器和消息，如果你願意，但是這應該讓你在正確的軌道上。

Answer 2

JavaScript中存在循環問題：UI在運行時死機。所以你需要開始思考「事件」和「事件處理程序」。

這個想法是，你更新用戶界面或DOM來顯示遊戲的當前狀態。部分用戶界面是用戶可以輸入下一個猜測的文本輸入字段。接下來應該是一個按鈕「我是對的嗎？」。這兩個元素替換提示。

您現在可以添加一個事件/點擊處理程序到按鈕。在處理程序中，您讀取輸入並檢查它。如果它是錯誤的，你更新UI。

如果正確，則隱藏文本字段和按鈕。相反，你會展示某種「你贏了！」屏幕加上一個按鈕重新開始遊戲。

同樣，代碼應該以此結束。 win按鈕的點擊處理程序應該將UI重置爲原始狀態。

Answer 3

我認爲在這種情況下最好的辦法是來包裝你這樣的代碼

function guess() 
{ 
    if(guess > numberToGuess) 
    { } 

    if (guess < numberToGuess) 
    { } 

    if (guess == numberToGuess) 
    { 
     ... 
     return; 
    } 
    else guess(); 
}