CocosCreator像素鸟小游戏实现(有源码)超详细教程 TS实现小游戏 零基础开发 |
您所在的位置:网站首页 › 像素小鸟的游戏叫什么 › CocosCreator像素鸟小游戏实现(有源码)超详细教程 TS实现小游戏 零基础开发 |
CocosCreator像素鸟小游戏实现(有源码)超详细教程 TS实现小游戏
大家中秋国庆快乐哈 前言老规矩先看效果 本文章的目录 前言 一、搭建场景 二、写代码 一、搭建场景搭建基本场景 新建一个场景取名为Game并且打开 设置好canvas
场景搭建好了,需要脚本来控制场景的这些节点 新建一个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; @property is_debug:boolean = false;//是否调试 @property score: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);//打印log console.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 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |