教你用 HTML5 制作Flappy Bird（上）

2014/03/22 · HTML5, JavaScript · 5 评论 · HTML5, Javascript

本文由 伯乐在线 - 杨帅 翻译。未经许可，禁止转载！
英文出处：lessmilk。欢迎加入翻译组。

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

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

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

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

教你用 HTML5 制作Flappy Bird（下）

2014/03/23 · HTML5, JavaScript · 1 评论 · HTML5, Javascript

本文由 伯乐在线 - 杨帅 翻译。未经许可，禁止转载！
英文出处：lessmilk。欢迎加入翻译组。

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

历史：移动时代的新开发标准，如HTML5，将在移动设备上获胜——乔布斯

设置

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

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

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

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

JavaScript

// Initialize Phaser, and creates a 400x490px game var game = new Phaser.Game(400, 490, Phaser.AUTO, 'game_div'); // Creates a new 'main' state that will contain the game var main_state = { preload: function() { // Function called first to load all the assets }, create: function() { // Fuction called after 'preload' to setup the game }, update: function() { // Function called 60 times per second }, }; // Add and start the 'main' state to start the game game.state.add('main', main_state); game.state.start('main');

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

// Initialize Phaser, and creates a 400x490px game var game = new Phaser.Game(400, 490, Phaser.AUTO, 'game_div');   // Creates a new 'main' state that will contain the game var main_state = {       preload: function() {         // Function called first to load all the assets     },       create: function() {         // Fuction called after 'preload' to setup the game         },       update: function() {         // Function called 60 times per second     }, };   // Add and start the 'main' state to start the game game.state.add('main', main_state);   game.state.start('main');

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

设置

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

打开main.js，开始敲吧。

H5游戏的历史可以追溯到2010年，当时还未过世的乔布斯宣布苹果系统将不支持Flash，引得一片哗然，为此，乔布斯特意写了一篇《关于Flash的几点思考》的文章作回应。

小鸟的制作

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

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

JavaScript

preload: function() { // Change the background color of the game this.game.stage.backgroundColor = '#71c5cf'; // Load the bird sprite this.game.load.image('bird', 'assets/bird.png'); }, create: function() { // Display the bird on the screen this.bird = this.game.add.sprite(100, 245, 'bird'); // Add gravity to the bird to make it fall this.bird.body.gravity.y = 1000; // Call the 'jump' function when the spacekey is hit var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); space_key.onDown.add(this.jump, this); }, update: function() { // If the bird is out of the world (too high or too low), call the &#h5游戏平台制作教程linux系统。039;restart_game' function if (this.bird.inWorld == false) this.restart_game(); },

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

preload: function() {       // Change the background color of the game     this.game.stage.backgroundColor = '#71c5cf';       // Load the bird sprite     this.game.load.image('bird', 'assets/bird.png'); },   create: function() {       // Display the bird on the screen     this.bird = this.game.add.sprite(100, 245, 'bird');       // Add gravity to the bird to make it fall     this.bird.body.gravity.y = 1000;         // Call the 'jump' function when the spacekey is hit     var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);     space_key.onDown.add(this.jump, this);     },   update: function() {       // If the bird is out of the world (too high or too low), call the 'restart_game' function     if (this.bird.inWorld == false)         this.restart_game(); },

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

JavaScript

// Make the bird jump jump: function() { // Add a vertical velocity to the bird this.bird.body.velocity.y = -350; }, // Restart the game restart_game: function() { // Start the 'main' state, which restarts the game this.game.state.start('main'); },

1 2 3 4 5 6 7 8 9 10 11

// Make the bird jump jump: function() {       // Add a vertical velocity to the bird     this.bird.body.velocity.y = -350; },   // Restart the game restart_game: function() {       // Start the 'main' state, which restarts the game     this.game.state.start('main'); },

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

添加飞行动画

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

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

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

JavaScript

if (this.bird.angle < 20) this.bird.angle = 1;

1 2	if (this.bird.angle < 20)       this.bird.angle = 1;

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

JavaScript

this.bird.angle = -20;

1	this.bird.angle = -20;

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

JavaScript

// 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 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();

也可以揉成一行代码：

JavaScript

this.game.add.tween(this.bird).to({angle: -20}, 100).start();

1	this.game.add.tween(this.bird).to({angle: -20}, 100).start();

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

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

JavaScript

this.bird.anchor.setTo(-0.2, 0.5);

1	this.bird.anchor.setTo(-0.2, 0.5);

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

他从开放性，网络，可靠性，安全等几个方面证明falsh并不适合苹果，在最后的总结中写道：

管子的制作

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

JavaScript

this.game.load.image('pipe', 'assets/pipe.png');

1	this.game.load.image('pipe', 'assets/pipe.png');

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

JavaScript

this.pipes = game.add.group(); this.pipes.createMultiple(20, 'pipe');

1 2	this.pipes = game.add.group();   this.pipes.createMultiple(20, 'pipe');

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

JavaScript

add_one_pipe: function(x, y) { // Get the first dead pipe of our group var pipe = this.pipes.getFirstDead(); // Set the new position of the pipe pipe.reset(x, y); // Add velocity to the pipe to make it move left pipe.body.velocity.x = -200; // Kill the pipe when it's no longer visible pipe.outOfBoundsKill = true; },

1 2 3 4 5 6 7 8 9 10 11 12 13

add_one_pipe: function(x, y) {       // Get the first dead pipe of our group     var pipe = this.pipes.getFirstDead();       // Set the new position of the pipe     pipe.reset(x, y);       // Add velocity to the pipe to make it move left     pipe.body.velocity.x = -200;       // Kill the pipe when it's no longer visible     pipe.outOfBoundsKill = true; },

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

JavaScript

add_row_of_pipes: function() { var hole = Math.floor(Math.random()*5) 1; for (var i = 0; i < 8; i ) if (i != hole && i != hole 1) this.add_one_pipe(400, i*60 10); },

1 2 3 4 5 6 7

add_row_of_pipes: function() {       var hole = Math.floor(Math.random()*5) 1;       for (var i = 0; i < 8; i )         if (i != hole && i != hole 1)             this.add_one_pipe(400, i*60 10);   },

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

JavaScript

this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes, this);

1	this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes, this);

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

JavaScript

this.game.time.events.remove(this.timer);

1	this.game.time.events.remove(this.timer);

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

添加失败动画

首先，更新update()方法：用hit_pipe()替换restart_rame()。

JavaScript

this.game.physics.overlap(this.bird, this.pipes, this.hit_pipe, null, this);

1	this.game.physics.overlap(this.bird, this.pipes, this.hit_pipe, null, this);

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

JavaScript

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); },

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()方法的最前面添加如下代码：

JavaScript

if (this.bird.alive == false) return;

1 2	if (this.bird.alive == false)       return;

动画效果添加完毕。

“移动设备关乎低功耗，触摸界面及开发网络标准，这些是Flash的短板。而移动时代的新开发标准，如HTML5，将在移动设备上获胜。”这句话在很多人眼中，尤其开发者眼中，似乎成为了H5游戏的尚方宝剑。

实现得分和碰撞

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

JavaScript

this.score = 0; var style = { font: "30px Arial", fill: "#ffffff" }; this.label_score = this.game.add.text(20, 20, "0", style);

1 2 3

this.score = 0;   var style = { font: "30px Arial", fill: "#ffffff" };   this.label_score = this.game.add.text(20, 20, "0", style);

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

JavaScript

this.score = 1; this.label_score.content = this.score;

1 2	this.score = 1;   this.label_score.content = this.score;

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

JavaScript

this.game.physics.overlap(this.bird, this.pipes, this.restart_game, null, this);

1	this.game.physics.overlap(this.bird, this.pipes, this.restart_game, null, this);

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

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

原文作者twitter:@lessmilk

赞 收藏 5 评论

添加音效

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

在preload()中添加

JavaScript

this.game.load.audio('jump', 'assets/jump.wav');

1	this.game.load.audio('jump', 'assets/jump.wav');

在create()中添加

JavaScript

this.jump_sound = this.game.add.audio('jump');

1	this.jump_sound = this.game.add.audio('jump');

最后在jump()中添加

JavaScript

this.jump_sound.play();

1	this.jump_sound.play();

来实现跳跃音效的调用。

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

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

赞 收藏 1 评论

还有现在最热门的微信棋牌游戏开发 h5游戏平台制作Q-2152876294搭建教程

关于作者：杨帅

（新浪微博：@JAVA程序员杨帅） 个人主页 · 我的文章

关于作者：杨帅

（新浪微博：@JAVA程序员杨帅） 个人主页 · 我的文章澳门新萄京，

在这篇文章，我们将使用HTML5来重现这个游戏，基于著名的开源HTML5游戏框架——Phaser。你将了解到游戏精灵、游戏状态，以及如何使用预加载（preload）、创建（create）与刷新（update）方法。最终效果呈现如下：

一、开发准备

首先访问Phaser官网，下载JavaScript版本的 ，选择用于生产环境的压缩版phaser.min.js。

项目文件结构如下：

打开index.html，链接五个js文件，并添加页面标题，启动游戏时打开此文件即可：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>贪吃蛇</title>
    <script src="assets/js/phaser.min.js"></script>
    <script src="assets/js/menu.js"></script>
    <script src="assets/js/game.js"></script>
    <script src="assets/js/gameover.js"></script>
    <script src="assets/js/main.js"></script>
    <style>
        body{
            padding: 0;
            margin: 0;
        }

        canvas{
            margin: 0 auto;
        }
    </style>
</head>

<body>
</body>
</html>

二、游戏是如何组织的

基于Phaser的游戏是围绕“状态（state）”进行组织的，此处的“状态”可以看作是游戏的不同阶段，贪吃蛇游戏的状态较少，可简易的分为三个状态：

菜单状态，由menu.js处理，仅用于显示开始界面，点击转换到游戏状态。
游戏状态，由game.js处理，用于显示游戏界面、控制贪吃蛇运动，死亡后进入游戏结束状态。
游戏结束状态，由gameover.js处理，用于显示结束界面、最终得分，点击再次回到游戏状态。
main.js为主JavaScript文件，在其中创建游戏实例，注册各个游戏状态。

1、加载图像

到现在为止，我们仅仅预构了游戏框架，接下来我们来创建菜单状态，让它来显示游戏开始界面。

在HTML文件中我们已经引入了Phaser库，这使我们拥有了一个名为Phaser的全局对象，通过这个对象，我们可以访问Phaser库中哪些用于构建游戏的方法和函数。

现在我们使用Phaser对象来创建一个游戏实例，这个对象用来代表整个游戏，我们会为他添加不同的状态。

main.js

 

// JavaScript Document
var game;

//新建一600px宽、450px高的游戏实例
//Game对象用于管理启动、创建子系统、运行逻辑、渲染
//第三个参数表示要使用的渲染器
//第四个参数表示父级DOM元素
game = new Phaser.Game(600, 450, Phaser.AUTO, '');

//添加菜单状态
//第一个参数表示如何调用状态
//第二个参数是一个包含状态功能所需方法的对象
game.state.add('Menu', Menu);

game.state.start('Menu');

接下来初始化菜单状态对象（Menu），在menu.js中定义一个新对象Menu并为它添加函数。状态启动时，首先会调用preload函数，加载游戏所需资源；加载完成后，调用create函数，初始化游戏区域以及其他需要初始化的内容。

menu.js

// JavaScript Document
var Menu = {

preload: function () {
//加载图像以便于在其上添加游戏精灵
//第一个参数表示图像名称
//第二个参数表示文件路径
game.load.image('menu', './assetsmenu.png');
},

create: function () {
//添加一个游戏精灵，此处添加的精灵为游戏logo
//参数以此为：X,Y,图像名称（见上）
this.add.sprite(0,0,'menu');
}
};

到此，在浏览器中打开index.html，即可看到游戏开始界面，但还无法点击。（由于浏览器的安全限制，可能无法启动游戏，那么则需要一个本地web服务器

本文由澳门新萄京发布于澳门新萄京最大平台,转载请注明出处：h5游戏平台制作教程linux系统