Emanuele Feronato

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

Welcome to the second step of the complete game creation with Cocos2D HTML5. This time we are going to add mouse interaction.

In the original Circle Chain game you move a red circle with the mouse. With a mouse click you will destroy the circle which will split into four bullets flying up, down, left and right.

This is what we are going to do with today’s step. Starting from step 1, you only have to make some changes to circlechain.js file:

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 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");
			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(){
     			this.setPosition(new cc.Point(this.getPosition().x+this.xSpeed,this.getPosition().y+this.ySpeed));
				if(this.getPosition().x>500 || this.getPosition().y>500 || this.getPosition().x<0 || this.getPosition().y<0){
					gameLayer.removeChild(this);
				}
			})
		}
	},
	onMouseMoved:function(event){
		var location = event.getLocation();
		redCircle.setPosition(location);
	}
})

And this is what you’ll get:

Move the red circle with the mouse and click on the stage to make it explode.

Next time, I’ll show you the complete level with the chain reaction and I’ll fully comment the code.