教你用 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,
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()方法,并扩大部分新的方法。

大致在5个月前,我给自己定了一个对象:周周在营造一个HTML5新游戏。甘休目前,我已经有了9款游戏。现在无数人期待我能写一下什么样营造那么些游戏,在那篇作品中,让我们来一头用HTML5制作Flappy
Bird。

设置

第一下载新的模版教你用 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', '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地图