教你用 HTML5 制作Flappy Bird(下)
本文由 伯乐在线 -杨帅 翻译自 lessmilk。未经许可,禁止转载!
欢迎加入:技术翻译小组,或分享原创到伯乐头条。
在上一篇HTML5教程中,我们做了一个简化版的Flappy Bird。虽然可以“称得上”是一款游戏了,但却是一款很无聊的游戏。在这篇文章中我们来看一看如何给它添加动画效果和音效。虽然并没有改变游戏的机制,但却能够使游戏变得更加有趣。你可以点击这里先体验一下。
设置
首先下载新的模板。其中包括了我们在上一个教程中完成的代码和一个新的音效文件。
打开main.js,开始敲吧。
添加飞行动画
小鸟上下飞行的方式太单调了,我们来加一些特效,让它看起来有点儿游戏的样子。
1.下降时角度转动速度放慢,直到特定值。
2.上升时翻转角度。
第一个任务很简单,我们只需要添加两行代码到update()方法。
1
2
|
if (this.bird.angle < 20)
this.bird.angle += 1;
|
第二步我们有两个选择,
简单起见,我们可以只在jump()方法中添加
1
|
this.bird.angle = -20;
|
但是这中角度的骤变看起来有点儿别扭。所以,我们还可以让角度有个变化的过程。我们可以用如下代码替换掉上面的。
1
2
3
4
5
6
7
8
|
// create an animation on the bird
var animation = this.game.add.tween(this.bird);
// Set the animation to change the angle of the sprite to -20° in 100 milliseconds
animation.to({angle: -20}, 100);
// And start the animation
animation.start();
|
也可以揉成一行代码:
1
|
this.game.add.tween(this.bird).to({angle: -20}, 100).start();
|
这样一来就差不多了,如果你现在测试一下游戏,你会发现小鸟的角度变化得并不自然。像左边的图,但是我们想要的是右图的效果。
![](http://blog.lessmilk.com/content/images/2014/Feb/anchor.png)
为了达到这个目的,我们要做的是改变小鸟的中心(anchor)。在create()方法中添加如下代码来改变中心(anchor)。
1
|
this.bird.anchor.setTo(-0.2, 0.5);
|
现在测试一下游戏你就会发现已经好得多了。
添加失败动画
首先,更新update()方法:用hit_pipe()替换restart_rame()。
1
|
this.game.physics.overlap(this.bird, this.pipes, this.hit_pipe, null, this);
|
然后我们来写一个hit_pipe()方法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
hit_pipe: function () {
// If the bird has already hit a pipe, we have nothing to do
if (this.bird.alive == false )
return ;
// Set the alive property of the bird to false
this.bird.alive = false ;
// Prevent new pipes from appearing
this.game. time .events.remove(this.timer);
// Go through all the pipes, and stop their movement
this.pipes.forEachAlive( function (p){
p.body.velocity.x = 0;
}, this);
},
|
最后,为了保证撞了管子的小鸟不诈尸,在jump()方法的最前面添加如下代码:
1
2
|
if (this.bird.alive == false )
return ;
|
动画效果添加完毕。
添加音效
用Phaser添加音效非常容易。
(作者提供的音效文件貌似无法播放,大家可以找点儿别的代替。)
在preload()中添加
1
|
this.game.load.audio( 'jump' , 'assets/jump.wav' );
|
在create()中添加
1
|
this.jump_sound = this.game.add.audio( 'jump' );
|
最后在jump()中添加
1
|
this.jump_sound.play();
|
来实现跳跃音效的调用。
最终效果的源码可以点击这里下载
最后附上译者Flappy Bird纪录,求超越。
教你用 HTML5 制作Flappy Bird(下)相关推荐
- 用Phaser来制作一个html5游戏——flappy bird (一)
用Phaser来制作一个html5游戏--flappy bird (一) Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如 ...
- c语言像素鸟游戏,掌控板制作Flappy bird(像素鸟)小游戏
掌控板制作Flappy bird小游戏 大学时期火爆的手机游戏,记得那时候我在做unity开发,还用C#仿照写过这个游戏,用"空格键"操作. 先说一下这游戏的操作:游戏开始,点击屏 ...
- 【Unity3D基础教程】给初学者看的Unity教程(四):通过制作Flappy Bird了解Native 2D中的RigidBody2D和Collider2D...
作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点[推荐].谢谢! 引子 在第一篇文章[Unity3D基础教程] ...
- EGE 库入门——手把手教你从零完成 Flappy Bird 的编写
文章目录 运行效果图 什么是 EGE 安装 EGE 下载 找到你的 MinGW 复制文件 测试 开始吧 获取素材 下载 Apktool 下载一个 FlappyBird.apk 开始解析 前置知识 图片 ...
- canvas 制作flappy bird(像素小鸟)全流程
flappy bird制作全流程: 一.前言 像素小鸟这个简单的游戏于2014年在网络上爆红,游戏上线一段时间内appleStore上的下载量一度达到5000万次,风靡一时, 近年来移动web的普及为 ...
- cmd小游戏_使用pygame制作Flappy bird小游戏
原文链接: [Python]使用Pygame做一个Flappy bird小游戏(一)mp.weixin.qq.com 最近看到很多大佬用强化学习玩Flappy bird.所以打算也上手玩一玩,但是苦 ...
- Unity学习制作Flappy Bird小游戏(超详细全教程,可发布到PC、Web、Android平台)
本文中Flappy Bird基于Unity2019.4.7f1完成,源工程已部分代码改为适配安卓 flappy bird:一夜爆红的胖鸟 这是一款简单又困难的手机游戏,游戏中玩家必须控制一只胖乎乎的小 ...
- HTML5版Flappy Bird游戏源码下载
Flappy Bird相信大家都很熟悉了,2014年最热门的手机游戏之一.Flappy Bird这款游戏是一位来自越南河内的独立游戏开发者阮哈东开发,形式简易但难度极高的休闲游戏,很容易让人上瘾.今天 ...
- Flappy bird模式值得追捧么?
Flappy bird想必已经不用再介绍了.一张图就可表现它现在的风靡程度.对,那个到处都排在第一位的就是它了. 这是个越南"个体户"开发的游戏,开发者叫阮哈东(Nguyen Ha ...
最新文章
- R语言nchar函数统计字符串中字符个数实战
- WCF学习之旅—基于Fault Contract 的异常处理(十八)
- 区间数计算之Python实现
- fedora java 开发环境_在Linux(Fedora)下搭建JAVA开发环境
- SQLite.NET (32位) 在64位环境中无法正常调试
- sql 返回日期的年月部分_公示|2020年11月部分志愿活动名单公示
- 由m种数字组成的n位数有多少个
- java静态函数调用,书籍+视频+学习笔记+技能提升资源库
- 我有一个网站,想提高点权重
- linux下回收站在哪个文件夹,linux回收站在哪里
- revit 转换ifc_导出 IFC 文件以使用 BIM 软件进行编辑
- PBRT笔记(11)——光源
- tera term串口文本匹配打印时间脚本
- HTML,js,jQuery的1+S证书学习资料
- 企业必须面对云计算时代
- 【力扣刷题】121.买卖股票的最好时机(python)
- ABAP-接口-tcode:SPROXY-tcode:SXI_MONITOR
- java实现excel多级联动
- Scala study
- Self-augmented Unpaired Image Dehazing via Density and Depth Decomposition程序运行记录