教你用 HTML5 制作Flappy Bird(上)

大概在两个月前,我给自己定了一个目标:每周在制作一个HTML5新游戏。截至目前,我已经有了9款游戏。现在很多人希望我能写一下如何制作这些游戏,在这篇文章中,让我们来一起用HTML5制作Flappy Bird。

Flappy Bird是一款非常优秀且容易上手的游戏,可以作为一个很好的HTML5游戏的教程。在这片教程中,我们使用Phaser框架写一个只有65行js代码的简化版Flappy Bird。

点击此处可以先体验一下我们即将要制作的游戏。

提示1:你得会JavaScript
提示2:想学习更多关于Phaser框架的知识可以看这篇文章getting started tutorial(最近工作忙,稍后翻译)

设置

先下载我为教程制作的模板,里面包括:

  • phaser.min.js, 简化了的Phaser框架v1.1.5
  • index.html, 用来展示游戏的文件
  • main.js, 我们写代码的地方
  • asset/, 用来保存小鸟和管子的图片的文件夹(bird.png和pipe.png)

用浏览器打开index.html,用文本编辑器打开main.js

在main.js中可以看到我们之前提到的Phaser工程的基本结构

接下来我们一次完成preload(),create()和update()方法,并增加一些新的方法。

小鸟的制作

我们先来看如何添加一个用空格键来控制的小鸟。

首先我们来更新preload(),create()和update()方法。

在这三个方法下面,我们再添加两个新的方法。

保存main.js并刷新index.html后你就可以得到一个用空格键来控制的小鸟了。

管子的制作

在preload()中添加管子的载入

然后再在create()中添加画一组管子的方法。因为我们在游戏中要用到许多管子,所以我们先做一个包含20段管子的组。

现在我们需要一个新的方法来把管子添加到游戏中,默认情况下,所有的管子都没有被激活也没有显示。我们选一个管子激活他并显示他,保证他在不在显示的情况下移除他的激活状态,这样我们就有用不尽的管子了。

之前的方法只显示了一段管子,但是我们在一条垂直的线上要显示6段,并保证中间有一个能让小鸟通过的缺口。下面的方法实现了此功能。

我们需要每1.5秒调用一次add_row_of_pipes()方法来实现管子的添加。为了达到这个目的,我们在create()方法中添加一个计时器。

最后在restart_game()方法的最前面添加下面这行代码来实现游戏重新开始时停止计时器。

现在可以测试一下了,已经有点儿游戏的样子了。

实现得分和碰撞

最后一步我们来实现得分和碰撞,这很简单。
在create()中添加下面的代码来实现分数的显示。

下面的代码放入add_row_of_pipes()用来实现分数的增加。

下面的代码放入update()方法来实现每次碰到管子时调用restart_game()。

大功告成!恭喜你获得了一个Flappy bird的HTML5版。点击这里获得全部资源。

游戏的功能已实现,但实在是太简陋了。下面的教程我们来添加音效、动画、菜单等。
教你用 HTML5 制作Flappy Bird(下)

原文作者twitter:@lessmilk

收藏 6 评论

关于作者:杨帅

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

相关文章

可能感兴趣的话题



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