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):

The Flash plugin is required to view this object.

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:

PLAIN TEXT
Actionscript:
  1. // objects
  2. var game:Object = new Object();
  3. game.time_start = getTimer();
  4. game.enemy_time = 0;
  5. game.enemy_delay = 45;
  6.  
  7. // enemy array
  8. var enemies:Array = new Array();
  9.  
  10. // hero object
  11. var hero:Object = new Object();
  12. hero.live = true;
  13. hero.item_count = 0;
  14.  
  15. // items object
  16. var item:Object = new Object();
  17. item.picked_timer = new Timer(1500, 1);
  18.  
  19. // START functions
  20.  
  21. function die():void {
  22.     hero.live = false; // too bad
  23. }
  24.  
  25. function enemy_place(e:TimerEvent = null):void {
  26.  
  27.     var en:Ball = new Ball();
  28.     en.gotoAndStop(2);
  29.     en.scaleX = en.scaleY = int(Math.random() * 4) + 2;
  30.     en.speed = int(Math.random() * 16) + 5;
  31.  
  32.     // find random start and end position out side of stage bounds
  33.     if((Math.random() * 2)> 1) {
  34.         if((Math.random() * 2)> 1) {
  35.             // begin
  36.             en.x = Math.random() * stage.stageWidth;
  37.             en.y = -en.height;
  38.             // end
  39.             en.end_x = Math.random() * stage.stageWidth;
  40.             en.end_y = (stage.stageHeight + en.height);
  41.         } else {
  42.             // begin
  43.             en.x = Math.random() * stage.stageWidth;
  44.             en.y = (stage.stageHeight + en.height);
  45.             // end
  46.             en.end_x = Math.random() * stage.stageWidth;
  47.             en.end_y = -en.height;
  48.         } // end else
  49.     } else {
  50.         if((Math.random() * 2)> 1) {
  51.             // begin
  52.             en.y = Math.random() * stage.stageHeight;
  53.             en.x = -en.width;
  54.             // end
  55.             en.end_y = Math.random() * stage.stageHeight;
  56.             en.end_x = (stage.stageWidth + en.width);
  57.         } else {
  58.             // begin
  59.             en.y = Math.random() * stage.stageHeight;
  60.             en.x = (stage.stageWidth + en.width);
  61.             // end
  62.             en.end_y = Math.random() * stage.stageHeight;
  63.             en.end_x = -en.width;
  64.         } // end else
  65.     } // end else
  66.  
  67.     // add to stage
  68.     addChild(en);
  69.  
  70.     // place in enemies array
  71.     enemies.push(en);
  72.  
  73. } // end function
  74.  
  75. function enemy_move():void {
  76.  
  77.     for(var i:int = 0; i <enemies.length; i++) {
  78.  
  79.         // short hand
  80.         var e:MovieClip = enemies[i];
  81.  
  82.         var dist_x:Number = (e.end_x - e.x);
  83.         var dist_y:Number = (e.end_y - e.y);
  84.         var dist:Number = Math.sqrt((dist_x * dist_x) + (dist_y * dist_y));
  85.  
  86.         var vel_x:Number = (e.speed * (dist_x / dist));
  87.         var vel_y:Number = (e.speed * (dist_y / dist));
  88.  
  89.         // move enemy
  90.         e.x += vel_x;
  91.         e.y += vel_y;
  92.  
  93.         // collision detection with hero
  94.         dist_x = (hero.mc.x - e.x);
  95.         dist_y = (hero.mc.y - e.y);
  96.        
  97.         if(Math.sqrt((dist_x * dist_x) + (dist_y * dist_y)) <((e.width * .5) + (hero.mc.width * .5))) {
  98.             die();
  99.         } // end if
  100.  
  101.         // stop and remove enemy if dist is close enough
  102.         if(dist <(e.width * .5)) {
  103.             enemies.splice(i,1);
  104.             removeChild(e);
  105.         }
  106.  
  107.         } // end for i loop
  108.  
  109. } // end function
  110.  
  111. function item_place(e:TimerEvent = null):void {
  112.  
  113.     item.mc = new Ball();
  114.     item.mc.gotoAndStop(3);
  115.     var edge:int = 30;
  116.     item.mc.x = (Math.random() * (stage.stageWidth - edge)) + edge;
  117.     item.mc.y = (Math.random() * (stage.stageHeight - edge)) + edge;
  118.  
  119.     // add item to stage
  120.     addChild(item.mc);
  121.  
  122. } // end function
  123.  
  124. function item_pickup():void {
  125.  
  126.     // if item has been placed
  127.     if(item.mc) {
  128.  
  129.         // collision detection with hero
  130.         var dist_x:Number = (hero.mc.x - item.mc.x);
  131.         var dist_y:Number = (hero.mc.y - item.mc.y);
  132.         if(Math.sqrt((dist_x * dist_x) + (dist_y * dist_y)) <item.mc.width) {
  133.  
  134.         // picked up item
  135.         hero.item_count++;
  136.  
  137.         // remove item from stage
  138.         removeChild(item.mc);
  139.         item.mc = null;
  140.  
  141.         // reset timer and start it again to place another item on stage
  142.         item.picked_timer.reset();
  143.         item.picked_timer.start();
  144.  
  145.         } // end if
  146.  
  147.     } // end if
  148.  
  149. } // end function
  150.  
  151. function game_begin():void {
  152.  
  153.     // hide cursor
  154.     Mouse.hide();
  155.  
  156.     // he lives!
  157.     hero.live = true;
  158.  
  159.     // place hero ball
  160.     hero.mc = new Ball();
  161.     hero.mc.gotoAndStop(1);
  162.     addChild(hero.mc);
  163.  
  164.     // get new time
  165.     game.time_start = getTimer();
  166.  
  167.     // init item timer
  168.     item.picked_timer.addEventListener(TimerEvent.TIMER, item_place);
  169.     item.picked_timer.start();
  170.  
  171.     // init game loop
  172.     stage.addEventListener(Event.ENTER_FRAME, game_loop);
  173.  
  174. } // end function
  175.  
  176. function game_end():void {
  177.  
  178.     // show cursor
  179.     Mouse.show();
  180.  
  181.     // stop item timer
  182.     item.picked_timer.stop();
  183.  
  184.     // stop game loop
  185.     stage.removeEventListener(Event.ENTER_FRAME, game_loop);
  186.  
  187. } // end function
  188.  
  189. function game_loop(e:Event):void {
  190.  
  191.     // only if hero is alive
  192.     if(hero.live === true) {
  193.  
  194.         // increment enemy timer
  195.         game.enemy_time++;
  196.  
  197.         if(game.enemy_time> game.enemy_delay) {
  198.  
  199.             // reset the time
  200.             game.enemy_time = 0;
  201.  
  202.             // not too crazy
  203.             if(game.enemy_delay> 5) {
  204.                 game.enemy_delay--;
  205.             } // end if
  206.  
  207.             // place enemy
  208.             enemy_place();
  209.  
  210.         } // end if
  211.  
  212.         // display timer
  213.         var new_time:uint = getTimer() - game.time_start;
  214.         timer_text.text = String((new_time / 1000).toFixed(3));
  215.  
  216.         // display item count
  217.         item_count_text.text = hero.item_count;
  218.  
  219.         // hero follow mouse
  220.         hero.mc.x = stage.mouseX;
  221.         hero.mc.y = stage.mouseY;
  222.  
  223.     } // end if
  224.  
  225.     // move enemies, collision detection
  226.     enemy_move();
  227.  
  228.     // collision detection to pick up items
  229.     item_pickup();
  230.  
  231. } // end function
  232.  
  233. // begin the game!
  234. game_begin();

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

Posted in AS3 > Games |

Leave a Reply

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