这一讲我们来添加糖果的预制
游戏的玩法是随机从天下掉下糖果，玩家点击糖果，糖果消失，如果不小心让糖果掉落地下，游戏失败，所以我们要让糖果接收触摸事件。
1.在资源管理器里新建一个js脚本命名为Candy.js，在onload里面添加如下代码
this.node.on(cc.Node.EventType.TOUCH_START,function(event){
this.node.dispatchEvent( new cc.Event('candy_die', true) );
this.node.removeFromParent();
},this);
cc.Node.EventType.TOUCH_START对应 cocos2dx的TouchBegan，这里触发一个事件，交给Game.js去处理加分的逻辑
Game.js里面对应的接收事件的代码：
self.node.on('candy_die',function(event){
self.addScore(1);//加分数的函数
self._candiesCount--;
},self);
//游戏加分
addScore: function(score){
this._score+=score;
this.scoreLabel.string= this._score+ '';
}
2.下面制作糖果的预制（prefab）
拖动资源管理器里面的candy_1到canvas里面，然后在属性检查器点击 添加组件 选择脚本Candy.js，然后把Canvas中的这个candy_1拖回资源管理器，这样就生成了一个预制，然后就可以把Canvas中的这个candy_1删除了。其余几个糖果同样的步骤。
3.都做完后，我们来修改Game.js脚本，在properties里面增加
candies: {
default: ],
type: cc.Prefab
},
然后回到编辑器，点击Canvas就可以看到
如图把candy预制依顺序拖入即可。
现在修改脚本增加创建糖果的代码
//生产糖果
spawCandy: function(dt){
if(this._isLaunch == false) return;
if(this._candiesCount > 5) return;
this._delta+=dt;
if(this._delta<2) return;
this._delta= 0;
var candyLayer= this.candyLayer.node;
var winSize= candyLayer.getContentSize();
var candiesAmount= this.candies.length - 1;
var candy= cc.instantiate(this.candies);
candy.setPosition(this.newCandyPosition());
var self= this;
candy.runAction(cc.sequence(cc.moveBy(4,cc.p(0,-winSize.height-100)),
cc.removeSelf(true),
cc.callFunc(function(){self._candiesCount--;},this)));
candyLayer.addChild(candy);
this._candiesCount++;
},
update: function (dt) {
this.spawCandy(dt);
},
4.为游戏添加暂停功能
在Game.js里面添加一个函数
onPause: function(){
if(cc.director.isPaused()){
cc.director.resume();
this.pauseLabel.node.active=false;
}
else{
cc.director.pause();
this.pauseLabel.node.active=true;
}
},
回到编辑器选中暂停按钮，在属性检查器面板，component选择Game，handler选择onPause
下面贴出Game.js全部代码
cc.Class({
extends: cc.Component,
//游戏分数
_score: 0,
//生命
_life: 0,
//
_candiesCount: 0,
_isLaunch: false,
_delta: 0,
properties: {
pauseLabel: {
default: null,
type: cc.Label
},
scoreLabel: {
default: null,
type: cc.Label
},
candyLayer: {
default: null,
type: cc.Layout
},
gameOverLayer: {
default: null,
type: cc.Layout
},
candies: {
default: ],
type: cc.Prefab
},
maxLife: 5
},
onPause: function(){
if(cc.director.isPaused()){
cc.director.resume();
this.pauseLabel.node.active=false;
}
else{
cc.director.pause();
this.pauseLabel.node.active=true;
}
},
// use this for initialization
onLoad: function () {
//延迟2秒开始游戏
var self= this;
self.scheduleOnce(function(){
self.initGame();
},2);
self.node.on('candy_die',function(event){
self.addScore(1);
self._candiesCount--;
},self);
},
//初始化游戏
initGame: function () {
//初始化玩家生命
this._life= this.maxLife;
//初始化得分
this._score= 0;
this._isLaunch= true;
},
//游戏加分
addScore: function(score){
this._score+=score;
this.scoreLabel.string= this._score+ '';
},
//生产糖果
spawCandy: function(dt){
if(this._isLaunch == false) return;
if(this._candiesCount > 5) return;
this._delta+=dt;
if(this._delta<2) return;
this._delta= 0;
var candyLayer= this.candyLayer.node;
var winSize= candyLayer.getContentSize();
var candiesAmount= this.candies.length - 1;
var candy= cc.instantiate(this.candies);
candy.setPosition(this.newCandyPosition());
var self= this;
candy.runAction(cc.sequence(cc.moveBy(4,cc.p(0,-winSize.height-100)),
cc.removeSelf(true),
cc.callFunc(function(){self._candiesCount--;},self),
cc.callFunc(function(){self.gameOver();},self)
));
candyLayer.addChild(candy);
this._candiesCount++;
},
//
newCandyPosition: function(){
var winSize= this.candyLayer.node.getContentSize();
var x= winSize.width*cc.random0To1();
var y= winSize.height+ 100;
return cc.p(x,y);
},
gameOver: function(){
this._isLaunch= false;
this.gameOverLayer.node.active= true;
this.candyLayer.node.removeAllChildren();
},
// called every frame, uncomment this function to activate update callback
update: function (dt) {
this.spawCandy(dt);
},
});
整个工程见附件
-----------------------------------------------------------QQ交流群166029496--------------------------------------------------------------------
