AppStore和Android市場情況
莫名其妙爆紅的遊戲
真的莫名其妙,筆者下這個遊戲兩次,第一次在豌豆莢排行榜看到這款遊戲,名字怪怪的,下載下來嘗試一下,沒覺得有什麼新穎的,還在思慮這是不是刷榜刷上去的,果斷卸載了;週末的時候逛逛app store,突然看到排行榜首位是Dont Tap The White Tile(後更名panio tiles ),翻譯一下不就是別踩到白塊兒,筆者震驚了,太莫名其妙了,這東西是真的火,不是刷榜刷出來的!遊戲玩家們心理真的難以捉摸,又捧紅了一款遊戲;
近期爆紅的遊戲
從flappy bird 到2048 再到 Dont Tap The White Tile,都是短平快的遊戲,都是獨立開發者做的,看來個人開發者還是有機會在遊戲紅海中獲得一杯羹滴;同時筆者的博文系列也經歷這三個遊戲;
Don't Tap The White Tile遊戲源代碼解密和下載
跟風的筆者
筆者也是隨波逐流,什麼遊戲火,就開源什麼遊戲代碼,當然這不是一件壞事!於己於人都是受益的,各位童鞋多多支持呀。本系列總共三篇,代碼未全部完成,這一篇完成了遊戲的經典模式;
遊戲源代碼下載
運行demo需要配置好CocosEditor,暫不支持其他工具。demo是跨平臺的,可移植運行android,ios,html5網頁等,代碼是基於javascript語言,cocos2d-x遊戲引擎,CocosEditor手遊開發工具完成的。
github下載:https://github.com/makeapp/cocoseditor-piano (近期網絡整頓 網盤都不給放 如果github進不去 請到qq羣文件下載)
不同平臺下的效果圖:
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*曲譜數組長度的表格,但爲了優化,先創建4*5表格,使用時候再不斷新建增加表格;
//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 觸摸表格,如果是黑色;如果是當前一行的上一行才能繼續;
#如果沒到頂,創建新的一行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;
//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();
#改變分數節點的顏色背景,結果失敗;
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)));
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;
};
這是經典模式的核心代碼,這一篇就到這裏;
CocosEditor開發工具:
CocosEditor,它是開發跨平臺的手機遊戲工具,運行window/mac系統上,javascript腳本語言,基於cocos2d-x跨平臺遊戲引擎, 集合代碼編輯,場景設計,動畫製作,字體設計,還有粒子,物理系統,地圖等等的,而且調試方便,和實時模擬;
CocosEditor 下載,介紹和教程:http://blog.csdn.net/touchsnow/article/details/19070665;
CocosEditor官方博客:http://blog.makeapp.co/;
筆者語:
想了解更多請進入官方博客,最新博客和代碼在官方博客首發;請持續關注,還有更多CocosEditor遊戲源碼即將放出;
聯繫筆者:[email protected](郵箱) qq羣:232361142