Flash Tutorials: Maze - Collision Detection	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - Collision Detection

Free Tutorial

Step Five: 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);
        }
    }
}