从零开始，使用Cocos2d HTML5完成一个游戏——第三步：连环反应_cocos2d html5做一个简单的跑酷游戏-CSDN博客

欢迎来到课程的第三部分。在第一部分（译文）中我像您展示了如何安装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);
}
}
}