java fly bird小游戏_实战|JavaScript实现Fly Bird小游戏-【安基网】

1.分析页面结构，理清需求和功能

游戏有三个界面，分别是开始界面，游戏界面和游戏结束界面。

1.1 开始界面

1、游戏的大背景

2、上下移动的游戏标题和翅膀摆动的小鸟

3、start 按钮，点击进入游戏界面

4、一直移动的地面

1.2 游戏界面

1、显示越过障碍数量的计分器

2、移动的障碍物，分别是上管道和下管道

3、点击游戏界面，小鸟向上飞起，然后在重力作用下下坠，

4、当小鸟和管道碰撞后，结束界面弹出，同时小鸟落到地面

1.3 结束界面

1、Game over 提示面板

2、OK 按钮

2. 开发“开始界面”

考虑到草地的移动效果，我们在页面中加入两个草地

2.1 HTML

2.2 CSS

将wrapBg中的overflow:hidden 注释掉的页面效果

2.3 JS

小鸟煽动翅膀的效果需要用到逐帧动画的原理

逐帧动画是一种常见的动画形式(Frame By Frame)，其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。

2.3.1 开始标题的摆动

2.3.2 移动的草地

2.3.3 Start按键

完成后的效果(注释掉了wrapBg中的overflow:hidden )

接下来我们开发“游戏界面”

3. “游戏界面”的开发

游戏界面中有三样元素，分别是“小鸟”，“障碍”，和“计分器”，我们依次来创建相应的对象。

3.1 小鸟

首先，创建小鸟的对象，bird.js文件。

下面，实现点击start按钮时，加载小鸟。(在之前的代码基础上添加)

添加小鸟后的效果

3.2 障碍(上管道和下管道)

障碍分为上管道和下管道，如示意图所示结构嵌套，这样就可以通过随机设置DownDiv2的高度和gapHeight的高度，来改变生成障碍的形态block.js

公共对象文件baseObj.js，用来提供随机数，和两个矩形div的碰撞检测

下面我的想法是在start按钮点击的时候创建一个block，把这个block存储到数组blocksArr中，在landTimer定时器的方法landRun中检查此数组的长度，如果数组不为空数组，那么就让数组中所有的block移动。

检查数组中最后一个block离开的距离，达到一定距离，就重新new 一个block，添加到数组。

检查数组中第一个block，一旦达到一定位置，就在结构中移除downDivWrap 和 upDivWrap，同时在数组中删除block。

3.3 计分器

游戏中的计分器相对较好实现，我们就实现最大为三位数的计分器吧。html

css样式

实现计数器功能，最重要的是如何判断走过水管的数量，我们以水管的位置来判断。bird的定位left为50px，水管的宽度是62px，当水管越过小鸟的时候，水管距离它父级的定位offsetLeft是 -12px。每当有一个水管到达此位置，score ；在start按钮的事件处理程序中加入

计数器功能完成。

4.“结束界面”的开发

当小鸟和管道碰撞或者和地面碰撞时候，隐藏计分器，弹出结束面板。结束界面主要有“结束面板”和“ok”按钮，这里需要为“ok”按钮添加点击事件。

为“OK”按钮添加事件

最终效果

有兴趣的朋友，可以下载代码，然后加上音效。OK，结束。

https://github.com/YangQiGitHub/FlyBird

@IMWeb前端社区

http://www.jianshu.com/p/45d994d04a25微信：IMWebTech

Tag标签:

java fly bird小游戏_实战|JavaScript实现Fly Bird小游戏-【安基网】相关推荐

【微信小程序 - 工作实战分享】1.微信小程序发送手机短信验证码（阿里云）
发送手机短信验证码前言一. 准备工作二. 配置三. 实战代码(仅仅是后台代码,前端传入手机号) 总结前言在网站和移动应用中利用短信验证码进行信息确认是最常用的验证手段.随着短信验证码的技术 ...
【微信小程序】基于JavaScript的花店商城小程序微信云开发
[微信小程序]基于JavaScript的花店商城小程序微信云开发用Java Script语言进行一次微信小程序开发文章目录前言一.功能总览二.功能显示 1.搜索框 2.轮播图 3.主题导航栏 ...
java小恐龙游戏_用Python实现谷歌的小恐龙游戏
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. 谷歌流量器中有个很有名的彩蛋:当你网络出现问题时,就会出现一个"小恐龙游戏&quo ...
python爬取小游戏_如何用Python爬取小游戏网站，把喜欢的游戏收藏起来（附源码）...
简介: Python 是一门简单易学且功能强大的编程语言,无需繁琐的配置,掌握基本语法,了解基本库函数,就可以通过调用海量的现有工具包编写自己的程序,轻松实现批量自动化操作,可以极大提高办公和学习效率 ...
python连连看小游戏_利用Python制作一个连连看小游戏，边学边玩！
导语今天我们将制作一个连连看小游戏,让我们愉快地开始吧~ 开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Python自带的模块环境搭建安装Python并添加到环 ...
python实现图片找不同游戏_用Python实现谷歌的小恐龙游戏
(给Python开发者加星标,提升Python技能) 来源: Charles的皮卡丘-白露未晞me理谷歌流量器中有个很有名的彩蛋:当你网络出现问题时,就会出现一个"小恐龙游戏". ...
用记事本编写小游戏_记事本3分钟编写放置小游戏（v0.4 土豪情趣屋与大型灵石盾构）...
------------------------- v0.4新增问山村的土豪情趣屋(大量生产人口),新增灵石盾构(提升灵石产量)! ------------------------- 说明: 本教程无 ...
路径压缩_实战｜python GUI压缩小程序
说到Python,我们常常想到的就是一个小窗口,黑黢黢的cmd窗口运行一下代码. 就像下图: 那Python可不可以做出来具有界面的程序呢?就像这样: 答案是可以的,那我们就要说一下Python GU ...
可以用python实现一些小发明_【kimol君的无聊小发明】—用python写图片格式批量处理工具...
前言某个夜深人静的夜晚,夜微凉风微扬,月光照进我的书房~ 当我打开文件夹以回顾往事之余,惊现许多看似杂乱的无聊代码.我拍腿正坐,一个想法油然而生:"生活已然很无聊,不如再无聊些叭" ...
mpvue 微信小程序_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全责编 | 阿秃转自 | 美团技术团队企业博客前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...

java fly bird小游戏_实战|JavaScript实现Fly Bird小游戏-【安基网】

java fly bird小游戏_实战|JavaScript实现Fly Bird小游戏-【安基网】相关推荐

最新文章

热门文章