作者:Runner_Yang(简书作者) 本文由原作者授权发布,如转载,请联系授权。
1.分析页面结构,理清需求和功能
游戏有三个界面,分别是开始界面,游戏界面和游戏结束界面。
1.1 开始界面
start.gif
1.2 游戏界面
play.gif
1.3 结束界面
2. 开发“开始界面”
考虑到草地的移动效果,我们在页面中加入两个草地
2.1 HTML
2.2 CSS
将wrapBg中的overflow:hidden注释掉的页面效果
开始界面.jpg
2.3 JS
小鸟煽动翅膀的效果需要用到逐帧动画的原理
逐帧动画是一种常见的动画形式(Frame ByFrame),其原理是在“连续的关键帧”中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画。
bird1.png
bird0.png
2.3.1 开始标题的摆动
2.3.2 移动的草地
2.3.3 Start按键
完成后的效果(注释掉了wrapBg中的overflow:hidden)
start01.gif
接下来我们开发“游戏界面”
3. “游戏界面”的开发
游戏界面中有三样元素,分别是“小鸟”,“障碍”,和“计分器”,我们依次来创建相应的对象。
3.1 小鸟
首先,创建小鸟的对象, bird.js 文件。
下面,实现点击start按钮时,加载小鸟。(在之前的代码基础上添加)
添加小鸟后的效果
play01.gif
3.2 障碍(上管道和下管道)
block示意图.png
障碍分为上管道和下管道,如示意图所示结构嵌套,这样就可以通过随机设置DownDiv2的高度和gapHeight的高度,来改变生成障碍的形态
block.js
公共对象文件 baseObj.js ,用来提供随机数,和两个矩形div的碰撞检测
下面我的想法是在start按钮点击的时候创建一个block,把这个block存储到数组blocksArr 中,在landTimer 定时器的方法 landRun 中检查此数组的长度,如果数组不为空数组,那么就让数组中所有的block移动。
检查数组中最后一个block离开的距离,达到一定距离,就重新new 一个block,添加到数组。
检查数组中第一个block,一旦达到一定位置,就在结构中移除downDivWrap和upDivWrap,同时在数组中删除block。
当前的游戏效果
play02.gif
3.3 计分器
游戏中的计分器相对较好实现,我们就实现最大为三位数的计分器吧。
html
css样式
js
实现计数器功能,最重要的是如何判断走过水管的数量,我们以水管的位置来判断。bird的定位left为50px,水管的宽度是62px,当水管越过小鸟的时候,水管距离它父级的定位 offsetLeft 是 -12px。每当有一个水管到达此位置,score++;
在start按钮的事件处理程序中加入
目前效果,计数器功能完成。
play03.gif
4.“结束界面”的开发
当小鸟和管道碰撞或者和地面碰撞时候,隐藏计分器,弹出结束面板。 结束界面主要有“结束面板”和“ok”按钮,这里需要为“ok”按钮添加点击事件。
最终效果
play04.gif
有兴趣的朋友,可以下载代码,然后加上音效。OK,结束。
点击“阅读原文”获取源码。