Windows store app: Create a basic grid game using easeljs

I just wrote an article about how to use createjs in a windows store app. I thought I follow up on that article by showing how to make a basic grid-based game for Windows 8. The end result will look something like this:

The rather horrid end result
The rather horrid end result

We will use the base that we created in the previous article and just change it a bit. In the original we just created one square and added a click-handle. We will now do the following:

  • Add a 10×10 grid of squares
  • Add an event handler to each square to handle the click event
  • Let the user swap squares by clicking on one square and the clicking on another to swap it with

Basically we’ll only change the base.js file from the original article in to this:

/// <reference path="createjs/CreateJs_130514.js" />

var stage;
var colors = ["Red", "Green", "Blue"];
var selected = null;
var squares = [];

/**
 *	Returns a random number between 0-2
 */
function getRandomNumber()
{
	return Math.floor(Math.random() * 3);
}

/**
 *	Generates a 10x10 grid with randomly colored rectangles.
 */
function generateGrid()
{
	var square;
	for (var x = 0; x < 10; x++)
	{
		for (var y = 0; y < 10; y++)
		{
			var color = colors[getRandomNumber()];
			square = new createjs.Shape();
			square.graphics.beginFill(color);
			square.graphics.drawRect(0, 0, 50, 50);
			square.x = x * 50;
			square.y = y * 50;
			square.addEventListener("click", squareClick);
			stage.addChild(square);

			var id = square.x + "_" + square.y;
			squares[id] = square;
		}
	}
	stage.update();
}

function removeFromArray(x, y)
{
	var index = $.inArray(x + "_" + y, squares);
	squares.splice(index, 1);
}

/**
 *	An event handler for when the user clicks on a square
 */
function squareClick(e)
{
	if (selected == null)			//First click
	{
		selected =
		{
			x: e.target.x,
			y: e.target.y
		};

		var current = squares[e.target.x + "_" + e.target.y];
		current.alpha = 0.5;		//Set the opacity to 0.5 giving the user visual confirmation that he/she clicked it
	}
	else							//Second click
	{
		var originalIndex = selected.x + "_" + selected.y;
		var original = squares[originalIndex];
		removeFromArray(original.x, original.y);

		var currentIndex = e.target.x + "_" + e.target.y;
		var current = squares[currentIndex];
		removeFromArray(current.x, current.y);

		var tempX = original.x;
		var tempY = original.y;

		original.x = current.x;
		original.y = current.y;
		original.alpha = 1;			//Reset "selected opacity"
		squares[currentIndex] = original;

		current.x = tempX;
		current.y = tempY;
		squares[originalIndex] = current;

		selected = null;
	}

	stage.update();
}

$(document).ready(function ()
{
	stage = new createjs.Stage("gameArea");
	generateGrid();
});

I think most of the code should be fairly easy to tackle, It’s just in the click handler that there is any logic to speak of really. What we do is that we save the coordinates of the square we’ve clicked if it’s a “first click” and if it’s a “second click” we use the saved coordinates from the first click and we swap places.
To do all this we’ve saved all our squares in an array called squares so that we can keep a track of them. To avoid having to loop through that array all the time to find our squares we used the coordinates as an index (with an underline as a separator).
We then just change square coordinates and update the stage and we’re set. That’s how easy it is!