游戏设计说明
最终效果图
设计思想
整体结构
1.游戏主要分为StartScene和GameScene两个场景，StartScene只有一个开始按钮，不做过多解释。
2.GameScene又分GameLayer和ResultLayer，这里的分数直接写在GameLayer中了，稍复杂的游戏一般会再开一个StatusLayer
主要的cocos2dx-js API
Action: rotate,move,animate
Node:Sprite,Scene,Layer,LabelTTF
代码
GameScne.js
/**
* Created by ccy on 2015/7/12.
*/
var GameLayer = cc.Layer.extend({
//parameter
moveDistance:-10,moveTime:0.7,bk:null,//footstep
footstep1:null,footstep2:null,footstepHeight:300,//status
isTouch:false,isPlayingAniamtion:false,// bridge
bridgeScaleY:1.0,bridgeAddScalePercent:0.3,bridgeSprite:null,//role
role:null,roleAnimate:null,//score
score:0,scoreLabel:null,ctor:function() {
this._super();
GameModel.getInstance().setGameLayer(this);
this.bk = new cc.Sprite(res.bk1);
this.addChild((this.bk));
this.schedule(this.addSnow,1);
this.schedule(this.addLeng,0.03);
// add touch callback
var touchListener = cc.EventListener.create({
event:cc.EventListener.TOUCH_ONE_BY_ONE,swallowTouches:false,onTouchBegan:function(touch,event){
var pos = touch.getLocation();
var target = event.getCurrentTarget();
if (target.isPlayingAniamtion){
return false;
}
target.isTouch = true;
target.bridgeLeng = 0;
return true;
},onTouchMoved:function(touch,event){
},onTouchEnded:function(touch,event){
var target = event.getCurrentTarget();
target.isTouch = false;
var rotate = cc.rotateBy(1.0,90);
var callback = cc.callFunc(function(){
target.move();
});
var seq = cc.sequence(rotate,callback);
target.bridgeSprite.runAction(seq);
target.isPlayingAniamtion = true;
}
});
cc.eventManager.addListener(touchListener,this);
this.bridgeSprite = new cc.Sprite(res.bridge);
this.addChild(this.bridgeSprite,11);
this.role = new cc.Sprite(res.bird_0);
var animation = new cc.Animation();
animation.addSpriteFrameWithFile(res.bird_0);
animation.addSpriteFrameWithFile(res.bird_1);
animation.setDelayPerUnit(2.8 / 14);
animation.setRestoreOriginalFrame(true);
animation.setLoops(100000);
this.animate = cc.animate(animation);
this.addChild(this.role,1100);
this.scoreLabel = new cc.LabelTTF("score:"+this.score,"Arial",40);
var tip = new cc.LabelTTF("come on !!",60);
tip.attr({
x:cc.winSize.width/2,y:cc.winSize.height/8*6,});
this.addChild(tip);
this.addChild(this.scoreLabel);
this.reset();
},move:function(){
var deltaPositionX = this.footstep2.getPosition().x-this.footstep1.getPosition().x;
var roleMoveDistance1 = deltaPositionX + (this.getRealWidth(this.footstep2)-this.getRealWidth(this.footstep1));
var roleMoveDistance2 = this.getRealHeight(this.bridgeSprite) ;
var callbackSuccess = cc.callFunc(function(selectTarget){
selectTarget.getParent().role.stopAllActions();
var moveAction = cc.moveBy(selectTarget.getParent().moveTime,selectTarget.getParent().moveDistance,0);
selectTarget.getParent().bk.runAction(moveAction);
var allMove = cc.moveBy(0.4,-deltaPositionX,0);
var callbackReset = cc.callFunc(function(){
selectTarget.getParent().resetLittle();
});
selectTarget.getParent().footstep1.runAction(allMove);
selectTarget.getParent().footstep2.runAction(allMove.clone());
selectTarget.getParent().role.runAction(cc.sequence(allMove.clone(),callbackReset));
selectTarget.getParent().bridgeSprite.runAction(allMove.clone());
selectTarget.getParent().score++;
},this.role);
var callbackFailed = cc.callFunc(function(selectTarget){
selectTarget.getParent().role.stopAllActions();
var callback = cc.callFunc(function(){
selectTarget.getParent().getParent().addChild(new ResultLayer());
});
var move1 = cc.moveBy(1.0,150,0);
var move2 = cc.moveBy(1.0,-400).easing(cc.easeIn(1.0));
selectTarget.runAction(move1);
selectTarget.getParent().role.runAction(move2.clone());
var rotate = cc.rotateBy(1.0,120).easing(cc.easeIn(3.0));
selectTarget.getParent().bridgeSprite.runAction(move2);
selectTarget.getParent().bridgeSprite.runAction(cc.sequence(rotate,callback));
},this.role);
var bridgeMinDistance = this.footstep2.getPositionX()-this.footstep1.getPositionX()-
this.getRealWidth(this.footstep1);
var bridgeMaxDistance = bridgeMinDistance + this.getRealWidth(this.footstep2);
if(roleMoveDistance2 > bridgeMaxDistance || roleMoveDistance2 < bridgeMinDistance){
var roleMoveAction = cc.moveBy(this.moveTime,roleMoveDistance2,0);
this.role.runAction(cc.sequence( roleMoveAction,callbackFailed));
this.role.runAction(this.animate.clone());
}
else{
var roleMoveAction = cc.moveBy(this.moveTime,roleMoveDistance1,callbackSuccess));
this.role.runAction(this.animate.clone());
}
},addLeng:function(){
if(this.isTouch && this.isPlayingAniamtion == false){
this.bridgeScaleY += this.bridgeAddScalePercent;
this.bridgeSprite.setScaleY(this.bridgeScaleY);
}
},reset:function(){
var size = cc.winSize;
this.bk.attr({
x: 0,y: 0,anchorX: 0.0,anchorY: 0.0,});
var bkSize = this.bk.getContentSize();
this.bk.setScale(size.height/bkSize.height);
if(this.footstep1 != null){
this.footstep1.removeFromParent(true);
this.footstep1 = null;
}
if (this.footstep2 != null){
this.footstep2.removeFromParent(true);
this.footstep2 = null;
}
this.scoreLabel.attr({
x:0,y:size.height,anchorX:0,anchorY:1.0,})
this.score = 0;
this.resetLittle();
var x = this.getRealWidth(this.footstep1) - this.getRealWidth(this.bridgeSprite);
this.role.attr({
x:x,y:this.footstepHeight,anchorX:1.0,anchorY:0
});
},resetLittle:function(){
if(this.footstep1 != null) {
this.footstep1.removeFromParent(true);
};
this.footstep1 = this.footstep2;
this.footstep2 = null;
this.addFootStep();
//reset bridge
var y = this.footstepHeight - this.bridgeSprite.getContentSize().width;
var x = this.getRealWidth(this.footstep1);
this.bridgeSprite.attr({
x:x,y:y,anchorY:0,scale:1.0,});
this.bridgeSprite.setRotation(0);
this.bridgeScaleY = 1.0;
this.isPlayingAniamtion = false;
this.scoreLabel.setString("score:"+this.score);
GameModel.getInstance().setscore(this.score);
},addFootStep:function(){
//ad footstep2
var size = cc.winSize;
if (this.footstep1 == null){
// add footstep
this.footstep1 = new cc.Sprite(res.footstep);
this.footstep1.setColor(new cc.Color(125,56));
var stepSize = this.footstep1.getContentSize();
var bridgeScaleX1 = (cc.random0To1()*150+80)/stepSize.width;
var scaleY = this.footstepHeight/stepSize.height;
this.footstep1.setScale(bridgeScaleX1,scaleY);
this.footstep1.attr({
x:0,y:0,});
this.addChild(this.footstep1,100);
}
if (this.footstep2 != null){
this.footstep2.removeFromParent(true);
}
this.footstep2 = new cc.Sprite(res.footstep);
this.footstep2.setColor(new cc.Color(125,56));
var stepSize = this.footstep2.getContentSize();
var bridgeScaleX2 = (cc.random0To1()*150+80)/stepSize.width;
var scaleY = this.footstepHeight/stepSize.height;
this.footstep2.setScale(bridgeScaleX2,scaleY);
var x = cc.random0To1()*(size.width-this.getRealWidth(this.footstep1)-20-this.getRealWidth(this.footstep2)) +
this.getRealWidth(this.footstep1)+20;
this.footstep2.attr({
x:size.width,});
var footstepMove = cc.moveTo(0.3,x,0);
this.addChild(this.footstep2,100);
this.footstep2.runAction(footstepMove);
},getRealWidth:function(sprite){
var width = sprite.getContentSize().width;
var scaleX = sprite.getScaleX();
return width*scaleX;
},getRealHeight:function(sprite){
var height = sprite.getContentSize().height;
var scaleY = sprite.getScaleY();
return height*scaleY;
},addSnow:function(){
var apple = new cc.Sprite(res.snow);
var size = cc.winSize;
var x = cc.random0To1()*(size.width-apple.width)+apple.width/2;
var y = size.height + apple.height/2;
apple.attr({
x:x,scale:cc.random0To1()*0.6+0.2,});
apple.runAction(cc.sequence(
cc.moveBy(3.0,-(size.height+apple.height)),cc.callFunc(function(){
apple.removeFromParent(true);
cc.log("apple remove from parent");
})
));
this.addChild(apple);
var touchListener = cc.EventListener.create({
event:cc.EventListener.TOUCH_ONE_BY_ONE,event){
var pos = touch.getLocation();
var target = event.getCurrentTarget();
if (cc.rectContainsPoint(target.getBoundingBox(),pos)){
target.getParent().move();
target.removeFromParent(true);
cc.log("you click apple");
return ;
}
return false;
}
});
cc.eventManager.addListener(touchListener,apple);
}
});
var GameScene = cc.Scene.extend({
ctor:function(){
this._super();
var layer = new GameLayer();
this.addChild(layer);
}
});
代码分析
ctor
reset
resetLittle
每走一步都会调用，调整某些细节
addFootStep
添加台阶
addLeng
点击屏幕时，变长棍子
相关信息
从git上拷贝到完整的工程目录后，到根目录，用以下方式运行，工程只在浏览器里运行过
cocos run -p web
作者联系方式:810278677@qq.com
原文链接：https://www.f2er.com/cocos2dx/342156.html