Flash To Silverlight : Guess The Number Game Part 1: Flash Version

Flash To Silverlight : Guess The Number Game Part 1 : Flash

For my first foray into Flash->Silverlight Game development, I will create a very simple “Guess The Number” game in Flash and then discuss how to do nearly the exact same thing with Silverlight. In Part 1 we cover the FLASH version of the game.

The Anatomy Of A Silverlight Application

Before get started, let’s discuss the necessary parts of a Silverlight application compared to a Flash application.

Embed: Just like a Flash .swf, a Silverlight application is housed in a single file (a .xap) and lives in a a standard HTML page with an <object> embed tag. Here is the <object> embed we will use for the SilverLightHelloWorld game.
<object data="data:application/x-silverlight," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="SilverlightHelloWorld.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="2.0.31005.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
</a>
</object>
Source Files: Flash developers are very used to have a .fla and associated .as files as the source for their programs. Silverlight has many files associated with a project, many of which are part of the Visual Studio Project you will create for your Silverlight application. The most important files though, are as follows:

app.xaml : Defines the starting point and base class of your application.

app.xaml.cs : The C# code file associated with app.xaml.

page.xaml : Defines the main page design of the application

page.xaml.cs : C# code for our application class.

Of these 4 we will only be using page.xaml and page.xaml.cs. For now, you can think of these as the equivalents for for the Flash source files guessthenumber.fla and guessthenumber.as (but in reality they are much different). We will start by discussing the basic Flash application, and then show how you would do the same thing with Silverlight and Visual Studio 2008.

The Game

For this tutorial, we are going to create the simplest game I can think of: Guess The Number. Here is how the game will work:

Game initializes and displays the game screen
The game screen consists of:
- A Message text field display the title of the title of the game (“Guess A Number From 1-100”);
- A Instruction text field to display in-game instructions to the user
- A Guesses text field to display the number of guesses the user has made to guess the number
- A Guess input field for the user to type their guess
- A “Submit Guess” button
- A Play again button
When the game starts, the program will randomly select a number and the user will be prompted to type in a guess for the number.
We will render the “Play Again” button invisible when the game starts.
When the user clicks the “Submit Guess” button, an event will be fired that will check the number the user has typed-in.
- If the value is not a number, we will display the message field “You Must Type A Number Between 1 and 100” in the Instruction field.
- If the value is lower than the the randomly selected number, we will update the message field to say “Higher”
- If the value is higher than the the randomly selected number, we will update the message field to say “Lower”.
- If the value is equal to the number we will display update the message field to say “You got It!”.
If the user made a valid guess that was a number, the “Guesses” text field will be incremented by 1.
If the user guesses the number correctly, we will make the “Submit Guess” button invisible, and display the “Play Again” button instead.
By clicking “Play Again” we will start over at (1.) above.

Now that we know what the program will do, we will set-out to create the Flash version.

Flash Source

Page Design:GuessTheNumber MovieClip

Above is the a MovieClip named “GuessTheNumber”. It has been associated with the class “GuessTheNumber” in the flash library, and an instance has been placed on the first frame of the Flash timeline.

In the MovieClip, I have created the following:

t_messageText : A text field to hold the message.

t_instructionText : A text field to hold the instructions.

t_guessText : a Text field to hold the number of guesses.

t_userGuess : an Input field to hold the user submitted entry.

b_SubmitGuess: The button to press when the user has entered their guess.

b_PlayAgain : The button to press when the user wants to restart the game.

That’s all their is to it. There is no code in .fla at all. It is our presentation layer only. You can view the file here: guessthenumber.fla

Code: GuessTheNumber.as

Now we need to create the GuessTheNumber.as class that will be associated with the GuessTheNumber MovieClip.

Below is the full code for the class we will create:
import mx.utils.Delegate;
class GuessTheNumber extends MovieClip{

 var t_messageText:TextField;
 var t_instructionText:TextField;
 var t_guessText:TextField;
 var t_userGuess:TextField;
 var b_SubmitGuess:MovieClip;
 var b_PlayAgain:MovieClip;

 var guesses:Number = 0;
 var numbertoguess:Number = 0;
 var userGuess:Number = 0;

 	public function GuessTheNumber() {


		b_SubmitGuess.onRelease = 
                      Delegate.create(this,EventClickSubmitGuess);
 		b_PlayAgain.onRelease = 
                     Delegate.create(this,EventClickStartOver);
		InitGame();

	}


 	function InitGame()	{
            guesses = 0;
            numbertoguess = Math.floor(Math.random() * 100 ) + 1;
            t_messageText.text = "Guess The Number From 1-100";
            t_instructionText.text = "";
            t_guessText.text = "You have guessed " 
                  + guesses.toString() + " times";
            t_userGuess.text = "";
            b_PlayAgain._visible = false;
            b_SubmitGuess._visible = true;

        }

	function EventClickSubmitGuess() {

		userGuess = Number(t_userGuess.text);
		if (isNaN(userGuess)) {
            t_instructionText.text = 
                     "You Must Type A Number";

		} else {
           	guesses++;
        	if (userGuess > numbertoguess) 	{
                t_instructionText.text = "Lower";
        	} else if (userGuess < numbertoguess) {
                    t_instructionText.text = "Higher";
        	} else {
                t_instructionText.text = "You Got It!";
                b_PlayAgain._visible=true;
                b_SubmitGuess._visible=false;
        	}
		}

         t_guessText.text = "You have guessed " 
                     + guesses.toString() + " times";


	}


	function EventClickStartOver() {
		InitGame();
	}


}



  
Source Break Down

So now we will break apart the source to show exactly what we are doing. The good news is, this class is very simple.
import mx.utils.Delegate;
class GuessTheNumber extends MovieClip{

 var t_messageText:TextField;
 var t_instructionText:TextField;
 var t_guessText:TextField;
 var t_userGuess:TextField;
 var b_SubmitGuess:MovieClip;
 var b_PlayAgain:MovieClip;

 var guesses:Number = 0;
 var numbertoguess:Number = 0;
 var userGuess:Number = 0;

 
What is going on here?

import mx.utils.Delegate; We import this class so we can delegate the scope of our buttons to the main GuessTheNumber class.

class GuessTheNumber extends MovieClip : since this class is associated with a Movieclip in the .fla, we must extend from the MovieClip class.

var t_messageText:TextField (etc): Since this is AS2, We must declare each field in the MovieClip so we can work with it.

var guesses:Number = 0; This is the internal counter we will use for counting the user guesses.

var numbertoguess:Number = 0; This is an internal holder for the random number that user needs to guess.

var userGuess:Number = 0; A variable to hold the converted text value of the user inputted number from the input field.
public function GuessTheNumber() {


		b_SubmitGuess.onRelease = 
                     Delegate.create(this,EventClickSubmitGuess);
 		b_PlayAgain.onRelease = 
                     Delegate.create(this,EventClickStartOver);
		InitGame();

	}
What is going on here?

This is the constructor for our class.

b_SubmitGuess.onRelease = Delegate.create(this,EventClickSubmitGuess); This creates one of those delegated functions for buttons we discussed above.

InitGame(); This is called immediately to get a game started. We will also use this function to start a new game.
function InitGame()	{
            guesses = 0;
            numbertoguess = Math.floor(Math.random() * 100 ) + 1;
            t_messageText.text = "Guess The Number From 1-100";
            t_instructionText.text = "";
            t_guessText.text = "You have guessed " 
                  + guesses.toString() + " times";
            t_userGuess.text = "";
            b_PlayAgain._visible = false;
            b_SubmitGuess._visible = true;

        }
What is going on here?

This is a function to initialize all the variables needed to play the game.

numbertoguess = Math.floor(Math.random() * 100 ) + 1; This creates the random number for the new game.

t_messageText.text = “Guess The Number From 1-100”; (etc) : This sets the initial values for a text field.

b_PlayAgain._visible = false; This makes sure the Play Again button cannot be seen or used while the game is being played.

b_SubmitGuess._visible = true; This makes sure the user can use the “Submit Guess” button while playing the game.
function EventClickSubmitGuess() {

		userGuess = Number(t_userGuess.text);
		if (isNaN(userGuess)) {
                  t_instructionText.text = 
                     "You Must Type A Number";

		} else {
           	guesses++;
        	if (userGuess > numbertoguess) 	{
                t_instructionText.text = "Lower";
        	} else if (userGuess < numbertoguess) {
                    t_instructionText.text = "Higher";
        	} else {
                t_instructionText.text = "You Got It!";
                b_PlayAgain._visible=true;
                b_SubmitGuess._visible=false;
        	}
		}

         t_guessText.text = "You have guessed " 
               + guesses.toString() + " times";


	}
What is going on here?

This function is the heart of the game. Almost all the logic necessary to keep the game running is housed here.

EventClickSubmitGuess() : This is the function that we delegated to the “b_SubmitButton” button “onRelease” event the constructor.

userGuess = Number(t_userGuess.text); We take the variant value from the textfield and cast it as a number.

if (isNaN(userGuess)) : Test to see if the input value was indeed a number.

guesses++; Increase the guess count only is the entered value is a valid number.

if (userGuess > numbertoguess) : If the input value is higher than the random number, display the “Lower” message.

else if (userGuess < numbertoguess) : If the input value is lower than the random number, display the “Higher” message.

Otherwise, the user has guessed the number!

t_instructionText.text = “You Got It!”; Display the “You got it!” message.

b_PlayAgain._visible=true; Display the “Play Again” button to restart the game.

b_SubmitGuess._visible=false; Do not allow the user to keep guessing.

t_guessText.text = “You have guessed ” + guesses.toString() + ” times”; Display the number if guesses.
function EventClickStartOver() {
		InitGame();
	}
What is going on here?

EventClickStartOver() : This is the function that we delegated to the “b_PlayAgain” button “onRelease” event the constructor.

This simply restarts the game by calling InitGame();