|
In this lesson you are encouraged to type the actionscript directly into the Actions panel. If the Actions panel is attached to your properties panel, click on the little black triangle to open it. If not, then either press F9 (Windows) or Option-F9 (Mac OSX) to open it.
If you cannot click and type in the Actions panel, click on the "Script Assist" button so you can.
NOTE: Actionscript 2 (AS2) code. For AS3 see new tutorial
1. Initialise All Variables.
This game requires four variables:
- msg - a text variable to display instructions and feedback to the user.
- theNumber - a numeric variable to store the random number selected by the computer.
- totalGuesses - a numeric variable to count the number of guesses the player takes to guess the number.
- theGuess - a numeric variable to store the users guess to check against the random number.
NOTE: Actionscript is case sensitive so all code must be typed exactly as shown.
Type the following code into the actions panel.
var msg:String = "Enter a number between 1 and 100"; var theNumber:Number = Math.floor(Math.random()*100+1); var totalGuesses:Number = 0; var theGuess:Number = 0;
Code Explained:
Flash will colour code the script as you type, there should be a lot of blue code in the actions panel, so let me explain what's going on.
- var tells flash that you are declaring a variable. The word adjacent to var is the name of the variable.
- :String means that this variable may contain letters, numbers or almost any other character on the keyboard.
All strings must be enclosed inside quotation marks " " and will be displayed in green.
- The variable msg has been assigned the value Enter a number between 1 and 100
Note: if you are typing actionscript and everything turns green, you have forgotten to close the quotation marks " "
- :Number lets flash know that the variable is only allowed to contain numeric data.
- theNumber uses two built-in flash functions to create the random number value.
- Math.floor(number) will always round the number inside the brackets down to the nearest whole number.
- Math.random() returns a random value between zero and one. Think about how many decimal values there may be in this range.
- Because we want a random number between 1 and 100, we take the random value and multiply it by 100. This will give us a number between 0 and 99 so we have to add one.
- Therefore the line: Math.floor(Math.random() * 100 + 1) stores a value between 1 and 100 in the variable theNumber.
- Hopefully it is now obvious that the next two lines are setting the variables totalGuesses and theGuess to zero.
2. Display Message and Total Guesses.
Now that the variables have been initialised we should display instructions and total guesses in the dynamic text boxes.
display.text = msg; guesses.text = totalGuesses;
Code Explained: When you created the interface, the dynamic text boxes were given the instance names "display" and "guesses", these lines of code place the values stored in the variables msg and guesses as text in them.
3. Attach a function to the button that will enable game play.
Now to make it all work. The function will only run when the player clicks on and releases the button. It will do the following:
- collect the guessed number from the Input box
- add 1 to the total number of guesses
- compare the guessed number against theNumber the computer randomly selected when we started
- IF the correct number is guessed it will reset the game
- ELSE it will tell the user if their guess is too low, too high or not a number. (in case they type a letter).
Once again it is important that the code is typed in correctly. Computer languages are very pedantic about syntax and spelling.
{literal} /* Create a function to check the guessed number against the random number The function will run each time the user clicks on the Enter button */ btn.onRelease = function() { /* Extract the guess from the input box */ theGuess = Number(guess.text); /* Add 1 to the total number of guesses */ totalGuesses++; /* Display the total number of guesses */ guesses.text = totalGuesses; /* Check to to see if the guess equals the random number IF it does THEN pick a new random number reset the total number of guesses to zero clear the input box prompt the player to play again ELSE Provide the player with feedback */ if (theGuess == theNumber) { display.text = "You Got It! \n Play Again"; theNumber = Math.floor(Math.random()*100+1); totalGuesses = 0; guess.text = ""; } else if (theGuess > theNumber) { display.text = "Too High"; } else if (theGuess < theNumber) { display.text = "Too Low"; } else { display.text = "Not a Number\nTry again"; } };
{/literal}
Code explained: All lines of code between /* and */ are comments to help you understand what is going on inside the function. They should be grey in the actions panel. You can omit these lines and the function will still works.
Things to note:
- btn.onRelease =function() tells flash to only run this function when the button is released.
All code between the first {literal}{ and the last }{/literal} is part of the function. Note: Every opening bracket must have an equal and opposite closing bracket - note the if statement brackets as well.
- Number(guess.text) will extract the data from the input box as a number. If anything other than a number is entered, the value NaN (Not a Number) will be stored in theGuess
- The line totalGuesses++ increments the number of guesses by 1.
It could also be written as totalGuesses = totalGuesses + 1
- In the line " if(theGuess == theNumber) " the double = sign is used to compare the values in the two variables.
It means does the value on the left side equal the value on the right side.
- The combination of "\n" inside a String, forces flash to put the following words on a new line in the dynamic text box.
When you have typed the code there are two buttons at the top of the Actions panel that are worth getting to know and love.
 The blue tick, will check your syntax and report any errors in the Output window. The jagged lines will tidy up your lines of code plus add any missing semi-colons (;) it will also alert you to any code errors but will not display the Output window. Save the game. Test your game by pressing ctrl-enter (windows) or command-return (macOS X) or from the Control menu, select Test movie.
Summary:
In this lesson you have written the actionscript to make the Guess The Number game work. You have learnt how to:
- Initialise variables for text (string) or numbers
- Generate a random number between 1 and 100
- Display text in dynamic text boxes
- Attach a function to a button
- Extract a number from an input box
- Write an if then else statement to compare two numeric values.
Student Challenge: Change the game to pick a random number between 1 and 500 Create a variable to count the number of times a person plays the game Create variables and dynamic text boxes to let the user know their highest and lowest number of guesses if they play more than one game.
|