禁止转载,禁止转载

作者: 前端开发  发布:2019-12-05

教你用 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(卡塔尔(英语:State of Qatar)和update(卡塔尔(قطر‎方法,并扩张部分新的方法。

拉长飞行动漫

鸟儿上下飞行的章程太平淡了,大家来加一些神效,让它看起来有些游戏的轨范。

1.下落时角度转动速度减慢,直到特定值。
2.回升时翻转角度。

先是个职务超级轻便,大家只必要增多两行代码到update(卡塔尔(英语:State of Qatar)方法。

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

那样一来就差不离了,要是您未来测验一中游乐,你会开掘鸟类的角度变化得并不自然。像侧面的图,可是我们想要的是右图的职能。

图片 2

为了到达这几个指标,我们要做的是改造小鸟的骨干(anchor)。在create(卡塔尔方法中增加如下代码来改造中央(anchor)。

JavaScript

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

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

近来测验一上游玩你就能够意识早就好得多了。

鸟儿的制作

咱俩先来看什么增多二个用空格键来决定的飞禽。

先是大家来更新preload(卡塔尔(قطر‎,create(卡塔尔(英语:State of Qatar)和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后您就足以拿走四个用空格键来决定的飞禽了。

本文由巴黎人游戏官网发布于前端开发,转载请注明出处:禁止转载,禁止转载

关键词: