# Step by step creation of Flash game Space Checkers

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

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:

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.

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.

• veeramani

Thank u emanuele

Thanks a lot

• veeramani

Awaiting for the next step…

• Good work. Thank you emanuele!
look forward to the next step

• A good education and was applied
I’m waiting for the next part.
Thanks a lot

• Thanks the good tutorial.
I am always looking for that

• Martin Kavanagh

Thank you for your always clear instructions.
This is very helpful for us beginners.

• clockwork87

Hi Emanuele,

I am having an issue.
It is throwing a typeError for the line oldX=pickedMonster.x;
even copying and pasting the scripting here did not fix this, which I assumed would.
Everything is named properly so I am at a lose.
Any info on this would be greatly appreciated as I would love to finish these tutorials.

• John

Hello,
I loved the tutorial and was hoping if you could make more board games like chess.
Thanks you!!