CODEWITHSUNDEEP
javascriptloopsnumbers
John Smith
John Smith

Reputation: 57

Creating a Number Guessing Game in Javascript - Need Help on Loop

So far I have created a basic number guessing game,the number is currently set to 50 for testing purposes. I would like to know how to add a loop so the user can guess again. I would also like to see the previous guesses on the screen. So it would should something like:

Number Guessing Game!

Guess #1 : 49 was LOW

Guess #2 : 51 was HIGH

Guess #3 : 50 was CORRECT

For the loop i know i need to use something like "while( !guessed )" but not sure how to implement it at all, i'm pretty new to this, any help would be fantastic!

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

Upvotes: 0

Views: 711

Answers (3)

Christian
Christian

Reputation: 19740

You're correct, you need to use a type of while loop to continuously allow input until the number is guessed.

Remember, you'll want to use a dowhile loop, because you want the condition to be checked after the code runs, not before.

Something like this would work:

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

Obviously you can add your own counter and message if you'd like, but this should get you on the right track.

Upvotes: 3

Asgu
Asgu

Reputation: 742

I think the best way in context of this is to wrap your code like this

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

    if (guess < numberToGuess)
    {   }

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

Upvotes: 1

Aaron Digulla
Aaron Digulla

Reputation: 328594

There is a problem with loops in JavaScript: The UI is dead while they run. So you need to start thinking in "events" and "event handlers".

The idea is that you update the UI or the DOM to display the current state of the game. Part of the UI is a text entry field where the user can enter the next guess. Next should be a button "Am I right?". These two elements replace the prompt.

You can now add an event / click handler to the button. In the handler, you read the input and check it. If it's wrong, you update the UI.

If it's correct, you hide the text field and the button. Instead you display some kind of "You won!" screen plus a button to restart the game.

Again, the code should end with that. The click handler for the win button should reset the UI to the original state.

Upvotes: 0

Related Questions