从零开始，使用Cocos2d HTML5完成一个游戏——第三步：连环反应

欢迎来到课程的第三部分。在第一部分
（译文）中我像您展示了如何安装Cocos2D
HTML5 还有让一些东西移动，在第二部分
（译文）中我增加了一些鼠标交互，现在是时候给圆环做一个应激反应，这也是本游戏的特色。

同样的，我们只需要在circlechain.js中做一点改动，主要是在handleBullet 函数中控制子弹的移动和碰撞的地方。

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);

}

}

}

复制代码

下面是结果： 【演示在原网页中查看】

用鼠标移动红色圆环点击鼠标让圆环碰撞。

此时引擎已经完整了，期待下一步的完整游戏。

原文链接：http://www.emanueleferonato.com/2013/05/28/from-zero-to-a-complete-game-with-cocos2d-html5-step-3-chain-reaction/