CocosCreator零基础制作游戏《极限跳跃》教程4
八、添加游戏积分系统
前面我们实现了整个游戏的流程，下面我们来完善游戏的积分系统。。先来分析下游戏的积分，第一次展示积分的地方就是我们的游戏主场景MainScene，玩家通过一些机制来获取积分，实现积分的更新，当玩家游戏结束后展示玩家所获的的当前积分。
我们一开始制作游戏场景的时候就制作了一个积分节点score，其string属性值为0。打开GAME.js脚本可以发现，一开始的时候我们onLoad方法就初始化了积分。
接着我们在GAME.js脚本里新添加一个函数来实现积分的更新。代码如下：
01//GAME.js
02//....省略...
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.js
02cc.Class({
03 extends: cc.Component,
04 properties: {
05 //积分更新
06 Scores: {
07 default: null,
08 type: cc.Label
09 },
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 initialization
19 onLoad: function () {
20 this.disScore();//首次加载时候调用
21 },
22
23 // called every frame, uncomment this function to activate update callback
24 // update: function (dt) {
25
26
27 // },
28});
这段代码的意识是加载的时候，onLoad函数调用积分更新的方法，实现从本地读取游戏场景中存储的积分。
双击打开GameOver场景，如图：
为GameOver场景Canvas绑定刚刚新建的GameOverScore.js脚本。并把score组件拖进scores进行绑定。
这样游戏结束的时候，就会更新score节点组件的显示内容。下面我们来测试下。双击打开主场景，从游戏场景开始测试积分的更新，以及游戏结束的积分显示。
是不是很好玩啊，哈哈。加个积分排行榜更好啊，以后 慢慢扩展来。。。
到此我们整个游戏已经算完成了，当然一个游戏不能没有声音和音效，下面我们来添加声音系统功能。。。
九、为游戏添加声音音效功能
游戏的声音很重要，我们在这个游戏中需要加2个音效，一个背景音乐。。。第一个音效在玩家与障碍物碰撞的地方加碰撞音效，第二个在玩家主角坠落到屏幕底部的时候加游戏结束的音效。然后游戏开始的时候加载背景音乐。
我们一开始在MainScene场景中的声音图标节点就是我们用来控制声音的开关。。
首先修改guawileft.js脚本，添加音效资源，在onload设置声音大小。代码：
01//guanwileft.js
02
03 properties: {
04
05 times: 0,
06 // 碰撞音效资源
07 pengAudio: {
08 default: null,
09 url: cc.AudioClip
10 },
11 },
12 // use this for initialization
13 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.Node
05 },
06 // 游戏音乐资源
07 gameAudio: {
08 default: null,
09 url: cc.AudioClip
10 },
11 // 游戏结束音乐资源
12 gameOverAudio: {
13 default: null,
14 url: cc.AudioClip
15 },
添加好代码后，我们双击打开MainScene场景开始为属性绑定资源和节点。。如图：
可以跑起来测试下我们的声音有没有了。。这就完了吗？当然不是，我们的声音图标还没有用到啊！！
下面为我们的声音图标节点加一个脚本，新建脚本AudioScript.js。代码如下：
01//AudioScript.js
02
03cc.Class({
04 extends: cc.Component,
05 properties: {
06 //是否开启音乐 默认开启
07 isOpen: true,
08 // 游戏音乐资源
09 gameAudio: {
10 default: null,
11 url: cc.AudioClip
12 },
13
14 },
15 // use this for initialization
16 onLoad: function () {
17 this.isOpen = true;//开启音乐
18 cc.audioEngine.playMusic ( this.gameAudio, true);
19
20 },
21 //检查音乐开启状态
22 checkMusic:function(){
23
24 returnisOpen;
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 callback
52 // update: function (dt) {
53
54 // },
55});
代码里实现了一个音乐播放的状态，用来给我们判断是否播放了。播放了图标显示声音图标，没有播放显示静音图标。
1var rec = cc.rectContainsPoint(this.node.getBoundingBoxToWorld(),pos) ;
此处用来判断声音图标的包围盒和点击坐标的比较，如果为true则表示声音图标被点击到了，如果声音图标被点击则判断当前声音播放状态，并改变状态。声音图标节点显示如图：
声音节点绑定好脚本后，我们继续修改GAME.js脚本中的代码，为AudioScript.js中的方法setCp:function(pos)传参数。
首先在顶部添加引用代码，然后在点击事件添加点击的检测方法，然后update实现更新状态。代码如图：
这里我就不贴代码了，大家手打下。。。到此我们的声音系统也添加完毕了。。。对了，还少一点，声音状态切换的时候声音图标也要改变啊。。。这里大家自己解决。。
未完待续............点击链接加入群聊【cocos/unity交流群】
作者：闭眼就天黑
来源：闭眼就天黑的博客
声明：发布此文是出于传递更多知识以供交流学习之目的。若有来源标注错误或侵犯了您的合法权益，请作者持权属证明与我们联系，我们将及时更正、删除，谢谢
