教你用 HTML5 制作Flappy Bird(下)

教你用 HTML5 制作Flappy Bird(下)

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

本文由 伯乐在线 - 杨帅 翻译。未经许可,制止转发!
波兰语出处: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(方今工作忙,稍后翻译)

设置

率先下载新的沙盘。在那之中囊括了大家在上四个科目中产生的代码和五个新的音效文件。

开垦main.js,早先敲吧。

设置

先下载小编为教程制作的模板,里面满含:

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

增添飞行动画

鸟类上下飞行的章程太单调了,大家来加一些特效,让它看起来有个别游戏的表率。

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

现行反革命测量试验一下游戏你就能够意识已经好得多了。

鸟类的成立

大家先来看哪样加多三个用空格键来决定的鸟类。

首先大家来更新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后你就可以猎取三个用空格键来决定的鸟类了。

加上退步动画

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

动画片效果加多实现。

管敬仲的构建

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

当今得以测验一下了,已经局地游戏的标准了。

丰裕音响效果

用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 伯德纪录,求超过。
图片 3

赞 收藏 1 评论

兑现得分和碰撞

谈起底一步大家来促成得分和冲击,那很简单。
在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 评论

有关笔者:杨帅

图片 4

(天涯论坛博客园:@JAVA程序员杨帅) 个人主页 · 作者的篇章

图片 5

关于笔者:杨帅

图片 6

(腾讯网网易:@JAVA技士杨帅) 个人主页 · 作者的小说

图片 7

本文由星彩网app下载发布于前端技术,转载请注明出处:教你用 HTML5 制作Flappy Bird(下)

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。