Newest Articles

MegaCombs
Flash Media Player
XML Driven Pie Chart
Base Defender
Hangman Game
8 Ball Pool


Popular Articles

True Fullscreen Flash Mode
FLV Player
Mp3 Player with XML Playlist
Create Pong
8 Ball Pool
Base Defender


Random Articles

Image Color Tinting using Actionscript
Paddle Ball
Mp3 Player with XML Playlist
Handwriter Effect
Gilbert
Custom Right Click Menu


Links

Shapes the Game
Reddit
Newgrounds
TWiT
Link to SwfSpot
Swf Spot

Contact me on Google+



rss feed

Base Defender

Base Defender
AddThis Social Bookmark Button
Description: Create this game. Defend the TNT beneath the grass by blowing up any incoming airplanes and the bombs they drop.
Author: John Bezanis
Added: October 25th 2008
Version: Flash 8


The objective of this game is to defend the tnt beneath the grass by blowing up any incoming airplanes and the bombs they drop. If a bomb hits the grass, it will leave an impact crater. The game is lost when a bomb travels all of the way to the tnt. The airplanes appear progressively faster, as do the bombs they drop. A point is scored each time an airplane or a bomb is shot.

There are a few interesting techniques used in this game, and I'll try to highlight them. The full source file is available at the end of this tutorial if you'd rather just digest the code in its entirety.

For the grass, we use a bitmap that is generated by importing a PNG graphic. The png format is useful because it uses transparency.
  1. //Create a bitmap that holds the data of the grass
  2. var grasspng:BitmapData = BitmapData.loadBitmap('grass');
  3. //Create another bitmap the size of the grass, and make all of the pixels transparent
  4. var grass:BitmapData = new BitmapData(grasspng.width, grasspng.height, true, 0x00000000);
  5. //Create a movieclip that will hold the grass bitmap
  6. this.createEmptyMovieClip('grasscontainer', this.getNextHighestDepth());
  7. //This function refreshes the grass bitmap filling in spaces that were blown up by bombs
  8. function resetGrass() {
  9.   //copy the grasspng bitmap over to the grass bitmap
  10.   grass.copyPixels(grasspng, new Rectangle(0, 0, grasspng.width, grasspng.height), new Point(0, 0), grasspng, new Point(0, 0), true);
  11.   //attach the grass bitmap to the grasscontainer
  12.   grasscontainer.attachBitmap(grass, grasscontainer.getNextHighestDepth());
  13.   //move the y position
  14.   grasscontainer._y = 275;
  15. }
  16. //apply the grass
  17. resetGrass();
Another interesting function is the circle erase function. A circle is made by erasing a series of one pixel vertical lines. The lines get longer as they get closer to the center horizontally.
  1. //This function erases a circle of the specified size from the specified bitmap
  2. function circleErase(bitmap, xpos, ypos, circlesize) {
  3.   //r2 is the radius of the circle squared. Keeps the math out of the for loop
  4.   r2 = circlesize*circlesize;
  5.   //The circle is drawn using a series of vertical lines.
  6.   for (circx=-circlesize; circx<=circlesize; circx++) {
  7.     //Determine the y distance at the current x position.
  8.     //The y is going to be larger as it gets closer to the center of the circle
  9.     circy = Math.round(Math.sqrt(r2-circx*circx)+0.5);
  10.     //Draw a transparent vertical line using the start x and y positions,
  11.     //with height according to its distance from the center
  12.     bitmap.fillRect(new Rectangle(xpos+circx, ypos-circy, 1, circy*2), 0x0);
  13.   }
  14. }
The third function of interest is one that runs whenever the mouse is clicked. Each time the mouse is clicked, a rock is hurled towards the mouse. The rock is given an x and y velocity and moved each frame. When the rock hits an enemy or leaves the stage area, it is removed.
  1. //Each time the player clicks the mouse, a rock is thrown towards the mouse
  2. onMouseDown = function () {
  3.   //attach the rock
  4.   this.attachMovie('interceptor', 'interceptor'+totalobjects, this.getNextHighestDepth());
  5.   //set the x and y positions at the position of the soldier
  6.   eval('interceptor'+totalobjects)._x = soldier._x;
  7.   eval('interceptor'+totalobjects)._y = soldier._y-20;
  8.   //The velocities are set according to the angle of the mouse relative to the soldier
  9.   //X velocity of the rock. More x velocity means less y velocity
  10.   eval('interceptor'+totalobjects).xvel = 13*(_xmouse-soldier._x)/(Math.abs(_xmouse-soldier._x)+Math.abs(_ymouse-soldier._y));
  11.   //Y velocity of the rock. More y velocity means less x velocity
  12.   eval('interceptor'+totalobjects).yvel = 13*(_ymouse-soldier._y)/(Math.abs(_xmouse-soldier._x)+Math.abs(_ymouse-soldier._y));
  13.   //At each frame, move the rock according to its velocity and check for enemy collisions
  14.   eval('interceptor'+totalobjects).onEnterFrame = function() {
  15.     //Move the x and y positions according to the velocity
  16.     this._x += this.xvel;
  17.     this._y += this.yvel;
  18.     //check if this rock collides with any enemies
  19.     enemyCollision(this._name);
  20.     //if the rock has left the boundaries of the Stage, remove it
  21.     if (this._x<0 || this._x>Stage.width || this._y<0 || this._y>Stage.height) {
  22.       removeMovieClip(this);
  23.     }
  24.   };
  25.   //Increment the total number of objects created
  26.   totalobjects++;
  27. };
The game uses an array to keep track of all of the enemies on the stage. Whenever an enemy is created or removed, it is also added or removed from the array. There is also an object counter that increments each time a new enemy or rock is created. This is useful for giving each enemy a unique name. The count is added to the end of the enemy type to create a unique instance name.
The source file is available below for download:

Download Source File
Download Demo SWF
Comments Currently Disabled