新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

禁止转载

教你用 HTML5 制作Flappy Bird(下)

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

本文由 伯乐在线 - 杨帅 翻译。未经许可,禁绝转发!
匈牙利语出处: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(卡塔尔(英语:State of Qatar)方法中增加

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(卡塔尔(英语:State of Qatar)方法中加多如下代码来改造主题(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

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于www.301net,转载请注明出处:禁止转载

您可能还会对下面的文章感兴趣: