Games Programming - 4

Space Shuttle Game

You can play this game, and others, at Maximized Games.

1. Create a new movie with two keyframes at frames 1 and 2.

2. Add an action to Frame 1, so that the movie stops i.e. stop();

3. Add some large text to Frame 2 that says ‘CRASH!!!’.

4. Create a new movie clip symbol that will act as the spaceship. Place this movie clip on the main movie stage at Frame 1 and name this instance ‘spaceship’.

5. Create a new movie clip symbol that will act as an obstacle. Place this movie clip on the main movie stage at Frame 1 and name this instance 'asteroid'.

6. Add the following actions to the instance of the spaceship on the main movie stage.

   onClipEvent(enterFrame){
   
   	if (Key.isDown(Key.RIGHT)){
   
   		if (this._x<500){
   			this._x+=10;
   		}
   
   	}else if (Key.isDown(Key.LEFT)){
   
   		if (this._x>50){
   			this._x-=10;
   		}
   
   	}else if(Key.isDown(Key.UP)){
   
   		if (this._y>50){
   			this._y-=10;
   		}
   
   	}else if(Key.isDown(Key.DOWN)){
   
   		if (this._y<350){
   			this._y+=10;
   		}
   
   	}
   }
   

7. Add the following actions to the instance of the asteroid on the main movie stage.

   onClipEvent(enterFrame){
   
   	if(this.hitTest(_root.spaceship)){
   		
   		_root.gotoAndStop(2);
   
   	}
   }
   
   

   Improving the asteroids

8. The asteroids in our game could be improved by placing them randomly on the screen each time the game runs, and also causing them to move slowly down the screen.

   We could increase the length of our game by making another asteroid appear when the first one disappears off the screen.

   The following code should be added to the instance of the asteroid to get this to happen. Notice the comments in the code that explains what each section does.

   This actionscript uses the random number function which can be used to add an element of surprise to your games.

   A user defined function ‘reset()’ is also used, as is the ‘load’ clip event.

   onClipEvent(load){
   	// position the asteroid at a random position
   	function reset(){
   		this._x=random(400)+50;
   		this._y=-50;
   	}
   	reset();
   }
   
   onClipEvent(enterFrame){
   
   	// test for a collision
   	if(this.hitTest(_root.spaceship)){
   		
   		_root.gotoAndStop(2);
   
   	}
   	
   	// move the asteroid
   	this._y+=10;
   
   	/*	check if asteroid is off screen
   		and if so, reset it	*/
   	if (this._y>450){
   		reset();
   	}
   	
   }
   
   

   Adding a Scrolling Background

9. This section is purely cosmetic, and has no effect on gameplay - you can skip this part if you want, as many people find this difficult to do!! Insert a new layer into your Flash movie – drag the layer to the bottom of the list to make it the background layer.

   Insert a new Movie Clip symbol and call it ‘backdrop’. Draw a black rectangle and resize it to 550 x 400 pixels (the same size as your movie). Use the Brush tool to paint some white coloured stars and planets onto this backdrop.

   Now copy the backdrop graphic and paste the copy onto the stage. Align the copy with the top of the original – creating a long backdrop 550px wide by 800px high. Select the whole backdrop, Edit – Select All, and set it’s X and Y position to 0,0 so that its reference point is in the top left hand corner.

   Go back to the Main movie timeline and drag the backdrop from the Library into frame 1 of the layer you created earlier. Set the backdrop’s position to -400,0.

   Add the following Actions to the backdrop object, which will cause it to scroll continuously (this is actually an illusion).

   onClipEvent(enterFrame){
   
   	// move the backdrop 5 pixels down
   	this._y+=5;
   	// move the backdrop back up when its Y position is greater than zero 
   	if(this._y>0){
   		this._y=-395;
   	}
   }
   
   

   Adding a Scoreboard

10. Insert a new layer in your movie – it will contain the scoreboard. Make sure the new layer is at the top of the list.

    Draw a Text box in the top right hand corner of the stage in the new layer and type the number 0 (zero) in it. Change the default font and size by selecting Window – Panels – Character. Choose Window – Panels –Text Options and select Dynamic Text. Unselect the ‘Selectable’ checkbox. Enter the word ‘score’ in the Variable text box.

    We will increment the score every time an asteroid reaches the bottom of the screen. To do this, add the highlighted code below to your asteroid instances.

    onClipEvent(load){
    
    	function reset(){
    		this._y=-50;
    		this._x=random(400)+50;
    			}
    	reset();
    }
    
    onClipEvent(enterFrame){
    
    	if(this.hitTest(_root.spaceship)){
    		_root.gotoAndStop(2);
    	}
    
    	this._y+=10;
    
    	if (this._y>450){
    		_root.score++;
    		reset();
    	}
    }
    

    Ending the Game

11. At present the game only ends when an asteroid hits the ship. You could also end the game when a particular score is reached. This could be achieved with a simple ‘if’ condition that checks the value of ‘score’.

    You could also add an explosion to the ship when an asteroid strikes it. This could be achieved by adding extra frames to the spaceship movie clip which play back when the ship is struck.

Additional things to try

1. Add more asteroids to the game to increase the challenge.

2. Add variety to the asteroids - making some larger and slower, or smaller and faster.

3. Create an animated explosion that occurs when the spaceship crashes.