Talking about Space Checkers game, Actionscript 3, Flash and Game development.
Today I want to start a new tutorial series oriented to beginners. I receive every day requests to publish tutorials for beginners, so here I am. According to a couple of suggestions from Facebook fans, the candidate game to be dissected is Space Checkers, a puzzle game with 20 levels with a well know gameplay: in order to go through the level, remove balls by jumping one over another and leave only one in space.
This old school game can be easily used for a step by step tutorial. For a demonstration purpose, we’ll start making level two, the one you see in the above picture.
1) Creation of the game field
In this first step, we are just creating the game field, thanks to setupLevel function which stores the level into a two-dimensional array, filled this way:
0: empty space
1: ball
package {
import flash.display.Sprite
public class Main extends Sprite{
private var fieldArray:Array;
public function Main() {
setupLevel();
}
private function setupLevel():void{
fieldArray=[[0,0,1,0,0,0],[1,1,0,1,1,0],[0,0,0,0,0,0]];
trace(fieldArray);
}
}
}
Test the movie, and this is what you’ll see, in the output window:
0,0,1,0,0,0,1,1,0,1,1,0,0,0,0,0,0,0
Now it’s time to place some assets on the stage.
2) Graphic representation of the game field
First, you need to draw both the empty square and the ball sprites. I created two 60×60 pixels symbols linked as Square for the empty square and Monster for the ball. Also, the registration point is in the upper left corner.
Then the script grows a bit:
package {
import flash.display.Sprite;
public class Main extends Sprite {
private var fieldArray:Array;
public function Main() {
setupLevel();
}
private function setupLevel():void {
var squareContainer:Sprite=new Sprite();
var monsterContainer:Sprite=new Sprite();
addChild(squareContainer);
addChild(monsterContainer);
var square:Square;
var monster:Monster;
fieldArray=[[0,0,1,0,0,0],[1,1,0,1,1,0],[0,0,0,0,0,0]];
for (var i:int=0; i
We have a few more lines here, let's see their meaning:
Line 9: squareContainer is the Display Object Container which will hold all empty squares, that is the grid where the game will be plated.
Line 10: in the same way, monsterContainer will hold all monsters
Lines 11-12: both Display Object Containers are placed on the Stage. monsterContainer is placed after squareContainer to have balls in front of squares, like in the original game.
Line 13: creation of a Square instance
Line 14: creation of a Monster instance
Lines 16-17: looping through fieldArray array
Lines 18-21: creation and placement of an empty square no matter the value of current fieldArray item
lines 22-28: creation of a monster if current array item is 1
Lines 31-34: centering the game field in the middle of the stage, according to its size.
And that's what we have now, our level 2 representation:
Now let's add a bit of interaction
3) Moving balls
In this step, we will allow players to pick and drag the balls with the mouse. Once the mouse is released, the ball returns in its position, no matter if it's a valid move or not.
package {
import flash.display.Sprite;
import flash.events.MouseEvent;
public class Main extends Sprite {
private var fieldArray:Array;
private var pickedMonster:Monster;
private var monsterContainer:Sprite=new Sprite();
private var localX:Number;
private var localY:Number;
private var oldX:Number;
private var oldY:Number;
public function Main() {
setupLevel();
}
private function setupLevel():void {
var squareContainer:Sprite=new Sprite();
addChild(squareContainer);
addChild(monsterContainer);
var square:Square;
var monster:Monster;
fieldArray=[[0,0,1,0,0,0],[1,1,0,1,1,0],[0,0,0,0,0,0]];
for (var i:int=0; i
A few class level variables have been added:
pickedMonster: the monster I am going to pick
monsterContainer: it's our old variable, just promoted to class level variable
localX and localY: local coordinates of the mouse click relatively to the monster
oldX and oldY: starting monster position, useful when we have to put back the monster in its place
Line 34: adding a mouse down listener to monsters calling pickMonster callback function
Lines 44-45: saving local coordinates of mouse click relatively to the monster
Line 46: setting the clicked monster as the monster we are going to move
Lines 47-48: saving starting monster position
Line 49: bringing current monster to front
Line 50: adding a mouse move listener calling moveMonster callback function
Line 51: adding a mouse up listener calling dropMonster callback function
Lines 54-55: inside moveMonster function, just moving the mouse around the stage according to mouse position and starting click coordinates
Lines 58-59: once the player release the mouse, unnecessary listeners must be removed
Lines 60-61: finally the monster is moved back to its place
Test the game, and you will be able to pick, move and release the monsters in the same way as the original game.
Next time, making the player remove monsters by jumping over them.
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.