永利402游戏网站

当前位置:永利402游戏网站-永利402com官方网站 > 永利402游戏网站 > 教你用 HTML5 制作Flappy Bird(下)

教你用 HTML5 制作Flappy Bird(下)

来源:http://www.xtcsyb.com 作者:永利402游戏网站-永利402com官方网站 时间:2019-12-04 00:46

教你用 HTML5 制作Flappy Bird(下)

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

本文由 永利402游戏网站,伯乐在线 - 杨帅 翻译。未经许可,禁绝转发!
Serbia语出处:lessmilk。招待参与翻译组。

在上一篇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();

那样一来就基本上了,假让你今后测量检验一下嬉戏,你会意识鸟类的角度变化得并不自然。像左边的图,可是大家想要的是右图的成效。

永利402游戏网站 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(卡塔尔(英语:State of Qatar)方法的最前边增添如下代码:

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纪录,求超过。
永利402游戏网站 2

赞 收藏 1 评论

至于作者:杨帅

永利402游戏网站 3

(腾讯网博客园:@JAVA程序猿杨帅) 个人主页 · 笔者的小说

永利402游戏网站 4

本文由永利402游戏网站-永利402com官方网站发布于永利402游戏网站,转载请注明出处:教你用 HTML5 制作Flappy Bird(下)

关键词:

上一篇:没有了

下一篇:没有了