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;//历史最高分@propertytime:number = 10;//开始时候的时间@propertycishu:number = 0;//点击的次数@propertyhistory_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;//点击次数+1console.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;//历史最高分@propertytime:number = 10;//开始时候的时间@propertycishu:number = 0;//点击的次数@propertyhistory_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;//点击次数+1console.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~~
CocosCreator拼手速小游戏(教程 + 源码)TS实现小游戏相关推荐
- 网易严选php版本小程序,Thinkphp5.0内核开发仿网易严选微信小程序商城源码 电商小程序源码...
仿网易严选微信小程序商城源码 电商小程序源码 安装环境:php5.3及以上+mysql,开启https Thinkphp5.0内核开发的电商类小程序源码整站后端+前台仿网易严选商城化妆品电商小程序,完 ...
- 最新全开源AI人工智能名片小程序PHP源码 电子名片小程序制作源码
分享一款最新全开源AI人工智能名片小程序PHP源码,电子名片小程序制作源码,含完整前后端.代码包和详细的安装部署搭建教程. 程序基于微信,一张名片打通六套系统:小程序应用+人工智能精准获客+名片裂变系 ...
- 小视频APP源码开发者对小视频平台的三个忠告
在这个短视频APP火爆的时代,小视频APP源码供不应求,无数人都想进来掺和一脚,因此无数短视频APP层出不穷,质量也是参差不齐,在此,我作为一个小视频APP开发人员,向各位想要开发短视频APP的朋友们 ...
- 【云开发】全网最详细壁纸小程序教程+源码
程序特点: 1.本款小程序为云开发版本,不需要服务器域名 2.本程序反应速度极快,拥有用户投稿.积分系统. 3.独家动态壁纸在线下载,给用户更多的选择 4.最新版套图功能 源码下载: 链接:https ...
- 开源小游戏app源码和H5小游戏源码大全
从技术上讲,微信小程序游戏框架在小程序框架中加入了程序游戏库API.因此,小程序游戏只能在小程序环境下运行,既不是原生程序游戏也不是HTML5程序游戏.也就是说,小程序游戏与HTML5程序游戏紧密相关 ...
- 枪战游戏html源码,html5西部牛仔枪战游戏源码
压缩包内容概览: html5西部牛仔枪战游戏源码-H53dGAME ; 地图集 ; 旗帜 ; 羽毛灯.MIN ; 字体 ; 图标256 ; 图片 ; 索引 ; 模型 ; 声音 ; 菜单 ; 戏剧 ; ...
- rts游戏服务器源码,unity即时战略游戏源码Real-time strategy (RTS) game kit
unity即时战略游戏源码Real-time strategy (RTS) game kit (Modern Tactics) 1.2.1 Requires Unity 4.5.2 or hig ...
- rts游戏服务器源码,unity即时战略游戏引擎RTS Engine 1.2.0 源码
描述 unity即时战略游戏引擎RTS Engine 1.2.0 源码 Requires Unity 5.6.1 or higher. The Unity RTS Engine provides a ...
- c语言游戏服务器源码,2018大师级C++游戏服务器编程实战(视频+源码)
免费 任务1: 课程预览PPT 免费 任务2: 课程概述 27:18 免费 任务3: IP详解第一部分 35:22 免费 任务4: IP详解PPT 免费 任务5: IP详解第二部分 31:45 免费 ...
最新文章
- SpringBoot学习平台
- linux启动tomcat很久或者很慢Tomcat启动时卡在“INFO: Deploying web application directory ......”的解决方法...
- 让你用 Chrome 上网快到想哭:Vimium
- 2020-09-27 What is Sector-Bounded Nonlinearities?
- HttpClient 使用
- SharePoint 2010 隐藏快速启动栏(左侧导航)
- myabtis 数字+逗号 传参问题 $和#
- Bone Collector【01背包】
- FPGA阻塞赋值与非阻塞赋值用法
- VB的KeyAscii
- wpf menuitem 点击控件元素_一招教你如何在WPF界面开发时自定义外观,快来Get
- 【thm】windows内网提权之Windows PrivEsc Arena
- 【2020/05/29 开庭】韦东山:闲鱼与盗版更配,坚决打击盗版,起诉到底绝不和解!
- 【解决方案】windows7无法启动,报0xc000014c错误,系统注册表丢失或损坏
- android icon psd,60个PSD格式的ICON和按钮模板
- EDK2编译报错,请帮我看看这个是什么错误
- 手机号时间戳加密传到前端_如何在不到一个小时的时间内加密您的一生
- 分享一个下载无损音乐的网站,且用且珍惜!
- 通过限制挖矿病毒cpu占用率来解决挖矿病毒,简单奏效
- depot_tools原理和实现
热门文章
- Linux入门--1
- macbook如何清除数据?Mac如何清理长时间的垃圾文件?
- 表格斜线 纯html实现画直线的方法
- RiPro主题-子主题huzao-child美化包v4.0带更新(附下载插件)
- 云服务器配置选择的一些小技巧
- 解决在qq群下载东西或者压缩包慢的现象,先转发到另一个qq号,然后再下载
- 【内网安全】——Windows权限维持
- 小米潘多拉路由器添加节点_腾讯网游加速器联手小米路由器,共创全场景游戏加速体验!...
- MFC高级控件RichEdit2.0的使用
- FFmpeg入门详解之86:RTP/RTCP协议讲解