游戏源代码下载
运行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, 3 , 3, 1, 1, 1, 7, 4, 4, 7, 7, 6, 7, 1, 7, 1, 3, 7 , 3 , 6, 5, 6, 1 , 5 , 3, 3];
2 初始化表格，本来先创建4曲谱数组长度的表格，但为了优化，先创建45表格，使用时候再不断新建增加表格；
//tables this.tables = new Array(this.pianoLengthIndex); for (var j = 0; j < this.pianoLength; j++) { var sprites = new Array(4); var random = getRandom(4); for (var i = 0; i < 4; i++) { sprites[i] = this.newBlock(i, j, random); } this.tables[j] = sprites; }
3 创建单个表格元素，可根据colortype在一行里确定一个黑色元素
MainLayer.prototype.newBlock = function (i, j, colorType) { //simple block var block = 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)); var color = "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); return block; };
4 触摸表格，如果是黑色；如果是当前一行的上一行才能继续；
this.gameStatus = OVER;
(this.blockNode.getPositionY() - this.blockHeight * heightNum))));
//touch black if (block.blockData.color == "black") { if (block.blockData.row == (this.moveNum + 1)) { //create new sprite if (this.pianoLength < this.pianoLengthIndex) { //not reach top this.moveAddNewSprites(); } if (this.pianoLength == this.pianoLengthIndex) { //when reach top this.createTopOverNode(); } //move down cc.AudioEngine.getInstance().playEffect(PIANO_SIMPLE[this.pianoListIndex[j - 1]], false); block.setColor(cc.c3b(100, 100, 100)); var heightNum = 1; if (block.blockData.row == (this.pianoLengthIndex - 1)) { //when last row ,game success end, move two height 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(); //create score node and move 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.scaleX * 4 / 5, this.scaleY * 4 / 5), cc.ScaleTo.create(0.2, this.scaleX, this.scaleY) )); this.scoreNode.bgColor.setColor(cc.c3b(255, 0, 0)); this.scoreNode.result.setString("失败了"); this.scoreNode.runAction(cc.MoveTo.create(0.2, cc.p(0, this.blockHeight * this.moveNum)));
6 创建添加新的一行
MainLayer.prototype.moveAddNewSprites = function () { cc.log("moveAddNewSprites"); var sprites = new Array(4); var random = getRandom(4); for (var k = 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 () { //top score node 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); //color bg var bgColor = 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, 255, 0)); this.scoreNode.addChild(bgColor); this.scoreNode.bgColor = bgColor; //mode var wordsMode = ["经典", "街机", "禅"]; var modeLabel = cc.LabelTTF.create(wordsMode[GAME_MODE] + "模式", "Arial", 70); this.scoreNode.addChild(modeLabel); modeLabel.setPosition(cc.p(350, 1000)); modeLabel.setColor(cc.c3b(0, 0, 0)); modeLabel.setAnchorPoint(cc.p(0.5, 0.5)); //result var resultLabel = cc.LabelTTF.create("成功了", "Arial", 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; //back var backLabel = cc.LabelTTF.create("返回", "Arial", 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, 0)); this.scoreNode.back = backLabel; //return var returnLabel = cc.LabelTTF.create("重来", "Arial", 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, 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.csdn.net/touchsnow/article/details/19070665；
CocosEditor官方博客：http://blog.makeapp.co/；
