教你用 HTML5 制作Flappy Bird(下)

上一篇HTML5教程中,我们做了一个简化版的Flappy Bird。虽然可以“称得上”是一款游戏了,但却是一款很无聊的游戏。在这篇文章中我们来看一看如何给它添加动画效果和音效。虽然并没有改变游戏的机制,但却能够使游戏变得更加有趣。你可以点击这里先体验一下。

设置

首先下载新的模板。其中包括了我们在上一个教程中完成的代码和一个新的音效文件。

打开main.js,开始敲吧。

添加飞行动画

小鸟上下飞行的方式太单调了,我们来加一些特效,让它看起来有点儿游戏的样子。

1.下降时角度转动速度放慢,直到特定值。
2.上升时翻转角度。

第一个任务很简单,我们只需要添加两行代码到update()方法。

第二步我们有两个选择,
简单起见,我们可以只在jump()方法中添加

但是这中角度的骤变看起来有点儿别扭。所以,我们还可以让角度有个变化的过程。我们可以用如下代码替换掉上面的。

也可以揉成一行代码:

这样一来就差不多了,如果你现在测试一下游戏,你会发现小鸟的角度变化得并不自然。像左边的图,但是我们想要的是右图的效果。

为了达到这个目的,我们要做的是改变小鸟的中心(anchor)。在create()方法中添加如下代码来改变中心(anchor)。

现在测试一下游戏你就会发现已经好得多了。

添加失败动画

首先,更新update()方法:用hit_pipe()替换restart_rame()。

然后我们来写一个hit_pipe()方法。

最后,为了保证撞了管子的小鸟不诈尸,在jump()方法的最前面添加如下代码:

动画效果添加完毕。

添加音效

用Phaser添加音效非常容易。
(作者提供的音效文件貌似无法播放,大家可以找点儿别的代替。)

在preload()中添加

在create()中添加

最后在jump()中添加

来实现跳跃音效的调用。

最终效果的源码可以点击这里下载

最后附上译者Flappy Bird纪录,求超越。

收藏 1 评论

关于作者:杨帅

(新浪微博:@JAVA程序员杨帅) 个人主页 · 我的文章

相关文章

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部