CSCI-1080 Intro To CS: Web Development
Saint Louis University
Department of Computer Science
Number Guessing Game
List of learning outcomes
By the end of this study session you will be able to:
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
alert()
Math.random()
return
if
prompt()
Math.floor()
onload()
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.
click here to play the game.
How the Game Works
The computer thinks of a number in the range 100 (really it generates a random number between 1 and 100)
The player has to guess what it is
The computer tells the player if the answer is right or wrong
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>
<head>
<title>JavaScript Guessing Game</title>
</head>
<body onload="do_game()">
<script src="guessing_game.js">
</script>
</body>
</html>
The main function is triggered when the web page is loaded:
<body onload=“do_game()”>
<script src=“js_guessing_game.js”> </script>
Javascript Components of the Game
The global variables
The main game function do_game()
Generate a random number in the range [1,100]
A while loop
Check the input function check_guess()
To check whether the player's guess is:
not a number,
out of range,
too large,
too small
correct
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):
which is equivalent to write:
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:
Not a number
Out of range
Too large
Too small
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>
<head>
<title>isNaN() Example</title>
</head>
<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)) {
alert("Please enter an integer number" +
"in the range 1 to 100.");
return false;
}
Number too large check:
if (guess_input > target) {
alert("Your number is too large!");
return false;
}
Number too small check:
if (guess_input < target) {
alert("Your number is too small!");
return false;
}
Check for Correct Answer
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:
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)) {
alert("Please enter an integer number in the range 1 to 100.");
return false;
}
if (guess_input > target) {
alert("Your number is too large!");
return false;
}
if (guess_input < target) {
alert("Your number is too small!");
return false;
}
alert("You got it! The number was " + target +
".\n\nIt took you " + guesses +
" guesses to get the number!");
return true;
}
|