FrickingNutz.com

Now there's not much left to do on our simple game. Otto will get a bit bored bouncing about with no purpose in life. If you were a yellow ball-like object, what better thing to do than burst some colourful balloons. Okay, maybe a better thing would be hanging around Wimbledon in June and hope you end up in Anna Kournikova's pocket. Sorry Otto, it's balloons for you.

Here's the code to put some balloons up on the Stage, this is in our init frame (frame 5):

var mcBalloon = new Array();
var hitCounter:Number;

// balloons on the screen

hitCounter = 0;    // how many balloons we have hit
for (var i=0; i < 7; i++) {
	var balloonColour:String;
	
	if ( i%3 == 0 ) {
		balloonColour = "red";
	}
	if ( i%3 == 1 ) {
		balloonColour = "blue";
	}
	if ( i%3 == 2 ) {
		balloonColour = "yellow";
	}
	
	mcBalloon[i] = _root.attachMovie("balloon_"+ balloonColour +"_mc", "mcBalloon"+i, 3+i);
	mcBalloon[i]._x = 38 + (i*79);
	mcBalloon[i]._y = 100;
}

The purpose of this code is place our balloons alternately with red, blue and yellow colours near the top of our stage. If you go ahead and run the code now, you should see the balloons, however Otto doesn't interact with these, in fact he passes right through them

There's a couple of ways to detect if and when your sprites (or movieclips) collide with each other. You can try to use hitTest(), but because our balloons have some pesty string attached that would count as a hit, and we don't want that. Or you can use x/y coordinates to detect of the objects are within a rectangle of each other, this is the method we will use here. The code for detecting the collisions will go into the start frame:

// main program loop
readKeys();
moveOtto();
hitBalloon();
if ( hitCounter == 7 ) {
	endGame();
}

function readKeys() {
	if ( Key.isDown(Key.LEFT) && mcTrampoline._x > 60 ) {
		mcTrampoline._x -= 10;
	}
	if ( Key.isDown(Key.RIGHT)&& mcTrampoline._x < Stage.width-60 ) {
		mcTrampoline._x += 10;
	}
}

function moveOtto() {
	dY += gravity;
	mcOtto._y += dY;
	mcOtto._x += dX;
	
	// make otto bounce if he hits the trampoline
	if ( dY > 0 && Math.abs(mcOtto._y - mcTrampoline._y) < 20 && Math.abs(mcOtto._x - mcTrampoline._x) < 40 ) { 
		dY = -12;
		dX = (mcTrampoline._x - mcOtto._x ) / 5;
	}
	
	// reverse Otto's direction if he hits the edge
	if ( ( mcOtto._x < 15 ) || ( mcOtto._x > Stage.width - 15 ) ) {
		dX = -dX;
	}

	// Otto's fell off bottom of screen...reset game
	if ( ( mcOtto._y > Stage.height + 20 ) ) {
		gotoAndPlay("init");
	}
}

function hitBalloon() {
	// if otto is within 20 pixels of a balloon set it off the screen
	for (var i = 0; i < 7; i++) {
		if ( Math.abs(mcOtto._x - mcBalloon[i]._x) < 20 && Math.abs(mcOtto._y - mcBalloon[i]._y) < 20 ) {
			mcBalloon[i]._y = -100;
		}
	}
}

 When we move withing 20 pixels of the centre of a balloon, we are moving the balloons y cooridinate off the screen (to -100) this will give the effect of 'popping' the balloon. Along with a nice sound effect this should do the trick. Download tutorial-4.fla.

This concludes the tutorial on writing a simple game. We have covered these basic concepts:

• Storyboarding
• Creating your assets (graphics/etc)
• Reading input
• Moving your sprites
• Hit detection

Almost every game you encounter will be based on these simple principles. With a little imagination you should be able to create almost any 2D game! I hope you have enjoyed this tutorial.