游戏源代码下载 运行demo需要配置好CocosEditor,暂
不支持其他工具。demo是跨平台的,可移植运行android,ios,html5网页等,
代码是基于javascript语言,cocos2d-x游戏引擎,CocosEditor手游开发工具完成的。 github下载:
https://github.com/makeapp/cocoseditor-piano
不同平台下的效果图: windows平台
html5平台
android平台
代码分析:(只挑选核心主代码分析,更多细节自行研究源码) 1 创建曲谱数组 do、re、mi、fa,sol、la、duo
CITY_OF_SKY=[
4,3,4,1,7,6,5,3];
2 初始化表格,本来先创建4*曲谱数组长度的表格,但为了优化,先创建4*5表格,使用时候再不断新建
增加表格;
this.tables=newArray(this.pianoLengthIndex);
for(varj=0;j<this.pianoLength;j++){
varsprites=newArray(4);
varrandom=getRandom(4);
for(vari=0;i<4;i++){
sprites[i]=this.newBlock(i,j,random);
}
this.tables[j]=sprites;
}
3 创建单个表格元素,可根据colortype在一行里确定一个黑色元素
MainLayer.prototype.newBlock=function(i,colorType){
varblock=cc.Sprite.create("res/whiteBlock.png");
block.setPosition(cc.p(this.blockWidth/2+this.blockWidth*i,this.blockHeight/2+this.blockHeight*j));
block.setScaleX(this.scaleX);
block.setScaleY(this.scaleY);
block.setZOrder(100);
block.setAnchorPoint(cc.p(0.5,0.5));
varcolor="white";
if(j==0){
block.setColor(cc.c3b(0,255,0));
}else{
if(i==colorType){
block.setColor(cc.c3b(30,30,30));
color="black";
}
}
block.blockData={col:i,row:j,color:color};
this.blockNode.addChild(block);
returnblock;
};
4 触摸表格,如果是黑色;如果是当前一行的上一行才能继续; #如果没到顶,创建新的一行moveAddNewSprites,如果到顶了,创建分数结束节点createTopOverNode; #如果整个表格移动到顶if (block.blockData.row == (this.pianoLengthIndex - 1)),游戏结束this.gameStatus = OVER; #如果没到顶,整个表格往下移一行this.blockNode.runAction(cc.MoveTo.create(0.2,cc.p(0,(this.blockNode.getPositionY() - this.blockHeight * heightNum)))); #单个元素运行一个缩放动画,移动步数+1;this.moveNum += 1;
if(block.blockData.color=="black"){
if(block.blockData.row==(this.moveNum+1)){
if(this.pianoLength<this.pianoLengthIndex){
this.moveAddNewSprites();
}
if(this.pianoLength==this.pianoLengthIndex){
this.createTopOverNode();
}
cc.AudioEngine.getInstance().playEffect(PIANO_SIMPLE[this.pianoListIndex[j-1]],false);
block.setColor(cc.c3b(100,100,100));
varheightNum=1;
if(block.blockData.row==(this.pianoLengthIndex-1)){
heightNum=2;
cc.log("end");
this.gameStatus=OVER;
cc.AudioEngine.getInstance().playEffect(SOUNDS.win,false);
}
this.blockNode.runAction(cc.MoveTo.create(0.2,cc.p(0,(this.blockNode.getPositionY()-this.blockHeight*heightNum))));
this.moveNum+=1;
block.runAction(cc.Sequence.create(
cc.ScaleTo.create(0,this.scaleX*4/5,this.scaleY),cc.ScaleTo.create(0.2,this.scaleX,this.scaleY)
));
}
}
5触摸表格,如果是白色,游戏结束; #创建分数结束节点this.createTopOverNode(); #改变分数节点的颜色背景,结果失败;
this.createTopOverNode();
this.gameStatus=OVER;
cc.AudioEngine.getInstance().playEffect(SOUNDS.error,false);
block.setColor(cc.c3b(255,0,0));
block.runAction(cc.Sequence.create(
cc.ScaleTo.create(0,this.scaleY*4/5),this.scaleY)
));
this.scoreNode.bgColor.setColor(cc.c3b(255,0));
this.scoreNode.result.setString("失败了");
this.scoreNode.runAction(cc.MoveTo.create(0.2,this.blockHeight*this.moveNum)));
6 创建
添加新的一行
MainLayer.prototype.moveAddNewSprites=function(){
cc.log("moveAddNewSprites");
varsprites=newArray(4);
varrandom=getRandom(4);
for(vark=0;k<4;k++){
sprites[k]=this.newBlock(k,this.pianoLength,random);
}
this.tables[this.pianoLength]=sprites;
this.pianoLength+=1;
};
7 分数结束节点创建
函数
MainLayer.prototype.createTopOverNode=function(){
this.scoreNode=cc.Node.create();
this.scoreNode.setPosition(cc.p(0,this.blockHeight*this.pianoLength));
this.scoreNode.setAnchorPoint(cc.p(0,0));
this.scoreNode.setZOrder(130);
this.blockNode.addChild(this.scoreNode);
varbgColor=cc.Sprite.create("res/whiteBlock.png");
bgColor.setPosition(cc.p(0,0));
bgColor.setScaleX(720/300);
bgColor.setScaleY(1280/500);
bgColor.setAnchorPoint(cc.p(0,0));
bgColor.setColor(cc.c3b(0,0));
this.scoreNode.addChild(bgColor);
this.scoreNode.bgColor=bgColor;
varwordsMode=["经典","街机","禅"];
varmodeLabel=cc.LabelTTF.create(wordsMode[GAME_MODE]+"模式","Arial",70);
this.scoreNode.addChild(modeLabel);
modeLabel.setPosition(cc.p(350,1000));
modeLabel.setColor(cc.c3b(0,0));
modeLabel.setAnchorPoint(cc.p(0.5,0.5));
varresultLabel=cc.LabelTTF.create("成功了",110);
this.scoreNode.addChild(resultLabel);
resultLabel.setPosition(cc.p(360,750));
resultLabel.setAnchorPoint(cc.p(0.5,0.5));
resultLabel.setColor(cc.c3b(139,58,58));
this.scoreNode.result=resultLabel;
varbackLabel=cc.LabelTTF.create("返回",50);
this.scoreNode.addChild(backLabel);
backLabel.setPosition(cc.p(200,400));
backLabel.setAnchorPoint(cc.p(0.5,0.5));
backLabel.setColor(cc.c3b(0,0));
this.scoreNode.back=backLabel;
varreturnLabel=cc.LabelTTF.create("重来",50);
this.scoreNode.addChild(returnLabel);
returnLabel.setPosition(cc.p(500,400));
returnLabel.setAnchorPoint(cc.p(0.5,0.5));
returnLabel.setColor(cc.c3b(0,0));
this.scoreNode.return=returnLabel;
};
这是经典模式的核心
代码,这一篇就到这里;
cocos2d-x跨平台游戏引擎 cocos2d-x是全球知名的游戏引擎 ,引擎在全球范围内拥有众多开发者,涵盖国内外各知名游戏开发商。目前Cocos2d-x引擎已经实现横跨ios、Android、Bada、MeeGo、BlackBerry、Marmalade、Windows、Linux等平台。编写一次,到处运行,分为两个版本 cocos2d-c++和cocos2d-js本文使用了后者; cocos2d-x 官网:
http://cocos2d-x.org/ cocos2d-x 资料下载
http://cocos2d-x.org/download
CocosEditor开发工具: CocosEditor,它是开发跨平台的手机游戏工具,运行window/mac系统上,javascript脚本语言,基于cocos2d-x跨平台游戏引擎,集合
代码编辑,场景设计,动画制作,字体设计,还有粒子,物理系统,地图等等的,而且调试方便,和实时模拟; CocosEditor官方
博客:
http://blog.makeapp.co/;