JavaScript Bytes (2): Guess The Number!

Our last byte post was building a very, very basic number generator. However, there were a few problems with it. There were no conditionals to check if certain types of values could be entered or not. How can we make it so that the program deals with users who decide to input a letter instead of a number?

We can also extend our program to make it a little more responsive. We do this through the use of conditionals and booleans. These are powerful syntax that all programming languages share, and they allow the code to make decisions based on what the user has decided to input.

Let’s build another random number generator from scratch. This time around, we’re going to make a little numbers guessing game. The user guesses a random value between 1 and 6. If they is correct, they wins the game. If not, they gets one hint before losing on a third try.

First, every random number generator needs its engine. We also need a place for the little random number to be stored:

var randomNumber = Math.floor(Math.random() * 6 – 1) + 1;

Next, we need a prompt asking the user for their initial guess:

var guess = prompt(“I’m thinking of a random number between 1 and 6. What is it?”);

Now, we need to do something with the user’s answer! First, let’s create a boolean value that is initially set to false, but will change depending on the users answer:

var correctGuess = false;

Since the user may decide to play rough and enter a letter instead of a number, we need to safe guard against that. To do this, we need to use the equality operation to make sure that the input being passed in variable guess is of the same type and the same number:

 

if (parseInt(guess) === randomNumber ) {

     correctGuess = true;

}

So we’ve established the basic logic. If the user inputs the right number, the boolean value becomes true! Now we simply have to utilize this boolean logic within our conditionals and create a little game out of it!

if(parseInt(guess) === randomNumber ) {

     correctGuess = true;

} else if (parseInt(guess) < randomNumber) {

     var guessMore = prompt(“Try again. The number I am thinking of is more than ” + guess);

               if(parseInt(guessMore) === randomNumber) {

               correctGuess = true;

}

} else if (parseInt(guess) > randomNumber) {

     var guessLess = prompt(“Try again. The number I am thinking of is more than ” + guess);

               if(parseInt(guessLess) === randomNumber){

               correctGuess = true;

}

}

That was the meat of our code. The syntax is very friendly even to non programmers. We are basically setting a series of conditionals checking if the input number is greater than or less than the actual generated random number. If they are, we tell the user to guess again with a prompt. If the user guesses correctly, they win the game.

What happens if a user fails to guess two times? We need them to lose! Let’s implement this:

if ( correctGuess ) {

          document.write(‘<p>You guessed the number!</p>’);

} else {

          document.write(‘<p>Sorry! The random number was ‘ + randomNumber + ‘ .</p>’);

}

Self explanatory. If the user wins, we print that to the webpage. If they lose, we tell them what the actual number was.

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s