美文网首页
CocosCreator零基础制作游戏《极限跳跃》教程4

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

作者: 游戏开发大表哥 | 来源:发表于2019-06-14 15:24 被阅读0次

    八、添加游戏积分系统

    前面我们实现了整个游戏的流程,下面我们来完善游戏的积分系统。。先来分析下游戏的积分,第一次展示积分的地方就是我们的游戏主场景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交流群】

    作者:闭眼就天黑

    来源:闭眼就天黑的博客

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

    相关文章

      网友评论

          本文标题:CocosCreator零基础制作游戏《极限跳跃》教程4

          本文链接:https://www.haomeiwen.com/subject/tdhpfctx.html