Scary maze game in Actionscript 3

This post is the update for the Scary maze game. I will be rewriting the game tutorial using Actionscript 3 code. The steps in this tutorial are very similar to the previous one. You will again need a scary image and a screaming sound effect for this game. Both of these are free to download and can be found at everystockphoto.com and sounddogs.com. All the code used for this game can be found from various tutorials on this blog or by using the search box on the right.


Scary maze game in Actionscript 3

Step 1

Open a new AS3 file with the stage size 400 x 300 and the background colour #32FF99.

Select the Text tool (T) with static text and type your message on the stage. This message will be the initial instructional text for the game. I have typed the exact same message from the AS2 version of the game, but you can type whatever you wish.



I have again used a double knocked out text effect for the heading.


Step 2

Create the play button for the game and place the button below the instrutional message. Give your button the instance name: start_mc. If you don’t know how to create buttons, take a look at the basic buttons tutorial.




Step 3

On the timeline create a new layer called Actions then open up the actions panel and enter the following code.

//Stops the playhead moving to the next scene.
stop();

//Adds an event listener to the button with the mouse click event.
start_btn.addEventListener(MouseEvent.CLICK, goNextScene);

//This function stops on the first frame of the second scene using the
//gotoAndStop() method.
function goNextScene (event:MouseEvent) {
   gotoAndStop("1","Scene 2");
}

Step 4

Insert a new scene by selecting Windows > Other Panels > Scenes on the menu bar. Add a new scene by selecting the ‘Add scene button’ as shown below.



Step 5

Select ‘Scene 2’ on the Scenes panel if you are not on the second scene.

Take the Rectangle tool (R) and create your maze pattern. For full instructions on how to make the pattern, checkout step 5 from the previous AS2 tutorial here.


Step 6

Using the Selection tool (V) select your maze pattern and convert into a movie clip. Then give the movie clips the instance name: wall_mc




Step 7

On the timeline create a new layer called ‘End maze’. Select the Brush tool (B) and make a small brush point at the end of the maze. The brush point is the area the player should aim to reach. It should looking something like below.



Convert the brush point into a movie clip and give it the instance name: hit_mc


Step 8

On the timeline create a new layer called ‘Actions’. Then open up the actions panel and enter the following code:

//Stops the play head from moving to the third scene.
stop();

//Adds an event listener onto the stage with the mouse move event.
stage.addEventListener(MouseEvent.MOUSE_MOVE, detectHits);

function detectHits(event:MouseEvent) {

//If the mouse touches the edges of the maze, return back to the
//first scene, and remove the mouse move event listener from the
//stage.
if (wall_mc.hitTestPoint(mouseX,mouseY,true)) {
gotoAndStop("1","Scene 1");
stage.removeEventListener(MouseEvent.MOUSE_MOVE, detectHits);
}

//If the mouse touches the brush point, go to the third scene and
//remove the mouse move event listener from the stage.
else if (hit_mc.hitTestPoint(mouseX,mouseY,true)) {
gotoAndPlay("1","Scene 3");
stage.removeEventListener(MouseEvent.MOUSE_MOVE, detectHits);
}
} 

**A tutorial on the hitTestPoint() method can be found here.

Optional

You can create a custom cursor for your maze game at this point if you wish by using the following tutorial.


Step 9

Insert another scene by Windows > Other Panels > Scenes on the menu bar. Make sure the new scene is placed below ‘Scene 2’.


Step 10

Import your sound effect and scary image into the library by choosing File > Import > Import to Library.

On the timeline rename the first layer to “Image” and drag your image onto the stage ensuring it matches with the stage boundaries. You can use the Transform tool (Q) to resize your image if it doesn’t. Increase the image layer on the timeline by inserting a frame (F5) at frame 40.

Insert another layer called ‘’Sounds’ above the “Image” layer then drag your sound files from the library onto the stage. Your timeline should look like below.




Step 11

Create new layer called “Button” above the “Sounds” layer. On frame 40 insert a key frame (F6). And create a button with the message “Play again?” Give the button the instance name playAgain_btn.


Step 12

Again insert another layer on the timeline called “Actions” above “Button” layer.
Insert a new key frame (F6) on the 40th frame and add the following code:

//Stops the play head from moving back to the first scene.
stop();

//Add an event listener to the button with the mouse click event.
playAgain_btn.addEventListener(MouseEvent.CLICK, goBackScene);

//This function returns back to the first scene.
function goBackScene (event:MouseEvent) {
   gotoAndStop("1","Scene 1");
}

Your timeline should look like below.




Step 13

Test your game Ctrl + Enter.