Ball Dodger

July 19th, 2008

Today I would like to share a game called “Ball Dodger”. The concept of the game is very easy: dodge the oncoming balls by using your mouse. This might not sound very fun, but it is and can be very addicting. In the Ball Dodger game we are going to build, we are going to add two game elements to make it more challenging: collecting items, and faster spawning of balls to dodge. Here is what the game will look like in the end (if the timer in the top left has stop, refresh your browser):

To set up the game, create a movie clip and give it a name “Ball”. Also, click on “Export for Actionscript” since we will be calling this from our code. Inside this movie clip, we are going to make three separate frames: the first one will be a blue circle to represent our mouse, the second will be a red circle to represent the enemy ball to dodge, and the third will be a green circle to represent a collectable, or a pick up item. Of course these three frames could be anything you want, I just picked these for demonstration purposes. Next create two text fields on the stage, both of which should be dynamic, and give one of them an instance name of “timer_text”, and the other “item_count_text”. Now we have the movie clip and text set up, let me present to you the code that does the magic:

[as]
// objects
var game:Object = new Object();
game.time_start = getTimer();
game.enemy_time = 0;
game.enemy_delay = 45;

// enemy array
var enemies:Array = new Array();

// hero object
var hero:Object = new Object();
hero.live = true;
hero.item_count = 0;

// items object
var item:Object = new Object();
item.picked_timer = new Timer(1500, 1);

// START functions

function die():void {
hero.live = false; // too bad
}

function enemy_place(e:TimerEvent = null):void {

var en:Ball = new Ball();
en.gotoAndStop(2);
en.scaleX = en.scaleY = int(Math.random() * 4) + 2;
en.speed = int(Math.random() * 16) + 5;

// find random start and end position out side of stage bounds
if((Math.random() * 2) > 1) {
if((Math.random() * 2) > 1) {
// begin
en.x = Math.random() * stage.stageWidth;
en.y = -en.height;
// end
en.end_x = Math.random() * stage.stageWidth;
en.end_y = (stage.stageHeight + en.height);
} else {
// begin
en.x = Math.random() * stage.stageWidth;
en.y = (stage.stageHeight + en.height);
// end
en.end_x = Math.random() * stage.stageWidth;
en.end_y = -en.height;
} // end else
} else {
if((Math.random() * 2) > 1) {
// begin
en.y = Math.random() * stage.stageHeight;
en.x = -en.width;
// end
en.end_y = Math.random() * stage.stageHeight;
en.end_x = (stage.stageWidth + en.width);
} else {
// begin
en.y = Math.random() * stage.stageHeight;
en.x = (stage.stageWidth + en.width);
// end
en.end_y = Math.random() * stage.stageHeight;
en.end_x = -en.width;
} // end else
} // end else

// add to stage
addChild(en);

// place in enemies array
enemies.push(en);

} // end function

function enemy_move():void {

for(var i:int = 0; i < enemies.length; i++) { // short hand var e:MovieClip = enemies[i]; var dist_x:Number = (e.end_x - e.x); var dist_y:Number = (e.end_y - e.y); var dist:Number = Math.sqrt((dist_x * dist_x) + (dist_y * dist_y)); var vel_x:Number = (e.speed * (dist_x / dist)); var vel_y:Number = (e.speed * (dist_y / dist)); // move enemy e.x += vel_x; e.y += vel_y; // collision detection with hero dist_x = (hero.mc.x - e.x); dist_y = (hero.mc.y - e.y); if(Math.sqrt((dist_x * dist_x) + (dist_y * dist_y)) < ((e.width * .5) + (hero.mc.width * .5))) { die(); } // end if // stop and remove enemy if dist is close enough if(dist < (e.width * .5)) { enemies.splice(i,1); removeChild(e); } } // end for i loop } // end function function item_place(e:TimerEvent = null):void { item.mc = new Ball(); item.mc.gotoAndStop(3); var edge:int = 30; item.mc.x = (Math.random() * (stage.stageWidth - edge)) + edge; item.mc.y = (Math.random() * (stage.stageHeight - edge)) + edge; // add item to stage addChild(item.mc); } // end function function item_pickup():void { // if item has been placed if(item.mc) { // collision detection with hero var dist_x:Number = (hero.mc.x - item.mc.x); var dist_y:Number = (hero.mc.y - item.mc.y); if(Math.sqrt((dist_x * dist_x) + (dist_y * dist_y)) < item.mc.width) { // picked up item hero.item_count++; // remove item from stage removeChild(item.mc); item.mc = null; // reset timer and start it again to place another item on stage item.picked_timer.reset(); item.picked_timer.start(); } // end if } // end if } // end function function game_begin():void { // hide cursor Mouse.hide(); // he lives! hero.live = true; // place hero ball hero.mc = new Ball(); hero.mc.gotoAndStop(1); addChild(hero.mc); // get new time game.time_start = getTimer(); // init item timer item.picked_timer.addEventListener(TimerEvent.TIMER, item_place); item.picked_timer.start(); // init game loop stage.addEventListener(Event.ENTER_FRAME, game_loop); } // end function function game_end():void { // show cursor Mouse.show(); // stop item timer item.picked_timer.stop(); // stop game loop stage.removeEventListener(Event.ENTER_FRAME, game_loop); } // end function function game_loop(e:Event):void { // only if hero is alive if(hero.live === true) { // increment enemy timer game.enemy_time++; if(game.enemy_time > game.enemy_delay) {

// reset the time
game.enemy_time = 0;

// not too crazy
if(game.enemy_delay > 5) {
game.enemy_delay–;
} // end if

// place enemy
enemy_place();

} // end if

// display timer
var new_time:uint = getTimer() – game.time_start;
timer_text.text = String((new_time / 1000).toFixed(3));

// display item count
item_count_text.text = hero.item_count;

// hero follow mouse
hero.mc.x = stage.mouseX;
hero.mc.y = stage.mouseY;

} // end if

// move enemies, collision detection
enemy_move();

// collision detection to pick up items
item_pickup();

} // end function

// begin the game!
game_begin();
[/as]

All this code is very straight forward… so I will not elaborate on it this time like I do with my other tutorials. I will mention though, the reason I pick a “begin” point and “end” point for the enemies like I have it is so that the enemy will move from side of the stage to other. Please feel free to ask me any questions that you may have, or trouble getting it to work.

Here is the file for download

AS3 > Games

Leave a Reply

Enter code snippets inside of <pre> and </pre>