[英]Creating a Number Guessing Game in Javascript - Need Help on Loop
到目前為止,我已經創建了一個基本的數字猜謎游戲,該數字當前設置為50以用於測試。 我想知道如何添加一個循環,以便用戶可以再次猜測。 我也想在屏幕上看到以前的猜測。 所以應該是這樣的:
猜數字游戲!
猜猜#1:49低
猜猜#2:51高
猜測#3:50正確
對於循環,我知道我需要使用“ while(!guessed)”之類的東西,但是根本不確定如何實現它,對此我還很陌生,任何幫助都很棒!
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();
沒錯,您需要使用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!" );
顯然,您可以根據需要添加自己的計數器和消息,但這應該可以使您步入正軌。
我認為在這種情況下,最好的方法是像這樣包裝您的代碼
function guess()
{
if(guess > numberToGuess)
{ }
if (guess < numberToGuess)
{ }
if (guess == numberToGuess)
{
...
return;
}
else guess();
}
JavaScript中的循環存在問題:UI在運行時已死。 因此,您需要開始考慮“事件”和“事件處理程序”。
想法是您更新UI或DOM以顯示游戲的當前狀態。 UI的一部分是文本輸入字段,用戶可以在其中輸入下一個猜測。 接下來應該是一個按鈕“我對嗎?”。 這兩個元素替換了提示。
現在,您可以向按鈕添加事件/點擊處理程序。 在處理程序中,您讀取輸入並進行檢查。 如果不正確,請更新用戶界面。
如果正確,則隱藏文本字段和按鈕。 而是顯示某種“您贏了!” 屏幕和一個按鈕以重新啟動游戲。
再次,代碼應該以此結束。 Win按鈕的單擊處理程序應將UI重置為原始狀態。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.