教你用 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。欢迎参预翻译组。

教你用 HTML5 制作Flappy Bird(下)

2014/03/23 · HTML5,
JavaScript · 1
评论 ·
HTML5教你用 HTML5 制作Flappy Bird(上)。,
Javascript

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

在上一篇HTML5教程中,我们做了一个简化版的Flappy
Bird。固然可以“称得上”是一款游戏了,但却是一款很低俗的游玩。在这篇作品中大家来看一看怎样给它添加动画效能和音效。就算并没有更改游戏的建制,但却可以使游戏变得更为有意思。你可以点击这里先体验一下。

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

设置

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

  • 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。

设置

首先下载新的模板。其中囊括了俺们在上一个学科中完毕的代码和一个新的音效文件。

打开main.js,先河敲吧。

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

鸟儿的造作

咱俩先来看如何添加一个用空格键来控制的飞禽。

第一大家来更新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 = '#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后您就足以收获一个用空格键来支配的鸟儿了。

亚洲必赢官网 2

加上飞行动画

鸟类上下飞行的法门太单调了,大家来加一些神效,让它看起来有些游戏的典范。

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

那样一来就基本上了,如果您现在测试一下娱乐,你会意识鸟类的角度变化得并不自然。像左侧的图,可是大家想要的是右图的听从。

亚洲必赢官网 3

为了完结这些目标,大家要做的是改变小鸟的基本(anchor)。在create()方法中添加如下代码来改变中央(anchor)。

JavaScript

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

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

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

设置

先是下载新的沙盘。其中囊括了大家在上一个科目中达成的代码和一个新的音效文件。

开拓main.js,初始敲吧。

管仲的炮制

在preload()中加上管仲的载入

JavaScript

this.game.load.image('pipe&#亚洲必赢官网,039;, '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。

累加败北动画

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

昨天测试一下游乐你就会发觉早已好得多了。

贯彻得分和碰撞

末段一步大家来促成得分和碰撞,那很粗略。
在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
评论

点击此处可以先体验一下大家将要要创设的游戏。

充足音效

用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;

卡通效果添加已毕。

关于小编:杨帅

亚洲必赢官网 6

(今日头条新浪:@JAVA程序员杨帅)

个人主页 ·
我的篇章

亚洲必赢官网 7

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

至于小编:杨帅

亚洲必赢官网 8

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

个人主页 ·
我的篇章

亚洲必赢官网 9

丰硕音效

用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纪录,求当先。
亚洲必赢官网 10

赞 收藏
评论

设置

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

  • 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()方法,并追加部分新的不二法门。

有关小编:杨帅

亚洲必赢官网 11

(今日头条新浪:@JAVA程序员杨帅)

个人主页 ·
我的稿子

鸟儿的炮制

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

第一大家来更新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地图