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!

Windows store app: Using createjs in a windows store app

As I’ve tried to use createjs before in a Windows 8 app but found the lack of documentation irritating and skipped it, I thought I’d give it a second try and write down a short tutorial on how to use it here.

To start off, go to http://code.createjs.com/ and download the All Libraries latest version to get all the libraries included:

Download the full library, who cares about size :)
Download the full library, who cares about size 🙂

Then create a new empty JavaScript project in Visual Studio 2012 (Express) like in the following picture:

Javascript, blank project
Javascript, blank project

You should now see your standard empty javascript project. In the solution explorer, go to the “js”-folder and add the latest version of jQuery (at least version 2 for Windows Store App development) and your createjs file. Also, create a new script where we’ll put our code. I called mine base.js. You should see something like this:

Our basic project structure
Our basic project structure

Open the default.html file and drag your jQuery file, createjs file and your base.js file into the head section and you should have a file that looks like this:

	<!DOCTYPE html>
	<html>
	<head>
		<meta charset="utf-8" />
		<title>CreateJsExample</title>

		<!-- WinJS references -->
		<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
		<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
		<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
		<script src="js/jQuery-2.0.3.js"></script>
		<script src="js/CreateJs_130514.js"></script>
		<script src="js/base.js"></script>

		<!-- CreateJsExample references -->
		<link href="/css/default.css" rel="stylesheet" />
		<script src="/js/default.js"></script>
	</head>
	<body>
		<canvas id="gameArea" width="800" height="600"></canvas>
	</body>
	</html>

Then open your base.js file and enter the following code:

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

var stage;
var square;

function start()
{
	stage = new createjs.Stage("gameArea");

	square = new createjs.Shape();
	square.graphics.beginFill("White");
	square.graphics.drawRect(0, 0, 50, 50);
	square.x = 100;
	square.y = 100;
	square.addEventListener("click", squareClick);

	stage.addChild(square);
	stage.update();
}

function squareClick()
{
	square.x += 5;
	square.y += 5;
	stage.update();
}

$(document).ready(function ()
{
	start();
});

Now, notice that I’ve made a reference to the createjs file at the first line so that I’ll get intellisense support. You can do this by dragging the file you want references to into your javascript file. Notice: the intellisense won’t work until after you added the file AND rebooted VS.

If you try the above program you will see a fairly pointless app that creates a white square which you can click on and it will move. But it shows you the basics of createjs usage.

The terrible app we've made
The terrible app we’ve made

If you want more you can read the next article on EeaslJs: http://maffelu.net/windows-store-app-create-a-basic-grid-game-using-easeljs/