品牌动态

当前位置:新萄京娱乐场手机版 > 品牌动态 > 禁止转载

禁止转载

来源:http://www.chrisproduction.com 作者:新萄京娱乐场手机版 时间:2019-10-13 05:33

教你用 HTML5 制作Flappy Bird(上)

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

本文由 伯乐在线 - 杨帅 翻译。未经许可,禁绝转发!
朝鲜语出处:lessmilk。招待参预翻译组。

大约在八个月前,小编给自个儿定了三个对象:每一周在塑造三个HTML5新游戏。结束近来,作者早已有了9款游戏。以往游人如织人盼望自个儿能写一下怎样塑造那些游戏,在这里篇文章中,让我们来四头用HTML5制作Flappy 伯德。

图片 1

Flappy Bird是一款特别不错且便于上手的嬉戏,能够当做三个很好的HTML5娱乐的课程。在此片教程中,大家运用Phaser框架写一个唯有65行js代码的简化版Flappy Bird。

点击此处可以先感受一下大家将在在制作的游玩。

提示1:你得会JavaScript
提醒2:想深造愈来愈多关于Phaser框架的文化能够看那篇小说getting started tutorial(近日工作忙,稍后翻译)

设置

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

  • 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()和update()方法,并扩展部分新的方式。

鸟儿的造作

大家先来看什么加多三个用空格键来调整的小鸟。

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

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 'main' state, which restarts the game
    this.game.state.start('main');
},

保留main.js并刷新index.html后你就足以博得三个用空格键来调控的飞禽了。

管仲的炮制

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

今日能够测验一下了,已经局地游戏的规范了。

贯彻得分和冲击

末段一步大家来落到实处得分和碰撞,那很轻松。
在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 评论

至于笔者:杨帅

图片 2

(乐乎今日头条:@JAVA技术员杨帅) 个人主页 · 小编的稿子

图片 3

本文由新萄京娱乐场手机版发布于品牌动态,转载请注明出处:禁止转载

关键词:

上一篇:没有了

下一篇:没有了