前面我們實(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????},
腳本寫(xiě)好了凸郑，我們對(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í)更正启摄、刪除，謝謝點(diǎn)擊鏈接加入群聊【cocos/unity交流群】
