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.

Download the source code

  • veeramani

    Thank u emanuele

    Thanks a lot

  • veeramani

    Awaiting for the next step…

  • Pingback: Step by step creation of Flash game Space Checkers – Emanuele Feronato « eaflash()

  • 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!!