Base Defender--tutorial.jcwcn.com

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.

//Create a bitmap that holds the data of the grass
var grasspng:BitmapData = BitmapData.loadBitmap('grass');
//Create another bitmap the size of the grass, and make all of the pixels transparent
var grass:BitmapData = new BitmapData(grasspng.width, grasspng.height, true, 0x00000000);
//Create a movieclip that will hold the grass bitmap
this.createEmptyMovieClip('grasscontainer', this.getNextHighestDepth());
//This function refreshes the grass bitmap filling in spaces that were blown up by bombs
function resetGrass() {
  //copy the grasspng bitmap over to the grass bitmap
  grass.copyPixels(grasspng, new Rectangle(0, 0, grasspng.width, grasspng.height), new Point(0, 0), grasspng, new Point(0, 0), true);
  //attach the grass bitmap to the grasscontainer
  grasscontainer.attachBitmap(grass, grasscontainer.getNextHighestDepth());
  //move the y position
  grasscontainer._y = 275;
}
//apply the grass
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.

//This function erases a circle of the specified size from the specified bitmap
function circleErase(bitmap, xpos, ypos, circlesize) {
  //r2 is the radius of the circle squared. Keeps the math out of the for loop
  r2 = circlesize*circlesize;
  //The circle is drawn using a series of vertical lines. 
  for (circx=-circlesize; circx<=circlesize; circx++) {
    //Determine the y distance at the current x position.
    //The y is going to be larger as it gets closer to the center of the circle
    circy = Math.round(Math.sqrt(r2-circx*circx)+0.5);
    //Draw a transparent vertical line using the start x and y positions, 
    //with height according to its distance from the center
    bitmap.fillRect(new Rectangle(xpos+circx, ypos-circy, 1, circy*2), 0x0);
  }
}

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.

//Each time the player clicks the mouse, a rock is thrown towards the mouse
onMouseDown = function () {
  //attach the rock
  this.attachMovie('interceptor', 'interceptor'+totalobjects, this.getNextHighestDepth());
  //set the x and y positions at the position of the soldier
  eval('interceptor'+totalobjects)._x = soldier._x;
  eval('interceptor'+totalobjects)._y = soldier._y-20;
  //The velocities are set according to the angle of the mouse relative to the soldier
  //X velocity of the rock. More x velocity means less y velocity
  eval('interceptor'+totalobjects).xvel = 13*(_xmouse-soldier._x)/(Math.abs(_xmouse-soldier._x)+Math.abs(_ymouse-soldier._y));
  //Y velocity of the rock. More y velocity means less x velocity
  eval('interceptor'+totalobjects).yvel = 13*(_ymouse-soldier._y)/(Math.abs(_xmouse-soldier._x)+Math.abs(_ymouse-soldier._y));
  //At each frame, move the rock according to its velocity and check for enemy collisions
  eval('interceptor'+totalobjects).onEnterFrame = function() {
    //Move the x and y positions according to the velocity
    this._x += this.xvel;
    this._y += this.yvel;
    //check if this rock collides with any enemies
    enemyCollision(this._name);
    //if the rock has left the boundaries of the Stage, remove it
    if (this._x<0 || this._x>Stage.width || this._y<0 || this._y>Stage.height) {
      removeMovieClip(this);
    }
  };
  //Increment the total number of objects created
  totalobjects++;
};

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

discuss this topic to forum

[Print][Close][Bookmark:digg+,reddit+,del.icio.us+,dzone+]

Base Defender

relation tutorial

Category

New

Hot