Space Invaders Flash MX Game Tutorial - Part 2

Go back to Part 1 if you haven't done that yet.
Have a look at the finished? swf so far.
And .. download the fla to study what we have done in this tute.
This Flash Game tutorial carries on from part 1. In that we constructed our defender, our rows of aliens, and got our defender to shoot bullets. At the last stage, it was getting a little sluggish because we had too many character on stage at once - 30 aliens and 50 bullets. So the first thing we will do will be to :

• Lessen the number of bullets. In the original you only had one bullet. But I think we could have, hmmmm ... how about 6? You can have as many as you like.
• Make some bombs and work out how and where and when to drop them
• Make some covers to protect the defender
• Do some collision detection.
• Check if bullets hit aliens
• Check if bombs hit defender
• Check if bullets hit bombs
• Check if bombs hit covers
• Check if aliens hit defender
• Then ..
• Add score and lives fields
• Add code to increase score when alien is hit and defender is hit
• If all aliens are dead , go to next level
• If defenders lives are all gone, return to start.
• Create new level/s and a start page

So there is a little bit of work in that. whew! Where does one start. Ummm I think I will go and have a coffee and think about it. Be back soon... Back again. What is the first thing on our list?

Lessen the number of bullets

Ok lets do it. Select your defender mc and open its actions window. At the line where it says

// inside mouseDown method
	if(bulletNum>50){
		bulletNum = 0;
	}

	if(bulletNum > 6){
		bulletNum = 0;
	}

Bombs.

On a new layer draw some sort of oval bomb shape. Select it and press F8 , give it the name of Bomb and give it the instance name of bomb.
Select the bomb and in its actions window write this code:

	onClipEvent (enterFrame) {
		this._y += 5;
		if (this._y>Stage.height) {
			this.removeMovieClip();
		}
	}

So lets select our controller_mc and in the actions window , write this stuff after the line:
"dropdown = false;"
It will be in the enterFrame method just before the last curly bracket.

 // controller mc enterFrame
 // .....
 dropdown = false;
	// drop bombs
if(Math.random() < 0.1)
{
// duplicate the bomb mc
_root.bomb.duplicateMovieClip("bomb" + bombNum,200+ bombNum);
// set the coords to a random position
eval("_root.bomb" + bombNum)._x =random(700);
eval("_root.bomb" + bombNum)._y = 300*Math.random();

// increment the bomb number
bombNum++;
// if more than 10 bombs , start again at 0
if(bombNum>10){
	bombNum = 0;
}
}
 

Covers

Create another layer and draw some sort of cover or barrier. Select it , press F8, call the mc Cover and call the instance "cover". Select the frame in the actions layer and put this code after the duplicate aliens code:

for(var j=0;j<6;j++)
{
	duplicateMovieClip("cover", "cover"+j, 300 + j);
	_root["cover"+j]._x = j*100 + 80;
	_root["cover"+j]._y = 350;
}

Collision Detection - Bullets Hit Aliens

So lets start the process of Collision Detection. We have got a lot of processing to do so lets get stuck into it. First create a new layer and call it "textfields". Create a dynamic TextField. In the "variable" field in the Properties window call the variable "score". Create another Dynamic Text field and call its variable "lives". Place these textfields up the top somewhere. Our scores and lives will be displayed here.
Select your bullet mc on the stage. And in the actions window add some code. The whole code for bullet should look like this:

onClipEvent (enterFrame) {
this._y -= 30;
if (_x<0 || _x>Stage.width || _y<0) {
	this.removeMovieClip();
}
for (var i = 0; i<3; i++) {
	for (var j = 0; j<10; j++) {
		if (_root.bullet, hittest(_root["alien"+i+"_"+j])) {
			_root.score +=1;
			_root["alien"+i+"_"+j].removeMovieClip();
			this.removeMovieClip();
			
		}
	}
}
}

Before we go any further, we need to make a another frame in our root movie so that we have somewhere to go after our level ends. So select frame 2 on each layer and hit F6, (except for our actions layer, hit f5 for that) to make new keyframes on every layer. Delete the contents of all the frame 1's , except for the actions layer.
For the actions layer, select frame 1 and hit f6 to make a new keyframe there.. delete all the code in that frame and simply put in the code :

stop();

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

Bombs Hit Defender, Bullets and Covers

Put this code into our Bomb mc.

onClipEvent (enterFrame) {
this._y += 5;
if (this._y>Stage.height) {
	this.removeMovieClip();
}
// bombs hit defender
if (this, hittest(_root.defender)) {
	_root.lives -= 1;
	if(_root.lives <=0)
	{
		// change to go to page 1 
		Mouse.show();
		_root.gotoAndStop(1);
	}
	this.removeMovieClip();
}
// bombs hit bullets
for(var k=0;k<6;k++){
	if(this, hittest(_root["bullet"+k]))
	{
		this.removieMovieClip();
	}
						   
}
// bombs hit covers
for(var l=0;l<6;l++)
{
	if(this, hittest(_root["cover"+l]))
	{
		_root["cover"+l].removeMovieClip();
		this.removeMovieClip();
	}
}
}

Finishing Level 1

Add an empty keyframe on frame 3. Later we will put the new level there..
Go back to frame 2 and on the control_mc , this is the final code for it:

onClipEvent (load) {
	dropdown = false;
	speed = 10;
	
}
onClipEvent (enterFrame) {
_root.deadcount=0;
for (var i = 0; i<3; i++) {
for (var j = 0; j<10; j++) {
	// if alien hits  defender
	if(_root["alien"+i+"_"+j].hittest(_root.defender)){
		// change to go to page 1
	// remove all the mc's - aliens
	for(var i=0;i<3;i++){
		for(var j=0;j<10;j++){
			_root["alien"+i+"_"+j].removeMovieClip();
		}
	}
	// remove covers
	for(var i=0;i<6;i++){
		
		_root["cover"+i].removeMovieClip();
	}
	
	Mouse.show();
	_root.gotoAndStop(1);
							
	}
									  
	// move horizontal
	_root["alien"+i+"_"+j]._x += speed;
	// check if any aliens left alive
	if(_root["alien"+i+"_"+j]!=null){
		++_root.deadcount;
	}
					
	if (_root["alien"+i+"_"+j]._x<0) {
		// set direction to  right
		speed = 10;
		// drop down
		dropdown = true;
		break;
	}
	if (_root["alien"+i+"_"+j]._x>Stage.width) {
		// set direction to left
		speed = -10;
		// drop down
		dropdown = true;
		break;
	}
	
}
}// end for loops

// drop down
if (dropdown) {
	for (var i = 0; i<3; i++) {
	for (var j = 0; j<10; j++) {
	
		_root["alien"+i+"_"+j]._y += 20;
	}
	}
		}
dropdown = false;
	
// drop bombs

if(Math.random() < _root.0.1)
{
// drop a bomb
// duplicate the bomb mc
_root.bomb.duplicateMovieClip("bomb" + bombNum,200+ bombNum);
// set the coords to the bomb
eval("_root.bomb" + bombNum)._x =random(700);
eval("_root.bomb" + bombNum)._y = 300*Math.random();

// increment the bomb number
bombNum++;
// if more than 5 bombs , start again at 0
if(bombNum>6)
bombNum = 0;
}

if(_root.deadcount==0)
{		
// remove covers
	for(var i=0;i<6;i++){
	_root["cover"+i].removeMovieClip();
	}
// go to next level	
_root.gotoAndStop(3);
}
}

Make a New Level

Go to frame 3 and hit F6 for every layer. Make a new baddie and call it "bug3". Wherever there is a reference to "alien" replace it with "bug". For example on the Control layer, frame 3 the code for initialising the baddie formation would be:

for(var i=0;i<3;i++){
for(var j=0;j<10;j++){
	this.attachMovie("bug3","bug3"+i+"_"+j,depth);
	_root["bug3"+i+"_"+j]._x = j*40;
	_root["bug3"+i+"_"+j]._y = i*40;
	depth++;
}
}

• Keep your code centralised into one script, not scattered all over the place like me
• Use as few enterFrame loops as possible
• Use gifs or pngs for the sprites
• Use while loops instead of for loops
• Set up an array of baddies for better collision detection

Have a look at the game so far.
And .. download the fla to study what we have done in this tute.
I have now redone this tutorial and reworked the code. You can have a look at the new tutorial here.