The last 2 things we've done with JavaScript have been functional/useful things (validating a form's data, and a photo gallery). We kind of did a game (a version of Mad Libs), but now we know enough to do a real, interactive game that can provide infinite amounts of surprise and entertainment. Yay? Yay!
By the time you've read to this point, you should have thrown your hands up in the air with joy and exclaimed, "Yay!"
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. As with most of the Javascript we're doing in this class, the resulting/final code won't be very large but it may take some thought and/or time.
If something isn't working, remember to triple-check your spelling of variables/functions and remember to make sure you don't have extra curly braces or parentheses anywhere.
The game is simple: a random number is picked between 1 and 100, inclusive (meaning: 1 is a possibility and so is 100). The player has to guess the number in as few guesses as possible, even though they are given an unlimited amount of tries. On each wrong guess, the page/program 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. In fact, we've done this before. 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 guessesSoFar1). 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 (remember that real numbers include fractions) between 0 and 99 (e.g., 56.912). We want to chop off the "fraction part" of the random real number using the 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!
Here it is in 1 line: 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. In the final version of the form processing exercise that we did, we could turn a text box's value into a number. 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 complete and working. 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 you're out of time and things are hectic/busy and you must leave immediately, then just leave. Your submission will show that you did the lab in class.
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 (depending on how much time is left):
