前面我們實(shí)現(xiàn)了背景和主角的操作，下面我們開(kāi)始添加游戲的障礙物以及碰撞檢測(cè)的功能。
一、制作障礙物Prefab（預(yù)制）
Prefab（預(yù)制）是cocoscreator官方文檔提出的，是為了解決需要重復(fù)使用的節(jié)點(diǎn)問(wèn)題掉缺。
如何制作預(yù)制體prefab呢？具體可以參照官方文檔戈擒，這里簡(jiǎn)單的說(shuō)下眶明，就是在場(chǎng)景中編輯好節(jié)點(diǎn)后，直接將節(jié)點(diǎn)從?層級(jí)管理器?拖到?資源管理器 中即可筐高。
我們來(lái)看下極限跳躍的游戲截圖分析下搜囱。。
游戲中障礙物我們分為2種柑土，一個(gè)是向左移動(dòng)的蜀肘，一個(gè)是向右移動(dòng)的，這里我就簡(jiǎn)單省事了稽屏，直接創(chuàng)建了2個(gè)預(yù)制體扮宠，每個(gè)預(yù)制體實(shí)現(xiàn)自己的腳本『疲可以集成在一起的坛增。
我們先制作左邊的障礙物，首先把障礙物素材拖進(jìn)層級(jí)管理器取名zhangaiwu1荒叼。然后我們來(lái)實(shí)現(xiàn)并制作左邊的腳本轿偎，創(chuàng)建腳本guawuleft典鸡。實(shí)現(xiàn)代碼被廓。
01//guaiwuleft.js
02cc.Class({
03????extends:?cc.Component,
04????properties:?{
05
06????????times:?0,//控制時(shí)間
07
08????????},
09????},
10????onLoad:?function?()?{
11
12????????this.moveRight();
13????},
14//左右移動(dòng)
15????moveRight:?function(){
16
17????????var?seq?=?cc.repeatForever(
18?????????????cc.sequence(
19?????????????????cc.moveBy(this.times,?cc.p(240,?0)),?cc.moveBy(this.times,?cc.p(-240,0))
20?????????????));
21????????this.node.runAction(seq);
22????},
腳本寫好了，我們對(duì)節(jié)點(diǎn)進(jìn)行綁定萝玷。
綁定好后嫁乘，我們把層級(jí)管理器中的節(jié)點(diǎn)zhangaiwu1拖進(jìn)我們資源管理器的Texture文件夾中昆婿，成功后我們的層級(jí)管理器中的節(jié)點(diǎn)就會(huì)變成藍(lán)色，同時(shí)我們會(huì)在資源管理器中得到一個(gè)預(yù)制體文件zhangaiwu1蜓斧，我們這里改成zhangaiwuleft仓蛆，方便和辨認(rèn)。
預(yù)制體文件zhangaiwu1挎春，我們這里改成zhangaiwuleft看疙。然后刪除層級(jí)管理器的zhangaiwu1節(jié)點(diǎn)。使用同樣的方法直奋，我們創(chuàng)建腳本zhangaiwuright能庆，并制作預(yù)制體zhangaiwuright。
01//guawuright.js
02cc.Class({
03????extends:?cc.Component,
04????properties:?{
05
06????????times:?0,//控制時(shí)間
07
08????????},
09????},
10????onLoad:?function?()?{
11
12????????this.moveRight();
13????},
14????//左右移動(dòng)
15????moveRight:?function(){
16
17
18????????var?seq?=?cc.repeatForever(
19?????????????cc.sequence(
20?????????????????cc.moveBy(this.times,?cc.p(-240,?0)),?cc.moveBy(this.times,cc.p(240,0))
21?????????????));
22???????this.node.runAction(seq);
23????},
這樣我們就制作好了2個(gè)預(yù)制體脚线，分別為zhangaiwuleft和 zhangaiwuright搁胆。可以在資源管理器中看到邮绿。
制作好了2個(gè)障礙物渠旁，我們開(kāi)始在場(chǎng)景中添加我們的障礙物了。
分析下游戲我們可以發(fā)現(xiàn)障礙物是可以根據(jù)游戲背景移動(dòng)的船逮，所以我們要把障礙物添加到背景上顾腊。
我們開(kāi)始制作背景bg1的障礙物，首先把zhangaiwuleft和zhangaiwuright兩個(gè)預(yù)制體拖到層級(jí)管理器bg1節(jié)點(diǎn)傻唾，使其成為bg1的子節(jié)點(diǎn)投慈。布局時(shí)候把zhangaiwuleft放到屏幕左邊，zhangaiwuright放到右邊冠骄，調(diào)整位置伪煤。同樣的方法給bg2添加障礙物。凛辣。如圖：
通過(guò)我們給不同高度的障礙物設(shè)置不同的移動(dòng)時(shí)間抱既，我們的游戲看起來(lái)更好玩，來(lái)運(yùn)行測(cè)試下效果扁誓。
好了防泵。我們的游戲看起來(lái)還不錯(cuò)吧，下面我們來(lái)做碰撞檢測(cè)蝗敢，也就是說(shuō)如果玩家和障礙物碰到了捷泞，那么我們的角色就會(huì)死掉，游戲就會(huì)結(jié)束寿谴。結(jié)束場(chǎng)景等會(huì)我們?cè)谧鏊遥F(xiàn)在我們先做碰撞檢測(cè)，如果碰到障礙物我們停止觸摸來(lái)達(dá)到玩家不可操作的目的。
打開(kāi)guaiwuleft腳本咏瑟，來(lái)給左邊的障礙物添加碰撞檢測(cè)的事件拂到。
01//guaiwuleft.js
02var?hero2?=?require("HeroPlayer");//引用玩家的操作腳本
03//....省略..
04//當(dāng)前節(jié)點(diǎn)世界坐標(biāo)系下的范圍包圍盒
05?noteBox:?function(){
06
07????????returnthis.node.getBoundingBoxToWorld();
08
09????},??
10
11????//?called?every?frame,?uncomment?this?function?to?activate?update?callback
12????update:?function?(dt)?{
13
14????????var?_label?=?cc.find("Canvas/hero").getComponent(hero2);
15
16??????//障礙物碰撞框
17????if(cc.rectIntersectsRect(_label.node.getBoundingBoxToWorld(),?this.noteBox())){
18
19???????????cc.eventManager.removeAllListeners();//移除所有事件監(jiān)聽(tīng)
20
21????????????}
22
23????},
同樣的方法，我們?cè)趃uaiwuright中添加碰撞事件码泞。天下代碼一大抄兄旬，直接抄過(guò)去就行了。
我們?cè)诖诉\(yùn)行檢測(cè)下余寥。领铐。
我們的角色被障礙物碰到，就死掉了宋舷，然后就會(huì)屏蔽游戲的觸摸事件罐孝，玩家角色開(kāi)始掉落。當(dāng)角色掉落到屏幕底部時(shí)候游戲結(jié)束肥缔。會(huì)切換到結(jié)束場(chǎng)景莲兢。這里大家看到角色掉沒(méi)了，不要在意這些細(xì)節(jié)续膳。改艇。我們接下來(lái)開(kāi)始制作結(jié)束場(chǎng)景。
七坟岔、制作游戲結(jié)束場(chǎng)景并實(shí)現(xiàn)場(chǎng)景切換
前面我們實(shí)現(xiàn)了游戲的碰撞檢測(cè)谒兄，碰到障礙物我們的角色就會(huì)死掉并開(kāi)始掉落，角色掉落到屏幕底部時(shí)候游戲結(jié)束社付，并跳到結(jié)束場(chǎng)景承疲。
我們?cè)谫Y源管理器新建GameOver場(chǎng)景。雙擊打開(kāi)場(chǎng)景鸥咖，調(diào)整大小為480x800燕鸽，添加界面需要的節(jié)點(diǎn)。如圖啼辣。
這樣我們的結(jié)束場(chǎng)景就制作好了啊研。可以預(yù)覽下鸥拧。
制作好了党远，結(jié)束場(chǎng)景我們就需要把我們游戲的三個(gè)場(chǎng)景關(guān)聯(lián)起來(lái)了。
首先我們雙擊打開(kāi)我們的第一個(gè)場(chǎng)景WelcomeScene富弦。然后在資源管理器創(chuàng)建playGo.js腳本沟娱。代碼如下：
01//playGo.js
02cc.Class({
03????extends:?cc.Component,
04????properties:?{
05????????//?foo:?{
06????????//????default:?null,
07????????//????url:?cc.Texture2D,??//?optional,?default?is?typeof?default
08????????//????serializable:?true,?//?optional,?default?is?true
09????????//????visible:?true,??????//?optional,?default?is?true
10????????//????displayName:?'Foo',?//?optional
11????????//????readonly:?false,????//?optional,?default?is?false
12????????//?},
13????????//?...
14????},
15????//?use?this?for?initialization
16????onLoad:?function?()?{
17????},
18????//切換場(chǎng)景
19????toScene:?function(){
20????????cc.director.loadScene("MainScene")
21????}
22????//?called?every?frame,?uncomment?this?function?to?activate?update?callback
23????//?update:?function?(dt)?{
24????//?},
25});
這個(gè)腳本就實(shí)現(xiàn)一個(gè)功能，就是切換場(chǎng)景到MainScene場(chǎng)景腕柜，也就是第二個(gè)場(chǎng)景我們游戲的主場(chǎng)景济似。
下面我們?yōu)殚_(kāi)始按鈕綁定腳本事件柳爽。
這樣我們的切換場(chǎng)景功能就實(shí)現(xiàn)了，同樣的方法我們給GameOver場(chǎng)景中的重新開(kāi)始按鈕綁定腳本事件碱屁。
給退出游戲按鈕添加事件腳本，創(chuàng)建腳本ExitScene蛾找。代碼如下：
01//ExitScene.js
02cc.Class({
03????extends:?cc.Component,
04????properties:?{
05????????//?foo:?{
06????????//????default:?null,
07????????//????url:?cc.Texture2D,??//?optional,?default?is?typeof?default
08????????//????serializable:?true,?//?optional,?default?is?true
09????????//????visible:?true,??????//?optional,?default?is?true
10????????//????displayName:?'Foo',?//?optional
11????????//????readonly:?false,????//?optional,?default?is?false
12????????//?},
13????????//?...
14????},
15????//?use?this?for?initialization
16????onLoad:?function?()?{
17????},
18
19????????//退出游戲
20????ExitScene:?function(){
21????????cc.director.end();
22????},
23????//?called?every?frame,?uncomment?this?function?to?activate?update?callback
24????//?update:?function?(dt)?{
25????//?},
26});
使用同樣的方法娩脾，給退出游戲按鈕綁定事件。
還剩下一個(gè)游戲結(jié)束的切換場(chǎng)景事件打毛。打開(kāi)GAME腳本柿赊。添加gameover方法，并在update添加判斷和處理幻枉。
01//GAME.js
02//....省略..
03????//gameover方法?然后在update實(shí)現(xiàn)gameover判斷
04????gameOver:?function?()?{
05
06????????cc.eventManager.removeAllListeners();//移除所有事件監(jiān)聽(tīng)
07????????this.player.stopAllActions();?//停止?player?節(jié)點(diǎn)的跳躍動(dòng)作
08
09????????cc.director.loadScene("GameOver");//切換場(chǎng)景到結(jié)束場(chǎng)景
10????},
11????????//加載時(shí)執(zhí)行
12????????onLoad:?function?()?{
13????????//觸摸監(jiān)聽(tīng)
14????????this.setEventControl();
15????????//?初始化計(jì)分
16????????this.score?=?0;
17?????????//添加判斷
18????????this.isMoving?=?true;
19
20????},
21????//刷新update
22????update:?function?(dt)?{
23
24????????this.setBgMoveCreate();//檢測(cè)背景
25
26????????????//gameOver判斷?玩家墜落到屏幕底部游戲結(jié)束
27????????????if(this.player.getPositionY()?<=?-cc.view.getVisibleSize().height/2){
28????????????????this.unscheduleAllCallbacks();
29
30????????????????if(this.isMoving)
31????????????????{
32????????????????????this.gameOver();
33????????????????????this.isMoving?=?false;
34????????????????}
35
36????????????}
37
38?????},
39//......省略代碼....
下面我們來(lái)測(cè)試下整個(gè)流程環(huán)節(jié)碰声。雙擊WelcomeScene場(chǎng)景從第一個(gè)場(chǎng)景開(kāi)始預(yù)覽。
到此我們整個(gè)游戲流程以及完了熬甫，接下來(lái)完善積分系統(tǒng)胰挑，還有聲音系統(tǒng)整個(gè)游戲就可以上線了。下面我們繼續(xù)來(lái)做積分系統(tǒng)椿肩。瞻颂。
未完待續(xù)............
作者：閉眼就天黑
來(lái)源：閉眼就天黑的博客
聲明：發(fā)布此文是出于傳遞更多知識(shí)以供交流學(xué)習(xí)之目的。若有來(lái)源標(biāo)注錯(cuò)誤或侵犯了您的合法權(quán)益郑象，請(qǐng)作者持權(quán)屬證明與我們聯(lián)系贡这，我們將及時(shí)更正、刪除厂榛，謝謝
