CocosCreator拼手速小游戏（教程 + 源码）TS实现小游戏

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~~