剛剛我們制作了游戲的開始場景篙贸，現(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哨苛、左上角加上聲音圖標
到此我們主場景大概完成了纵苛，下面來預覽下猎贴。
四谋右、添加游戲主場景控制腳本
前面簡單的實現(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é)點拖進對應的屬性框即可實現(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("當前點擊坐標"+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("跳躍后角色坐標："?+?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)上煤，也就是屏幕的中心點坐標為0,0休玩。其所有子節(jié)點的坐標都是相對于場景來布局，所以說我們的主角布局時候放在屏幕的中下方位置劫狠，一開始的Y坐標為負數(shù)拴疤。每次移動Y坐標會增加，當Y坐標增加超過中心點坐標我們需要進行背景移動独泞，而背景移動的距離則是我們的主角Y坐標值減去中心點的Y坐標0呐矾，也就是主角Y坐標值本身。
所以每次觸摸結(jié)束阐肤，我們對主角的Y坐標進行判斷凫佛，如果大于0，說明背景需要移動孕惜，移動距離為主角Y坐標值愧薛，然后我門調(diào)用背景1和背景2的移動方法，參數(shù)為主角的Y坐標衫画。
背景移動時候毫炉，我們同時需要修正主角的坐標，設(shè)置主角的坐標為超過中心點的一半削罩，這樣主角不論怎么移動都只能在屏幕內(nèi)移動瞄勾。
下面我門來運行預覽，測試下弥激。进陡。
是不是可以實現(xiàn)背景滾動了，大家最后發(fā)現(xiàn)了一個問題微服，背景移動完畢了趾疚，沒有背景會出現(xiàn)黑色的區(qū)域。以蕴。
下面我們要實現(xiàn)一個方法糙麦，來對背景進行計算。我們現(xiàn)在是兩個背景進行拼接的丛肮。我們需要來判斷哪個背景已經(jīng)移除屏幕赡磅，移除屏幕后改變其位置，讓它Y坐標變成正在移動的那個背景的上邊宝与，這樣來實現(xiàn)無縫拼接焚廊。這樣才是無限滾動的背景冶匹。
下面我們繼續(xù)在GAME腳本添加新的方法來實現(xiàn)計算，下面貼代碼节值。
01//GAME.js
02//...省略代碼
03?//如果背景1的坐標移出屏幕開始設(shè)置新的坐標
04????setBgMoveCreate:?function(){
05????????//如果背景1的坐標移出屏幕開始設(shè)置新的坐標
06????????if(this.bgsprite1.getPositionY()??<?-500?){
07????????????this.bgsprite2.setPositionY(this.bgsprite1.getPositionY()+this.bgsprite1.getContentSize().height);
08????????}
09????????//如果背景2的坐標移出屏幕開始設(shè)置新的坐標
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)了 玩家角色的移動搞疗，背景的滾動了嗓蘑。。游戲完成了三分之一了匿乃。桩皿。感覺還可以吧。
