Home Projects Flash CS3 How to Create a Tile Game Like Destruct-O-Match on Neopets.com - Creating the Tile Game Engine





Forgot your password?
Forgot your username?
No Account Yet? Create an account

Like it? Share it!

Add to: JBookmarks Add to: Facebook Add to: Windows Live Add to: Ximmy Add to: Digg Add to: Del.icoi.us Add to: Reddit Add to: Jumptags Add to: Upchuckr Add to: StumbleUpon Add to: Slashdot Add to: Netscape Add to: Yahoo Add to: Blogmarks Add to: Diigo Add to: Technorati Information

How to Create a Tile Game Like Destruct-O-Match on Neopets.com
How to Create a Tile Game Like Destruct-O-Match on Neopets.com - Creating the Tile Game Engine PDF Print E-mail
User Rating: / 2
PoorBest 
Projects - Flash CS3
Written by drooza   
Tuesday, 23 September 2008 19:02
Article Index
How to Create a Tile Game Like Destruct-O-Match on Neopets.com
Linking the Tile class
Creating the Tile Game Engine
Initializing Level Functions
In Game Functions
Clumping Functions
End Of Level / Game Functions
Creating the .fla
Let's Play the Game!
All Pages

 

Without the comments, TileGame will be 572 lines of code.  Since thats quite a few for an article such as this, we'll split the code up into several sections: import statements, class variables used and initialization methods;  end of level/game functions; intializing level / game function; in-game functions; and last but not least clumping functions!

 

Import Statements, Variables Used and Game Initialization Methods

 First we'll start with the first 100 lines of code which basically set the game up and "run" the game.

/** TileGame.as Tile Game engine using an array of arrays full of instances of
* type Tile. idea of the game: A group of colored tiles that when 2 or more
* are grouped together may be destroyed in exchange for points. If you
* destroy all the blocks on the field, or you gain enough points, you advance
* to the next level.
*
* @see Tile.as
* @author Drooza
*/

package
{
import flash.display.MovieClip;
import flash.display.Stage;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import fl.transitions.easing.*;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;

public class TileGame extends MovieClip
{
private var colMax:int; //number of columns
private var rowMax:int; //number of rows
private var tileList:Array; //Will become Array of arrays
private var types:Number; //number of different colors
// in play

private var score:Number;
private var currentLevelScore:Number;
private var level:int;
private var levelScoreToBeat:Number;
public var score_txt:TextField;

public var gameState:int;
private var CONTINUE:int;
private var GAMEOVER:int;
private var NEXTLEVEL:int;
private var START:int;

private var nextLevel_mc:NextLevelButton; //instantiated library items
private var playAgain_mc:PlayAgainButton; // added to stage using as3

/** Class constructor. Sets the number of colors to start with sets
* game states.
*/
public function TileGame()
{
types = 4;
CONTINUE = 0;
GAMEOVER = 1;
NEXTLEVEL = 2;
START = 3;

stage.scaleMode = StageScaleMode.NO_SCALE;

gameState = START;

addEventListener(Event.ADDED_TO_STAGE, init);
}

/** Set the dimensions of the array and instantiates tileList.
* Here game engine is started.
*/
private function init(e:Event):void
{
colMax = 13;
rowMax = 11;
tileList = new Array(colMax);


initScoreField();

addEventListener(Event.ENTER_FRAME, onEnterFrame);
}

/** The heart of the game that runs every frame.
*
*/
private function onEnterFrame(e:Event):void
{
switch(gameState)
{
case CONTINUE:
break;
case GAMEOVER:
trace("game over");
showEndPopUp();
break;
case NEXTLEVEL:
trace("next level!");
if(currentLevelScore >= levelScoreToBeat)
{
nextLevelPopUp();
level ++;
}
else
{
gameState = GAMEOVER;
}
break;
case START:
trace ("start");
resetGameVariables();
fillArray(types);
showTiles();
//break; //no break needed to make gameState = CONTINUE
default: gameState = CONTINUE;
}

setScore();
}
/** Instantiates variables for a new game.
*
*/
private function resetGameVariables():void
{
trace("scores reset");
level = 1;
types = 3;
score = 0;
currentLevelScore = 0;
setScoreToBeat();
}

/** Fills tileList with Tile instantiations and assigns click handlers
* to each tile.
*/
private function fillArray(differentTypes:int):void
{
for(var col:int = 0; col < colMax; col ++)
{
//trace("Creating new row at column " + col);
tileList[col] = new Array(rowMax);

for(var row:int = 0; row < rowMax; row ++)
{
//trace("Creating tile.");
var tile:Tile = new Tile();
tile.column = col;
tile.row = row;
tile.x = (tile.width * col) + 15;
tile.y = -(tile.height * 2);
addChild(tile);
tileList[col][row] = tile;

if(tile.currentFrame > differentTypes)
{
tile.gotoAndStop(Math.random() * differentTypes);
}

tile.addEventListener(MouseEvent.CLICK, tileClickHandler);
}
}
}

Methodology is self explanatory thus far.  What you should see in this section is that it sets up the actual game engine in the onEnterFrame callback function and creates an array of arrays filled with instances of Tile.  This is the data structure used to make this game.  This algorithm is O(n2) because of the nested for-loops.  For this type of game, it should not really matter because there will never be more than a couple hundred tiles in play at any given time.  Optimizations would be futile because although the algorithm can change to something like O(n2 - n) it would still be O(n2).  I stayed away from over optimization.  The only "optimizatio" I made was to add that checked or not checked boolean variable to the tiles to remove any double checking for similar colors.

 



Comments
Add New Search
Bug Found
drooza (SAdministrator) 2008-09-23 19:59:00

There's this one bug that happens sparingly. Sometimes the tiles don't
fall into correct place and are stuck, suspended in the air. If I remove the
animation totally, then no more bug. I've got that much.

I'm thinking I have
to check where the tile is located when the animation stops.
Bug Fix:
drooza (SAdministrator) 2008-11-07 09:54:10

Because a tween object is instantiated inside an if statement (oops) the
garbage collector is taking care of business and removing the
tween before it completes.

By making this tween a part of the Tile
class, this may fix the problem.

Other fixes in the comments section
of this page: http://livedocs.adobe.com/flash/9.0/ActionScrip...
Losing?
KeenEyes (76.174.154.xxx) 2008-10-09 18:52:29

How do you lose in this game again? lol
drooza (SAdministrator) 2008-10-09 19:11:10

If you don't achieve the points set by the game for that level, you lose.
donald (119.154.16.xxx) 2010-02-15 23:47:27

thanks for your toturial....its really nice and mean full. I want to write
more but these days I am doing preparation of different
online certifications and I found ccna certification is the best helping source which is providing 100% authentic material. I
also spend my extra time in surfing internet, listening music
and playing games. After my exams I would like to join your group.
Write comment
Name:
Email:
 
Title:
UBBCode:
[b] [i] [u] [url] [quote] [code] [img] 
 
:angry::0:confused::cheer:B)
:evil::silly::dry::lol::kiss:
:D:pinch::(:shock::X
:side::):P:unsure::woohoo:
:huh::whistle:;):s:!:
:?::idea::arrow:
Please input the anti-spam code that you can read in the image.

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."

Last Updated ( Saturday, 22 November 2008 13:05 )
 

Make a Donation!

Advertisement
Banner

HomeProjectsSnippetsContact Me

Copyright © 2008, Drooza.com