# Number Guessing Game

## List of learning outcomes

By the end of this study session you will be able to:

1. Write a more complex program and have a stronger knowledge of Javascript.

In this project we will use some of the techniques we have learned so far to make a simple guessing game. In particular, we will use the following Javascript:

• function

• while

• Math.random()

• return

• if

• prompt()

• Math.floor()

• parseInt()

• isNaN()

We have never seen the last two so far but they are pretty intuitive. The first one, parseInt() will convert (parse) a string into an integer, so that another function can use the integer value returned to do some elaboration or logic interpretation. The last function isNaN() figures out if the value as an input is a number of not (NaN stands for Not a Number). This is useful when we need an input from the user as in this case.

## How the Game Works

1. The computer thinks of a number in the range 100 (really it generates a random number between 1 and 100)

2. The player has to guess what it is

3. The computer tells the player if the answer is right or wrong

4. When the game is over, the player is told how many times it took to guess

## HTML of the Game

The HTML part of the game is pretty simple, and it merely calls the main function inside a javascript:

```<html>
<title>JavaScript Guessing Game</title>
<script src="guessing_game.js">
</script>
</body>
</html>
```

The main function is triggered when the web page is loaded:

<script src=“js_guessing_game.js”> </script>

## Javascript Components of the Game

1. The global variables

2. The main game function do_game()

1. Generate a random number in the range [1,100]

2. A while loop

3. Check the input function check_guess()

3. To check whether the player's guess is:

1. not a number,

2. out of range,

3. too large,

4. too small

5. correct

4. Give feedback to the user

## Global Variables

The game needs the following global variables

```var target;
var guess_input_text;
var guess_input;
var finished = false;
var guesses = 0;
```

## Main Game Function

The main idea is to generate a random number in the range 1 to 100

```var random_number = Math.random() * 100;
var random_number_integer = Math.floor(random_number);
target = random_number_integer + 1;
```

And then use a while loop while to figure out when we should stop (when the player guessed)

```while  (!finished) {
... code goes here ...
};
```

## Inside the while loop

Get the player's input:

guess_input_text = prompt(“Please enter a number ” +“in the range 1 to 100.”);

Convert the input to an integer with parseInt():

guess_input = parseInt(guess_input_text);

Increment the number of guesses (to give the response at the end):

guesses += 1;

which is equivalent to write:

guesses = guesses +1;

Check the player's answer with an external function (to be implemented later):

finished = check_guess();

## The Check_Guess function

The function nees to check whether the player's guess is:

1. Not a number

2. Out of range

3. Too large

4. Too small

5. Correct

Let us analyze each of these checks

## IsNaN() Function (not a number check)

The function returns true if the input parameter is NOT a number and vice versa. We will make use of this function to check whether the player has entered a number. Here is an example:

```<html>
<title>isNaN() Example</title>
<body><script>
alert("378 is a number: " + !isNaN(378) +"\n\n" +
"HKUST is a number: " + !isNaN("HKUST")); //HKUST is a random input
</script></body>
</html>
```

So in our game, the logical check is: if the player's guess is not a number can be written as:

```if (isNaN(guess_input)) {
alert("You have not entered a number.\n\n" +
"Please enter a number in the range 1 to 100.");
return false;
}
```

## Out of Range, Too Large or Too Small Checks

In this case, we need to use the logical or || to verify weather the guess is out or range, too large or too small:

Out of range check:

```if ((guess_input < 1) || (guess_input > 100)) {
"in the range 1 to 100.");
return false;
}
```

Number too large check:

```if (guess_input > target) {
return false;
}
```

Number too small check:

```if (guess_input < target) {
return false;
}
```

Finally, we need to return the right answer when the number is correct, and congratulate the player showing the number of guesses:

```alert("You got it! The number was " + target +
". \n It took you " + guesses +
"guesses to get the number!");
```

And finally, return a true value to the main function return true to exit from our function:

return true;

## Putting all together

The main game function is:

```var target;
var guess_input_text;
var guess_input;
var finished = false;
var guesses = 0;
function do_game(){
var random_number = Math.random() * 100;
var random_number_integer = Math.floor(random_number);
target = random_number_integer + 1;
while (!finished) {
guess_input_text = prompt("I am thinking of a number "+
"in the range 1 to 100.\n\n"+
"What is the number? ");
guess_input = parseInt(guess_input_text);
guesses += 1;
finished = check_guess();
}
}
```

while the implementation of the function check_guess is:

```function check_guess() {
if (isNaN(guess_input)) {
alert("You have not entered a number.\n\n" +
"Please enter a number in the range 1 to 100.");
return false;
}
if ((guess_input < 1) || (guess_input > 100)) {
return false;
}
if (guess_input > target) {
return false;
}
if (guess_input < target) {