教你用 HTML5 制作Flappy Bird(下)

教你用 HTML5 制作Flappy Bird(下)

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

本文由 伯乐在线 –
杨帅
翻译。未经许可,禁止转发!
英文出处:lessmilk。欢迎到场翻译组。

在上一篇HTML5教程中,大家做了一个简化版的Flappy
Bird。即便可以“称得上”是一款游戏了,但却是一款很无聊的一日游。在那篇作品中大家来看一看怎样给它添加动画功用和音效。就算并不曾变动游戏的机制,但却可以使游戏变得越发有意思。你可以点击这里先感受一下。

本文由 伯乐在线 –
杨帅
翻译。未经许可,禁止转发!
英文出处:lessmilk。欢迎插手教你用 HTML5 制作Flappy Bird(下)。翻译组。

教你用 HTML5 制作Flappy Bird(上)

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

本文由 伯乐在线 –
杨帅
翻译。未经许可,禁止转发!
英文出处:lessmilk。欢迎参与翻译组。

粗粗在七个月前,我给协调定了一个对象:周周在打造一个HTML5新游戏。截止近年来,我早已有了9款游戏。现在不可胜道人梦想自己能写一下怎么样创造那么些游戏,在那篇小说中,让大家来共同用HTML5制作Flappy
Bird。

亚洲必赢官网 1

Flappy
Bird是一款相当精良且易于上手的游乐,可以看成一个很好的HTML5玩耍的学科。在那片教程中,我们选用Phaser框架写一个只有65行js代码的简化版Flappy
Bird。

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

提示1:你得会JavaScript
提醒2:想学习更加多关于Phaser框架的知识可以看那篇小说getting started
tutorial(方今干活忙,稍后翻译)

本文由 伯乐在线 –
杨帅
翻译。未经许可,禁止转发!
英文出处:lessmilk。欢迎加入翻译组。

设置

率先下载新的沙盘。其中包涵了大家在上一个科目中完成的代码和一个新的音效文件。

开辟main.js,起头敲吧。

在上一篇HTML5教程中,我们做了一个简化版的Flappy
Bird。纵然可以“称得上”是一款游戏了,但却是一款很无聊的玩乐。在那篇小说中大家来看一看怎样给它添加动画成效和音效。就算并从未改观游戏的体制,但却可以使游戏变得进一步有意思。你可以点击这里先体验一下。

设置

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

  • 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()方法,并追加一些新的章程。

粗粗在七个月前,我给协调定了一个对象:每一周在打造一个HTML5新游戏。截止近年来,我一度有了9款游戏。现在广大人梦想自己能写一下什么样创建那些游戏,在那篇文章中,让大家来一起用HTML5制作Flappy
Bird。

添加飞行动画

鸟类上下飞行的不二法门太单调了,大家来加一些特效,让它看起来有些游戏的指南。

1.下跌时角度转动速度减慢,直到特定值。
2.上涨时翻转角度。

第四个义务很粗略,大家只须要添加两行代码到update()方法。

JavaScript

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

1
2
if (this.bird.angle &lt; 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();

那样一来就大多了,假使你现在测试一下游乐,你会意识鸟类的角度变化得并不自然。像左侧的图,可是大家想要的是右图的功力。

亚洲必赢官网 2

为了达到那个目标,大家要做的是改变小鸟的为主(anchor)。在create()方法中添加如下代码来改变中央(anchor)。

JavaScript

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

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

当今测试一下嬉戏你就会发觉早已好得多了。

设置

率先下载新的模板。其中包罗了俺们在上一个课程中成就的代码和一个新的音效文件。

打开main.js,发轫敲吧。

鸟类的打造

俺们先来看怎么添加一个用空格键来支配的小鸟。

率先大家来更新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
'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 = &#039;#71c5cf&#039;;
 
    // Load the bird sprite
    this.game.load.image(&#039;bird&#039;, &#039;assets/bird.png&#039;);
},
 
create: function() {  
    // Display the bird on the screen
    this.bird = this.game.add.sprite(100, 245, &#039;bird&#039;);
 
    // Add gravity to the bird to make it fall
    this.bird.body.gravity.y = 1000;  
 
    // Call the &#039;jump&#039; 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 &#039;restart_game&#039; 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 &#039;main&#039; state, which restarts the game
    this.game.state.start(&#039;main&#039;);
},

保留main.js并刷新index.html后你就可以赢得一个用空格键来支配的鸟类了。

亚洲必赢官网 3

丰盛战败动画

首先,更新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;

动画片效果添加达成。

拉长飞行动画

鸟儿上下飞行的点子太平淡了,我们来加一些特效,让它看起来有些游戏的指南。

1.下落时角度转动速度减慢,直到特定值。
2.上涨时翻转角度。

率先个职分很简单,大家只必要添加两行代码到update()方法。

Shell

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

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

第二步大家有七个接纳,
不难起见,大家得以只在jump()方法中添加

Shell

this.bird.angle = -20;

1
this.bird.angle = -20;

只是那中角度的愈演愈烈看起来有些儿别扭。所以,大家还足以让角度有个转移的进程。大家可以用如下代码替换掉上边的。

Shell

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

也足以揉成一行代码:

Shell

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

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

那样一来就几乎了,若是你现在测试一下娱乐,你会发觉鸟类的角度变化得并不自然。像左边的图,不过我们想要的是右图的意义。

亚洲必赢官网 4

为了达到那几个目标,大家要做的是改变小鸟的基本(anchor)。在create()方法中添加如下代码来改变中心(anchor)。

Shell

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

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

近来测试一下嬉戏你就会发现已经好得多了。

管敬仲的创建

在preload()中丰盛管敬仲的载入

JavaScript

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

1
this.game.load.image(&#039;pipe&#039;, &#039;assets/pipe.png&#039;);

然后再在create()中添加画一组管敬仲的办法。因为大家在嬉戏中要用到很多管敬仲,所以大家先做一个带有20段管敬仲的组。

JavaScript

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

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

今日大家需求一个新的艺术来把管仲添加到游戏中,默许境况下,所有的管敬仲都并未被激活也从未显得。大家选一个管敬仲激活他并显示她,有限支撑她在不在呈现的情事下移除他的激活状态,那样我们就有用不尽的管敬仲了。

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&#039;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 &lt; 8; i++)
        if (i != hole &amp;&amp; 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);

近年来可以测试一下了,已经有些游戏的旗帜了。

Flappy
Bird是一款尤其卓绝且易于上手的游戏,可以作为一个很好的HTML5游乐的课程。在那片教程中,大家接纳Phaser框架写一个唯有65行js代码的简化版Flappy
Bird。

丰盛音效

用Phaser添加音效极度容易。
(小编提供的音效文件一般无法播放,大家可以找点儿其余代表。)

在preload()中添加

JavaScript

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

1
this.game.load.audio(&#039;jump&#039;, &#039;assets/jump.wav&#039;);

在create()中添加

JavaScript

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

1
this.jump_sound = this.game.add.audio(&#039;jump&#039;);

最后在jump()中添加

JavaScript

this.jump_sound.play();

1
this.jump_sound.play();

来落到实处跳跃音效的调用。

末段效果的源码可以点击这里下载

最终附上译者Flappy Bird纪录,求超过。
亚洲必赢官网 5

赞 收藏 1
评论

累加失利动画

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

Shell

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()方法。

Shell

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

Shell

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

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

动画效果添加已毕。

贯彻得分和冲击

末尾一步大家来促成得分和碰撞,那很简短。
在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: &quot;30px Arial&quot;, fill: &quot;#ffffff&quot; };  
this.label_score = this.game.add.text(20, 20, &quot;0&quot;, 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
评论

点击此处可以先体验一下大家将要要打造的玩耍。

有关小编:杨帅

亚洲必赢官网 6

(虎扑博客园:@JAVA程序员杨帅)

个人主页 ·
我的稿子

亚洲必赢官网 7

添加音效

用Phaser添加音效分外简单。
(小编提供的音效文件一般不可以播放,大家能够找点儿其余代表。)

在preload()中添加

Shell

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

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

在create()中添加

Shell

this.jump_sound = this.game.add.audio(‘jump’);

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

最后在jump()中添加

Shell

this.jump_sound.play();

1
this.jump_sound.play();

来完成跳跃音效的调用。

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

说到底附上译者Flappy Bird纪录,求超越。
亚洲必赢官网 8

赞 收藏
评论

关于作者:杨帅

亚洲必赢官网 9

(博客园今日头条:@JAVA程序员杨帅)

个人主页 ·
我的篇章

亚洲必赢官网 10

提示1:你得会JavaScript
唤醒2:想学习更加多关于Phaser框架的学问能够看那篇小说getting started
tutorial(方今工作忙,稍后翻译)

有关小编:杨帅

亚洲必赢官网 11

(博客园新浪:@JAVA程序员杨帅)

个人主页 ·
我的小说

设置

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

  • phaser.min.js, 简化了的Phaser框架v1.1.5
  • index.html, 用来突显游戏的文件
  • main.js, 大家写代码的地点
  • asset/, 用来保存小鸟和管敬仲的图样的文书夹(bird.png和pipe.png)

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

在main.js中能够看来大家事先提到的Phaser工程的大旨结构

Shell

// 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()方法,并追加一些新的法子。

鸟儿的制造

咱俩先来看哪样添加一个用空格键来支配的飞禽。

率先大家来更新preload(),create()和update()方法。

Shell

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

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

在这多个方式上面,我们再添加四个新的法子。

Shell

// 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后你就足以得到一个用空格键来支配的鸟类了。

管仲的炮制

在preload()中丰硕管仲的载入

Shell

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

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

下一场再在create()中添加画一组管敬仲的方法。因为大家在游玩中要用到不少管敬仲,所以我们先做一个包含20段管敬仲的组。

Shell

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

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

现行我们要求一个新的措施来把管敬仲添加到游戏中,默许处境下,所有的管仲都尚未被激活也没有显得。大家选一个管敬仲激活他并出示她,保险他在不在突显的图景下移除他的激活状态,那样大家就有用不尽的管仲了。

Shell

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段,并有限辅助中间有一个能让鸟儿通过的豁口。上面的不二法门已毕了此功能。

Shell

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()方法中添加一个计时器。

Shell

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()方法的最前方添加下边那行代码来完成休闲游重新初叶时停下计时器。

Shell

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

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

今昔可以测试一下了,已经局地游戏的指南了。

兑现得分和碰撞

说到底一步我们来落到实处得分和碰撞,那很粗略。
在create()中添加上边的代码来兑现分数的来得。

Shell

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()用来完结分数的加码。

Shell

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

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

上面的代码放入update()方法来落到实处每回碰着管敬仲时调用restart_game()。

Shell

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

赞 收藏 6
评论

至于作者:杨帅

亚洲必赢官网 12

(知乎天涯论坛:@JAVA程序员杨帅)

个人主页 ·
我的篇章

网站地图xml地图