教你用 HTML5 制作Flappy Bird（上）

完成得分和碰撞

终极一步大家来落到实处得分和冲击，这很简单。
在create()中增多上边包车型大巴代码来贯彻分数的展现。

JavaScript

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()用来贯彻分数的增加。

JavaScript

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

居功至伟告成！恭喜您拿走了三个Flappy bird的HTML5版。点击这里获得任何财富。

娱乐的效果已达成，但实则是太简陋了。上面包车型客车课程我们来丰硕音效、动画、菜单等。
教你用 HTML5 制作Flappy Bird（下）

原稿小编twitter:@lessmilk

赞 收藏 5 评论

拉长音响效果

用Phaser增添音响效果非常轻易。
(小编提供的音响效果文件一般无法播放，大家能够找点儿别的代表。)

在preload()中添加

JavaScript

this.game.load.audio('jump', 'assets/jump.wav');

在create()中添加

JavaScript

this.jump_sound = this.game.add.audio('jump');

最后在jump()中添加

JavaScript

this.jump_sound.play();

来促成跳跃音响效果的调用。

末尾效果的源码能够点击这里下载

最终附上译者Flappy Bird纪录，求超过。

赞 收藏 1 评论

管敬仲的制作

在preload()中拉长期管理子的载入

JavaScript

this.game.load.image('pipe', 'assets/pipe.png');

然后再在create()中增多画一组管敬仲的诀窍。因为我们在嬉戏中要用到广大管仲，所以我们先做二个含有20段管敬仲的组。

JavaScript

this.pipes = game.add.group(); this.pipes.createMultiple(20, 'pipe');

现行反革命我们需求贰个新的办法来把管仲加多到游戏中，暗许意况下，全部的管敬仲都不曾被激活也不曾显示。我们选三个管敬仲激活他并出示他，保险她在不在显示的意况下移除他的激活状态，那样大家就有用不尽的管仲了。

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; },

事先的法子只呈现了一段管仲，然则大家在一条垂直的线上要来得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.5秒调用二回add_row_of_pipes()方法来实现管敬仲的增进。为了实现那么些指标，大家在create()方法中增添二个计时器。

JavaScript

this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes, this);

最后在restart_game()方法的最前面增多上面这行代码来兑现游戏重新发轫时停下放大计时器。

JavaScript

this.game.time.events.remove(this.timer);

近年来得以测验一下了，已经有的游戏的楷模了。

设置

首先下载新的模板。当中包蕴了咱们在上一个学科中成就的代码和一个新的音响效果文件。

开采main.js，起始敲吧。

鸟类的塑造

大家先来看怎么增加贰个用空格键来支配的鸟儿。

首先大家来更新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(); },

在那多个措施上边，我们再增加五个新的方法。

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'); },

封存main.js并刷新index.html后您就足以获取一个用空格键来支配的鸟儿了。

增进飞行动画

鸟儿上下飞行的方法太枯燥了，大家来加一些特效，让它看起来某个游戏的轨范。

1.下落时角度转动速度放缓，直到特定值。
2.上涨时翻转角度。

率先个职责很轻松，大家只供给增加两行代码到update()方法。

JavaScript

if (this.bird.angle < 20) this.bird.angle = 1;

其次步咱们有几个选项，
轻松起见，我们可以只在jump()方法中加多

JavaScript

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

也得以揉成一行代码：

JavaScript

this.game.add.tween(this.bird).to({angle: -20}, 100).start();

那样一来就大概了，假使你未来测量检验一下游玩，你会发掘鸟类的角度变化得并不自然。像左侧的图，不过大家想要的是右图的意义。

为了完毕那一个指标，我们要做的是改动小鸟的主干（anchor）。在create()方法中增加如下代码来改动中心（anchor）。

JavaScript

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

明日测量试验一下游戏你就能够开采早就好得多了。

设置

先下载作者为教程制作的模板,里面蕴含:

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

接下去我们二遍到位preload(),create()和update()方法，并扩大部分新的主意。

教你用 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。

Flappy Bird是一款极度了不起且易于上手的嬉戏，能够用作二个很好的HTML5游乐的教程。在那片教程中，大家利用Phaser框架写叁个唯有65行js代码的简化版Flappy Bird。

点击此处能够先体验一下我们即将要制作的娱乐。

提示1：你得会JavaScript
唤醒2：想学习越来越多关于Phaser框架的学问能够看那篇小说getting started tutorial（近日做事忙，稍后翻译）

累加战败动画

首先，更新update()方法：用hit_pipe()替换restart_rame()。

JavaScript

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

末尾，为了确认保障撞了管仲的小鸟不诈尸，在jump()方法的最前边增添如下代码：

JavaScript

if (this.bird.alive == false) return;

动画片效果加多完成。

至于小编：杨帅

（今日头条天涯论坛：@JAVA程序猿杨帅） 个人主页 · 作者的稿子

有关小编：杨帅

（和讯天涯论坛：@JAVA程序猿杨帅） 个人主页 · 小编的篇章

本文由时时app平台注册网站发布于web前端,转载请注明出处：教你用 HTML5 制作Flappy Bird（上）

关键词：