Step by step creation of Flash game Space Checkers

Read all posts about "" game

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() {
		private function setupLevel():void{

Test the movie, and this is what you’ll see, in the output window:


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() {
		private function setupLevel():void {
			var squareContainer:Sprite=new Sprite();
			var monsterContainer:Sprite=new Sprite();
			var square:Square;
			var monster:Monster;
			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;
	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() {
		private function setupLevel():void {
			var squareContainer:Sprite=new Sprite();
			var square:Square;
			var monster:Monster;
			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.

Download the source code

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stairs
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers