剛剛我們制作了游戲的開始場景叠必，現(xiàn)在我們來制作游戲的主場景荚孵。還是同樣的方法，新建一個名為MainScene的場景纬朝，雙擊打開收叶，修改場景的大小為480x800。
1共苛、首先貼入游戲背景判没，在此我們使用了2張背景圖，只需要把背景拖進層級管理器2次隅茎，修改名稱為bg1澄峰，bg2即可，背景2接著背景1點上方設(shè)置位置辟犀。
2俏竞、擺放玩家主角在屏幕合適位置
3、添加金幣按鈕在屏幕上方
4堂竟、右鍵Canvas畫布＝》創(chuàng)建節(jié)點＝》創(chuàng)建渲染節(jié)點＝》Label文字魂毁。修改節(jié)點名為score。String屬性值為0跃捣。
5漱牵、左上角加上聲音圖標(biāo)
到此我們主場景大概完成了，下面來預(yù)覽下疚漆。
四酣胀、添加游戲主場景控制腳本
前面簡單的實現(xiàn)了主界面的UI設(shè)置刁赦，現(xiàn)在我們開始制作游戲的控制腳本。
在資源管理器的Script文件夾中闻镶，點擊右鍵新建javascript文件甚脉，命名為GAME。
雙擊打開GAME腳本铆农，在properties: 中添加屬性代碼牺氨。
01//GAME.js
02
03cc.Class({
04????extends:?cc.Component,
05????properties:?{
06
07????//?player?節(jié)點，用于獲取主角彈跳的高度墩剖，和控制主角行動開關(guān)
08????????player:?{
09????????????default:?null,
10????????????type:?cc.Node
11????????},
12????????//?bgsprite1?節(jié)點猴凹，用于背景移動
13????????bgsprite1:?{
14????????????default:?null,
15????????????type:?cc.Node
16????????},
17????????//?bgsprite2?節(jié)點，用于背景移動
18????????bgsprite2:?{
19????????????default:?null,
20????????????type:?cc.Node
21????????},
22????????//?score?label?的引用
23????????scoreDisplay:?{
24????????????default:?null,
25????????????type:?cc.Label
26????????},
27??????},
保存好后岭皂，我們雙擊MainScene打開場景郊霎，點擊Canvas，在右側(cè)的屬性檢查器最底部爷绘，點擊［添加組件］＝》［添加用戶腳本組件］然后選擇我們剛剛創(chuàng)建的腳本GAME.js书劝。
添加好后就可以在屬性檢查器看到我們的屬性組件來，然后我們把場景里的節(jié)點拖進對應(yīng)的屬性框即可實現(xiàn)節(jié)點綁定土至。不懂得可以多看看官方文檔购对。
這樣我門就可以在GAME腳本里來操作節(jié)點了。
二陶因、創(chuàng)建HeroPlayer腳本用來操作玩家主角
01//HeroPlayer.js
02
03cc.Class({
04????extends:?cc.Component,
05????properties:?{
06????????//主角跳躍高度
07????????jumpHeight:?0,
08????????//主角跳躍持續(xù)時間
09????????jumpTimes:?0,
10????????//掉落速度
11????????maxMoveSpeed:?0,
12????},
13????//跳躍
14????setJumpUpAction:?function(){
15????????//?跳躍上升
16????????varjumpUp?=?cc.moveBy(this.jumpTimes,?cc.p(0,?this.jumpHeight));
17????????//jumpUp.reverse();
18????????returnjumpUp;
19????},
20????//掉落
21????setJumpDownAction:?function(){
22????????//下落
23????????varjumpDown?=?cc.moveBy(this.jumpTimes,?cc.p(0,?-?this.maxMoveSpeed));
24????????returnjumpDown;
25????},
26????setJumpRunAction:?function(){
27????????//?初始化跳躍動作
28????????this.jumpAction?=?this.setJumpUpAction();
29????????//掉落動作
30????????this.maxMoveSpeed?=?this.setJumpDownAction();
31????????//包裝動作
32????????varseq?=?cc.sequence(this.jumpAction,this.maxMoveSpeed);
33????????this.node.runAction(seq);
34????},
35????//玩家不操作時骡苞，角色進行下墜
36????heroDownMove:?function(){
37????????//下落
38????????varheroDown?=?cc.moveBy(0.8,?cc.p(0,?-?5));
39????????returnheroDown;
40????},
41????//?use?this?for?initialization
42????onLoad:?function()?{
43
44????????this.setJumpRunAction();
45
46????},
47
48????//?called?every?frame,?uncomment?this?function?to?activate?update?callback
49????update:?function(dt)?{
50????????this.node.runAction(this.heroDownMove());//精靈移動
51????}
52
53
54});
角色有2種狀態(tài)，一種是玩家點擊屏幕會實現(xiàn)角色的跳躍楷扬，第二種就是角色會受到引力會自動下落烙如。我們在update來實現(xiàn)自動下落。添加好方法后毅否，我門在層級管理器中點擊hero節(jié)點。然后在右側(cè)屬性檢查器中綁定腳本蝇刀。
我門可以在里面初始化值螟加。跳躍高度值，跳躍持續(xù)時間吞琐，掉落速度等捆探。
腳本里主要實現(xiàn)了跳躍動作，掉落動作等站粟。
然后回到我們的游戲主腳本也就是GAME腳本黍图。添加觸摸事件監(jiān)聽，實現(xiàn)監(jiān)聽觸摸來調(diào)用主角的跳躍動作奴烙。
首先在頂部添加腳本引用助被，然后創(chuàng)建事件監(jiān)聽的方法剖张。
01//GAME.js
02var?HeroPlayer?=?require("HeroPlayer");
03//－－－－－
04//事件監(jiān)聽
05????setEventControl:?function(){
06????????????var?self?=?this;
07????????var?hero?=?self.player.getComponent(HeroPlayer);//角色綁定控件
08
09???????cc.eventManager.addListener({
10????????????event:?cc.EventListener.TOUCH_ONE_BY_ONE,
11????????????swallowTouches:?true,
12??????????????//?設(shè)置是否吞沒事件，在?onTouchBegan?方法返回?true?時吞沒
13????????????onTouchBegan:?function?(touch,?event)?{
14????????????????????//實現(xiàn)?onTouchBegan?事件回調(diào)函數(shù)
15????????????????var?target?=?event.getCurrentTarget();
16????????????????????//?獲取事件所綁定的?target
17
18?????????????var?locationInNode?=?target.convertToNodeSpace(touch.getLocation());
19?????????????cc.log("當(dāng)前點擊坐標(biāo)"+locationInNode);
20
21????????????????hero.node.runAction(hero.setJumpUpAction());//精靈移動
22????????????????//cc.log("跳躍：－－－－－－－－");
23
24
25
26????????????????returntrue;
27????????????},
28????????????onTouchMoved:?function?(touch,?event)?{????????????//?觸摸移動時觸發(fā)
29
30????????????},
31????????????onTouchEnded:?function?(touch,?event)?{????????????//?點擊事件結(jié)束處理
32
33????????????????//??cc.log("跳躍后角色坐標(biāo)："?+?self.player.getPosition()?);
34????????????}
35
36????????},?self.node)
37????},
然后在onload方法實現(xiàn)初始化調(diào)用揩环。
1?onLoad:?function?()?{
2????????//觸摸監(jiān)聽
3????????this.setEventControl();
4????????//?初始化計分
5????????this.score?=?0;
6
7????},
我們可以來運行下搔弄，看下效果。
五丰滑、制作游戲主場景背景滾動
剛剛我們實現(xiàn)了玩家的一些功能顾犹，測試了下發(fā)現(xiàn)我們的玩家跳躍幾次后，就會超出屏幕褒墨，這樣體驗很差炫刷，那下面我們來實現(xiàn)場景背景的滾動作為參照物來實現(xiàn)玩家移動。也就是說玩家只需要小范圍的移動就行了郁妈，剩下的交給背景的移動來給用戶帶來玩家在移動的錯覺浑玛，游戲都是這樣實現(xiàn)的。
新建腳本BgMove圃庭，并實現(xiàn)移動方法锄奢，參數(shù)為移動的距離。實現(xiàn)代碼：
01//BgMove.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????//背景移動
16????setMoveAction:?function(height){
17????????//?移動距離
18????????var?moveHeight?=?height;
19????????var?moveAction?=?cc.moveBy(this.jumpTimes,?cc.p(0,?-?moveHeight));
20????????returnmoveAction;
21????},
22????//?use?this?for?initialization
23????onLoad:?function?()?{
24????},
25????//?called?every?frame,?uncomment?this?function?to?activate?update?callback
26????//?update:?function?(dt)?{
27????//?},
28});
創(chuàng)建好腳本后剧腻，我們在場景中給節(jié)點bg1拘央、bg2綁定此腳本。
綁定后书在，我們在打開GAME.js腳本灰伟，在頂部引用此腳本。
然后在事件監(jiān)聽方法儒旬，觸摸結(jié)束的方法里添加背景移動的監(jiān)聽栏账。
01?//事件監(jiān)聽
02????setEventControl:?function(){
03????????var?self?=?this;
04????????var?hero?=?self.player.getComponent(HeroPlayer);//角色綁定控件
05????????var?bg1?=?self.bgsprite1.getComponent(MoveBg);//綁定背景控件
06????????var?bg2?=?self.bgsprite2.getComponent(MoveBg);//綁定背景控件
07//.....
08//...省略部分代碼.
09//.....
10onTouchEnded:?function?(touch,?event)?{????????????//?點擊事件結(jié)束處理
11????????????????if(self.player.getPositionY()?>?0){
12
13????????????????????var?height?=?self.player.getPositionY();//背景需要移動的高度
14????????????????????self.player.setPositionY(height/2);//設(shè)置精靈的高度位置
15
16????????????????????bg1.node.runAction(bg1.setMoveAction(height));//背景實現(xiàn)向下滾動
17????????????????????bg2.node.runAction(bg2.setMoveAction(height));//背景實現(xiàn)向下滾動
18
19????????????????}
20?//...省略部分代碼.
這里分析下代碼部分，首先我們創(chuàng)建場景時候栈源，場景Canvas的錨點為(0.5挡爵，0.5)，也就是屏幕的中心點坐標(biāo)為0,0甚垦。其所有子節(jié)點的坐標(biāo)都是相對于場景來布局茶鹃，所以說我們的主角布局時候放在屏幕的中下方位置，一開始的Y坐標(biāo)為負(fù)數(shù)艰亮。每次移動Y坐標(biāo)會增加闭翩，當(dāng)Y坐標(biāo)增加超過中心點坐標(biāo)我們需要進行背景移動，而背景移動的距離則是我們的主角Y坐標(biāo)值減去中心點的Y坐標(biāo)0迄埃，也就是主角Y坐標(biāo)值本身疗韵。
所以每次觸摸結(jié)束，我們對主角的Y坐標(biāo)進行判斷侄非，如果大于0蕉汪，說明背景需要移動流译，移動距離為主角Y坐標(biāo)值，然后我門調(diào)用背景1和背景2的移動方法肤无，參數(shù)為主角的Y坐標(biāo)先蒋。
背景移動時候，我們同時需要修正主角的坐標(biāo)宛渐，設(shè)置主角的坐標(biāo)為超過中心點的一半竞漾，這樣主角不論怎么移動都只能在屏幕內(nèi)移動。
下面我門來運行預(yù)覽窥翩，測試下业岁。。
是不是可以實現(xiàn)背景滾動了寇蚊，大家最后發(fā)現(xiàn)了一個問題笔时，背景移動完畢了，沒有背景會出現(xiàn)黑色的區(qū)域仗岸。允耿。
下面我們要實現(xiàn)一個方法，來對背景進行計算扒怖。我們現(xiàn)在是兩個背景進行拼接的较锡。我們需要來判斷哪個背景已經(jīng)移除屏幕，移除屏幕后改變其位置盗痒，讓它Y坐標(biāo)變成正在移動的那個背景的上邊蚂蕴，這樣來實現(xiàn)無縫拼接。這樣才是無限滾動的背景俯邓。
下面我們繼續(xù)在GAME腳本添加新的方法來實現(xiàn)計算骡楼，下面貼代碼。
01//GAME.js
02//...省略代碼
03?//如果背景1的坐標(biāo)移出屏幕開始設(shè)置新的坐標(biāo)
04????setBgMoveCreate:?function(){
05????????//如果背景1的坐標(biāo)移出屏幕開始設(shè)置新的坐標(biāo)
06????????if(this.bgsprite1.getPositionY()??<?-500?){
07????????????this.bgsprite2.setPositionY(this.bgsprite1.getPositionY()+this.bgsprite1.getContentSize().height);
08????????}
09????????//如果背景2的坐標(biāo)移出屏幕開始設(shè)置新的坐標(biāo)
10????????if(this.bgsprite2.getPositionY()?<?-500?){
11????????????this.bgsprite1.setPositionY(this.bgsprite2.getPositionY()+this.bgsprite2.getContentSize().height);
12????????}
13????},
14????//實現(xiàn)update方法
15???update:?function?(dt)?{
16
17????????this.setBgMoveCreate();//檢測背景
18
19????????},
我們在update里不停的檢測背景移動事件來解決黑色問題稽鞭。下面來再次測試下鸟整。
到此我們已經(jīng)實現(xiàn)了 玩家角色的移動，背景的滾動了朦蕴。吃嘿。游戲完成了三分之一了。梦重。感覺還可以吧。
未完待續(xù)............
作者：閉眼就天黑
來源：閉眼就天黑的博客
聲明：發(fā)布此文是出于傳遞更多知識以供交流學(xué)習(xí)之目的亮瓷。若有來源標(biāo)注錯誤或侵犯了您的合法權(quán)益琴拧，請作者持權(quán)屬證明與我們聯(lián)系，我們將及時更正嘱支、刪除蚓胸，謝謝
