a-MAZE-ing

  
  This tutorial develops a basic maze game with collision detection. Collision detection is useful in many different game type scenarios and is easier than you might think. The Collision Detection ensures that the Ball (or Player) does not cross the lines of the Maze.  
 
 
 

Setting Up the Movie

 
 
  1. Open a new: Flash Movie
  2. Go to: Modify > Document
  3. Set the Movie to: 550 x 400
  4. If you wish set a: Background Colour
  5. Click: OK
  6. In the Timeline right click (Mac: Ctrl click) Frame 3 and select: Insert Frame
  7. In the Timeline use the Insert Layer button to add 5 Layers so you have a total of: 6 Layers
  8. Name the Layers as follows:
 
 

Creating the First Frame

  
 
  1. Select Frame 1 of the: Text & Button Layer
  2. Create a button with a Label: Click to Play
  3. Attach the following ActionScript to the Button:
 
 
  on(release){
    gotoAndStop(2);
}		  
 
 
  1. Right click on Frame 2 of the Text & Button Layer and select: Insert Blank Keyframe so the Button to be visible on the next frame :
  2. Select Frame 1 of the: Background Layer
  3. Place any other graphics on this frame that you may want. If you wish to to do this come back and do this latter when you have finished creating the Maze: Create a Background
  4. Right click on Frame 2 of the Background Layer and select: Insert Blank Keyframe so the Background will not be visible on the next frame.
  5. Select Frame 1 of the: ActionScript Layer
  6. Attach the following ActionScript to Frame 1:
 
 
  Stop();  
 
 
The timeline should like similar to
 
 

Creating the Player

 
 

In this tutorial, the Player is the small blue circle:

  1. Right Click on Frame 2 of the Player Layer and select: Insert Blank Keyframe
  2. Select the Oval Tool:
  3. Create a small: Circle (or square if you prefer)
  4. In the Property Inspector set the size to: 8 x 8 pixels

    Note: It must be easily small enough to fit through the Maze.

  5. Return to the standard Selection tool:
  6. Select the: Circle (make sure the whole thing is selected)
  7. Right click the Circle and select: Convert it to Symbol
  8. For Name type: player
  9. For Behavior select: Movie Clip
  10. Click: OK
  11. If the Property Inspector, give the Movie Clip an Instance Name: player
 
 

Creating the End

  
 

When the Player hits the object called the End the Movie will go to the next frame. In theory the End could be invisible. This end looks like this:

  1. Right Click on Frame 2 of the End Layer and select: Insert Blank Keyframe
  2. Select the Rectangle Tool:
  3. Create a small: Rectangle
  4. In the Property Inspector set the size to about: 30 x 20 pixels

    Note: Don't make it too small or your Player could jump right over it rather than hit the end.

  5. Select the Text tool and type: END
  6. Return to the standard Selection tool:
  7. Select the: Rectangle (make sure the whole thing is selected)
  8. Right click the rectangle and select: Convert it to Symbol
  9. For Name type: end
  10. For Behavior select: Movie Clip
  11. Click: OK
  12. If the Property Inspector is closed, open it: Window > Properties (Ctrl F3)
  13. Give the Movie Clip an Instance Name: end
 
 

Creating the Maze

 
 
  1. Right Click on Frame 2 of the ActionScript Layer and select: Insert Blank Keyframe
  2. Select one of the Drawing tools such as the Pen Tool:
  3. Draw your: Maze Walls

    Note: If your Maze drawing is going to very complex I suggest you only draw a small section of the Maze to start with. You can come back and add to the drawing latter. If the walls are too thin or the path (where your blue dot moves) is too narrow you may find that the Player goes straight through the walls. The thicker the Walls and the wider the Paths the faster you can make your Player move so try not to make the walls too thin.

    • My Walls are at least: 6 Pixels Thick
    • My Paths are at least: 10 Pixels Wide

  4. Return back to the standard Selection tool:
  5. Select the: Drawing (make sure the whole thing is selected)
  6. Right click the Maze drawing and select: Convert it to Symbol
  7. For Name type: walls
  8. For Behavior select: Movie Clip
  9. Click: OK
  10. If the Property Inspector is closed, open it: Window > Properties (Ctrl F3)
  11. Give the Movie Clip an Instance Name: walls
  12. Right Click on the Movie Clip again and select: Convert it to Symbol
  13. For Name type: maze
  14. For Behavior select: Movie Clip
  15. Click: OK

    Note: This creates a series of nested Movie Clips one inside another. The Walls Movie Clip is inside the Maze Movie Clip. The Maze Movie Clip is on the Main Stage:

  16. Attach the following ActionScript to the outside of the Maze Movie Clip:
 
 
 

onClipEvent (enterFrame) {
    with (_root.player) {

        // Controls Player Speed
        mySpeed = 3;

        // Controls how far the Player bounces off the wall after impact
        myBounce = 3;

        // keyboard controls
        if (Key.isDown(Key.DOWN)) {
            _y += mySpeed;
        }
        if (Key.isDown(Key.UP)) {
            _y -= mySpeed;
        }
        if (Key.isDown(Key.LEFT)) {
            _x -= mySpeed;
        }
        if (Key.isDown(Key.RIGHT)) {
            _x += mySpeed;
        }

        // detect if edges of the player is colliding with the Maze Walls
        if (walls.hitTest(getBounds(_root).xMax, _y, true)) {
            _x -= myBounce;
        }
        if (walls.hitTest(getBounds(_root).xMin, _y, true)) {
            _x += myBounce;
        }
        if (walls.hitTest(_x, getBounds(_root).yMax, true)) {
            _y -= myBounce;
        }
        if (walls.hitTest(_x, getBounds(_root).yMin, true)) {
            _y += myBounce;
        }

        // detect if Maze is finished
        if (_root.end.hitTest(_x, getBounds(_root).yMax, true)) {
            _root.gotoAndStop(3);
        }
    }
}

  
 
 

Creating Frame 3

 
 
  1. Right Click on Frame 3 of the Text & Buttons Layer and select: Insert Blank Keyframe
  2. Type something like: You Won !!
  3. Create a button to return and play again: Replay Button
  4. Add the following ActionScript to this Button:
 
 
  on (release){
    gotoAndStop(2);
}		  
 
     
 

Other Mazes