CocosCreator像素鸟小游戏实现(有源码)超详细教程 TS实现小游戏 零基础开发
CocosCreator像素鸟小游戏实现(有源码)超详细教程 TS实现小游戏
大家中秋国庆快乐哈
前言
老规矩先看效果
源码的获取方式在最下面
对于本游戏来说canvas这样设置最佳哦
游戏实现思路:小鸟的位置是全程不动的,只有管子和地面在动。需要用到物理引擎和碰撞系统,物理引擎来让小鸟下落,并在点击屏幕的时候让小鸟飞起来,碰撞引擎用来判断小鸟和障碍物碰撞,还需要存储和读取历史最高分等等
本文章的目录
前言
一、搭建场景
二、写代码
一、搭建场景
搭建基本场景
新建一个场景取名为Game并且打开
设置好canvas
把背景图拖到场景中,把背景的大小设置成和canvas一样大,还需要添加widget组件来让背景填满整个屏幕
再把地面拖过来,要拖两个,因为需要两个地面交替移动才能看起来地面时一直在动的
大小也要设置好,为了区分还需要改下名字
接下来就拖我们的主角小鸟到场景啦
给小鸟添加动画组件,添加spriteFrame属性然后把图片一张一张拖进去,并按照图片设置好各种参数
小鸟向下落需要用到物理引擎,所以需要刚体和物理碰撞体,刚体的类型当然就是动态(Dynamic)
为了方便对管子的移动进行控制,游戏碰撞这一块我就没有用物理碰撞,而是单独用了碰撞系统来判断碰撞,小鸟还需要添加碰撞组件(两个地面也需要碰撞组件哦!)
放置管子
像素鸟中的管子一共是三组,不断的向左移动,当管子的最右边小于了屏幕的最左边,也就是说当管子超出屏幕的时候就需要让管子重新回到屏幕最右边,像这样一直循环
新建三个空节点,每个空节点放两个管子(一个向上的管子一个向下的管子)
每个管子都需要添加碰撞组件哦!!
现在场景应该是这样的
UI
UI是游戏和玩家之间交互的介质,任何游戏都少不了UI
像素鸟这个游戏是在点击屏幕的时候让小鸟向上飞,所以需要给canvas添加button(按钮)组件
还需要两个按钮,一个用来开始游戏,一个用来重新开始,为了让游戏看起来美观还可以加一个Logo,最后再加上分数和历史最高分就很完美了
(分数节点取名为score_label,历史最高分取名为history_label,开始游戏按钮取名为btnPlay,重新开始按钮取名为btnGameover)
都加上之后的样子
二、写代码
场景搭建好了,需要脚本来控制场景的这些节点
新建一个TS脚本,取名为Main(Main脚本里面写游戏的主要逻辑)
把下面的代码复制粘贴到脚本里
每一句代码我都写了很详细的注释哈
我简单总结了一下,代码里面实现的内容有
- 计算好每组管子的最佳位置,使它们均匀的分布
- 初始化历史最高分,当得分超过历史最高分时就重新存储
- 游戏开始时第二组和第三组管子的Y坐标随机加上一个数(第一组管子不加是因为可能在游戏开始之前就和小鸟发生碰撞,这就会出现很多问题,在游戏开始之后还是需要加)
- 在游戏开始时的0.05秒后暂停整个游戏(在0.05秒后暂停是为了先让一些必要的东西加载)
- 管子和地面的无限移动
- 每移动一次管子就加2分
- 每帧更新分数
- 点击屏幕时通过设置小鸟的线速度来实现上飞的效果
- 游戏结束时暂停整个场景
const {ccclass, property} = cc._decorator;@ccclass
export default class NewClass extends cc.Component {@property(cc.Node)logo:cc.Node = null;//标志(logo),也就是FlappyBird@property(cc.Node)p0:cc.Node = null;//第一组管子@property(cc.Node)p1:cc.Node = null;//第一组管子@property(cc.Node)p2:cc.Node = null;//第一组管子@property(cc.Node)groud0:cc.Node = null;//第一个地面@property(cc.Node)groud1:cc.Node = null;//第二个地面@property(cc.Node)btn_play:cc.Node = null;//开始游戏按钮@property(cc.Node)btn_gameover:cc.Node = null;//重新开始按钮@property(cc.Label)score_label:cc.Label = null;//分数文字@property(cc.Label)history_label:cc.Label = null;//历史最高分文字@property(cc.Animation)bird_anim:cc.Animation = null;//小鸟的动画组件@property(cc.RigidBody)bird_rig:cc.RigidBody = null;//小鸟的刚体组件@property(cc.AudioSource)onbtn_music:cc.AudioSource = null;@propertyis_debug:boolean = false;//是否调试@propertyscore:number = 0;//分数onLoad(){if(cc.sys.localStorage.getItem("his") == null){//如果历史最高分为空cc.sys.localStorage.setItem("his",0);//初始化历史最高分}this.history_label.string = "历史最高分:" + cc.sys.localStorage.getItem("his");//更新历史最高分this.groud0.width = this.node.width;//把第一个地面的宽设置为屏幕的宽this.groud1.width = this.node.width;//把第二个地面的宽设置为屏幕的宽this.groud0.y = -this.node.height / 2 + this.groud0.height / 2;//设置两个地面的Y坐标为最佳this.groud1.y = this.groud0.y;this.groud1.x = this.groud0.x + this.groud1.width;//让第二个地面在第一个地面的右侧,并且紧紧贴在一起let phy_manager = cc.director.getPhysicsManager();//获取物理引擎phy_manager.enabled = true;//开启物理引擎phy_manager.gravity = cc.v2(0,-500);//下落速度if(this.is_debug == true){//如果需要调试就绘制调试信息cc.director.getPhysicsManager().debugDrawFlags = cc.PhysicsManager.DrawBits.e_aabbBit |cc.PhysicsManager.DrawBits.e_pairBit |cc.PhysicsManager.DrawBits.e_centerOfMassBit |cc.PhysicsManager.DrawBits.e_jointBit |cc.PhysicsManager.DrawBits.e_shapeBit;let manager = cc.director.getCollisionManager();//获取碰撞引擎manager.enabledDebugDraw = true;//是否绘制碰撞组件的形状,默认为不绘制manager.enabledDrawBoundingBox = true;//是否绘制碰撞组件的包围盒,默认为不绘制}else{//如果不调试就不绘制cc.director.getPhysicsManager().debugDrawFlags = 0;}let manager = cc.director.getCollisionManager();//获取碰撞引擎manager.enabled = true;//开启碰撞引擎this.bird_anim.play("Bird");//播放小鸟煽动翅膀的动画let width = this.node.width;//获取屏幕宽let p_width = this.p0.children[0].width;//获取管子宽let interval = (width + p_width) / 3;//获取间距this.p0.x = interval;//设置第一组管子的位置this.p1.x = this.p0.x - interval;//设置第二组管子的位置this.p2.x = this.p1.x - interval;//设置第三组管子的位置console.log("屏幕宽" + width);//打印logconsole.log("管子宽" + p_width);console.log("间距" + interval);this.p1.y = 80 - Math.random() * 160;//开始的时候除了第一组,每一组管子的Y坐标是随机的this.p2.y = 80 - Math.random() * 160;this.scheduleOnce(function() {//定时器,0.05秒后执行,目的是在加载一些必要的东西之后再暂停游戏cc.director.pause();//暂停游戏console.log("暂停游戏");},0.05);}update(){this.groud0.x -= 2;//移动地面this.groud1.x -= 2;this.p0.x -= 2;//移动管子this.p1.x -= 2;this.p2.x -= 2;let left = - this.node.width / 2;//屏幕的最左边let right = this.node.width / 2;//屏幕的最右边if(this.groud0.x + this.groud0.width / 2 < left){//如果地面一超出屏幕最左边就把地面移动到最右边this.groud0.x = this.node.width;//移动到最右边console.log("地面移动了");}if(this.groud1.x + this.groud1.width / 2 < left){//如果地面二超出屏幕最左边就把地面移动到最右边this.groud1.x = this.node.width;//移动到最右边console.log("地面移动了");}if(this.p0.x + this.p0.children[0].width / 2 < left){//如果第一组管子超出屏幕最左边this.p0.x = right + this.p0.children[0].width / 2;//把第一组管子移动到屏幕的最右边this.p0.y = 80 - Math.random() * 160;//随机设置Y坐标this.add_score(2);//加2分console.log("管子移动了");}if(this.p1.x + this.p1.children[0].width / 2 < left){//如果第二组管子超出屏幕最左边this.p1.x = right + this.p1.children[0].width / 2;//把第二组管子移动到屏幕的最右边this.p1.y = 80 - Math.random() * 160;//随机设置Y坐标this.add_score(2);//加2分console.log("管子移动了");}if(this.p2.x + this.p2.children[0].width / 2 < left){//如果第三组管子超出屏幕最左边this.p2.x = right + this.p2.children[0].width / 2;//把第三组管子移动到屏幕的最右边this.p2.y = 80 - Math.random() * 160;//随机设置Y坐标this.add_score(2);//加2分console.log("管子移动了");}this.score_label.string = "分数:" + this.score.toString();//实时更新分数 }onbtn(){//点击屏幕时应该执行的代码console.log("点击了屏幕");this.bird_rig.linearVelocity = cc.v2(0,200);//让小鸟上升this.onbtn_music.play();//播放音效}onbtn_play(){//开始游戏按钮执行的函数console.log("开始游戏");cc.director.resume();//恢复已经暂停的游戏this.btn_play.active = false;//隐藏开始游戏按钮this.btn_gameover.active = false;//隐藏重新开始按钮this.history_label.node.active = false;//隐藏历史最高分this.logo.active = false;//隐藏logo}onbtn_gameover(){//重新开始按钮执行的函数console.log("重新开始");cc.director.resume();//让已经暂停的游戏恢复cc.director.loadScene("Game");//重新进入游戏}add_score(num:number){//加分函数,num为想要加的分值this.score += num;//加分}GameOver(){//游戏结束时应该执行的代码console.log("游戏结束");cc.director.pause();//暂停游戏this.btn_gameover.active = true;//显示重新开始按钮this.bird_anim.stop("Bird");//停止小鸟扇翅膀动画if(this.score > cc.sys.localStorage.getItem("his")){//如果当前的得分超过了历史最高分cc.sys.localStorage.setItem("his",this.score);//重新记录历史最高分console.log("破纪录了!");}}}
把写好的脚本挂到canvas上面
接下来一个一个绑定吧
按钮的事件还没有绑定,一个一个绑定
游戏开始的时候重新开始按钮是隐藏的哦
然后游戏就完成喽
Cocos技术交流Q群:1130122408
欢迎进群闲聊、技术交流都欢迎
源码在群里
制作不易,感谢你的观看
Thank You~~
CocosCreator像素鸟小游戏实现(有源码)超详细教程 TS实现小游戏 零基础开发相关推荐
- 三子棋(N子棋)游戏的保姆级超详细教程(C语言)
写在前面(前言) 1. 何为三子棋: 三子棋是一种民间传统游戏,又叫九宫棋.圈圈叉叉棋.一条龙.井字棋等.游戏分为双方对战,双方依次在9宫格棋盘上摆放棋子,率先将自己的三个棋子走成一条线就视为胜利,而 ...
- 微信weixin小程序开发源码资源学习教程汇总
微信weixin小程序开发源码资源学习教程汇总 目录 官方文档 工具 插件 教程 视频教程 文章 组件 Demo 置顶 WePY:组件化的小程序开发框架 ? WePY 开发资源汇总 ? 官方文档 小程 ...
- chatgpt智能问答微信小程序+后端源码+视频搭建教程
chatgpt智能问答微信小程序+后端源码+视频搭建教程,这是一套微信小程序,后端是thinkphp框架为接口的,后端是前后端分离用elmentUI的源码框架. 小狐狸GPT付费体验系统是一款基于Th ...
- 小程序源码:全网独家小程序版本独立微信社群人脉系统社群空间站最新源码开源+详细教程
功能介绍: 1.微信社群是一个集发布.展示社群信息.人脉推广的裂变工具/平台. 2.通过人脉广场,将商家信息通过名片进行展示,让资源对接.人脉推广更加便捷高效.为平台带来更多流量,让平台更有价值. 3 ...
- unity5.6滑雪游戏skiing源码DownhillSkiingGame。支持安卓+IOS双端 C#语言开发。
unity5.6滑雪游戏skiing源码DownhillSkiingGame.支持安卓+IOS双端 C#语言开发.拿来学习研究和二次开发都很不错. 源码下载 unity5.6滑雪游戏skiing源码D ...
- html5游戏开发-零基础开发《圣诞老人送礼物》小游戏
开言: 以前lufy前辈写过叫"html5游戏开发-零基础开发RPG游戏"的系列文章,在那里面我学习了他的引擎以及了解了游戏脚本.自从看了那几篇文章,我便对游戏开发有了基本的认识. ...
- html5游戏开发-零基础开发RPG游戏-开源讲座(三)-卷轴对话实现
前两篇,RPG的开发已经实现了添加地图和添加游戏人物,本篇来实现地图的卷轴滚动和人物对话的实现,效果如下 想要了解前两篇内容,请电击下面的链接 html5游戏开发-零基础开发RPG游戏-开源讲座(一) ...
- html5游戏开发-零基础开发RPG游戏-开源讲座(四)-游戏脚本化地图跳转
首先,本篇文章是零基础开发RPG游戏-开源讲座系列文章的第四篇,来实现游戏的脚本化,和利用游戏脚本实现地图场景的切换,离上次更新貌似很长时间了,你在看下面的文字之前,需要先了解前三篇在下啰嗦了些什么东 ...
- 小程序的 HelloWord 01《 程序员变现指南之 微信QQ 小程序 真的零基础开发宝典》
本系列教程是针对粉丝的变现教程,还不是粉丝的可以关注我并且到社区:https://bbs.csdn.net/topics/603436232 进行打卡,不是老粉的也可以获取最终的技术变现学习,最终还有 ...
最新文章
- Android ListView (多个adapter 说明)
- Eclipse如何生成jar包
- arduino代码运行时间测试函数,代码性能运行时间测试方法
- Educational Codeforces Round 112 E.Boring Segments-线段树+双指针
- 使用OAuth2令牌的安全REST服务
- java程序设计计算器_Java程序设计计算器(含代码)
- 综合应用WPF/WCF/WF/LINQ之十七:关于简化发布新版本的步骤的问题
- 潭州Java中级班(day_13)-异常概述
- 算法:移除最外层的括号1021. Remove Outermost Parentheses
- 京东数科发布《京东区块链技术实践白皮书2020》(附白皮书下载链接)
- 【LaTeX】复杂表格的制作:Excel2LaTeX及细节调整
- remoting 最简单的一个例子
- popupwindow拦截点击物理返回键
- java面试题saas
- 2020.7.22英谷实训日志
- TCP/IP面试相关问题
- 动网三部曲(二)dvbbs7.0sp2后台权限提升
- 【搞定Jvm面试】 Java 内存区域揭秘附常见面试题解析
- stunnel客户端的使用
- linux压缩文件夹怎么看进度,dd进度的查看方法
热门文章
- DAY45(DAY46拓展):SOCKS 代理技术
- java博客论坛设计报告_javaweb课程设计报告个人博客网站的实现(Java).doc
- C语言:链表实现二进制数加1运算
- 如何让vs2019的主题变好看(NightOwl主题为例)???像vscode和webstorm一样自定义主题!!!
- CSS 艺术之暗系魔幻卡牌
- python浓缩(13)面向对象编程
- Pytest(17)运行未提交的git(pytest-picked)
- access tempvars 宏_Access数据库教程之使用常用对象来加快Access 2007数据库三
- 使用 PetaLinux 自定义 ZynqMP 平台
- 2023届校招算法岗知识超全总结