Flash MX ActionScript Tutorial - Dodgem Cars Game

This game can be adapted to any sort of dodgem game. Dodgem spaceships. Cop chase. helicopters. Planes. This game will be done in one scene only
Go here to play it!

Step 1.Do an introduction on frame 1.

Open up Flash MX Pro

1. Create a layer "background graphics" and insert your background for the introduction frame.
2. Create a layer "foreground graphics" and insert any instructions and/or a title.
3. Create a layer "buttons" and make a start button and click on the button. Open the actionscript window (F9)
   
   and insert this code to take the punters to the second frame where the game action will take place.
   

           on(release){
                   _root.gotoAndPlay(2);
           }
   

4. Create a layer "control" and insert the following actionscript on frame 1 :
   

           Stop();
           score = 999;
           lives = 10;
   

   This script halts the frame at frame 1 until the "start" button is pressed,
   and initialises the global variables score and lives.

Step 2 - Frame 2- Create the Car MovieClip

1. Create a new layer, "My Car" and press F6 to make a new KeyFrame in frame 2.
   Make sure that frame 1 is empty on this layer.
2. In that layer draw a car shape, select it, and hit F8, "Convert To Symbol".
   Choose "Movie Clip" as its behaviour, call it "myCar".
   
   In the instance window of its properties, give it the instance name of "myCar_mc".
   
3. Double click on the "myCar" symbol in the library and in "Edit Symbols" mode, add another layer "control".
4. In the Actions window for that frame (control, frame 1) type:
   stop();
5. Add another 9 keyframes to the car graphic layer(10 frames in all)
   in frame 2 create an explosion graphic or break apart the car.
   In frames 3 to 9 delete any graphics from these frames.
6. In the "control" layer add a keyframe at frame 10. Add the code:
   

   		 _root.lives -= 1; // Take one of my lives away
           this.gotoAndStop(1); // take me back to frame 1 and start again
          
   

   
   
7. Add another layer to the car movie and call it sounds.
   Make a keyframe at frame 2. Add a car crash sound file to that frame.
   make sure that the sound file start at frame 2 and that sounds/frame 1 is empty.
   
8. When you have finished go back to "Edit Scene" mode
   
   

Step 3 - Frame 2 Create the Dodgem Cars MovieClip

1. Create a new layer, "dodgems" , make a keyframe in frame 2, and draw a car shape.
   Select it and hit F8 to convert to symbol and choose "movie Clip" behaviour. Call it "dodgem".
2. Call this instance "dodgem1" in the properties dialog.
   Drag 4 more Dodgem movieClips from the library onto the stage (in "dodgems" layer) and call them "dodgem2", "dodgem3" etc.
   

Step 4 - Frame 2 - Score and Lives TextFields

1. Create a new layer "scores", and create a new Keyframe in frame 2(frame 1 is empty).
2. Click on Text Tool and create a "Dynamic Text" textfield at the top left of the stage.
   Give the var(variable) field the name of "lives".
3. Create another "Dynamic Text" textfield and give its variable(var) the name of "score".
   Place it at the top right of the stage
   

1. This is where you put in main code to control the behaviour of the dodgems and scoring.
2. In frame 2, control layer, make a new keyframe (F6) and insert the following code:
   

   	
   	for(i=1; i<6;i++)
   	{
   		_root["dodgem"+i].onLoad = function(){
   			this._x = -(Random(100)+1);
   			this._y = Random(390) + 1;
   		}
   		// missiles on enter frame
   		_root["dodgem"+i].onEnterFrame = function(){
   		if(this._x >= 550)
   		{
   			this._x = -(Random(100)+1);
   			this._y = Random(390) + 10;
   		}
   		this._x += 20;
   		// check for collisions
   		if(this.hitTest(myCar_mc))
   		{
   			_root.myCar_mc.gotoAndPlay(2);
   			
   		}
   	}
   
   	}
           
   

3. In frame 2, dodgems and myCar layers, hit the key F5 to create a new frame. You should have 3 frames now, but only on dodgem, mycar and control layers.
   Go to the control layer , frame 3 and hit F6 to create a new keyframe. Open the actions window and enter this script to decrease the counter and send the playhead back to frame 2 , thus creating a loop.

   	_root.score -= 1;
   	_root.gotoAndPlay(2);
   	
   

   
4. Click on the myCar movie clip and insert this code into its actions window:

   	
     onClipEvent(load){
   	Mouse.hide();
   	this.startDrag(true,0,0,Stage.width,Stage.height);
     }
   
   

Well that should be about it. There is no end to the game yet. The counter just keeps rolling on and the lives keep getting blasted. So your homework will be to stop the game and have some sort of of result. For example "You have used up all your lives and had 200 seconds left to complete your mission".
Download the fla file here
Things to do could be to have differing levels where the cars get faster and more closer.

Addendum - Added restart and check scores and lives

• This is dedicated to Paul T - June 2003
• Add a new frame. i.e. frame 4 to the root movie. Add a control/actions frame and put this code in frame 4

     	Stop();
     	// we need to see the mouse to press buttons
     	Mouse.show();
     	// get rid of scores and lives
  	_root.lives = "";
  	_root.score = "";
  
  

• In frame 3, actions/control layer, insert the lives checking code. It should end up looking like this:

  	_root.score -= 1;
  	if( _root.lives<0)
  	{
  		// end game	
  		_root.gotoAndStop(4);
  	}
  	if( _root.lives>=0)
  	{
  		// continue game
  		_root.gotoAndPlay(2);
  	}
  
  

• In the "scores' layer insert a "Dynamic Text" textfield and give it the variable name of "winner"
• In frame 5 of the Actions layer of "myCar" movieclip insert a check for the score. It should be something like this:

  	// dercrement lives by 1 because hit
  	_root.lives -= 1;
  	if(_root.score <= 0)
  	{
  		_root.winner = "You win!";
  		// end game
  		_root.gotoAndStop(4);
  
  	}
  	// go back to beginning of this movieclip 
  	this.gotoAndStop(1);
  

• Go back to main timeline and insert 2 buttons into frame 4, buttons layer.
  Button 1 will be the Restart button and will have the code that resets the variables and sends the timeline back to frame 2:

  on(release){
  	_root.lives = 10;
  	_root.score = 1000;
  	_root.winner = "";
  	_root.gotoAndPlay(2);
  }
  

  Button 2 will be the one that exits to a specified web page .. Change it to the url you choose:

  on(release){
  	getURL("http://www.myDomain.com/index.htm","_self");
  	}
  

Resources

Flash MX Pro
More flash MX tutorials
Steve's Forums
"Macromedia Flash MX 2004 Game Design Demystified" by Jobe Makar