专栏首页京程一灯JavaScript实现Fly Bird小游戏

JavaScript实现Fly Bird小游戏

作者:Runner_Yang(简书作者) 本文由原作者授权发布,如转载,请联系授权。

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

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

1.1 开始界面

start.gif

  • 游戏的大背景
  • 上下移动的游戏标题和翅膀摆动的小鸟
  • start 按钮,点击进入游戏界面
  • 一直移动的地面

1.2 游戏界面

play.gif

  • 显示越过障碍数量的计分器
  • 移动的障碍物,分别是上管道和下管道
  • 点击游戏界面,小鸟向上飞起,然后在重力作用下下坠,
  • 当小鸟和管道碰撞后,结束界面弹出,同时小鸟落到地面

1.3 结束界面

  • Game over 提示面板
  • OK 按钮

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,结束。

点击“阅读原文”获取源码。

本文分享自微信公众号 - 京程一灯(jingchengyideng),作者:Runner_Yang

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-12-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 增强网站无障碍功能的十条准则

    我们列出了十条关于网站无障碍功能的准则,它们能保证你的网站对任何人(包括残疾人)都是可用的。

    疯狂的技术宅
  • 微博上爆红的一个奇葩游戏,我看了20遍,笑到瘫痪……

    最近日本开始流行一款非常魔(qi)性(pa)的2D动作小游戏——《休むな!8分音符ちゃん♪》(不要停下来!八分音符酱♪)》。

    疯狂的技术宅
  • 前端“空城”师

    《三国演义》是虚拟的,所以历史上诸葛亮的空城计根本就不存在。然而在IT界,前端“空城师”们不断地上演着精彩绝伦的“空城计”。再完美的业务逻辑、数据交互,没有良好...

    疯狂的技术宅
  • 一段代码搞定优酷等视频网站的自适应

    健身器材厂家
  • 使用Angular HTTP client对数据模型进行创建操作

    需求:在Hero列表里增添创建hero的UI,点击Add按钮之后,可以创建新的Hero:

    Jerry Wang
  • (十五)c#Winform自定义控件-键盘(二)

    GitHub:https://github.com/kwwwvagaa/NetWinformControl

    冰封一夏
  • RocketMQ消息轨迹【源码笔记】

    在一个集群中可以配置一台机器专门负责消息轨迹的收集工作,该台机器上配置traceTopicEnable = true,borker启动的时候自动创建默认轨迹to...

    瓜农老梁
  • 以上帝视角看看Spark Streaming实现

    要说流式微批处理类似Spark Streaming,就不得不说一下TCP流。典型的tcp IO流模型有,bio,伪异步IO,NIO,AIO,Rector模型等。...

    Spark学习技巧
  • (十四)c#Winform自定义控件-键盘(一)

    GitHub:https://github.com/kwwwvagaa/NetWinformControl

    冰封一夏
  • 同步与异步、阻塞与非阻塞

    简单来说,同步是一种可靠的有序运行机制,当我们进行同步操作时,后续的任务是等待当前调用返回,才会进行下一步;而异步则相反,其他任务不需要等待当前调用返回,通常依...

    葆宁

扫码关注云+社区

领取腾讯云代金券