UPDATE FOR YOUR REFERENCE: Finished Version of Lab 9
The last 2 things we've done with JavaScript have been functional/useful things (validating a form's data, and a photogallery). We kind of did a game (a version of Mad Libs), but now we know enough to do a real, interactive game.
This lab will still walk you through making the game, but will not always tell you what code exactly to type. Refer to past JavaScript exercises as necessary, or, feel free to ask a neighbor and/or me for help.
The game is simple: a random number is picked between 1 and 100, inclusive. The player has to guess the number in as few guesses as possible. On each wrong guess, the page will let the user know if their guess is too high or too low.
When the number is guessed, a message should pop up telling the user how many guesses it took him/her to guess the number.
Save a copy of this file to your computer and rename it to include your initials in the filename. Then open it up in your favorite editor and web browser.
Normally, if we use variables inside of our functions the value of the variable is forever lost once that function ends. So, how will we keep track of how many guesses the user has made if the values are lost so easily? The solution is referred to as making a global variable, which means that it always exists. To do this, we declare a variable outside of a function. So for example, we might do "var myGlobal = 0" right after the start of our <script …> tag, instead of putting it inside "function myFunctionName() { … }".
Add a global variable called guessesSoFar and have it initially set to 0. Then, add an onclick event handler to the "Process Guess" button. Have the handler call a function named checkGuess. You'll have to make checkGuess. Then, have checkGuess add 1 to guessesSoFar and store it back into guessesSoFar (guessesSoFar = guessesSoFar + 1). After you've added 1 to guessesSoFar, make a pop up box display the current value of guessesSoFar. Every time you click "Process Guess" you should see a number 1 higher than the last.
Add another function called resetGame and have this function called when the user clicks the "Start Game" button. For now, resetGame should reset guessesSoFar back to 0.
At this point, the game should be keeping track of how many guesses have been taken. Furthermore, the number of guesses will be reset, as if a new game was starting, when the user clicks the "Start Game" button.
Don't go beyond this point if you don't have all of that working yet.
Add another global variable called targetNumber. Inside of your resetGame function, we want to targetNumber to become a random number 1 through 100.
There exists a built-in function called Math.random() which returns a random real number between 0 and 1 (not including 1). We can then multiply that by 100, to get a random real number between 0 and 99 (e.g., 56.912). If we chop off the decimal part using Math.floor( … ) then we'll have an integer between 0 and 99. Then, if we add 1 to that result, we'll have a number between 1 and 100!
Math.floor(Math.random()*100) + 1;
Inside resetGame, go ahead and set our global variable targetNum to equal the result of that equation right above. Also inside of resetGame, pop up a message box displaying what the random number is so that we can be sure it is working.
At this point, you should have all of the past functionality. Additionally, when the "Start Game" button is pressed, a random number between 1 and 100 should be displayed.
Go ahead and get rid of our annoying pop up messages. Remember in the form processing exercise that we did, how we could turn a text box's value into an integer? Following that example, inside of our checkGuess function get the value of the 'userguess' element and turn it into a number. If it isn't a number, simply ignore the guess. If it is a number, then compare it to the targetNum variable we have. If their guess is lower than targetNum, tell the user. If it is too high, tell the user. If it is correct, congratulate them with a pop up message box. You might find this mini-example helpful:
if (guessedNum < targetNum)
{
alert("Too low!");
}
else if (guessedNum > targetNum)
{
alert("Too high!");
}
else //it MUST be the right number
{
alert("You win!");
alert("It took you " + guessesSoFar + " guesses to get the answer.");
}
At this point, your game should be functionally complete. Don't go further if it is not.
If there is no time left in class, then MAKE SURE that you submit it to the class FTP site. Remember to make sure your initials are in the filename.
If there is time left, call me over to show me what you've done and how you did it. Additionally, I'd like you to attempt (some of) the following: