上一篇文章我们和大家分享了JS和H5编写推箱子游戏，本文主要和大家分享用js和H5标签编写经典游戏：Flappy Bird 简易版，希望能帮助到大家。
声明：本人初学js和h5，本文涉及编写方式以及算法如有更好地改进，请各位大佬提出建议~
一.能力要求：
JavaScript相关知识，HTML5，json，面向对象思想等。
二.需要完成以下工作：
1.设计游戏（包括小鸟、柱子等，我们必须遵循一条清晰的逻辑：鸟是在做竖直上抛和自由落体运动，柱子不断创建并向左移动，将鸟和柱子隔离开，各自动各自的）
2.画不会扇翅膀的小鸟
3.让鸟飞起来（自由落体，点击鼠标竖直上抛）
4.逻辑部分（柱子向左移动，小鸟碰到柱子游戏结束等）
立即学习“Java免费学习笔记（深入）”；
5.分数计算（每通过一个柱子分数加1）
6.加背景（图片，音乐，音效等）
三.开始编写：
首先我们需要创建4个类：game.html(用来运行游戏)，game.js(用来写逻辑部分)，paint.js(用来画物体)，pojo.js(用来创建对象，进行封装)
game.html类：
用HTML5编写，需要加，并且我习惯把margin设置为0：
nbsp;HTML>flappy bird /*设置边距为0*/body{margin:0px;overflow:hidden;}/*加背景*/#can1{background-image: url(背景.jpg);background-size:100%100%;} window.onload = function (){run(); };
登录后复制
其实在html文件里就调用run()方法，里面就写标签和用来调入音频文件
pojo.js类：用来存放类，我们需要两个类：小鸟的柱子。在这里，我们做的是简易版的，所以小鸟用圆近似代替，这样的话之后的碰撞检测好写一些。其中，确定的值直接写出来，可变的值不赋值。
书写格式如下：
//鸟类（圆代替）function Bird(color){//鸟的颜色this.color = color;//鸟巩膜的颜色this.eyeColor = 'white';//鸟巩膜的半径this.eyeRadius = 10;//鸟瞳孔的颜色this.eyeInsideColor = 'black';//鸟瞳孔的半径this.eyeInsideRadius = '2.5';//鸟初始位置this.left = 100;this.top = 300;//鸟身体半径this.size = 25;//鸟的速度this.v = 0;//向下为+向上为-//分数计算this.score = 0;//是否存活this.isLive = true;}
登录后复制
注意：我们一定要把鸟的所有属性要考虑到，封装好在game.js中使用
然后我们还需要写柱子（pillar）类：
//柱子类//上面下面各一个，在一个竖直线上；//上下柱子的间隔固定；//左右两列柱子间隔固定；//柱子的粗细固定；//柱子相对鸟的速度function Pillar(position, length){//柱子颜色this.color = 'lime';//柱子向左移动速度this.v = 8;//柱子宽度this.width = 80;//柱子位置，是每个柱子左上角的位置this.position = position;//柱子长度this.length = length;//柱子是否存在，意思一会解释this.isLive = true;//鸟是否通过当前柱子this.isPass = false;}
登录后复制
接下来我们要写paint.js类了，也是比较麻烦的一个类，需要用来画：
首先，最重要的，我建议每次写paint.js都放到最前面：清屏（如果不清的话，上一次的画的还会留下，就成“运动轨迹”了）：
//清屏function clearScreen(ctx){ctx.clearRect(0, 0, 1536, 750);}
登录后复制
然后，我们画小鸟，画鸟之前，我建议用画图工具画出鸟的大致形状，以便之后用代码画，这是我设计的鸟的图案（翅膀有点复杂，还不知道怎么画好，所以在程序里没有画，见谅）
设计出来以后，我们就可以开始在paint.js里面画了（我把获取画布和创建画笔写在了game.js里面而不是paint.js）：
//画鸟，同样，所有的变量属性都要考虑到，并且在画巩膜，瞳孔，嘴唇时候都要以变量作为基准！里面的参数需要耐下心来调整。function paintBird(ctx, left, top, size, color){ctx.beginPath();ctx.fillStyle = color;ctx.arc(left, top, size, 0, 2*Math.PI);//left:100top:300size:25ctx.fill();//画巩膜ctx.beginPath();ctx.fillStyle = bird.eyeColor;ctx.arc(left+13,top-8,bird.eyeRadius,0,2*Math.PI);ctx.fill();//画瞳孔ctx.beginPath();ctx.fillStyle = bird.eyeInsideColor;ctx.arc(left+18,top-8,bird.eyeInsideRadius,0,2*Math.PI);ctx.fill();//画嘴唇ctx.beginPath();ctx.strokeStyle = 'black';ctx.fillStyle = '#FC6747';ctx.moveTo(left+4, top+3);ctx.lineTo(left+29, top+3);ctx.lineTo(left+33, top+6);ctx.lineTo(left+29, top+9);ctx.lineTo(left+32, top+12);ctx.lineTo(left+29, top+15);ctx.lineTo(left+4, top+15);ctx.lineTo(left+1, top+9);ctx.closePath();ctx.stroke();ctx.fill();ctx.beginPath();ctx.strokeStyle = 'black';ctx.moveTo(left+1,top+9);ctx.lineTo(left+29,top+9);ctx.stroke();//画翅膀，简易版先不画}
登录后复制
画出来就是这个样子（ 我看着都想笑：） ）
然后画柱子：
//画柱子，我用了渐变色，虽然调整的并不是很好，但是还能看function paintPillar(ctx, left, top, width, height){ctx.beginPath();var grd=ctx.createLinearGradient(left,top,left+height,top);grd.addColorStop(0,"green");grd.addColorStop(0.45,"white");grd.addColorStop(1,"green");ctx.fillStyle = grd;ctx.fillRect(left, top, width, height);}
登录后复制
然后我们还要显示计分：
//计分function paintScore(ctx, score){ctx.fillStyle = 'red';ctx.font = '40px 黑体';ctx.fillText('分数:'+score, 1320, 40);}
登录后复制
到这里，我们的工作已经做了一半了，接下来就是最棘手的game.js了，需要考虑逻辑，碰撞，移动，计分等诸多问题。
首先介绍该如何设计小鸟的自由落体：
按照以上方法，编写程序如下：
//点击鼠标事件document.onmousedown = function (ev){//每点击一下出来音效var oAudio = document.getElementById('audio1');oAudio.src = '扇翅膀emm.wav';//每点击一下做一次竖直上抛jump(bird);}//鸟自由落体function drop(bird){bird.top = bird.top+bird.v;bird.v++;}//设置竖直上抛，直接将速度修改为负数即可function jump(bird){bird.v = -13;}
登录后复制
接下来是game.js，方便解释，我直接在代码中边编写边解释：
//游戏逻辑中枢//创建鸟的对象var bird = new Bird('#FBEE30');//创建柱子对象，把20个柱子放到数组中var pillar = new Array(20);var count = 0;function run(){//获取画布var oCan = document.getElementById('can1');//创建画笔，2dvar ctx = oCan.getContext('2d');//这timer1是游戏页面显示的东西的线程，每25毫秒刷新一次var timer1 = setInterval(function (){//每次画之前先清屏clearScreen(ctx);//判断鸟是否碰上柱子（是否死亡），死亡则弹框，结束线程if(!bird.isLive){alert('游戏结束!你的分数是'+bird.score+'!你好菜啊!')clearInterval(timer1);clearInterval(timer2);}//降落一下drop(bird);//判断鸟是否通过柱子for(var i = 0; i 733-bird.size){bird.isLive = false;bird.top = 733-bird.size;}//当小鸟嵌入上下柱子的左边时（检验鸟是否碰到柱子的左边）if(Math.abs(bird.left-pillar.position.x) pillar.position.y){bird.isLive = false;bird.left = pillar.position.x-bird.size;}}}//如果是上面柱子if(pillar.position.y == 0){//如果小鸟高度小于上面柱子if(Math.abs(bird.top-pillar.length) pillar.position.x && bird.left+bird.size pillar.position.x && bird.left+bird.size 四.总结：
1.用canvas，js制作时一定需要以上的几个类（当然可以合并，为了辨别每个类的功能我分成了那四个类），需要有面向对象的思想，图画时候用对象里面的参数来画，例如：
paintPillar(ctx, pillar[i].position.x, pillar[i].position.y, pillar[i].width, pillar[i].length);
登录后复制
2.关于柱子，我们必须符合这一条逻辑：先创建柱子数组（array），然后创建每个柱子，再画柱子，再移动，四个步骤缺一不可。
3.其中有对于算法的优化：在创建柱子的数组中，我们没有设置很多个柱子（比如说10000，虽然也不可能达到那么高的分），因为这样每25毫秒就要创建那么多柱子，再画和移动，内存占用很高，我们只用建立一个能存放20个柱子的数组，出屏幕的清掉，位置由新的代替，这样就极大程度减少了对内存的需要。
4.关于调试参数（比如说画鸟），要耐心调整，直到满意为止。
5.在检测鸟和柱子的碰幢时候，需要在逻辑上下功夫，建议先在稿纸上画出碰撞条件，再编写程序。
以上就是JavaScript和HTML5编写游戏Flappy Bird简易版的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2781074.html
