CocosCreator零基礎(chǔ)制作游戲《極限跳躍》3

前面我們實(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í)更正、刪除厂榛,謝謝

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末盖矫,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子击奶,更是在濱河造成了極大的恐慌辈双,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,430評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件柜砾,死亡現(xiàn)場(chǎng)離奇詭異辐马,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)局义,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,406評(píng)論 3 398
  • 文/潘曉璐 我一進(jìn)店門喜爷,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人萄唇,你說(shuō)我怎么就攤上這事檩帐。” “怎么了另萤?”我有些...
    開(kāi)封第一講書人閱讀 167,834評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵湃密,是天一觀的道長(zhǎng)诅挑。 經(jīng)常有香客問(wèn)我,道長(zhǎng)泛源,這世上最難降的妖魔是什么拔妥? 我笑而不...
    開(kāi)封第一講書人閱讀 59,543評(píng)論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮达箍,結(jié)果婚禮上没龙,老公的妹妹穿的比我還像新娘。我一直安慰自己缎玫,他們只是感情好硬纤,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,547評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著赃磨,像睡著了一般筝家。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上邻辉,一...
    開(kāi)封第一講書人閱讀 52,196評(píng)論 1 308
  • 那天溪王,我揣著相機(jī)與錄音,去河邊找鬼值骇。 笑死在扰,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的雷客。 我是一名探鬼主播芒珠,決...
    沈念sama閱讀 40,776評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼搅裙!你這毒婦竟也來(lái)了皱卓?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書人閱讀 39,671評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤部逮,失蹤者是張志新(化名)和其女友劉穎娜汁,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體兄朋,經(jīng)...
    沈念sama閱讀 46,221評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡掐禁,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,303評(píng)論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了颅和。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片傅事。...
    茶點(diǎn)故事閱讀 40,444評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖峡扩,靈堂內(nèi)的尸體忽然破棺而出蹭越,到底是詐尸還是另有隱情,我是刑警寧澤教届,帶...
    沈念sama閱讀 36,134評(píng)論 5 350
  • 正文 年R本政府宣布响鹃,位于F島的核電站驾霜,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏买置。R本人自食惡果不足惜粪糙,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,810評(píng)論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望忿项。 院中可真熱鬧蓉冈,春花似錦、人聲如沸倦卖。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 32,285評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)怕膛。三九已至,卻和暖如春秦踪,著一層夾襖步出監(jiān)牢的瞬間褐捻,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,399評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工椅邓, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留柠逞,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,837評(píng)論 3 376
  • 正文 我出身青樓景馁,卻偏偏與公主長(zhǎng)得像板壮,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子合住,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,455評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容