Guess the Numbers Game

by kirupa   | filed under Flash and ActionScript

Something that Flash is really good for is games. While Macromedia's Director is used for the complex web-based games, Flash has the capabilities to help you create great games. If you do not believe me, play some excellent Flash games on Ferry Halim's site Orsinal: http://www.ferryhalim.com/orisinal/

Needless to say, I do not have the intricate knowledge of programming (yet) to create great games as Mr. Halim. But I do know how to create some simple games and the basics behind creating them. Here is an example of the Guess the Numbers game:

This tutorial will help you to create a simple "guess the numbers" game. More specifically, the tutorial will be broken down into the following parts:

• Planning The Game
• Creating the Interface
• Coding
• Polishing it Up

Simple Movement along the X Axis

The best way to start exploring movement is to take a simple object and move it horizontally along the x axis. The following is an example of an object that moves along the x axis powered by only a few lines of code:

[ press the 'start over' text if you do not see anything ]

Let's create the above animation:

1. Click here to open an FLA that contains nothing but the interface. Don't worry, you will add the cool code to make the box move by yourself.
    
2. Once you have opened the xmovement.fla file you downloaded from the above link, you should see a movie clip of a box.
    
4. Right click on the box and select Actions. The Actions dialog box will appear. Copy and paste the following lines of code into the Actions dialog box:

                      onClipEvent(enterFrame) {
 speed = 1;
 this._x += speed;
}

[ copy and paste the above code into the Actions dialog box ]

5. Preview the animation. You will notice that the box moves across slowly.

ActionScript Explained

Not to leave you in the dark, I will explain what each line of the code accomplishes.

                    onClipEvent(enterFrame)
  {

  speed = 1;

  this._x
  += speed;

  }

The first line is nothing more than the OnClipEvent event handler (enterFrame) that executes the code continuously in a one frame movie clip.

In the second line, I am declaring and initializing the variable speed with a value of 1. As is expected, the variable speed refers to the speed at which the object will move.

In the third line, I set the current position of the movie clip (this._x) to continuously increment with the value of speed. You know I am incrementing because of the operator += following the statement this._x.

What is happening?
Let me explain what happens in the code. As I explained above, enterFrame continuously executes the code under it. The speed at which the object moves will be 1. Therefore, the first time the code runs through, the current X position of the movie clip increases by a value of 1. The second time the code runs through, the current X position of the movie clip increases by another value of 1.

This process gets repeated numerous times (25 times per second to be exact) to simulate movement. The speed at which the code executes depends on the frames per second (FPS) of the movie.

To understand the concepts more, try the exercises listed in Exploring Further.
 

	EXPLORING FURTHER
Try the following little modifications and observe the results: In the code, set the value for speed equal to 2 instead of 1. Preview the animation.   Drag the box all the way to the right side of your stage and set the value for speed to -2 instead of positive 2. Notice the big difference that is visible.   Modify the code by replacing _x with _y. Preview the animation and check out the changes.

If you tried the Exploring Further modification mentioned in the above box, your animations will look like the following. Do not hesitate to press the [ start over ] text to view the animation again (or for the first time).

Modification A

By changing the variable for speed from 1 to 2, we are changing the speed at which the x position increases. The higher the number, the faster the movement. Therefore, the box moves more quickly from the left to the right:
 

Modification B

By moving the box to the right and changing speed's value from 2 to -2, you are reversing the direction at which the box moves. Anytime you change the sign of a value that controls movement, you are basically reversing the direction of movement:
 

Modification C

We have basically been dealing with movement in the X direction. Moving the box in the Y direction is not that much difficult. Simply change _x to _y to see that the box move:
 

If you were really paying attention, you may be wondering why the square is moving up instead of moving down. After all, the speed value is a big -2, and in Geometry, I learned that Y decreases as one moves down. The reason is that Flash does not obey the Cartesian principles that you and I learn in school. In Flash, Y decreases as you move higher and increases as you move lower.

As always, I have provided the source code for this tutorial. Click the download for Flash MX link below to download them.
 

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇