根据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);
}
最后为了适配手机端,别忘了把开始和结束界面的按钮也添加触控事件,这里就不再贴代码了