Circe Chain engine made with CreateJS

October 26, 2012 • Game design, Html, Javascript by Emanuele Feronato • 3 Comments

When I celebrated the 1000th blog post, I told you I would have started to blog about HTML5 game development, and today I want to show you the classic Circle Chain engine made with CreateJS, a suite of Javascript libraries & tools for building rich, interactive experiences with HTML5.

Before I start with this tutorial, remember there’s an iPhone version of Circle Chain available for free in the App Store and I am going to release the Stencyl project for free once it reaches 1,000 downloads (415 to go).

Like all HTML5 projects, this Circle Chain prototype consist in an HTML part…

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="http://code.createjs.com/easeljs-0.4.2.min.js"></script>
		<script type="text/javascript" src="http://code.createjs.com/tweenjs-0.2.0.min.js"></script>
		<script type="text/javascript" src="http://code.createjs.com/soundjs-0.2.0.min.js"></script>
		<script type="text/javascript" src="http://code.createjs.com/preloadjs-0.1.0.min.js"></script>
		<script type="text/javascript" src="http://code.createjs.com/movieclip-0.4.1.min.js"></script>
		<script type="text/javascript" src="game.js"></script>
	</head>
	<body onload="play()" style = "margin:0px">
		<canvas id="canvas" width="500" height="500"></canvas>
	</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

</body>

</html>

and a javascript part, fully commented:

// CreateJS features a Javascript library that lets you manage and co-ordinate
// the loading of assets, so we are going to use it
var preloader;
// manifest array will store every asset we need to preload, just like the
// manifest of a real world ship. As you can see, I am defining each manifest
// item with its relative path and an unique id
var manifest=[
	{src:"images/background.png", id:"background"},
	{src:"images/greencircle.png", id:"greenCircle"}
];
// the stage, the king of every game. 
var stage
// I need an array to store all my green circles, circleBitmap will do it
var circleBitmap = new Array();
// play function is the executed once the page loads
function play(){
	// first, I construct the stage as a Stage instance on the canvas id
	stage = new Stage(document.getElementById("canvas"));
	// then it's time to create the preloader
	preloader = new PreloadJS();
	// loadManifest is the method required to preaload all assets
	preloader.loadManifest(manifest);
	// and onComplete is the event trigger which will call loaded function
	preloader.onComplete = loaded;	
}
// loaded function will place all sprites on the stage and initialize the game
function loaded(event){
	// this is a variable I'll be using to assign a random direction to each
	// green circle
	var randomDirection;
	// look how I am picking up graphic assets from the preloader
	var bgImg=preloader.getResult("background").result;
	// once the background is picked up, I assign it to a Bitmap variable
     var bgBitmap = new Bitmap(bgImg);
     // then it's added to stage with addChild, just like AS3
	stage.addChild(bgBitmap);
	// the same concept is applied to the green circle, 10 times
     var circleImg=preloader.getResult("greenCircle").result;
     for(i=0;i<10;i++){
     	circleBitmap[i]=new Bitmap(circleImg);
     	// look at x and y properties
		circleBitmap[i].x=Math.random()*450+25-9;
		circleBitmap[i].y=Math.random()*450+25-9;
		// choosing a random direction
		randomDirection=Math.random()*2*Math.PI;
		// and defining xSpeed and ySpeed as custom properties
		circleBitmap[i].xSpeed=2*Math.cos(randomDirection);
		circleBitmap[i].ySpeed=2*Math.sin(randomDirection);
		// finally adding green circles to stage
		stage.addChild(circleBitmap[i]);
	}
	// look how I am setting the game to be 30fps!! So easy!!
	Ticker.setFPS(30);
	// and this is something like AS3 enter frame event, calling gameLoop
	// function at every tick
	Ticker.addListener(gameLoop);
}
function gameLoop(){
	// this loop just updates green circles position
	for(i=0;i<10;i++){
		circleBitmap[i].x+=circleBitmap[i].xSpeed;
		circleBitmap[i].y+=circleBitmap[i].ySpeed;
		if(circleBitmap[i].x>500-9){
			circleBitmap[i].x-=500;
		}
		if(circleBitmap[i].x<0-9){
			circleBitmap[i].x+=500;
		}
		if(circleBitmap[i].y>500-9){
			circleBitmap[i].y-=500;
		}
		if(circleBitmap[i].y<0-9){
			circleBitmap[i].y+=500;
		}
	}
	// at the end don't forget to update the stage to show what's going on
	stage.update();
}

// CreateJS features a Javascript library that lets you manage and co-ordinate

// the loading of assets, so we are going to use it

var preloader;

// manifest array will store every asset we need to preload, just like the

// manifest of a real world ship. As you can see, I am defining each manifest

// item with its relative path and an unique id

var manifest=[

{src:"images/background.png", id:"background"},

{src:"images/greencircle.png", id:"greenCircle"}

];

// the stage, the king of every game.

var stage

// I need an array to store all my green circles, circleBitmap will do it

var circleBitmap = new Array();

// play function is the executed once the page loads

function play(){

// first, I construct the stage as a Stage instance on the canvas id

stage = new Stage(document.getElementById("canvas"));

// then it's time to create the preloader

preloader = new PreloadJS();

// loadManifest is the method required to preaload all assets

preloader.loadManifest(manifest);

// and onComplete is the event trigger which will call loaded function

preloader.onComplete = loaded;

}

// loaded function will place all sprites on the stage and initialize the game

function loaded(event){

// this is a variable I'll be using to assign a random direction to each

// green circle

var randomDirection;

// look how I am picking up graphic assets from the preloader

var bgImg=preloader.getResult("background").result;

// once the background is picked up, I assign it to a Bitmap variable

var bgBitmap = new Bitmap(bgImg);

// then it's added to stage with addChild, just like AS3

stage.addChild(bgBitmap);

// the same concept is applied to the green circle, 10 times

var circleImg=preloader.getResult("greenCircle").result;

for(i=0;i<10;i++){

circleBitmap[i]=new Bitmap(circleImg);

// look at x and y properties

circleBitmap[i].x=Math.random()*450+25-9;

circleBitmap[i].y=Math.random()*450+25-9;

// choosing a random direction

randomDirection=Math.random()*2*Math.PI;

// and defining xSpeed and ySpeed as custom properties

circleBitmap[i].xSpeed=2*Math.cos(randomDirection);

circleBitmap[i].ySpeed=2*Math.sin(randomDirection);

// finally adding green circles to stage

stage.addChild(circleBitmap[i]);

}

// look how I am setting the game to be 30fps!! So easy!!

Ticker.setFPS(30);

// and this is something like AS3 enter frame event, calling gameLoop

// function at every tick

Ticker.addListener(gameLoop);

}

function gameLoop(){

// this loop just updates green circles position

for(i=0;i<10;i++){

circleBitmap[i].x+=circleBitmap[i].xSpeed;

circleBitmap[i].y+=circleBitmap[i].ySpeed;

if(circleBitmap[i].x>500-9){

circleBitmap[i].x-=500;

}

if(circleBitmap[i].x<0-9){

circleBitmap[i].x+=500;

}

if(circleBitmap[i].y>500-9){

circleBitmap[i].y-=500;

}

if(circleBitmap[i].y<0-9){

circleBitmap[i].y+=500;

}

// at the end don't forget to update the stage to show what's going on

stage.update();

}

as you can see, it’s not that different than an AS3 script.

And this is the result:

Next time, I’ll show you the complete game.

Rate this post: 1 Star

(7 votes, average: 4.57 out of 5)

Loading ...

Template monster proudly presents HTML Templates in order to meet its customers\' demands.
These HTML Templates can be easily edited with any HTML editor including the simplest one - Notepad.
They include .html files which makes them available for HTML editing.

Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 3 comments

Grinya

on October 27, 2012 at 8:07 pm

Nice code. Will you plan to make new JS blog or you just mix it with Flash on this site?
veeramani

on October 30, 2012 at 8:50 am

i used the above JS code that is not running. i saw a blank canvas in the browser.
help me
????? ????

on November 7, 2012 at 8:15 am

The appropriate code
Grateful

Emanuele Feronato

italian geek and PROgrammer

Circe Chain engine made with CreateJS

This post has 3 comments

Grinya

veeramani

????? ????