根据cocos官网的示例做了个demo

首先按照官网的步骤一步一步来，这里就不copy了，附上官网链接：

https://docs.cocos.com/creator/manual/zh/getting-started/quick-start.html

下面是自己做的一些改进的方向

在线游玩地址：https://game.jinjis.cn/mygame/game1

加入开始菜单界面

首先建立一个名为start的新场景（scene）

双击场景，为其添加背景，我这里直接新建了Layout结点，当然也可以插入一个自定义图片。

然后把项目文件夹中的按钮添加到适当位置

接下来为按钮编写脚本，新建一个start脚本

Start.js

cc.Class({
    extends: cc.Component,
    properties: {
        startAudio:{
            default:null,
            type:cc.AudioClip
        }
    },
    onLoad:function(){
      this.node.on('mousedown',function (event) {
          cc.audioEngine.playEffect(this.startAudio,false);
          cc.director.loadScene("game");
      },this)
    },
});

然后点击btn_play结点在属性检查器中为其脚本和点击音乐（懒得找新音乐了），直接拖过去

测试一下可以正常运行，也有声音

游戏失败界面

步骤基本同上：

新建fail场景，为其添加bg背景，hint游戏结束的提示，btn_replay重新开始的按钮（可以打开ps把play的按钮改一下接着用），然后为按钮编写Replay.js脚本

Replay.js

cc.Class({
    extends: cc.Component,
    properties: {
        replayAudio:{
            default:null,
            type:cc.AudioClip
        }
    },
    onLoad:function () {
        this.node.on('mousedown',function (event) {
            cc.audioEngine.playEffect(this.replayAudio,false);
            cc.director.loadScene("game");
        })
    }
});

还要在Game.js中添加游戏失败后场景跳转的脚本

Game.js

//...
    gameOver:function () {
        this.player.stopAllActions();
        cc.director.loadScene("fail");
    }

然后把脚本和声音都拖过去

这时候我们已经有3个场景了，测试的时候可以想打开那个场景就打开那个场景，但发布的时候不要忘了切换默认场景

测试一下没问题

限制主角移动不能超过边界

直接在Player.js中添加代码：

Player.js

update:function (dt) {
        console.log(this.node.x);
        if (this.accLeft){
            this.xSpeed-=this.accel*dt;
        }else if(this.accRight){
            this.xSpeed+=this.accel*dt;
        }
        if (Math.abs(this.xSpeed)>this.maxMoveSpeed){
            this.xSpeed=this.maxMoveSpeed*this.xSpeed/Math.abs(this.xSpeed);
        }
        if (Math.abs(this.node.x)<Math.abs(this.node.parent.x)){
            this.node.x+=this.xSpeed*dt;
        }else {
            this.node.x>0?this.node.x-=2:this.node.x+=2;
            this.xSpeed=-this.xSpeed/2;
            this.node.x+=this.xSpeed*dt;
        }
    },

为主角跳跃更新动画

直接打开动画编辑器，然后点击player节点，创建一个动画剪辑

方便是挺方便的，不过这编辑器用着太别扭了，，，

播放一下试试

最后注意在这里勾选上loop让它无限循环

然后在player的属性检查器中添加Animation组件，然后拖过去

但是之前官方案例已经用代码实现了上下跳跃的动画了，所以我们要将其替换，但是声音的代码又是和其放在了一个方法里，所以我们得重新写调用声音的函数。

player.js

//...
properties: {
        jumpHeight:0,
        jumpDuration:0,
        maxMoveSpeed:0,
        accel:0,
        jumpAudio:{
            default:null,
            type:cc.AudioClip,
            flag:true
        },
    },
playJumpSound:function(){
    if (this.node.y<-75&&this.jumpAudio.flag){
        cc.audioEngine.playEffect(this.jumpAudio,false);
        this.jumpAudio.flag=false;
    }
    if (this.node.y>0){
        this.jumpAudio.flag=true;
    }
},
//...
update:function (dt) {
    this.playJumpSound();
    //...
}

也就是当player的y坐标接近底面的坐标时播放一次声音

为星星的状态加入消失进度条

在场景中新建ProgressBar节点，注意它是由两个小的节点组成的，要仔细修改它们的参数

然后在Game.js中添加属性（最后别忘了把节点拖过去）,并给进度条加上逐渐变短的效果

Game.js

properties: {
//...
    timeProgress:{
        default:null,
        type:cc.ProgressBar
    }
},
//...
update (dt) {
    if (this.timer>this.starDuration){
        this.gameOver();
        this.timeProgress.progress=1;
        return 0;
    }
    this.timeProgress.progress=1-this.timer/this.starDuration;
    this.timer+=dt;
},
//...

看一下效果：

添加触控按钮

层级管理器中添加两个按钮

改一下文本，然后在player.js中添加属性以及事件

player.js

properties: {
    left_btn:{
        default:null,
        type:cc.Button
    },
    right_btn:{
        default:null,
        type:cc.Button
    }
},
onLoad:function(){
    this.left_btn.node.on(cc.Node.EventType.TOUCH_START,function (event) {
        this.accLeft=true;
        this.accRight=false;
    },this);
    this.right_btn.node.on(cc.Node.EventType.TOUCH_START,function (event) {
        this.accLeft=false;
        this.accRight=true;
    },this);
}

最后为了适配手机端，别忘了把开始和结束界面的按钮也添加触控事件，这里就不再贴代码了

Last modification：July 12th, 2020 at 01:09 am
© 允许规范转载