Yarrcade.com » Tutorial

Grid based games – Part 5.3: Pathfinding

kegogrog — Sat, 10 Apr 2010 16:38:50 +0000

Alright, the most important part of that mazing type tower defence game must be the pathfinding. Completely different from the given path games, a constant ‘re-pathing’ is neccessary. What we’ll do here is the basic thing. A backwards pathfinding with all nodes to create a flowfield. Heuristics are included to later check if there is a possible path (using the shortest path). There is a number of end nodes taken into account but only one start node yet. Creeps will later use the given direction of the node they are on.

Here is what we are going to create, have a little test:

A bit of code:

function findPath()
{
	for each ( var member in nodeArray )
	{
		member.visited = false;
		member.g = 0;
		member.h = 0;
		member.f = 0;
	}
	path.graphics.clear();
	var openList:Array = new Array();
	var closedList:Array = new Array();
	var wayPoint:Object = null;
	openList.push(stringToNode("9.27"));

First thing here is the resetting of all assignments that will be set later. We need to reset the values whenever a new run of the findPath has to be done, though for optimization purposes some values could be left alone here. The endNode we push onto the open list here is one of positions we did set before.

	while ( openList.length > 0 )
	{

If in here was an argument like ‘wayPoint == startNode’, the algorithm would be equal to an A* and thus be faster. But one path is not what we are looking for.

		openList.sortOn("f", Array.NUMERIC|Array.DESCENDING);

‘f’ is the combined value for the distance to the start (endNode here) and estimated distance to the end (startNode here).

		wayPoint = openList.pop();
		closedList.push(wayPoint);

Once we took the node with the smallest ‘f’ from the openList, we need its neighbors. The getPathNeighbors function is nearly equal to the getNeighbors function we used in the previous post.

		var pArray = getPathNeighbors(wayPoint);

		for each ( var pObj in pArray )
		{
			if ( closedList.indexOf(pObj) == -1 )
			{
				var travelValue:int = 0;
				if ( pObj.u !== wayPoint.u && pObj.v !== wayPoint.v )
				{
					travelValue = 14;
				}
				else
				{
					travelValue = 10;
				}
				pObj.endNode ? travelValue = 0 : void;

For each neighboring node we set a travel value to the actual wayPoint. The distance is bigger if the direction is diagonal. If the neighbor is an endnode the travelValue is set to zero, because we want all endnodes to be treated the same.

				if ( !pObj.visited )
				{
					pObj.endNode ? pObj.sourceNode = pObj : pObj.sourceNode = wayPoint;
					pObj.g = travelValue + wayPoint.g;
					pObj.h = Math.abs( pObj.u - startNode.u ) * 10 + Math.abs( pObj.v - startNode.v ) * 10;
					pObj.f = pObj.g + pObj.h;
					openList.push(pObj);
					pObj.visited = true;
				}

If we have not seen that node before, we calculate its f value and push it to the openList.

				else
				{
					pObj.newG = travelValue + wayPoint.g;
					if ( pObj.newG < pObj.g )
					{
						pObj.g = pObj.newG;
						pObj.h = Math.abs( pObj.u - startNode.u ) * 10 + Math.abs( pObj.v - startNode.v ) * 10;
						pObj.f = pObj.g + pObj.h;
						pObj.sourceNode = wayPoint;
					}
				}

If we have it seen before we calculate g with the new wayPoint and if it is smaller set the new wayPoint as sourceNode.

			}
		}
	}
}
findPath();

Right now the heuristics do not take diagonal travelling into account, but after all it basically works. You can still completely block the path with obstacles and the program would not hesitate to run. But these are topics for the next posts. Yoho!

Grid based Games – Part 5.2: Towers

kegogrog — Sat, 10 Apr 2010 14:25:25 +0000

This post enhances the previous post by the ability of actually placing obstacles which somewhen may become towers.

Here is what we are going to create:

To have interaction with stage we will set up an EventListener for clicks. First of all we declare a variable named building and set its value according to the actual node. Therefore the mouseMoveHandler function has to be slightly changed:

var building = false;

function mouseMoveHandler ( event:MouseEvent )
{
	var actNode = getPos ( mouseX - size*0.5 , mouseY - size*0.5);
	with ( overlay.graphics )
	{
		clear();
		if ( actNode )
		{
			if ( actNode.blocked )
			{
				building = false;
				beginFill(0x990000, 0.5);
				lineStyle(1, 0x990000, 1);
				drawRect(actNode.x - size*0.5, actNode.y - size*0.5, size*2, size*2);
				endFill();
			}
			else
			{
				building = true;
				beginFill(0x009900, 0.5);
				lineStyle(1, 0x009900, 1);
				drawRect(actNode.x - size*0.5, actNode.y - size*0.5, size*2, size*2);
				endFill();
			}
		}
	}
}

We then add a new movieclip to draw what we have built and and again add the overlay to have it on top.

var buildMap:MovieClip = new MovieClip();
addChild(buildMap);
addChild(overlay);
stage.addEventListener(MouseEvent.CLICK, buildTower);

function buildTower ( event:MouseEvent )
{
	if ( building )
	{
		var actNode = getPos ( mouseX - size*0.5 , mouseY - size*0.5);
		with ( buildMap.graphics )
		{
			beginFill(0x000099, 1);
			lineStyle(1, 0xffffff, 1);
			drawRect(actNode.x - size*0.5, actNode.y - size*0.5, size*2, size*2);
			endFill();
		}
		var actArray = getNeighbors ( actNode );
		for each ( var nObj in actArray )
		{
			nObj.blocked = true;
		}
		actNode.blocked = true;
	}
}

By clicking a new rectangle is drawn to the buildMap on the actual node’s position and the node as well as its neighbors are blocked for further building.

function posToNode ( u, v )
{
	var nodeString = u + "." + v;
	var nodePos = posArray.indexOf(nodeString);
	if ( nodePos > -1 )
	{
		return ( nodeArray[nodePos] );
	}
	else
	{
		return null;
	}
}

posToNode does nothing more than concatenating u and v, looking it up in the posArray and returning the node. This is done for every adjacent node via the getNeighbors function:

function getNeighbors ( centerNode )
{
	var thisU = centerNode.u;
	var thisV = centerNode.v;
	var resultArray:Array = new Array();
	resultArray.push ( posToNode ( thisU - 1, thisV - 1 ) );
	resultArray.push ( posToNode ( thisU - 1, thisV ) );
	resultArray.push ( posToNode ( thisU - 1, thisV + 1 ) );
	resultArray.push ( posToNode ( thisU, thisV + 1 ) );
	resultArray.push ( posToNode ( thisU + 1, thisV + 1 ) );
	resultArray.push ( posToNode ( thisU + 1, thisV ) );
	resultArray.push ( posToNode ( thisU + 1, thisV - 1 ) );
	resultArray.push ( posToNode ( thisU, thisV - 1 ) );
	return resultArray;
}

With that we are now able to place obstacles on the playground. Placing is only possible on unblocked nodes.

Try it. What now? Yoho!

Grid based games – Part 5.1: Learning from the big ones

kegogrog — Sat, 10 Apr 2010 14:04:22 +0000

I know this may look like a call to clone. But the intention of this post is more like look and learn. Once you can do the same, make it better. We’ll have a look at Desktop Tower Defence and try to understand the basic methods of that game.
This post will cover the creation of the square grid in different colors and a method to obtain the actual position to build a tower.

Here is what we are going to create:

And here are the code snippets:

var nodeArray:Array = new Array();
var posArray:Array = new Array();
var rows = 24;
var cols = 28;
var size = 12;
var invSize = 1 / size;
var node:Object;
for ( var u = 0; u < rows; u++ )
{
	for ( var v = 0; v < cols; v++ )
	{
		node = new Object();
		node.v = v;
		node.u = u;
		node.nodePos = u + "." + v;
		node.x = v * size + 40;
		node.y = u * size + 40;
		nodeArray.push(node);
		posArray.push( u + "." + v );
	}
}

This creates a array of nodes with 24 rows and 28 columns. Each node gets assigned a position based on the size of a 12×12 pixel square plus 40 pixels for nice positioning on the stage.

var startNodes:Array = new Array("9.0", "10.0", "11.0", "12.0", "13.0", "14.0");
var endNodes:Array = new Array("9.27", "10.27", "11.27", "12.27", "13.27", "14.27");

We do know where to put start and end and thus fill to arrays with string of their position.

var map:MovieClip = new MovieClip();
addChild(map);

for each ( var nObj in nodeArray )
{
	if ( nObj.v == 0 || nObj.u == 0 || nObj.v == cols - 2 || nObj.u == rows - 2 )
	{
		nObj.blocked = true;
	}

Several nodes are not meant to be built on, so we block them.

	with ( map.graphics )
	{
		if ( startNodes.indexOf(nObj.nodePos) > -1 )
		{
			beginFill(0x00ff00, 0.5);
			lineStyle(1, 0xffffff, 0.1);
			//drawCircle(nObj.x, nObj.y, 1);
			drawRect( nObj.x - size * 0.5, nObj.y - size * 0.5, size, size );
			endFill();
		}

Start nodes get a green semitransparent fill.

		else if ( endNodes.indexOf(nObj.nodePos) > -1 )
		{
			beginFill(0xff0000, 0.5);
			lineStyle(1, 0xffffff, 0.1);
			//drawCircle(nObj.x, nObj.y, 1);
			drawRect( nObj.x - size * 0.5, nObj.y - size * 0.5, size, size );
			endFill();
		}

End nodes get a semitransparent red fill.

		else if ( nObj.v == 0 || nObj.u == 0 || nObj.v == cols - 1 || nObj.u == rows - 1 )
		{
			beginFill(0xffffff, 0.5);
			lineStyle(1, 0xffffff, 0.1);
			//drawCircle(nObj.x, nObj.y, 1);
			drawRect( nObj.x - size * 0.5, nObj.y - size * 0.5, size, size );
			endFill();
		}

Frame nodes get a semitransparent white fill.

		else
		{
			beginFill(0x000000, 0.5);
			lineStyle(1, 0xffffff, 0.1);
			//drawCircle(nObj.x, nObj.y, 1);
			drawRect( nObj.x - size * 0.5, nObj.y - size * 0.5, size, size );
			endFill();
		}

	}
}

All other nodes are filled semitransparent black.

var overlay:MovieClip = new MovieClip();
addChild(overlay);

The overlay will show the actual position once the mouse movement handler is set.

stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
function mouseMoveHandler ( event:MouseEvent )
{
	var actNode = getPos ( mouseX - size*0.5 , mouseY - size*0.5);
	with ( overlay.graphics )
	{
		clear();
		if ( actNode )
		{
			if ( actNode.blocked )
			{
				beginFill(0x990000, 0.5);
				lineStyle(1, 0x990000, 1);
				drawRect(actNode.x - size*0.5, actNode.y - size*0.5, size*2, size*2);
				endFill();
			}
			else
			{
				beginFill(0x009900, 0.5);
				lineStyle(1, 0x009900, 1);
				drawRect(actNode.x - size*0.5, actNode.y - size*0.5, size*2, size*2);
				endFill();
			}
		}
	}
}

The handler fires while the mouse moves. Through the getPos() function the actual node is returned. After a check of the blocked property a square is drawn to the overlay.

function getPos ( xPos, yPos )
{
	var thisV = Math.round (( xPos - 40 ) * invSize );
	var thisU = Math.round (( yPos - 40 ) * invSize );
	thisV == -1 ? thisV++: void;
	thisV == cols - 1 ? thisV--: void;
	thisU == -1 ? thisU++: void;
	thisU == rows - 1 ? thisU --: void;

	var nodeString = thisU + "." + thisV;
	var nodePos = posArray.indexOf(nodeString);
	if ( nodePos > -1 )
	{
		return ( nodeArray[nodePos] );
	}
}

With the actual x and y, the getPos function calculates the actual row and column the mouse is over. To not get nodes outside of the board area thisU and thisV are adapted to our actual grid. A string is built of the actual row and column. indexOf checks if that string exists in the posArray and returns the appropriate node.

Hmm, amazingly that’s pretty much it. Yoho!

Grid based games – Part X.1: Hexmaps and terrain

kegogrog — Wed, 07 Apr 2010 14:20:22 +0000

I played a bit with the settlers-like map of that post to give it a more like terrain look. Therefore the triangle faces are colored now depending on their orientation.

Here is what we are going to create:

I only post the functions that are new or altered. The code (again all in timeline for faster editing purpose):

function drawMap ( )
{
	for each ( var nObj in nodeArray )
	{
		map.graphics.lineStyle(1, 0x000000);
		map.graphics.drawCircle(nObj.xPos, nObj.yPos, 3);
	}
}

function getFaceNodes (centerNode)
{
	var u = centerNode.u;
	var v = centerNode.v;

	var nArray:Array = new Array();

	nArray.push( (u  ) +"."+ (v+1) );
	nArray.push( (u+1) +"."+ (v+1) );
	nArray.push( (u+1) +"."+ (v  ) );
	var resultArray:Array = new Array();
	for each ( var member in nArray )
	{
		var checkNum = posArray.indexOf(member);
		if ( checkNum > -1 )
		{
			resultArray.push(nodeArray[checkNum]);
		}
	}
	return resultArray;
}

One of the most important functions this time. I decided to get all nodes and for every node just color two triangles, right and down. This is because of the way the map is created. I addition to the center node I thus need three node: right, down right, down left.

function drawFaces ( node )
{
	var nArray = getFaceNodes ( node );
	for ( var counter = 0; counter < nArray.length -1; counter++ )
	{
		var nextN = counter+1;
		if ( nArray[counter].drawn == false || nArray[nextN].drawn == false )
		{
			var midPoint = new Object();
			midPoint.x = (node.xPos+nArray[counter].xPos+nArray[nextN].xPos)/3;
			midPoint.y = (node.yPos+nArray[counter].yPos+nArray[nextN].yPos)/3;
			midPoint.z = (node.z+nArray[counter].z+nArray[nextN].z)/3;

			var highPoint = new Object();
			highPoint.x = midPoint.x +
							((node.xPos - midPoint.x) * (node.z - midPoint.z) +
							(nArray[counter].xPos - midPoint.x) * (nArray[counter].z - midPoint.z) +
							(nArray[nextN].xPos - midPoint.x) * (nArray[nextN].z - midPoint.z))/20;
			highPoint.y = midPoint.y +
							((node.yPos - midPoint.y) * (node.z - midPoint.z) +
							(nArray[counter].yPos - midPoint.y) * (nArray[counter].z - midPoint.z) +
							(nArray[nextN].yPos - midPoint.y) * (nArray[nextN].z - midPoint.z))/20;

High and mid point are important for the color of choice. depending on the direction of their vector (and thus the orientation of the face) the appropriate color is chosen to display sunlight or shadows.

			map.graphics.beginFill(0xffffff, 0);
			map.graphics.lineStyle(1, 0xff0000, 1);
			map.graphics.drawCircle(midPoint.x, midPoint.y, 2);
			map.graphics.moveTo(midPoint.x, midPoint.y);
			map.graphics.lineTo(highPoint.x, highPoint.y);
			map.graphics.endFill();

			var color;
			var dir = Math.atan2(highPoint.y-midPoint.y, highPoint.x-midPoint.x) * 180 / Math.PI;
			if ( 0 <= dir && dir < 60 ) { color = 0x00ff00; }
			else if ( 60 <= dir && dir < 120 ) { color = 0x00cc33; }
			else if ( 120 <= dir && dir <= 180 ) { color = 0x00cc00; }
			else if ( 0 > dir && dir >= -60 ) { color = 0x009933; }
			else if ( -60 > dir && dir >= -120 ) { color = 0x009900; }
			else if ( -120 > dir && dir >= -180 ) { color = 0x006600; }

I decided to go with just six different colors, the lightest being down right and the darkest being up left. One could calculate a better color via the true angle and steepness.

			map.graphics.beginFill(color, 0.5);
			map.graphics.lineStyle(1,0x00aa00, 0.5);
				map.graphics.moveTo(node.xPos, node.yPos);
				map.graphics.lineTo(nArray[counter].xPos, nArray[counter].yPos);
				map.graphics.lineTo(nArray[nextN].xPos, nArray[nextN].yPos);
				map.graphics.endFill();
				map.graphics.lineStyle(1, 0xff0000, 1);
			}
		}
	}
}
function redrawMap ()
{
	map.graphics.clear();

	drawMap()
	for each ( member in nodeArray )
	{
		drawFaces(member);
	}
}
redrawMap();

So, play with it a bit. Next thing would be interaction. You have got an other idea where to go next? Tell me in the comments. Yoho!

Grid based games – Part X.0: Hexmap and movement

kegogrog — Wed, 07 Apr 2010 09:51:09 +0000

This is kind of an experiment with a hexagonal map. I just had a look at “The Settlers”. Great game. Alright, the hexmap (map made of hexagonal tiles) can be described by nodes arranged in a triangular fashion.

Here is what we are going to create:


var nodeArray:Array = new Array();
var posArray:Array = new Array();

var rows:int = 15;
var cols:int = 15;

var tileW:Number = 32;
var tileH:Number = Math.round(Math.sin(60*Math.PI/180)*tileW);

var node:Object;

for ( var row = 0; row < rows; row++ )
{
	for ( var col = 0; col < cols; col++ )
	{
		node = new Object();
		node.u = row;
		node.v = col;
		node.z = Math.round(Math.random()*20);
		node.xPos = col * tileW - row * tileW * 0.5;
		node.yPos = row * tileH + node.z;
		nodeArray.push(node);
		posArray.push(row+"."+col);
	}
}

var map:MovieClip = new MovieClip();
addChild(map);

function drawMap ( )
{
	for each ( var nObj in nodeArray )
	{
		map.graphics.lineStyle(1, 0x000000);
		{
			var drawingArray = getNeighbors(nObj);
			for each ( var member in drawingArray )
			{
				map.graphics.moveTo(nObj.xPos, nObj.yPos);
				map.graphics.lineTo(member.xPos, member.yPos);
			}
		}
		//map.graphics.drawCircle(nObj.xPos, nObj.yPos, 3);
		/*
		var tF = new TextField();
		tF.x = nObj.xPos;
		tF.y = nObj.yPos;
		tF.text = nObj.u+"."+nObj.v;
		addChild(tF);
		*/
	}
}
drawMap();

function getNeighbors(centerNode)
{
	var u = centerNode.u;
	var v = centerNode.v;

	var nArray:Array = new Array();
	nArray.push( (u-1) +"."+ (v-1) );
	nArray.push( (u-1) +"."+ (v  ) );
	nArray.push( (u  ) +"."+ (v-1) );
	nArray.push( (u  ) +"."+ (v+1) );
	nArray.push( (u+1) +"."+ (v  ) );
	nArray.push( (u+1) +"."+ (v+1) );
	var resultArray:Array = new Array();
	for each ( var member in nArray )
	{
		var checkNum = posArray.indexOf(member);
		if ( checkNum > -1 )
		{
			resultArray.push(nodeArray[checkNum]);
		}
	}
	return resultArray;
}

Just like in the previous parts, we create a number of nodes but this time they are all drawn to the same movieclip called map. Line activates a circle at the respective node and the textfield is useful to get the node’s position in the map. It’s deactivated here vor better visibility.


var moving:Boolean = false;
stage.addEventListener(MouseEvent.CLICK, mouseClickHandler);

function mouseClickHandler(event:MouseEvent)
{
	if ( moving == false )
	{
		moving = true;
		addEventListener(Event.ENTER_FRAME, changeHeight);
	}
	else
	{
		moving = false;
		removeEventListener(Event.ENTER_FRAME, changeHeight);
	}
}

function changeHeight(event:*)
{
	map.graphics.clear();
	for each ( var nObj in nodeArray )
	{
		nObj.z = Math.random()*20;
		nObj.yPos = nObj.u * tileH + nObj.z;
	}
	drawMap();
}

The ‘moving’ boolean tells us if the EnterFrame function is actually active or not and activates/deactivates it. In that particular function every node’s height is set with a new random value and the map is redrawn.

What’s next? Tell me in the comments. Yoho!

Grid based games – Part 3: Adjacent cells

kegogrog — Mon, 05 Apr 2010 16:06:50 +0000

In this part the adjacent cells of the acual node are called. This can get handy if we want to implement some kind of pathfinding algorithm. The base for this code is part 2.2. See part 1 for the creation of the basic grid.

Here is what we are going to create. By clicking a tile its adjacent cells are shown. By the color of the line one can also distinguish between blocked and unblocked neighbors.

First we add a new MovieClip() right after the tileFocus clip.

var tileNeighbors = new MovieClip();
tileNeighbors.mouseEnabled = false;
addChild(tileNeighbors);

The following code replaces the old mouseClickHandler:

function mouseClickHandler ( event:* )
{
  if ( actualNode !== null )
  {
    if ( actualNode.blocked == false )
    {
      actualNode.blocked = true;
      drawTile(actualNode.tileRef, 0x000000, 1);
    }
    else
    {
      actualNode.blocked = false;
      drawTile(actualNode.tileRef, 0x66ff66, 1);
    }
    var neighs:Array = getNeighbors(actualNode);
    tileNeighbors.graphics.clear();
    for each ( var nObj in neighs )
    {
      if ( nObj.blocked == false )
      {
        tileNeighbors.graphics.lineStyle(1, 0x0000ff);
        tileNeighbors.graphics.drawRect(actualNode.xPos - 7.5, actualNode.yPos - 7.5, 15, 15);
        tileNeighbors.graphics.drawRect(nObj.xPos - 2.5, nObj.yPos - 2.5, 5, 5);
        tileNeighbors.graphics.moveTo(
          actualNode.xPos + ( nObj.xPos - actualNode.xPos ) * 0.25,
          actualNode.yPos + ( nObj.yPos - actualNode.yPos ) * 0.25);
        tileNeighbors.graphics.lineTo(
          nObj.xPos + ( actualNode.xPos - nObj.xPos ) * 0.1,
          nObj.yPos + ( actualNode.yPos - nObj.yPos ) * 0.1);
      }
      else
      {
         tileNeighbors.graphics.lineStyle(1, 0xff0000);
         tileNeighbors.graphics.drawRect(actualNode.xPos - 7.5, actualNode.yPos - 7.5, 15, 15);
         tileNeighbors.graphics.drawRect(nObj.xPos - 2.5, nObj.yPos - 2.5, 5, 5);
         tileNeighbors.graphics.moveTo(
           actualNode.xPos + ( nObj.xPos - actualNode.xPos ) * 0.25,
           actualNode.yPos + ( nObj.yPos - actualNode.yPos ) * 0.25);
         tileNeighbors.graphics.lineTo(
           nObj.xPos + ( actualNode.xPos - nObj.xPos ) * 0.1,
           nObj.yPos + ( actualNode.yPos - nObj.yPos ) * 0.1);
      }
    }
  }
}

The mouseClickHandler now contains the drawing function for the adjacent cells. If a neighbor is not blocked a blue rectangle and line are drawn. If it is blocked the same is done in red.
The next code goes below the getNode function.

function stringToNode ( nodeString )
{
 var nodePos = posArray.indexOf(nodeString);
 if ( nodePos > -1 )
  {
   return nodeArray[nodePos];
  }
  else
  {
   return null;
  }
}

Don’t forget to alter the stringToNode function to the one above.

function getNeighbors ( centerNode )
{
  var u = centerNode.u;
  var v = centerNode.v;
  var sArray:Array = new Array();
  sArray.push((u-1)+"."+(v-1));
  sArray.push((u-1)+"."+(v  ));
  sArray.push((u-1)+"."+(v+1));
  sArray.push((u  )+"."+(v-1));
  sArray.push((u  )+"."+(v+1));
  sArray.push((u+1)+"."+(v-1));
  sArray.push((u+1)+"."+(v  ));
  sArray.push((u+1)+"."+(v+1));
  var resultArray:Array = new Array();
  for each ( var sObj in sArray )
  {
    var nObj = stringToNode(sObj);
    if ( nObj !== null)
    {
      resultArray.push(nObj);
    }
  }
  return resultArray;
}

This function just traces the neighbors possible positions. The stringToNode function verifies if the node exists and returns an array with the available node references.

For your convenience and on multiple request here is the source: ZIP (70KB).

Grid based games – Part 2.2: The basic grid with interaction alternative

kegogrog — Mon, 05 Apr 2010 14:30:32 +0000

This part deals with similar interaction as part 2.1 without the masses of EventListeners. See part 1 for the creation of the basic grid.

Here is what we are going to create:

That doesn’t look much different to the grid of part 2.1? Right. Let’s have a look at the code:

var nodeArray:Array = new Array();
var posArray:Array = new Array();

var rows:int = 10;
var cols:int = 10;

var tileNumber = rows * cols;

var tileWidth:Number = 30;
var tileHeight:Number = 30;

var node:Object;

for ( var row = 0; row < rows; row++ )
{
	for ( var col = 0; col < cols; col++ )
	{
		node = new Object();
		node.v = col;
		node.u = row;
		node.xPos = node.v * tileWidth + tileWidth;
		node.yPos = node.u * tileHeight + tileHeight;
		node.nodeString = node.u + "." + node.v;
		nodeArray.push(node);
		posArray.push(node.nodeString);
	}
}

The tile's position is already calculated and stored as the node's property. The other new thing is the second array that is filled with the position string. That may be overdone for this example but we will need it once we deal with differently shaped tiles.

var tile:MovieClip;

for ( var counter = 0; counter < tileNumber; counter++ )
{
	tile = new MovieClip();
	node = nodeArray[counter];
	tile.nodeRef = node;
	tile.x = node.xPos;
	tile.y = node.yPos;
	node.tileRef = tile;
	node.blocked = false;
	drawTile(tile, 0x66ff66, 1);
	addChild(tile);
}

This part could have been already in the node creation loop, but for later customization purposes it will go seperately. And there is nothing new in drawTile function.

function drawTile ( tile, tileColor, tileAlpha )
{
	with ( tile.graphics )
	{
		beginFill(tileColor, tileAlpha);
		lineStyle(2, 0x22ff22);
		drawRect(-tileWidth*0.5, -tileHeight*0.5, tileWidth, tileHeight);
		endFill();
	}
}

var instText = new TextField();
instText.x = tileWidth * ( cols + 1 );
instText.y = tileHeight * 0.5;
instText.width = 150;
instText.wordWrap = true;
instText.selectable = false;
instText.text = "Hover tiles to trace their position. Click tile to block/unblock it."
addChild(instText);

var nodeText = new TextField();
nodeText.x = tileWidth * 0.5;
nodeText.y = tileHeight * ( rows + 1 );
nodeText.selectable = false;
addChild(nodeText);

var tileFocus = new MovieClip();
drawTile(tileFocus, 0x990000, 0.5);
tileFocus.visible = false;
tileFocus.mouseEnabled = false;
addChild(tileFocus);

stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
stage.addEventListener(MouseEvent.CLICK, mouseClickHandler);

var actualNode:Object = null;

Here is a new MovieClip(), the tileFocus. It will be the position indicator contrary to the color change of the tile itself in the previous part.

function mouseMoveHandler ( event:* )
{
	getNode(mouseX, mouseY);
}

function mouseClickHandler ( event:* )
{
	if ( actualNode !== null )
	{
		if ( actualNode.blocked == false )
		{
			actualNode.blocked = true;
			drawTile(actualNode.tileRef, 0x000000, 1);
		}
		else
		{
			actualNode.blocked = false;
			drawTile(actualNode.tileRef, 0x66ff66, 1);
		}
	}
}

The mouseMoveHandler calls a function getNode which returns the actual tile the cursor is over. The mouseClickHandler deals with blocking/unblocking the node. Let's review the getNode function.

function getNode ( xPos, yPos )
{
	var thisV = Math.round (( xPos - tileWidth ) / tileWidth );
	var thisU = Math.round (( yPos - tileHeight ) / tileHeight );
	actualNode = stringToNode( thisU, thisV );
	if ( actualNode !== null )
	{
		nodeText.text = thisU + "|" + thisV + "\nfrom Array: " + actualNode.nodeString + "\nblocked: " + actualNode.blocked;
		tileFocus.visible = true;
		tileFocus.x = actualNode.xPos;
		tileFocus.y = actualNode.yPos;
	}
	else
	{
		nodeText.text = "";
		tileFocus.visible = false;
	}
}

The actual mouse position is calculated down to row and column number in the same way the node's xPos and yPos were calculated before. We'll deal with the stringToNode() in a minute. The nodeText shows the node information and the tileFocus movieclip is positioned at the actual node's xPos and yPos.

function stringToNode ( uPos, vPos )
{
	var nodeString = uPos + "." + vPos;
	var nodePos = posArray.indexOf(nodeString);
	if ( nodePos > -1 )
	{
		return nodeArray[nodePos];
	}
	else
	{
		return null;
	}
}

The stringToNode does nothing more than creating a string formatted like the nodeString property of the nodes. Then the string's position in the posArray is looked up. If it exists the node at the same position in the nodeArray is returned.
In part 3 we will take care of actualNode's adjacent cells.

Grid based games – Part 2.1: The basic grid with interaction

kegogrog — Mon, 05 Apr 2010 12:51:34 +0000

Now it’s time to add some interaction to the grid made in part 1. For that purpose simple MouseEvents for movement and click will be sufficient. As indication we will change the color of the relevant tile.

Here is what we are going to create:

And here is the code, explanations will follow:

var nodeArray:Array = new Array();

var rows:int = 10;
var cols:int = 10;

var tileNumber = rows * cols;

var tileWidth:Number = 30;
var tileHeight:Number = 30;

var node:Object;

for ( var row = 0; row < rows; row++ )
{
	for ( var col = 0; col < cols; col++ )
	{
		node = new Object();
		node.v = col;
		node.u = row;
		nodeArray.push(node);
	}
}

var tile:MovieClip;

for ( var counter = 0; counter < tileNumber; counter++ )
{
	tile = new MovieClip();
	tile.x = nodeArray[counter].v * tileWidth + tileWidth;
	tile.y = nodeArray[counter].u * tileHeight + tileHeight;
	tile.nodeRef = nodeArray[counter];
	nodeArray[counter].tileRef = tile;
	tile.blocked = false;
	tile.nodeRef.blocked = false;
	drawTile(tile, 0x66ff66, 1);
	tile.addEventListener(MouseEvent.MOUSE_OVER, overTile, false, 0, true);
	addChild(tile);
}

This time the tile MovieClip() as well as the node Object() are getting some properties. At the same time, both get knowledge of each other by referencing them in their properties nodeRef and tileRef. This way we can later work with either. The creation of its graphics is outsourced to the following function. This way we can use the code for all EventListeners.

function drawTile ( tile, tileColor, tileAlpha )
{
	with ( tile.graphics )
	{
		beginFill(tileColor, tileAlpha);
		lineStyle(2, 0x22ff22);
		drawRect(-tileWidth*0.5, -tileHeight*0.5, tileWidth, tileHeight);
		endFill();
	}
}

var instText = new TextField();
instText.x = tileWidth * ( cols + 1 );
instText.y = tileHeight * 0.5;
instText.width = 150;
instText.wordWrap = true;
instText.selectable = false;
instText.text = "Hover tiles to trace their position. Click tile to block/unblock it."
addChild(instText);

var nodeText = new TextField();
nodeText.x = tileWidth * 0.5;
nodeText.y = tileHeight * ( rows + 1 );
nodeText.selectable = false;
addChild(nodeText);

These are two descriptive text fields. One will show the instruction, the other one will show the tile/node properties on hover.


function overTile ( event:* )
{
	var tile = event.target;
	drawTile(tile, 0xff6666, 0.5);
	nodeText.text = tile.nodeRef.u + "|" + tile.nodeRef.v + "\nblocked: " + tile.blocked;
	tile.addEventListener(MouseEvent.MOUSE_OUT, outTile, false, 0, true);
	tile.addEventListener(MouseEvent.CLICK, clickTile, false, 0, true);
}

The function for the tile hover includes a semitransparent fill over the actual fill to show which tile is the actual. The informative text field we did set up earlier shows the row number and the column number as well as the blocked status. The two listener functions are following.

function outTile ( event:* )
{
	var tile = event.target;
	var tileColor;
	if ( tile.blocked == false )
	{
		tileColor = 0x66ff66;
	}
	else
	{
		tileColor = 0x000000;
	}
	drawTile(tile, tileColor, 1);
	nodeText.text = "";
	tile.removeEventListener(MouseEvent.MOUSE_OUT, outTile);
	tile.removeEventListener(MouseEvent.CLICK, clickTile);
}

On leaving the tile it is recolored. By checking the blocked status the tile's color is determined. The text field is reset and the listeners removed.

function clickTile ( event:* )
{
	var tile = event.target;
	var tileColor;
	if ( tile.blocked == false )
	{
		tile.blocked = true;
		tileColor = 0x000000;
	}
	else
	{
		tile.blocked = false;
		tileColor = 0x22ff22;
	}
	drawTile(tile, tileColor, 0.5);
}

If the actual blocked status is false, it is now flagged true and the other way around.

The next part will deal with the same interaction just depending on the mouse position.

Grid based games – Part 1: The basic grid

kegogrog — Mon, 05 Apr 2010 11:28:47 +0000

There are a lot of games based on different kinds of grids: Real Time Strategy (RTS) or round based Role Play Games (RPG) and Tower Defence (TD) games as well as Top-Down-Shooters and vertical scrolling Jump&Runs. One could use grids for tactical board games as well.
In the grid we are going to create, each tile consists of two parts, an Object() for the node and a MovieClip() for the graphic. The presented code is timeline and can thus be copied into the actions panel. This way it can be used for practicing purposes fast. For a game I would rather create and sort the code in classes.

Here is what we are going to create, a basic square grid with absolutely no interaction:

And here is the code, explanations will follow:

var nodeArray:Array = new Array();

var rows:int = 10;
var cols:int = 10;

var tileNumber = rows * cols;

var tileWidth:Number = 30;
var tileHeight:Number = 30;

var node:Object;

for ( var row = 0; row < rows; row++ )
{
	for ( var col = 0; col < cols; col++ )
	{
		node = new Object();
		node.v = col;
		node.u = row;
		nodeArray.push(node);
	}
}

var tile:MovieClip;

for ( var counter = 0; counter < tileNumber; counter++ )
{
	tile = new MovieClip();
	tile.x = nodeArray[counter].v * tileWidth + tileWidth;
	tile.y = nodeArray[counter].u * tileHeight + tileHeight;
	tile.graphics.beginFill(0x66ff66);
	tile.graphics.lineStyle(2,0x22ff22);
	tile.graphics.moveTo(-tileWidth*0.5, -tileHeight*0.5);
	tile.graphics.lineTo(tileWidth*0.5, -tileHeight*0.5);
	tile.graphics.lineTo(tileWidth*0.5, tileHeight*0.5);
	tile.graphics.lineTo(-tileWidth*0.5, tileHeight*0.5);
	tile.graphics.lineTo(-tileWidth*0.5, -tileHeight*0.5);
	tile.graphics.endFill();
	addChild(tile);
}

First a new Array for our nodes is created and the number of rows and columns is set. In the first loop all nodes are created and assigned their row and column number. This Object can hold a number of properties, those can also be received from a previously created map array but that will follow later. For now, in the second loop the MovieClip is created and on its graphics layer a rectangle is created.

Let's create some interaction and optimize some code in part 2.

AS3: Creating a game like circle chain

kegogrog — Tue, 18 Aug 2009 19:43:02 +0000

This game was inspired by Emanuele Feronato’s Circle Chain game and as he posted the AS2 code I took it and converted is to a basic AS3 chain reaction game.This tutorial also covers the mochi encryption issues and the possibility to load different APIs despite those.

Here is the DocumentClass called ScreenGame, it includes MochiAds and the Kongregate API that is only loaded when the game is played on Kongregate. This class is somewhat bloated because I just made it as tutorial and didn’t want to put to mujch effort in the game’s stucture (title screen, help screen, etc.) but then included too much features (nay, not too much but two tutorials at once because you can’t test the MochiAds thing without a game…)

package {
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.display.Stage;
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.events.TimerEvent;
	import flash.utils.Timer;
	import flash.events.Event;
	import flash.text.TextField;
	import flash.ui.Mouse;
	import flash.ui.ContextMenu;
	import flash.ui.ContextMenuItem;
	import flash.events.ContextMenuEvent;
	import flash.net.navigateToURL;
	import flash.net.URLRequest;
	import flash.media.SoundChannel;
	import mochi.as3.*

	public class ScreenGame extends MovieClip {

		public var bullet:MovieClip;
		public var bulletArray:Array;
		public var startX:Number;
		public var startY:Number;
		public var bulletDir:Number;
		public var gameTimer:Timer;

		public var monomer:MovieClip;
		public var monomerArray:Array;
		public var maxMonomer:int;

		public var levelText:MovieClip;
		public var levelDesc:Array;

		public var textOn:Boolean;
		public var gameStarted:Boolean;

		public var levelNumber:int;

		public var blueArray:Array;
		public var pinkArray:Array;
		public var greyArray:Array;
		public var blackArray:Array;
		public var killArray:Array;
		public var monomerKilled:int;

		public var monomerHolder:MovieClip;
		public var bulletHolder:MovieClip;

		public var lostAnyway:Boolean;

		public var counter:int;

		public var cMenu:ContextMenu;
		public var cMenuHomePage:ContextMenuItem;
		public var cMenuCopyRight:ContextMenuItem;

		public var soundFail:SoundFail;
		public var sfxSoundChannel:SoundChannel;

		public var kongregate:*;

All the includes that are needed. The level design is done via the blue, pink, grey, black and kill arrays.

		public function ScreenGame () {

			MochiBot.track(this, "xxxxxxxx");
			var _mochiads_game_id:String = "xxxxxxxxxxxxxxxx";

			this.addEventListener(Event.ADDED_TO_STAGE, initGame, false, 0, true);

		}

The EventListener is added to make the game work with the MochiAds Encryption and Version Control wrapper. Setting up the game directly in here would lead to a failure.

		public function initGame(event:Event) {

			//Need that to get the real url:
			var domainCheck = LoaderInfo(root.loaderInfo.loader.loaderInfo).url;

			//That would be used without Mochi's Encryption:
			//var domainCheck = LoaderInfo(root.loaderInfo).url;

			if ( domainCheck.indexOf("natan") >= 0 ) {
				domainName.text = "playing at blog.natan.info";
			}

			else if ( domainCheck.indexOf("kongregate") >= 0 ) {

				// Pull the API path from the FlashVars
				var paramObj:Object = LoaderInfo(root.loaderInfo.loader.loaderInfo).parameters;
				// The API path. The debug version ("shadow" API) will load if testing locally.
				var api_url:String = paramObj.api_path || "http://www.kongregate.com/flash/API_AS3_Local.swf";
				// Debug
				trace ( "API path: " + api_url );
				// Load the API
				var request:URLRequest = new URLRequest ( api_url );
				var loader:Loader = new Loader();
				loader.contentLoaderInfo.addEventListener ( Event.COMPLETE, loadComplete );
				loader.load ( request );
				this.addChild ( loader );
				//Kongregate API reference
				//done in public vars
				//var kongregate:*
				// Called when API swf finishes loading
				function loadComplete ( event:Event ):void {
				    // Save Kongregate API reference
				    kongregate = event.target.content;
				    // Connect
				kongregate.services.connect();
				    // Debug our services
					trace ( "\n" + kongregate.services );
					trace ( "\n" + kongregate.user );
			    	trace ( "\n" + kongregate.scores );
			    	trace ( "\n" + kongregate.stats );
				}
				domainName.text = " playing at Kongregate";
			}

			else {
				domainName.text = "blog.natan.info";
			}

That is the domain check to be used with the MochiAds wrapper. I tested it with the Kongregate API and it seems to work.

			cMenu = new ContextMenu();
			cMenu.hideBuiltInItems();
			cMenuHomePage = new ContextMenuItem("LÞ the keg'o'grog blog");
			cMenuCopyRight = new ContextMenuItem("© - 2009 _ 1.0");
			cMenuCopyRight.enabled = false;
			cMenuCopyRight.separatorBefore = true;
			cMenuHomePage.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, goToHomePage, false, 0, true);
			cMenu.customItems.push(cMenuHomePage, cMenuCopyRight);
			this.contextMenu = cMenu;

			soundFail = new SoundFail ();

Custom context menu and the ‘plopp’ sound.

			levelNumber = 0;
			bulletArray = new Array();
			monomerArray = new Array();
			//level number           1   2   3   4   5   6   7   8   9  10  11  12  13  14  15  16  17  18  19  20
			blueArray = new Array  ( 3,  0,  0,  0,  3,  3,  2, 25,  5,  0, 10,  2,  1, 10,  0,  5,  0, 25,  2, 20);
			pinkArray = new Array  ( 0,  0,  0,  2,  1,  2,  3,  0,  1,  5,  0,  1,  1,  0,  1,  0,  6,  0,  1, Math.round(Math.random()));
			greyArray = new Array  ( 0,  3,  0,  0,  0,  1,  2,  0,  4,  1, 10,  1,  1, 10,  0,  5,  0, 20,  2, 20);
			blackArray = new Array ( 0,  0,  3,  0,  0,  0,  0,  0,  0,  0,  0,  0,  1, 10,  5,  5,  2,  5,  2, 20);
			killArray = new Array  ( 1,  1,  1,  0,  1,  2,  2, 24,  5,  1, 18,  3,  3, 30,  1, 13,  1, 50,  5,  0);
			levelDesc = new Array () ;
			levelDesc [0] = "LEVEL 1\n\nStart the first explosion with a click and try to start a chain reaction.";
			levelDesc [1] = "LEVEL 2\n\nThe number above shows how much goobies have to explode.";
			levelDesc [2] = "LEVEL 3\n\nClick anywhere to start.";
			levelDesc [3] = "LEVEL 4\n\nThe stars are not to be hit. Period.";
			levelDesc [4] = "LEVEL 5\n\nThe first combination.";
			levelDesc [5] = "LEVEL 6\n\nTry this!";
			levelDesc [6] = "LEVEL 7\n\nThis might be hard but the next will be fun.";
			levelDesc [7] = "LEVEL 8\n\nWow! Have fun!";
			levelDesc [8] = "LEVEL 9\n\nThis is possible.";
			levelDesc [9] = "LEVEL 10\n\nOne is the loneliest number. The grey Goobie knows...";
			levelDesc [10] = "LEVEL 11\n\nAll for one or one for all?";
			levelDesc [11] = "LEVEL 12\n\nEasy?";
			levelDesc [12] = "LEVEL 13\n\nAll together now!";
			levelDesc [13] = "LEVEL 14\n\nNow you really need all.";
			levelDesc [14] = "LEVEL 15\n\nYeah, one is all you need.";
			levelDesc [15] = "LEVEL 16\n\nPhew! This will be easy.";
			levelDesc [16] = "LEVEL 17\n\nTwo can be as bad as one...";
			levelDesc [17] = "LEVEL 18\n\nAll! This time for real.\nMass destruction!";
			levelDesc [18] = "LEVEL 19\n\nLast level. Then back to work.";
			levelDesc [19] = "DONE!\n\nCongratulations! Check out the Tutorial and other games at\n\nblog.natan.info"

			setupGame();

		}

This is the level design. The arrays blue, pink, grey and black hold the number of monomers, the killArray holds the number of enemies that must explode in the level. There is a random chance that after finishing level 19 there is no star in the mass of goobies.

		public function setupGame () {

			Mouse.show();
			this.addEventListener(Event.ENTER_FRAME, enterFrameHandler, false, 0, true);
			gameStarted = false;
			textOn = true;
			monomerKilled = 0;
			lostAnyway = false;
			monomerHolder = new MovieClip();
			bulletHolder = new MovieClip();
			this.addChild(monomerHolder);
			this.addChild(bulletHolder);
			this.addChild(monomerKillText);

			monomerHolder.mouseChildren = false;
			bulletHolder.mouseChildren = false;

			for (counter = 0; counter <= blueArray[levelNumber] -1 ; counter++ ) {
				monomer = new Monomer(this, "blue");
				monomer.x = Math.random()*640;
				monomer.y = Math.random()*480;
				monomer.mouseEnabled = false;
				monomerArray.push(monomer);
				monomerHolder.addChild(monomer);
			}

			for ( counter = 0; counter <= pinkArray[levelNumber] -1 ; counter++ ) {
				monomer = new Monomer(this, "pink");
				monomer.x = Math.random()*640;
				monomer.y = Math.random()*480;
				monomer.mouseEnabled = false;
				monomerArray.push(monomer);
				monomerHolder.addChild(monomer);
			}

			for ( counter = 0; counter <= greyArray[levelNumber] -1 ; counter++ ) {
				monomer = new Monomer(this, "grey");
				monomer.x = Math.random()*640;
				monomer.y = Math.random()*480;
				monomer.mouseEnabled = false;
				monomerArray.push(monomer);
				monomerHolder.addChild(monomer);
			}

			for ( counter = 0; counter <= blackArray[levelNumber] -1 ; counter++ ) {
				monomer = new Monomer(this, "black");
				monomer.x = Math.random()*640;
				monomer.y = Math.random()*480;
				monomer.mouseEnabled = false;
				monomerArray.push(monomer);
				monomerHolder.addChild(monomer);
			}

			levelText = new LevelText();
			levelText.textArea.text = levelDesc[levelNumber];
			this.addChild(levelText);
			levelText.addEventListener(MouseEvent.CLICK, removeText, false, 0, true);
		}

Every array is checked and the given number of monomers is placed to the holderClip (to completely remove everything and level end) and an array for hittesting purposes.

		public function removeText(event:MouseEvent) {
			levelText.removeEventListener(MouseEvent.CLICK, removeText);
			levelText.visible = false;
			stage.addEventListener(MouseEvent.CLICK, releaseMouseBullet, false, 0, true);
		}

The level description overlay is removed.


		public function releaseMouseBullet (event:MouseEvent) {
			if (textOn == true ) {
				textOn = false;
			}
			else {
				Mouse.hide();
				addVerticalBullet(mouseX, mouseY);
				stage.removeEventListener(MouseEvent.CLICK, releaseMouseBullet);
				gameStarted = true;
			}
		}

As it is a one-click-per-level game the listener is removed after the click.

		public function addVerticalBullet (startX, startY) {
			for (counter = 0; counter <= 3; counter++) {
				bulletDir = Math.PI * 0.5 * counter;
				bullet = new Bullet(this, bulletDir);
				bullet.x = startX;
				bullet.y = startY;
				bulletArray.push(bullet);
				bulletHolder.addChild(bullet);
			}
		}

		public function addDiagonalBullet (startX, startY) {
			for (counter = 0; counter <= 3; counter++ ) {
				bulletDir = Math.PI * 0.5 * (counter + 0.5);
				bullet = new Bullet(this, bulletDir);
				bullet.x = startX;
				bullet.y = startY;
				bulletArray.push(bullet);
				bulletHolder.addChild(bullet);
			}
		}

All you need is math: PI*0.5 means 90°.


		public function enterFrameHandler (event:Event) {
			for each ( bullet in bulletArray ) {
				bullet.moveBullet();
			}
			for each ( monomer in monomerArray ) {
				monomer.moveMonomer ();
			}
			bulletArrayLength.text = bulletArray.length.toString();
			monomerKillText.text = monomerKilled.toString()+" / "+killArray[levelNumber].toString();
			monomerArrayLength.text = monomerArray.length.toString();
			if(gameStarted == true ) {
				if(bulletArray.length == 0 || lostAnyway || monomerArray.length == 0) {
					if ( monomerKilled >= killArray[levelNumber] && !lostAnyway ) {
						if ( levelNumber < 19 ) {
							levelNumber++;
						}
					}
					this.removeChild(monomerHolder);
					this.removeChild(bulletHolder);
					monomerArray.splice(0, monomerArray.length);
					bulletArray.splice(0, bulletArray.length);
					setupGame();
				}
			}
		}

The game itself: at every frame (framerate set to 30) every bullet and monomer is moved. With mouse click you set the gameStarted to true. That means there are four bullets on stage, once all bullets are removed the game should be over OR if a star is hit lostAnyway is set true and the level is immediately over OR if all monomers are removed (and no star) the level is passed. As long as there are levels the number is increased. One could direct the player to the score table with an 'else if' at this point. After all, the stage is purged and the next level is set up.

		public function removeBullet (which) {
			if(bulletHolder.contains(which)){
				bulletHolder.removeChild (which);
				//which.alpha = 0.5;
				bulletArray.splice(bulletArray.indexOf(which), 1);
			}
		}

		public function removeMonomer (which) {
			if(monomerHolder.contains(which)){
				sfxSoundChannel = soundFail.play();
				monomerHolder.removeChild (which);
				//which.alpha = 0.5;
				monomerArray.splice(monomerArray.indexOf(which), 1);
				monomerKilled++;
			}
		}
		public function goToHomePage(event:ContextMenuEvent){
			var homeRequest = new URLRequest("http://blog.natan.info");
			navigateToURL(homeRequest, "_blank");
		}
	}
}

The Monomer Class includes PixelPerfectCollisionTesting by Troy Gilbert that is explained a bit at Michael's Blog.

package {
	import flash.display.MovieClip;

	public class Monomer extends MovieClip {

		public var clipRef:MovieClip;
		public var bulletDir:Number;
		public var xSpeed:Number;
		public var ySpeed:Number;
		public var sType:String;
		public var monomerDir:Number;

		public function Monomer (clipRef, sType:String = "blue") {
			this.clipRef = clipRef;
			this.sType = sType;
			this.gotoAndStop(this.sType);
			monomerDir = Math.PI * Math.random() * 2;
			this.rotation = this.monomerDir*180/Math.PI;
			this.xSpeed = Math.cos(monomerDir)*1.5;
			this.ySpeed = Math.sin(monomerDir)*1.5;
			//this.scaleX = this.scaleY = 0.75;
		}

		public function moveMonomer () {

			this.x += this.xSpeed;
			this.y += this.ySpeed;

			for each ( var bullet in clipRef.bulletArray ) {

				//if ( this.hitTestPoint(bullet.x, bullet.y, true )) {
				if (PPCD.isColliding(this, bullet, clipRef, true)){
					if ( this.sType == "blue" ) {
						if(clipRef.bulletArray.length < 150){
						clipRef.addVerticalBullet(this.x, this.y);
						}
					}
					if ( this.sType == "pink" ) {
						clipRef.lostAnyway = true;
					}
					if ( this.sType == "grey" ) {
						if(clipRef.bulletArray.length < 150){
						clipRef.addDiagonalBullet(this.x, this.y);
						}
					}
					if ( this.sType == "black" ) {
						if(clipRef.bulletArray.length < 150){
						clipRef.addVerticalBullet(this.x, this.y);
						clipRef.addDiagonalBullet(this.x, this.y);
						}
					}
					clipRef.removeMonomer(this);
				}
			}

			if ( this.x < -20 ) { this.x = 660; }
			if ( this.x > 660 ) { this.x = -20; }
			if ( this.y < -20 ) { this.y = 500; }
			if ( this.y > 500 ) { this.y = -20; }
		}
	}
}

sType is used to set up the color of the monomer. The Monomer clip has four frames labelled 'blue', 'pink' etc. If everything should be animated then I would recommend using an extra 'monomerGrapic' clip and add this to the monomer (which then holds no graphic itself'.

And the Bullet Class:

package {
	import flash.display.MovieClip;

	public class Bullet extends MovieClip {

		public var clipRef:MovieClip;
		public var bulletDir:Number;
		public var xSpeed:Number;
		public var ySpeed:Number;

		public function Bullet (clipRef, bulletDir) {
			this.clipRef = clipRef;
			this.bulletDir = bulletDir;
			this.xSpeed = Math.cos(bulletDir)*5;
			this.ySpeed = Math.sin(bulletDir)*5;
		}

		public function moveBullet () {
			this.x += this.xSpeed;
			this.y += this.ySpeed;

			if ( this.x < 0 ) { clipRef.removeBullet(this); }
			if ( this.x > 640 ) { clipRef.removeBullet(this); }
			if ( this.y < 0 ) { clipRef.removeBullet(this); }
			if ( this.y > 480 ) { clipRef.removeBullet(this); }
		}
	}
}

Myke them bounce or add gravity, lots of possibilities.

And that is the final result:

There are unlimited possibilities: As the score you could count the number of tries, the time needed, the number of exploded goobies, etc.

Well, you can come up with questions, mateys.