介绍

拓展什么的都没有，真正的helloworld。
超简单版小鸟，看完上手一会儿就能搞出来。
没有繁杂的功能，只有简单的游戏性。
能飞，碰到柱子会死。能重开。

开发环境

CocosCreator v2.3.1
node.js v10.16.0
最好再搞个文本编辑器，方便使用。

游戏原理

鸟不动，背景动，柱子动。
但在视觉上是只有鸟在动。

找一个首尾相连的背景板，防止穿帮。
随便找一个看起来像可以飞的鸟图片，和像样的柱子，这里把柱子反转一下，就是上下两根，一对柱子。

文件结构

一般来说文件结构只放一下三个大目录：,

文件目录	Value
resources	用来放各种资源(音频，图片，字体等)
scene	场景，比如小鸟可以做三个场景，开始，游戏，结束。首先在开始场景，然后满足什么条件后进游戏场景，再挂了之后进结束场景。我这里开始，游戏中，结束全放在一个场景里完成了。
scripts	脚本，可以绑定各个节点写逻辑。

在程序猿视角里，游戏是如上的，在玩家眼里，只能看到框中的场景。
如下所示。
框中的是玩家视角

详细操作

根据需要完成的功能。
在game.js里面添加这四个节点

    properties: {skyBg:cc.Node,birdNode:cc.Node,pipes:cc.Node,btnStart:cc.Node,// audioClip: { // 关联音乐资源，this.audioClip等于一个数组，里面存放多个音乐资源//     default: [],//     type: cc.AudioClip// },},

把图片往场景里面脱，就会生成节点，再把节点拖到脚本上绑定这四个节点。鸟，钢管，背景，开始按钮

也可以脚本用如下方法获取。
let birdNode = cc.find(“Canvas/bird”);
先说明一下 update(dt){} 方法。
在脚本加载完运行后，每一帧调用一次，永久执行，dt为每一帧的秒数
以下代码全是放在update中

1. 背景无缝向左移动

        //背景平移this.skyBg.x-=5;if(this.skyBg.x<=-1200){this.skyBg.x=0;}

2. 钢管无缝向左移动

钢管可以用两种方法实现，一种是一直在最右边生成，当钢管从屏幕左边走出后删除。
另一种就是一开始固定好生成的钢管，全部左移，走出屏幕左边的就放到最右边去。
这里是用的移动。

         //钢管平移let pipeschild = this.pipes.children;for (let pipe of pipeschild){pipe.x -=5;if(pipe.x<=-600){pipe.y=(Math.random()-0.5)*150    pipe.x=600;// cc.log(pipe.x,pipe.y)if(pipe.active==false){pipe.active=true;}}}

3. 小鸟一直下坠，点击时跳跃

        //小鸟下坠，跳跃。this.power+=0.2;              //模拟重力下坠this.birdNode.y-=this.power;    //power为负数时往上飞if(this.birdNode.y<-320){this.birdNode.y=0;}

4. 鼠标点击屏幕时小鸟跳跃

创建一个空节点，宽高设置和屏幕一样大，用来监听全屏的鼠标点击事件。
由于点击事件会被它上层的点击节点给截取，所以要把其他点击按钮放在它之下，不然其他的全都监听不到，被此节点截取。
右下角是点击时触发game.js脚本中的addPower()方法

addPower(){this.power=-4;},

自己定义的方法最好放到如下位置

5. 小鸟碰到钢管时 gameOver()

        for (let pipe of pipeschild){if(Math.abs(pipe.x-this.birdNode.x)<=43){// let pipey=pipe.children[0].y;let birdy=this.birdNode.y;// console.log("此时的钢管位置：" +pipe.y);//初始值是0，上下浮动+-75// console.log("此时的下钢管位置：" +pipey);//相对总钢管一直没有变if(Math.abs(birdy-pipe.y)>=(75-10)){        //钢管中心点距离上下两端都是75，小鸟高度为24，this.gameOver();                        //算上边缘透明距离-2，所以为10}}}

全部代码

cc.Class({extends: cc.Component,properties: {skyBg:cc.Node,birdNode:cc.Node,pipes:cc.Node,btnStart:cc.Node,audioClip: { // 关联音乐资源，this.audioClip等于一个数组，里面存放多个音乐资源default: [],type: cc.AudioClip},},addPower(){this.power=-4;},playclick(){                    //按钮开关，游戏开始，且不再显示按钮this.playflag=true;this.btnStart.active=false;},gameOver(){                     //游戏结束调用，将参数复原this.playflag=false;this.power = 1;this.btnStart.active=true;this.birdNode.y=0;let i=200for (let pipe of this.pipes.children){pipe.x=i;i+=200;}},// LIFE-CYCLE CALLBACKS:// onLoad () {},start () {          // 等待游戏点击开始按钮，将playflag置为true.this.power=1;this.playflag=false;},update (dt) {if(this.playflag==false){   //代表游戏还没有开始return;}//背景平移this.skyBg.x-=5;// cc.log( this.skyBg.x);if(this.skyBg.x<=-1200){this.skyBg.x=0;}//小鸟下坠，跳跃。this.power+=0.2;this.birdNode.y-=this.power;    //power为负数时往上飞if(this.birdNode.y<-320){this.birdNode.y=0;}//钢管平移let pipeschild = this.pipes.children;for (let pipe of pipeschild){pipe.x -=5;if(pipe.x<=-600){pipe.y=(Math.random()-0.5)*150    pipe.x=600;// cc.log(pipe.x,pipe.y)if(pipe.active==false){pipe.active=true;}}}//碰撞检测for (let pipe of pipeschild){if(Math.abs(pipe.x-this.birdNode.x)<=43){// let pipey=pipe.children[0].y;let birdy=this.birdNode.y;// console.log("此时的钢管位置：" +pipe.y);//初始值是0，上下浮动+-75// console.log("此时的下钢管位置：" +pipey);//相对总钢管一直没有变if(Math.abs(birdy-pipe.y)>=(75-10)){        //钢管中心点距离上下两端都是75，小鸟高度为24，this.gameOver();                        //算上边缘透明距离-2，所以为10}}}},
});

游戏开发的HelloWorld,快速入门，新手上路，使用CocosCreator+JS,flyBird(飞翔小鸟）相关推荐

天下布魔新手的6点游戏建议教你快速入门的攻略
天下布魔新手刚下载进入到游戏中难免会懵,因为不知道怎么上手去玩.今天小编就以过来人的视觉,分享一下我当初的入门经验以及所走的弯路.希望各位新手玩家少走弯路,快速上手.并且我总结出了6大点新手建议,本文 ...
HTML5+app开发学习之快速入门篇
HTML5+app开发学习之快速入门篇 5+app开发概念理解相关开发环境与支持快速入门实战 5+app开发概念理解相关见博文:学习跨平台移动应用开发必须理解的一些概念开发环境与支持开发环境 ...
视频教程-做游戏学Python-Python语言快速入门-Python
做游戏学Python-Python语言快速入门 20年软件项目开发管理经验工信部人才交流中心特聘专家讲师日本U-CAN在线教育特聘主任讲师国家十二·五规划软件工程教材作者(书:清华大学出版社出版 ...
ecshop二次开发的简单快速入门教程
ecshop二次开发的简单快速入门教程,具体请下载文档 ecshop_dwt_lbi_详解.rar (106 KB) 下载次数: 9 转载于:https://my.oschina.net/u/3360 ...
python新手快速入门教程-Python 开发 14 天快速入门
专栏亮点零基础学习,循序渐进:专栏将编程语言的学习路线提炼为基础.中级.高级三层,内容由易到难,循序渐进,简练而生动地为读者呈现知识点. 内容全面,提炼要义:从核心概念到高级知识点,包括基本数据结构 ...
python快速入门答案-Python 开发 14 天快速入门
专栏亮点零基础学习,循序渐进:专栏将编程语言的学习路线提炼为基础.中级.高级三层,内容由易到难,循序渐进,简练而生动地为读者呈现知识点. 内容全面,提炼要义:从核心概念到高级知识点,包括基本数据结构 ...
3D游戏开发套件指南（入门篇）
今天将介绍最新的3D游戏开发套件.不论是使用2D还是3D游戏开发套件,都可以在不编写任何代码的情况下,通过设置与拖放便能快捷的实现游戏创意. 指南简介本指南将引导开发者设置一个空的场景,使用3D游戏 ...
Unity游戏开发之C#快速入门
C#是微软团队在开发.NET框架时开发的,它的构想接近于C.C++,也和JAVA十分相似,有许多强大的编程功能. 个人感受是C#吸收了众多编程语言的优点,从中可以看到C.C++.Java.Javasc ...
python快速入门教程-Python 开发 14 天快速入门
专栏亮点零基础学习,循序渐进:专栏将编程语言的学习路线提炼为基础.中级.高级三层,内容由易到难,循序渐进,简练而生动地为读者呈现知识点. 内容全面,提炼要义:从核心概念到高级知识点,包括基本数据结构 ...

游戏开发的HelloWorld,快速入门，新手上路，使用CocosCreator+JS,flyBird(飞翔小鸟）