澳门太陽城集团登录网址禁止转发

有关作者:杨帅

澳门太陽城集团登录网址 1

(乐乎新浪:@JAVA程序员杨帅)

个人主页 ·
作者的篇章

澳门太陽城集团登录网址 2

教你用 HTML5 制作Flappy Bird(上)

2014/03/22 · HTML5,
JavaScript · 5
评论 ·
HTML5,
Javascript

本文由 伯乐在线 –
杨帅
翻译。未经许可,禁止转发!
立陶宛共和国(Republic of Lithuania)语出处:lessmilk。款待加入翻译组。

大概在多少个月前,作者给和睦定了贰个对象:周周在炮制一个HTML5新游戏。结束近日,小编早就有了9款游戏。以往众三人指望作者能写一下怎样制作那么些游戏,在这篇作品中,让大家来一块用HTML5制作Flappy
Bird。

澳门太陽城集团登录网址 3

Flappy
Bird是一款特别理想且便于上手的游乐,能够看做一个很好的HTML5玩耍的课程。在那片教程中,大家选取Phaser框架写叁个唯有65行js代码的简化版Flappy
Bird。

点击此处可以先感受一下咱们就要要制作的游艺。

提示1:你得会JavaScript
提醒2:想学学愈来愈多关于Phaser框架的知识可以看那篇文章getting started
tutorial(近些日子干活忙,稍后翻译)

管子的造作

在preload()中增加管仲的载入

JavaScript

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

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

下一场再在create()中增加画一组管仲的诀要。因为我们在戏耍中要用到无数管敬仲,所以大家先做三个富含20段管敬仲的组。

澳门太阳集团城网址 ,JavaScript

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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
2
3
4
5
6
7
add_row_of_pipes: function() {  
    var hole = Math.floor(Math.random()*5)+1;
 
    for (var i = 0; i &lt; 8; i++)
        if (i != hole &amp;&amp; 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);

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

最后在restart_game()方法的最前边增多上面那行代码来贯彻休闲游重新早先时停下反应计时器。

JavaScript

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

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

今昔得以测量试验一下了,已经有个别游戏的样子了。

鸟儿的炮制

澳门太陽城集团登录网址禁止转发。笔者们先来看怎么样增添一个用空格键来调控的小鸟。

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

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 &#澳门太陽城集团登录网址禁止转发。039;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后您就足以获得三个用空格键来调整的鸟儿了。

设置

先下载小编为教程制作的模板,里面富含:

  • 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, &#039;game_div&#039;);
 
// Creates a new &#039;main&#039; state that will contain the game
var main_state = {
 
    preload: function() {
        // Function called first to load all the assets
    },
 
    create: function() {
        // Fuction called after &#039;preload&#039; to setup the game    
    },
 
    update: function() {
        // Function called 60 times per second
    },
};
 
// Add and start the &#039;main&#039; state to start the game
game.state.add(&#039;main&#039;, main_state);  
game.state.start(&#039;main&#039;);

接下去大家二遍成功preload(),create()和update()方法,并增添部分新的方法。

金玉满堂得分和碰撞

最终一步大家来贯彻得分和冲击,那很轻便。
在create()中增添上边包车型大巴代码来兑现分数的展现。

JavaScript

this.score = 0; var style = { font: "30px Arial", fill:
"#ffffff" }; this.label_score = this.game.add.text(20, 20,
"0", style);

1
2
3
this.score = 0;  
var style = { font: &quot;30px Arial&quot;, fill: &quot;#ffffff&quot; };  
this.label_score = this.game.add.text(20, 20, &quot;0&quot;, style);

上面包车型地铁代码放入add_row_of_pipes()用来完成分数的扩张。

JavaScript

this.score += 1; this.label_score.content = this.score;

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

1
this.game.physics.overlap(this.bird, this.pipes, this.restart_game, null, this);

功勋卓著告成!恭喜您获取了贰个Flappy
bird的HTML5版。点击这里收获任何能源。

娱乐的效能已达成,但实则是太简陋了。下边包车型地铁课程大家来丰盛音响效果、动画、菜单等。
教你用 HTML5 制作Flappy Bird(下)

原稿小编twitter:@lessmilk

赞 收藏 5
评论

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图