Create a Spot the difference Game

Flash Tutorials

Photoshop Tutorials

Flash Games

Flash Game Design

Part 3) Writing the Code

Part: 1 | 2 | 3

So now that we've created the differences for each side, we can write an Actionscript function which will be used in each side of each level,

Step 17.

In the game Mc enter the code shown below into the first frame. It's line by line explanation can also be seen below

Line 1 - A variable to hold the total number of differences in each level. An Array could be used for varying difference total in each level.

Line 2 - The total of differences found is stored so that something can be done if all of them are found.

Line 3 - A function to make the differences which will be called in both versions. thisSide refers to the side which the user finds a difference in. otherSide refers to the side which will respond.

Line 4 - A for loop is used to loop through each difference (dif1, dif2, dif3). The numbers of times to loop is determined by "differences", which currently is 3.

Line 5 - Each difference can be refered to in the loop by using thisSide["dif"+i], but a temporary variable is used to shorten it.

Line 6 - each difference's hand cursor is turned to false so that the hand is not shown when the user moves the mouse pointer over it.

Line 7 - the difference has not been found yet, but when it is it will be set to true, so that it cannot be pressed again.

Line 8 - a poperty is created to store the opposite difference which will respond when the current one is pressed.

Line 9 - To prevent the user from cheating by using the Tab key, tabEnabled is turned to false.

Line 10 - The difference movieclip is assigned a function for when it's pressed. The rest of the code will be executed when the difference is pressed.

Line 11 - If the difference hasn't been found

Line 12 - Play the difference movieclip. Playing it will make it flash, as we set it up earlier to do so.

Line 13 - The other side's difference will also play

Line 14 - The difference has now been found, so we don't want it to be clickable any longer.

Line 15 - Set the other difference movieclip's found property to true also

Line 16 - Increase the found variable by 1

Line 17 - Check if all the differnces are found. This is for expanding on this tutorial by adding move levels in the "levels" movieclip

Line 18 - Set found to 0 for the next level

Line 19 - play the levels movieclip (for when you add more levels)

Step 18.

Now that the addDifferences() function has been written, we can now add it to each side of the level.

Line 1- To use the function we need to refer back to where it was written in the game movieclip. The _parent movieclip of level1left is level1, so game is _parent._parent._parent. We need to pass leftSide (this) as the paremeter for side where the differences are going to be clicked on , and rightSide as movieclip where the differences need to respond from clicks

Step 19.

For the mouse over state I've made it peach. We'll use actionscript later to stop it so there's no need to place a stop action.

Step 20.

Since the user may choose click on the differences on the rightSide movieclip, we also need to make the leftSide differences respond accordingly.

Step 21.

And that's all the code written, you can now go on to create more levels.

And that concludes the tutorial to Make a Spot the Difference Game. You can download the FLA here.

If you'd like to earn money from the games you create, MochiAds is a good choice.

Part: 1 | 2 | 3