八、添加游戏积分系统
前面我们实现了整个游戏的流程,下面我们来完善游戏的积分系统。。先来分析下游戏的积分,第一次展示积分的地方就是我们的游戏主场景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实现更新状态。代码如图:



这里我就不贴代码了,大家手打下。。。到此我们的声音系统也添加完毕了。。。对了,还少一点,声音状态切换的时候声音图标也要改变啊。。。这里大家自己解决。。
未完待续............
作者:闭眼就天黑
来源:闭眼就天黑的博客
声明:发布此文是出于传递更多知识以供交流学习之目的。若有来源标注错误或侵犯了您的合法权益,请作者持权属证明与我们联系,我们将及时更正、删除,谢谢



















