How To Make A Tic-Tac-Toe Flash Game In ActionScript 3 – CS3 Timeline

Introduction:

By the end of this tutorial, you will know how to make a Tic-Tac-Toe Flash Game like this (without ads of course):

// This tutorial will teach Flash authoring techniques as well as programming in CS3. This tutorial is designed for simplicity and object oriented programming is not applied. The entire game is made with the Flash authoring timeline. Although I don’t recommend this method, this is the quickest and easiest way to get a prototype of something working within hours. For a quick and easy game like Tic Tac Toe, programming in the timeline is ok. What is programming in the timeline? Read on and find out~

Section 1: Prerequisites

- You must know everything in the absolute beginner section as well as the intermediate tutorials from my site; I won’t go over every detail that I’ve already gone through before.

- Flash CS3 or above

Section 2: Building assets

Create a new document with size 500 by 400 (document settings).

Press R to use the rectangle tool. In the properties panel, set the stroke to 5 to make the outline of the square bigger. Set the style to ragged to give it a ragged look. Then click and drag to draw.

Figure 2-1

Highlight your drawing and press F8 (or right click and do convert to symbol). Convert it into a Button.

Add a new layer and put in the text “Player Vs Player”

Figure 2-2

Your button should now look something like this:

Figure 2-3

Make sure you go back to your main scene by clicking on the scene 1 button on the top left corner before doing anything else.

Figure 2-4

Select your button and give it the name b_pvp in the properties panel:

Figure 2-5

With your button still selected, press Ctrl-C to copy it, then Shift-Ctrl-P to paste it at the same location.

Now press Shift-Down-Arrow about 7 times.

Right click on the lower button and select duplicate symbol…

Give it the name b_playerVsCPU

Figure 2-6

Double click on the symbol. Edit the text and change it to Player Vs CPU

Give this symbol the name b_pvcpu from its properties panel.

You should now have 2 buttons that look sort of like this:

Figure 2-7

Section 3: The Timeline

Name the layer you’ve been working on to content. You can draw whatever you’d like: the title, background, etc. Add layers to the timeline so it looks like similar to this (Press F6 to create keyframe):

Figure 3-1

Click on the code layer, press F9 or open the actions tab and enter the following code from Figure 3-1 below. Type everything so you can get more practice on programming.

Lines 5-10 creates the click listener for the buttons you just created. But what about lines 12-34? What are those?? When you are coding in the timeline on AS3, functions you create works everywhere throughout the timeline. The functions startDragCurrentObject(), stopDragCurrentObject(), goTitleBtn(), and repositionXandO() are used in the frame label “playerVsPlayer” and “playerVSCPU”; which we will be working on next.

රූප 3-2

Section 4: Player Versus Player

Using techniques from section 2 and previous knowledge, create the following scenario in the content layer in frame 10 with label playerVsPlayer (you can leave out the playerVsCPU frame for now):

Figure 4-1

Give the X names m_x_0, m_x_1, etc for all 5. Do the same for the O symbols. Give the title button the name b_title and give the restart button the name b_restart. Now in frame 10 in the code layer, enter the following actionscript:

Figure 4-2

There is never one way to do things. We can already see the problems that will come up for more complex games with many instances of objects. With 10 buttons, we have 20 lines of code. What if we want 100 buttons that do more complex things? It would require lots of copy and pasting; very tedious work. That is one of the reasons why I recommend object oriented programming instead of timeline programming. But anyway, you need to learn both and make your own judgments on what is the best workflow for you.

Let’s look at some code:

Lines 2-23: notice that startDragCurrentObject() is called when a mouse is down and stopDragCurrentObject() is called when the mouse is up for the symbol. These functions are defined in frame 1 with label title in the code layer. Let’s look at the code inside one of the functions:
e.currentTarget.gotoAndStop(“up”);
e.currentTarget.startDrag();

e.currentTarget refers to the button that called the function (m_x_0, m_x_1, etc). Every X and O mouse listener calls that function. This way, we won’t need 20 functions that do the same thing. This is VERY useful and saves a lot of copy and pasting time. Anyway, the X and O will go to the frame label “up” when the mouse is pressed and it will follow your mouse because of the startDrag(). Since it goes to frame label “up”, you better have that frame. Create it for both X and O symbols (you can have it look like whatever you’d like. I put a drop shadow filter on mine).

Figure 4-3

Line 32: repositionXandO() is called in the beginning of the player versus player game as well as when the restart button is pressed.

In frame 1 of label title, repositionXandO() is defined in lines 24-34. Here’s another very useful way to refer to multiple instances: this[] . You can put Strings inside the this[] array to refer to symbols dynamically. This makes 60 lines of code down to 8 lines of code.

When players are playing against each other, you don’t really need any logic; just make the X and O drag-enabled. The players can think for themselves who won. However, when playing against the computer, things get much more complicated.

Section 5: Player Versus CPU

Using techniques from section 2 and previous knowledge, create the following scenario in the content layer in frame 25 with label playerVsCPU.

Figure 5-1

Create a big rectangle movieClip and give it the instance name m_winLose. Inside the rectangle is a dynamic text labeled tf_winLose. The text will either be “Win”, “Lose”, or “Tie”.

In layer detectors, create 9 transparent (0 alpha in color effects) squares and label them m_detect_0, m_detect_1, etc from left to right, top to bottom. These will be used to determine where you put your X symbols.

Put in the following actionscript in frame 25 with label playerVsCpu in the code layer.

Figure 5-2

Figure 5-3

Figure 5-4

Figure 5-5

If you are a beginner, 3 pages of code may look a bit scary. However, a lot of the code is really just copy and paste. Let’s look at the code.

Lines 3-4: Instead of using a matrix (double array) to store the location of the slots, I’ve decided to use two arrays to record the coordinates. These slot coordinates are used by the CPU; it will move the blue O symbols on to the playfield slots (there are 9 of them).

Lines 8-17: There are only listeners for the X symbol. The O ones are controlled by the CPU and the player is not allowed to mess with them.

Lines 24-35: The initPVCPGame function is called in the beginning (line 22) as well as whenever the restart button is pressed. locationFilledArray is an array that stores “X”, “O”, or “neither”. It is used to determine if a slot in the playfield is used as well as if the player won,lost, or tie/draw. In line 34, CPUMakeMove function is called. This makes the CPU move start.

Lines 37-40: Instead of stopDragCurrentObject, stopDragCurrentObjectCPU is used. The difference is that checkDroppedPosition is called. Let’s look at checkDroppedPosition in line 108-121. The currently selected object, in_mov, will be tested against all 9 detectors. If the hitTestObject is true, then we put an X in locationFilledArray so the computer won’t move to the same spot. After the player puts an X in a location, we check to see if the player wins in the checkWin function: line 123-150. In the checkWin function, there is logic with all 8 possible ways of winning. The checkWin function can be used by the player as well as the cpu.

Lines 44-106: The CPUMakeMove function is the artificial intellegence of the computer player. The computer is sort of dumb; all it does is check to see if there is an available spot and it will put itself there (line 47-50 does this). Line 45 contains a varable called ranNum that calls the function randRange, which generates a random number between 0 and 8. Why 0-8; because there are 9 slots (0 counts as 1).

Lines 52-92: Contains logic to determine the location of where to put the current O symbol. Case 0 is the location on top left, Case 1 is the location to the right of Case 0 , etc.

Lines 93-105: This puts the O symbol in the locationFilledArray and checks to see if the computer won or not using the checkWin function.

Ending Summary

If you think you understand everything, think again. It is easy to look at the code and was given to you and assume that you’ve learned it. How do you know if you’re REALLY understood how to program in Flash? Easy, finish the game.

This game is not complete. There are still bugs and much room for improvement. As an exercise, you can do the following:

1) Alternate between who starts first; player or cpu (currently the cpu always starts first).

2) The game gives an error and things get messed up if the player puts the X in a spot that is not empty! Handle it!

3) Make the CPU smarter; it currently puts O at random locations.

4) Add sound and music? See my other open source games for code on how to do that.

5) Fix up the graphics by adding details; animating the cpu’s placement of the O symbols

6) Allow the player to choose between the X or O symbol.

If you can make these changes, you can call yourself a games developer. It is not as easy as it sound but it is also not as hard. It will take time to master. The deeper you dig into programming, the more you find the need to use object oriented programming to make your life much easier.

Get the source code for this project here.

Start working on the exercises 1-6 if you want to improve. After mastering this, master my other game source codes (without tutorials). You should be ready for reverse engineering and figure things out on your own. Instead of teaching you how to make a certain type of game, I’d much rather teach you how to make any kind of game.

This is the first and perhaps the last game tutorial I’ll create. I need to stop making simple games for teaching purposes and start making the fun games that will bring more traffic to my site. Having these resources ready and available for anyone who is interested in learning Flash is now one of my accomplished goals.