Emanuele Feronato

Talking about Circle Chain game, Game development, HTML5 and Javascript.

Welcome to the 3rd part of the tutorial. In the 1st part I showed you how to install Cocos2D HTML5 and make it work with some stuff moving, in step 2 I added mouse interaction and now it’s time to create the chain reaction which is the main feature of the game.

Again, you only have to make small changes to circlechain.js file, the main change is handleBullet function which handles bullets movement and collision.

var circlechain = cc.Scene.extend({
	onEnter:function(){
		this._super();
		var layer = new circleChainGame();
		layer.init();
		this.addChild(layer);
	}
})

var redCircle;
var gameLayer;
var bulletSpeed=5;
var greenCircleArray=new Array();

var circleChainGame = cc.Layer.extend({
	init:function(){
		this._super();
		this.setMouseEnabled(true);
		var circleSpeed = 2;
		var s = cc.Director.getInstance().getWinSize();
		gameLayer = cc.LayerColor.create(new cc.Color4B(0, 0, 0, 255), 500, 500)
		for(i=0;i<10;i++){
			var greenCircle = cc.Sprite.create("greencircle.png");
			greenCircleArray.push(greenCircle);
			var randomDir = Math.random()*2*Math.PI;
			greenCircle.xSpeed=circleSpeed*Math.cos(randomDir);
			greenCircle.ySpeed=circleSpeed*Math.sin(randomDir);
			gameLayer.addChild(greenCircle);
			greenCircle.setPosition(new cc.Point(Math.random()*500,Math.random()*500));
			greenCircle.schedule(function(){
     			this.setPosition(new cc.Point(this.getPosition().x+this.xSpeed,this.getPosition().y+this.ySpeed));
     			if(this.getPosition().x>500){
					this.setPosition(new cc.Point(this.getPosition().x-500,this.getPosition().y));
				}
				if(this.getPosition().x<0){
					this.setPosition(new cc.Point(this.getPosition().x+500,this.getPosition().y));
				}
				if(this.getPosition().y>500){
					this.setPosition(new cc.Point(this.getPosition().x ,this.getPosition().y-500));
				}
				if(this.getPosition().y<0){
					this.setPosition(new cc.Point(this.getPosition().x ,this.getPosition().y+500));
				}
			})
		}
		redCircle=cc.Sprite.create("redcircle.png");		
		gameLayer.addChild(redCircle);
     	this.addChild(gameLayer);
		return true;
	},
	onMouseDown:function (event) {
		var location = event.getLocation();
		gameLayer.removeChild(redCircle);
		for(i=0;i<4;i++){
			var redBullet = cc.Sprite.create("redbullet.png");
			redBullet.xSpeed=bulletSpeed*Math.cos(i*Math.PI/2);
			redBullet.ySpeed=bulletSpeed*Math.sin(i*Math.PI/2);
			gameLayer.addChild(redBullet);	
			redBullet.setPosition(location);
			redBullet.schedule(function(){
     			handleBullet(this);		
			})
		}
	},
	onMouseMoved:function(event){
		var location = event.getLocation();
		redCircle.setPosition(location);
	}
})

function handleBullet(bullet){
	bullet.setPosition(new cc.Point(bullet.getPosition().x+bullet.xSpeed,bullet.getPosition().y+bullet.ySpeed));
	if(bullet.getPosition().x>500 || bullet.getPosition().y>500 || bullet.getPosition().x<0 || bullet.getPosition().y<0){
		gameLayer.removeChild(bullet);
	}
	for(i=greenCircleArray.length-1;i>=0;i--){
		var distX=bullet.getPosition().x-greenCircleArray[i].getPosition().x;
		var distY=bullet.getPosition().y-greenCircleArray[i].getPosition().y;
		if(distX*distX+distY*distY<144){
			gameLayer.removeChild(bullet);
			for(j=0;j<4;j++){
				var greenBullet = cc.Sprite.create("greenbullet.png");
				greenBullet.xSpeed=bulletSpeed*Math.cos(j*Math.PI/2);
				greenBullet.ySpeed=bulletSpeed*Math.sin(j*Math.PI/2);
				gameLayer.addChild(greenBullet);	
				greenBullet.setPosition(new cc.Point(greenCircleArray[i].getPosition().x,greenCircleArray[i].getPosition().y));
				greenBullet.schedule(function(){
					handleBullet(this);	
				})	
			}
			gameLayer.removeChild(greenCircleArray[i]);
			greenCircleArray.splice(i,1);
		}
	}
}

And this is the result:

Move the red circle with the mouse and click to start the chain reaction.

At this time the main engine is complete, so expect the full game in the next step.