CocosCreator拼手速小游戏(教程 + 源码)TS实现小游戏
前言
游戏完成后的样子
玩法:在10秒内点击屏幕中间的按钮,最终记录一共点击了多少下
源码在Q群:1130122408
这个游戏比较简单哈
对于这个游戏来说canvas的宽高这样设置最佳
本文章的内容
前言
一、搭建游戏场景
二、写主控制器来控制游戏
三、绑定节点
四、给游戏添加一个开始界面
结束语
一、搭建游戏场景
首先新建一个场景取名为Main然后打开
然后我们在canvas节点下新建一个按钮,取名为main_btn,作为屏幕中间用来点击的按钮
把按钮的宽高设置的大一些,我设置的是宽500,高300
按钮上的文字显示内容改为 点我
接下来新建一个空节点用来给文字布局,取名为Layout_label,给这个空节点添加Layout组件和Widget组件
把这个空节点移动到合适的位置,我设置的位置是x是0,y是360
把Layout和Widget按照图片设置好
这里的Layout用的是垂直布局,对容器大小进行缩放
我们创建这个空节点的目的就是给那一堆文字进行布局,接下来就可以创建文字了
在Layout_label下创建四个Label,按照图片给这些Label取名字,取名字的目的是为了防止弄混
把atlast_label的active勾掉,这个文字只负责在游戏结束的时候显示,所以在游戏一开始的时候不需要让它显示,只在游戏结束时显示就足够了
然后设置文字的字体大小
string_label和atlast_label的文字尺寸和行高都设置成60
time_label的文字尺寸和行高设置成55
history_label的文字尺寸和行高设置成40
这样设置有些麻烦,但是如果不这样设置文字都一样大看起来有些死板,根据需要设置还可以让这些文字在一起不是很挤
游戏场景就搭建的差不多了,如果想要背景还可以加一个好看的背景图
二、写主控制器来控制游戏
我们光搭建游戏场景是远远不够的,我们还需要写脚本来控制游戏
新建一个脚本取名为MainController,然后挂到canvas上面
打开脚本
我们先来写一些属性
@property(cc.Label)
string_label:cc.Label = null;//当前点击次数的文字
@property(cc.Node)
btn:cc.Node = null;//屏幕中间的按钮,负责加点击次数的
@property(cc.Label)
time_label:cc.Label = null;//剩余时间
@property(cc.Label)
atlast_label:cc.Label = null;//显示最终点击了多少次屏幕的文字
@property(cc.Label)
lishi:cc.Label = null;//历史最高分
@property
time:number = 10;//开始时候的时间
@property
cishu:number = 0;//点击的次数
@property
history_s:number = 0;//历史点击最高次数
属性是什么后面都有注释的哦
然后在Start函数里面把最后统计点击次数的label隐藏,然后初始化历史记录
start(){
this.atlast_label.node.active = false;//在开始的时候把最终点击了多少下的文字隐藏
if(cc.sys.localStorage.getItem(this.history_s) == null){
//如果历史记录为null就初始化历史记录
cc.sys.localStorage.setItem(this.history_s,0);//初始化
}
}
游戏的玩法是点击屏幕中间的按钮来增加点击次数,所以我们需要给屏幕中间的按钮(也就是属性里面的btn)绑定一个事件
先写要绑定的事件
onbtn(){
this.cishu = this.cishu + 1;//点击次数+1
console.log("按下了按钮")//打印log
}
然后在onload里面绑定
onLoad(){
this.btn.on(cc.Node.EventType.TOUCH_START,this.onbtn,this);//给按钮绑定事件
}
这样在我们点击屏幕中间按钮的时候点击次数就会增加了
我们还需要每帧更新每个文字显示的内容,并且需要判断游戏是否结束,还需要让当前剩余时间每秒-1,把这些逻辑写在update里面
update(dt:number){
this.string_label.string = "当前点击次数:" + this.cishu.toString();//每帧更新当前点击的次数
this.time_label.string = "当前剩余时间:" + Math.floor(this.time).toString();//每帧更新当前剩余的时间
if(this.time > 0){
//如果当前剩余时间大于0那么不断减小
this.time -= dt;//当前剩余时间每秒-1
}
if(this.time < 0){
//当剩余时间小于0游戏结束
this.gameover();//游戏结束
}
this.atlast_label.string = "最终分数:"+this.cishu.toString();//每帧更新最终分数
this.lishi.string = "历史最高分:" + cc.sys.localStorage.getItem(this.history_s);//每帧更新历史最高分
}
这时就会发现报了一个错
是因为我们没有写游戏结束时应该执行的函数才导致的
现在我们来写
需要在游戏结束的时候把按钮、当前剩余时间、当前点击次数隐藏,把最终统计点了多少次的文字显示,还需要获取历史最高分并且判断要不要保存
gameover(){
this.btn.active = false;//当游戏结束时按钮隐藏
this.time_label.node.active = false;//当游戏结束时当前时间隐藏
this.string_label.node.active = false;//当游戏结束时当前点击次数隐藏
this.atlast_label.node.active = true;//当游戏结束时让最终统计的文字显示
let num = cc.sys.localStorage.getItem(this.history_s);//获取一下当前的历史最高分
if(this.cishu > num){
//如果分数超过了历史最高分
cc.sys.localStorage.setItem(this.history_s,this.cishu);//那么就重新设置历史最高分
}
}
这样就大功告成了
主控制器就写好了
写好之后应该是这样的
const {
ccclass, property} = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {
@property(cc.Label)
string_label:cc.Label = null;//当前点击次数的文字
@property(cc.Node)
btn:cc.Node = null;//屏幕中间的按钮,负责加点击次数的
@property(cc.Label)
time_label:cc.Label = null;//剩余时间
@property(cc.Label)
atlast_label:cc.Label = null;//显示最终点击了多少次屏幕的文字
@property(cc.Label)
lishi:cc.Label = null;//历史最高分
@property
time:number = 10;//开始时候的时间
@property
cishu:number = 0;//点击的次数
@property
history_s:number = 0;//历史点击最高次数
start(){
this.atlast_label.node.active = false;//在开始的时候把最终点击了多少下的文字隐藏
if(cc.sys.localStorage.getItem(this.history_s) == null){
//如果历史记录为null就初始化历史记录
cc.sys.localStorage.setItem(this.history_s,0);//初始化
}
}
onLoad(){
this.btn.on(cc.Node.EventType.TOUCH_START,this.onbtn,this);//给按钮绑定事件
}
update(dt:number){
this.string_label.string = "当前点击次数:" + this.cishu.toString();//每帧更新当前点击的次数
this.time_label.string = "当前剩余时间:" + Math.floor(this.time).toString();//每帧更新当前剩余的时间
if(this.time > 0){
//如果当前剩余时间大于0那么不断减小
this.time -= dt;//当前剩余时间每秒-1
}
if(this.time < 0){
//当剩余时间小于0游戏结束
this.gameover();//游戏结束
}
this.atlast_label.string = "最终分数:"+this.cishu.toString();//每帧更新最终分数
this.lishi.string = "历史最高分:" + cc.sys.localStorage.getItem(this.history_s);//每帧更新历史最高分
}
onbtn(){
this.cishu = this.cishu + 1;//点击次数+1
console.log("按下了按钮")//打印log
}
gameover(){
this.btn.active = false;//当游戏结束时按钮隐藏
this.time_label.node.active = false;//当游戏结束时当前时间隐藏
this.string_label.node.active = false;//当游戏结束时当前点击次数隐藏
this.atlast_label.node.active = true;//当游戏结束时让最终统计的文字显示
let num = cc.sys.localStorage.getItem(this.history_s);//获取一下当前的历史最高分
if(this.cishu > num){
//如果分数超过了历史最高分
cc.sys.localStorage.setItem(this.history_s,this.cishu);//那么就重新设置历史最高分
}
}
}
三、绑定节点
脚本里面写了那么多的属性,需要一个一个去指定这些属性都是什么
一个一个绑定就可以了
然后就可以愉快的玩了
四、给游戏添加一个开始界面
这点没有新的内容,只是添加一个开始场景,可以跳过不看
新建一个场景取名为Start,并打开,加一张好看的背景图
新建一个脚本名字随便取,挂到canvas上,里面写
onbtn(){
cc.director.loadScene("Main")//跳转到游戏场景
}
就写这一个,用来跳转场景
新建按钮给按钮添加刚刚写好的事件
然后加一个文字标题
就像这样
回到Main场景新建一个按钮移动到合适的位置
在MainController脚本里面再写一个事件
fanhui_function(){
cc.director.loadScene("Start");//返回开始场景
}
给刚刚新建的按钮绑定这个事件
然后就可以在开始场景和游戏场景之间随意切换了
结束语
Cocos技术交流Q群:1130122408
欢迎进群闲聊、技术交流都欢迎
源码在群里
制作不易,感谢你的观看
Thank You~~