CocosCreator零基础制作游戏《极限跳跃》教程4

CocosCreator零基础制作游戏《极限跳跃》教程4

首页休闲益智极限跳跃更新时间:2024-04-15

八、添加游戏积分系统

前面我们实现了整个游戏的流程,下面我们来完善游戏的积分系统。。先来分析下游戏的积分,第一次展示积分的地方就是我们的游戏主场景MainScene,玩家通过一些机制来获取积分,实现积分的更新,当玩家游戏结束后展示玩家所获的的当前积分。

我们一开始制作游戏场景的时候就制作了一个积分节点score,其string属性值为0。打开GAME.js脚本可以发现,一开始的时候我们onLoad方法就初始化了积分。

接着我们在GAME.js脚本里新添加一个函数来实现积分的更新。代码如下:

01

//GAME.js02

//....省略...03

04

//积分更新05

gainScore: function () {06

this.score = 1;07

// 更新 scoreDisplay Label 的文字08

this.scoreDisplay.string = this.score.toString();09

10

cc.sys.localStorage.setItem("ScoreDis" ,this.scoreDisplay.string);//本地存储11

12

},13

14

//.....省略...

这段代码的意思是实现积分+1,增长一个积分。并把积分存储到本地,注意本地存储代码。。。那么什么时候才增长积分呢??

在触摸屏幕接触的时候,如果背景滚动我们就增加一个积分。添加代码位置如下图:

这样每次玩家移动带动背景滚动的时候,积分就会更新。积分更新到时候会存储到本地,这样我们游戏结束的时候就可以正确的显示出来。

新建GameOverScore.js脚本,代码如下:

01

//GameOverScore.js02

cc.Class({03

extends: cc.Component,04

properties: {05

//积分更新06

Scores: {07

default: null,08

type: cc.Label09

},10

},11

//积分更新12

disScore: function () {13

this.score = cc.sys.localStorage.getItem("ScoreDis");//读取本地存储的积分14

// 更新 scoreDisplay Label 的文字15

this.Scores.string = "Score: " this.score.toString();//显示16

},17

18

// use this for initialization19

onLoad: function () {20

this.disScore();//首次加载时候调用21

},22

23

// called every frame, uncomment this function to activate update callback24

// update: function (dt) {25

26

27

// },28

});

这段代码的意识是加载的时候,onLoad函数调用积分更新的方法,实现从本地读取游戏场景中存储的积分。

双击打开GameOver场景,如图:

为GameOver场景Canvas绑定刚刚新建的GameOverScore.js脚本。并把score组件拖进scores进行绑定。

这样游戏结束的时候,就会更新score节点组件的显示内容。下面我们来测试下。双击打开主场景,从游戏场景开始测试积分的更新,以及游戏结束的积分显示。

是不是很好玩啊,哈哈。加个积分排行榜更好啊,以后 慢慢扩展来。。。

到此我们整个游戏已经算完成了,当然一个游戏不能没有声音和音效,下面我们来添加声音系统功能。。。

九、为游戏添加声音音效功能

游戏的声音很重要,我们在这个游戏中需要加2个音效,一个背景音乐。。。第一个音效在玩家与障碍物碰撞的地方加碰撞音效,第二个在玩家主角坠落到屏幕底部的时候加游戏结束的音效。然后游戏开始的时候加载背景音乐。

我们一开始在MainScene场景中的声音图标节点就是我们用来控制声音的开关。。

首先修改guawileft.js脚本,添加音效资源,在onload设置声音大小。代码:

01

//guanwileft.js02

03

properties: {04

05

times: 0,06

// 碰撞音效资源07

pengAudio: {08

default: null,09

url: cc.AudioClip10

},11

},12

// use this for initialization13

onLoad: function () {14

15

this.moveRight();16

cc.audioEngine.setEffectsVolume ( 0.2 );//设置音效声音大小17

18

19

},

同理在guaiwuright.js脚本也是这样添加。。

为障碍物的2个脚本添加好代码后,我们需要修改我们的两个障碍物预制体。绑定音效资源,这里以zhangaiwuleft预制体为例。双击zhangaiwuleft预制体,添加声音资源绑定。如图:

zhangaiwuright预制体同理也是这样添加声音。

碰撞音效加载好后,我们为游戏结束加个音效。打开GAME.js脚本。在 properties中添加属性。代码如下:

01

// 背景音乐资源02

bgmusic: {03

default: null,04

type: cc.Node05

},06

// 游戏音乐资源07

gameAudio: {08

default: null,09

url: cc.AudioClip10

},11

// 游戏结束音乐资源12

gameOverAudio: {13

default: null,14

url: cc.AudioClip15

},

添加好代码后,我们双击打开MainScene场景开始为属性绑定资源和节点。。如图:

可以跑起来测试下我们的声音有没有了。。这就完了吗?当然不是,我们的声音图标还没有用到啊!!

下面为我们的声音图标节点加一个脚本,新建脚本AudioScript.js。代码如下:

01

//AudioScript.js02

03

cc.Class({04

extends: cc.Component,05

properties: {06

//是否开启音乐 默认开启07

isOpen: true,08

// 游戏音乐资源09

gameAudio: {10

default: null,11

url: cc.AudioClip12

},13

14

},15

// use this for initialization16

onLoad: function () {17

this.isOpen = true;//开启音乐18

cc.audioEngine.playMusic ( this.gameAudio, true );19

20

},21

//检查音乐开启状态22

checkMusic:function(){23

24

return isOpen;25

},26

//获取点击坐标27

setCp:function(pos){28

29

var rec = cc.rectContainsPoint(this.node.getBoundingBoxToWorld(),pos) ;30

31

if(rec){32

//检查音乐开启状态33

//如果音乐开启了则关闭音乐和音效34

if(this.isOpen){35

//if (cc.audioEngine.isMusicPlaying()) {36

cc.audioEngine.pauseMusic();//暂停正在播放音乐37

cc.log("暂停正在播放音乐");38

//this.node.addChild("Texture/menu_music_off.png");39

this.isOpen = false;40

}41

else {42

// cc.log("music is not playing");43

cc.audioEngine.resumeMusic ();//恢复背景音乐44

cc.log("恢复背景音乐");45

this.isOpen = true;46

}47

48

}49

},50

51

// called every frame, uncomment this function to activate update callback52

// update: function (dt) {53

54

// },55

});

代码里实现了一个音乐播放的状态,用来给我们判断是否播放了。播放了图标显示声音图标,没有播放显示静音图标。

1

var rec = cc.rectContainsPoint(this.node.getBoundingBoxToWorld(),pos) ;

此处用来判断声音图标的包围盒和点击坐标的比较,如果为true则表示声音图标被点击到了,如果声音图标被点击则判断当前声音播放状态,并改变状态。声音图标节点显示如图:

声音节点绑定好脚本后,我们继续修改GAME.js脚本中的代码,为AudioScript.js中的方法setCp:function(pos)传参数。

首先在顶部添加引用代码,然后在点击事件添加点击的检测方法,然后update实现更新状态。代码如图:

这里我就不贴代码了,大家手打下。。。到此我们的声音系统也添加完毕了。。。对了,还少一点,声音状态切换的时候声音图标也要改变啊。。。这里大家自己解决。。

未完待续............

作者:闭眼就天黑

来源:闭眼就天黑的博客

声明:发布此文是出于传递更多知识以供交流学习之目的。若有来源标注错误或侵犯了您的合法权益,请作者持权属证明与我们联系,我们将及时更正、删除,谢谢

,
大家还看了
也许喜欢
更多游戏

Copyright © 2024 妖气游戏网 www.17u1u.com All Rights Reserved