教你用 HTML5 制作Flappy Bird(下)

2014/03/23 · HTML5,
澳门凯旋门注册网址,JavaScript · 1
评论 ·
HTML5,
Javascript

本文由 伯乐在线 –
杨帅
翻译。未经许可,禁止转发!
英文出处:lessmilk澳门凯旋门游戏网址,。招待参与凯旋门074网址,翻译组。

在上一篇HTML5教程中,我们做了三个简化版的Flappy
Bird。即便能够“称得上”是一款游戏了,但却是一款很无聊的游戏。在那篇小说中大家来看一看如何给它增加动画成效和音效。即便并从未变动游戏的编写制定,但却能够使游戏变得尤为风趣。你可以点击这里先体验一下。

设置

首先下载新的沙盘。当中包涵了我们在上四个科目中达成的代码和四个新的音响效果文件。

开垦main.js,开首敲吧。

丰硕飞行动画

鸟类上下飞行的主意太干燥了,大家来加一些神效,让它看起来有个别游戏的表率。

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

那样一来就好些个了,假使您未来测试一下娱乐,你会开采鸟类的角度变化得并不自然。像右边的图,可是我们想要的是右图的功力。

澳门凯旋门注册网址 1

为了达成这些指标,我们要做的是改换加小鸟的主干(anchor)。在create()方法中加多如下代码来改造中央(anchor)。

JavaScript

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

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

前些天测试一下游玩你就能开采早就好得多了。

加上退步动画

禁止转载。首先,更新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;

动画效果增多实现。

加上海音院效

用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纪录,求超过。
澳门凯旋门注册网址 2

赞 收藏 1
评论

关于小编:杨帅

澳门凯旋门注册网址 3

(博客园新浪:@JAVA技士杨帅)

个人主页 ·
笔者的文章

澳门凯旋门注册网址 4

相关文章