溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
背景：
上一篇，已經(jīng)實現(xiàn)了水果不斷向上拋的效果和開始界面，這一篇我們將分析如何切水果，獲得分?jǐn)?shù)；運行demo需要配置好CocosEditor，暫不支持其他工具。demo是跨平臺的，可移植運行android，ios，html5網(wǎng)頁等，代碼是基于javascript語言，cocos2d-x游戲引擎，CocosEditor手游開發(fā)工具完成的。
源代碼下載：
請到代碼集中營下載(水果忍者 cocos2d-JS 源代碼)：http://blog.makeapp.co/?p=319
不同平臺下的效果圖：
windows
html5網(wǎng)頁
android平臺
代碼分析：
1 創(chuàng)建水果靜態(tài)數(shù)組，每一個水果都有四個參數(shù)，編號，分?jǐn)?shù)，本身的圖片，切除后的碎片；這里定義好了，下面直接用；
FRUIT_DATA = [
{
num: 0,
score: 1,
fruitImage: "apple.png",
cutImage: ["apple-1.png", "apple-2.png"]
},
{
num: 1,
score: 2,
fruitImage: "banana.png",
cutImage: ["banana-1.png", "banana-2.png"]
},
{
num: 2,
score: 2,
fruitImage: "basaha.png",
cutImage: ["basaha-1.png", "basaha-2.png"]
},
{
num: 3,
score: 3,
fruitImage: "peach.png",
cutImage: ["peach-1.png", "peach-2.png"]
},
{
num: 4,
score: 5,
fruitImage: "sandia.png",
cutImage: ["sandia-1.png", "sandia-2.png"]
},
{
num: 5,
score: 0,
fruitImage: "boom.png",
cutImage: "boomlight1.png"
}
];
2 檢測碰撞事件；
# 觸摸有onTouchBegan和onTouchMoved，這是兩個點，可以確定刀鋒的方向，上一節(jié)已講過；var flash = cc.MySprite.createFlash(this.rootNode, "flash.png", this.pBegin, loc);
# 首先檢查碰撞，水果和移動點發(fā)生碰撞cc.rectContainsPoint(fruit.getBoundingBox(), loc)
#如果碰撞，播放音效；playEffect；
#創(chuàng)建flash
#水果消失，并產(chǎn)生切成兩半 fruit slice
#根據(jù)水果的數(shù)據(jù)獲得分?jǐn)?shù)提示 scoretip
MainLayer.prototype.onTouchesMoved = function (touches, event)
{
if (this.gameStatus == OVER) {
return;
}
var loc = touches[0].getLocation();
for (var i = 0; i < this.fruitList.length; i++) {
var fruit = this.fruitList[i];
if (fruit && fruit.cleanuped == false) {
if (cc.rectContainsPoint(fruit.getBoundingBox(), loc)) {
//splatter audio
cc.AudioEngine.getInstance().playEffect(FRUIT_SOUNDS.splatter, false);
//flash
var flash = cc.MySprite.createFlash(this.rootNode, "flash.png", this.pBegin, loc);
//Fruit Slice
this.newSliceFruit(fruit.num, fruit.getPosition(), flash.getRotation());
fruit.runAction(cc.ScaleTo.create(0, 0));
fruit.cleanuped = true;
//scoreTip
var fruitScore = FRUIT_DATA[fruit.num].score;
this.scoreTip(fruit.getPosition(), fruitScore + "");
this.totalScore += Number(fruitScore);
this.totalScoreFont.setString(this.totalScore);
}
}
else {
this.fruitList.splice(i, 1);
}
}
};
3 水果切成兩半的方法
#三個參數(shù) 水果編號num，切除的位置fruitPosition ,旋轉(zhuǎn)角度rotation；
#從數(shù)組取出水果兩個碎片圖片，并創(chuàng)建兩個cut1 cut2精靈
#創(chuàng)建兩個cut的貝塞爾動作bezier1 bezier2，方向是相反的
#兩個cut 分別runAction（）；
#本來切除的瞬間有一個果汁濺在墻上的效果shadow，因為沒找到合適的圖片 代碼注釋掉了
MainLayer.prototype.newSliceFruit = function (num, fruitPosition, rotation)
{
//one fruit sliced two piece,cut1 and cut2
var data = FRUIT_DATA[num];
var cutImages = data.cutImage;
var cut1 = cc.MySprite.create(this.rootNode, cutImages[0], fruitPosition, 100);
var cut2 = cc.MySprite.create(this.rootNode, cutImages[1], fruitPosition, 100);
cut1.setRotation(rotation);
cut2.setRotation(rotation);
var controlPoints1 = [
fruitPosition,
fruitPosition,
cc.p(fruitPosition.x - 200, -100)
];
var bezier1 = cc.BezierTo.create(1, controlPoints1);
var controlPoints2 = [
fruitPosition,
fruitPosition,
cc.p(fruitPosition.x + 200, -100)
];
var bezier2 = cc.BezierTo.create(1, controlPoints2);
var action2 = cc.RotateBy.create(1, getRandom(360));
cut1.runAction(cc.Spawn.create(cc.Sequence.create(bezier1, cc.CleanUp.create(cut1)), action2));
cut2.runAction(cc.Spawn.create(cc.Sequence.create(bezier2, cc.CleanUp.create(cut2)), action2.clone()));
//fruit shadow
/*var shadowImages = ["shadow2.png"];
var colors = [cc.c4b(200, 0, 0, 20), cc.c4b(0, 200, 0, 20), cc.c4b(0, 0, 200, 20), cc.c4b(200, 200, 0, 20)];
var shadow = cc.MySprite.create(this.rootNode, shadowImages[getRandom(shadowImages.length)], fruitPosition, 10);
shadow.setColor(colors[getRandom(colors.length)]);
shadow.setScale(0.5);
shadow.runAction(cc.Sequence.create(cc.DelayTime.create(2), cc.CleanUp.create(shadow)));*/
};
4 提示分?jǐn)?shù)，這個很簡單，只是一個創(chuàng)建文字標(biāo)簽的方法
MainLayer.prototype.scoreTip = function (p, message)
{
var director = cc.Director.getInstance();
var size = director.getWinSize();
var label = cc.LabelTTF.create(message, "Arial", 30);
label.setPosition(cc.p(p.x, p.y + 50));
label.setColor(cc.c3b(0, 255, 0));
label.setZOrder(10000);
this.rootNode.addChild(label);
label.runAction(cc.Sequence.create(cc.DelayTime.create(0.8), cc.CleanUp.create(label)));
return label;
};
這一篇就到這里；
CocosEditor開發(fā)工具：
CocosEditor，它是開發(fā)跨平臺的手機游戲工具，運行window/mac系統(tǒng)上，javascript腳本語言，基于cocos2d-x跨平臺游戲引擎, 集合代碼編輯，場景設(shè)計，動畫制作，字體設(shè)計，還有粒子，物理系統(tǒng)，地圖等等的，而且調(diào)試方便，和實時模擬；
CocosEditor 下載，介紹和教程：http://blog.csdn.net/touchsnow/article/details/19070665；
CocosEditor官方博客：http://blog.makeapp.co/；
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
