双击你所建设的bird场景，cocos就会在 场景编辑器 和 层级打点器 中打开这个场景。打开场景后， 层级打点器 中会显示当前场景中的所有节点和它们的层级干系。我们方才新建的场景中只有一个名叫 Canvas 的节点，Canvas 可以被称为画布节点或渲染根节点，点击选中 Canvas，可以在 属性查抄器 中看到他的属性。
从资源包内里的texture目次下将名为的sky配景图片拖到Canvas中，作为游戏配景。调解Canvas和sky的size尺寸巨细。sky的size至少要大于Canvas，否则你建造的游戏大概会有很大的黑边。然后用相似的要领把bird0（其他两张是为了共同作出浅易帧动画，模仿小鸟的航行）、pipe1（下管道）、pipe2（上管道）添加到Canvas下。上下管道为一组，我复制了4组，一共5组。通过剧本节制配景和每组管道向左移动来到达小鸟一连向前航行的结果。
5.节点绑定需要留意，Canvas下的元素都是以node节点的形式来被打点的。在script中新建剧本文件—game.js，将其拖入Canvas中，可能直接绑定到Canvas上。确保在加载场景时剧本被一并加载。
Cocos Creator 为组件剧本提供了生命周期的回调函数。用户只要界说特定的回调函数，Creator 就会在特定的时期自动执行相关剧本，用户不需要手工挪用它们。
今朝提供应用户的生命周期回调函数主要有：
onLoad onLoad 回调会在节点首次激活时触发，好比地址的场景被载入，可能地址节点被激活的环境下。并且onLoad 老是会在任何 start 要领挪用前执行，凡是我们会在 onLoad 阶段去做一些初始化相关的操纵。
start start 回调函数会在组件第一次激活前，也就是第一次执行 update 之前触发。start 凡是用于初始化一些需要常常修改的数据，这些数据大概在 update 时会产生改变。
update 游戏开拓的一个要害点是在每一帧渲染前更新物体的行为，状态和方位。这些更新操纵凡是都放在 update 回调中。以下四个回调函数在此项目中不会用到
lateUpdate
onDestroy
onEnable
onDisable
主要代码game.js
cc.Class({ extends: cc.Component, properties: { skyNode: cc.Node,//界说天空节点 pipeNode: cc.Node,//界说管道节点 birdNode: cc.Node,//界说小鸟节点 clickLayerNode: cc.Node,//界说监听节点 监听鼠标点击事件 scoreNode: cc.Node,//界说得分节点 总得分节点 buttonNode: cc.Node,//界说按钮节点 开始游戏按钮 numberNode: cc.Node,//界说数字节点 加分combo overNode: cc.Node,//界说游戏竣事节点 竣事按钮 spriteFrame: {//界说精灵框架节点， default: [],//数组范例，将会绑定bird0、bird1、bird2三张图片精灵，通过在update（）要领中不绝改换，形成动画 type: cc.SpriteFrame //图片精灵范例 }, clip: {//界说音效节点 default: [],//同样为数组范例，便于绑定多个资源。后续进修，可实验利用动态加载 type: cc.AudioClip //音频范例 } }, onClickButton() {//配置点击按钮要领 this.num = 0;//将num重置为0 this.sign = true;//配置节制游戏是否继承的标识符为真 this.buttonNode.active = false;//让按钮节点不行见 this.overNode.active = false;//让节制“游戏竣事”文本的overNode节点不行见 this.birdNode.y = 50;//点击按钮后小鸟的位置归位 this.power = 0;//将气力因素变为0，防备小鸟复生后下落太快 this.scoreNode.getComponent(cc.Label).string = "" + this.num;//将分数节点的string值变为0,this.scoreNode.getComponent(cc.Label).string let list = this.pipeNode.children;//用一个list存储金属管道的子节点（.children） for (let i = 0; i < list.length; i++) {//配置一个轮回，终止条件是i小于list的长度 let child = list[i];//let 一个child变量用于在轮回中存储每个list[i] child.x += 1000;//将管道节点的x右移1000 } cc.audioEngine.playMusic(this.clip[0], true); }, onClickBagButton(event, data) { //界说背包按钮要领 // cc.log(event, data); if (data == "bag") {//判定传过来的参数便是某event的CustomEventData this.showBag(); // 挪用显示背包函数 } }, showBag() { //界说显示背包函数 if (this.bagPrefab == null) { //假如资源加载没有乐成 setTimeout(() => { //配置延时0.5s后继承挪用显示bag要领 this.showBag(); }, 500); return; } //资源加载完成 let node = null; //界说一个node赋值为空 if(this.isOpen){ //判定背包是否打开，this.isOpen初始值为false node = cc.find("Canvas/panelBag"); node.active = true; } else{ node = cc.instantiate(this.bagPrefab); //加载详细的预置资源并赋值给node cc.find("Canvas").addChild(node); //将node节点添加到Canvas幕布下 } node.opacity = 0;//配置node节点的透明度为0； node.scale = 0.1;//配置node节点的初始缩放为0.1； let ac = cc.spawn( //封装并行的动画并赋值给ac cc.fadeIn(0.5), //0.5s的速度淡入 cc.scaleTo(0.5,1),//0.5s的速度缩放到1 ); node.runAction(ac); //用runAction函数执行封装好的ac this.isOpen = true;//将背包打开参数赋值true }, gameOver() { //配置游戏竣事要领 this.sign = false;//游戏竣事，将游戏继承标识符变为false this.checkStill = false;//查抄游戏是否举办参数变为false this.buttonNode.active = true;//游戏竣事，让开始按钮this.buttonNode为可见 this.overNode.active = true;//游戏竣事，让“游戏竣事”文本的overNode节点可见 cc.audioEngine.stopMusic(this.clip[0]); //游戏竣事遏制配景音乐 }, addScore() { //配置加分要领 this.numberNode.opacity = 255;//让分数节点numberNode的.opacity元素（透明度）为255 this.num++;//让num值++ this.scoreNode.getComponent(cc.Label).string = "" + this.num;//让分数节点的string元素=空的的字符串“” 加num this.numberNode.y = this.birdNode.y;//让加分combo节点numberNode的y和小鸟节点的y相等 this.numberNode.runAction(//让加分combo节点numberNode渐入渐出runAction,spawn,fadeOut,moveBy cc.spawn( cc.fadeOut(0.5), cc.moveBy(0.5, cc.v2(0, 50)) ) ) cc.audioEngine.playEffect(this.clip[2]); //加分音乐 }, // LIFE-CYCLE CALLBACKS: onLoad() { // cc.director.getCollisionManager().enabled = true; //打开碰撞打点系统cc.director.getCollisionManager(). this.bagPrefab = null;//界说bagPrefab变量赋值为空 // cc.loader.loadRes(路径，资源范例，回调函数);error假如错误，打印错误信息，data为加载乐成的资源 cc.loader.loadRes("prefab/panelBag", cc.Prefab, (error, data) => { if (error) {//判定假如错误信息不为空 cc.log(error);//打印错误信息 return; } this.bagPrefab = data; //将加载到的资源赋值给this.bafPrefab }); }, start() { this.isOpen = false;//界说背包是否打开变量并置为false； this.num = 0;//将num参数变为0，防备游戏再开始时，得分管任上局的分数 this.scoreNode.getComponent(cc.Label).string = "" + 0;//配置分数初始值为0 this.speed = 5;//配置相对位移速度为5 this.power = 0;//配置气力参数为0 this.checkStill = true;//查抄游戏是否举办参数变为true this.curFrame = 0;//界说一个变量用于轮回skinnode列表 this.sign = false;//界说一个标识符节制游戏是否开始，初始值为false this.checkState = false;// false-非碰撞检测状态 true-碰撞检测状态 this.up = 0;// this.clickLayerNode.on(cc.Node.EventType.TOUCH_START, () => {//谁.on(cc.Node.EventType范例.事件，执行匿名要领() =>) this.power = 4;//将初始的气力参数直接由0置为4，确保每次监听到点击小鸟有较量明明的上升 this.up++; cc.audioEngine.playEffect(this.clip[1]); }) cc.audioEngine.playMusic(this.clip[0], true); }, update(dt) { if (!this.sign) {//配置让游戏暂停的标识符 return; } cc.log(2); this.skyNode.x -= this.speed;//通过节制天空节点的x值来节制配景移动 this.birdNode.y += this.power + this.up;//通过小鸟节点的y值和初始的气力参数来节制小鸟自由下落的速度 this.power -= 0.2;//通过让power小幅度值渐变到达让小鸟滑腻移动 this.birdNode.angle = this.speed * this.power;//通过气力和速度参数节制小鸟上升和下降的角度 if (this.skyNode.x < -1200) {//判定当配景和起点相隔1200像素时，让配景节点skyNode.x归位=0（无限轮回配景） this.skyNode.x = 0; } //node.children即管道节点的子节点 let list = this.pipeNode.children;//用一个list存储金属管道的子节点（.children） let checkNode = null;//界说查抄管道节点变量并赋值为null for (let i = 0; i < list.length; i++) {//用轮回赋值所有管道节点 并赋予速度 let child = list[i];//let一个child变量来存储list中的每个元素 child.x -= this.speed;//节制管道节点的x-=this.speed // cc.log(child); if (child.x < -600) { child.x = 600;//判定child出界< -600时让child归位到600 child.y = (Math.random() - 0.5) * 200;//通过Math.random()（其值在0-1之间）函数来节制管道通过口随机呈现，和缓值为200 } let dis = Math.abs(this.birdNode.x - child.x)//let一个变量dis用于计较小鸟和管道的x的差值（Math.abs取绝对值） let width = (this.birdNode.width + child.children[0].width) / 2;//界说width变量用于存储小鸟和管道碰撞的临界值 if (dis < width) {//判定 dis <= width，就给查抄管道节点变量赋值child checkNode = child; } } if(this.birdNode.y + this.birdNode.height / 2 > cc.winSize.height / 2 //判定小鸟的头部大于屏幕的上边沿可能小鸟的底部小于屏幕的下边沿 || this.birdNode.y - this.birdNode.height / 2 < -cc.winSize.height / 2){ this.gameOver();//执行游戏竣事要领 } if(checkNode) {//直接判定checkNode，假如未被赋值即为空 this.checkState = true;//状态从无到有，将查抄状态变量checkState赋值为true //判定矩形小鸟的上边框（.y + height/2）大于便是通道上边框(checkNode.y+100)可能小鸟的下边框小于便是通道 if (this.birdNode.y + this.birdNode.height / 2 > checkNode.y + 100 || this.birdNode.y - this.birdNode.height / 2 < checkNode.y) { this.gameOver();//游戏竣事 } }else{ if (this.checkState && this.checkStill) {//判定查抄状态变量和查抄游戏是否举办变量是否都为true（&&） this.addScore();//挪用加分函数 } this.checkStill = true; //将查抄游戏是否举办变量赋值true this.checkState = false;//将查抄状态变量赋值为false this.up = 0; } this.curFrame++;//小鸟帧率变量自增 if (this.curFrame > 2) {//判定假如帧率变量大于2，将帧率变量变为0； this.curFrame = 0; } if (this.birdNode.y) {//假如气力参数大于0 //让小鸟节点的Sprite组件的spriteFrame参数随帧率参数变革 this.birdNode.getComponent(cc.Sprite).spriteFrame = this.spriteFrame[this.curFrame]; } } })
总结