xml地图|网站地图|网站标签 [设为首页] [加入收藏]

教你用 HTML5 制作Flappy Bird(下)

来源:http://www.ccidsi.com 作者:最新解决方案 人气:149 发布时间:2019-05-02
摘要:设置 第2下载新的沙盘。当中包含了我们在上三个科目中实现的代码和一个新的音响效果文件。 开辟main.js,早先敲吧。 设置 先下载小编为教程制作的模板,里面蕴涵: phaser.min.js, 简化了

设置

第2下载新的沙盘。当中包含了我们在上三个科目中实现的代码和一个新的音响效果文件。

开辟main.js,早先敲吧。

设置

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

  • phaser.min.js, 简化了的Phaser框架v一.一.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()方法,并追加一些新的不二等秘书籍。

累加战败动画

首先,更新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;

卡通效果增加实现。

教你用 HTML5 制作Flappy Bird(上)

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

本文由 伯乐在线 - 杨帅 翻译。未经许可,禁止转发!
英文出处:lessmilk。接待参与翻译组。

差不离在三个月前,笔者给协和定了3个对象:每一周在炮制二个HTML5新游戏。截止如今,小编曾经有了玖款游戏。以后无数人期待笔者能写一下什么样营造这几个游戏,在那篇小说中,让我们来壹块用HTML5制作Flappy Bird。

澳门皇家国际娱乐 1

Flappy Bird是一款至极精美且易于上手的游乐,能够当作二个很好的HTML5游玩的课程。在那片教程中,大家选取Phaser框架写二个唯有陆五行js代码的简化版Flappy Bird。

点击此处能够先感受一下我们将要要制作的游玩。

提示1:你得会JavaScript
晋升2:想学学更加多关于Phaser框架的文化能够看那篇文章getting started tutorial(近年来做事忙,稍后翻译)

教你用 HTML5 制作Flappy Bird(下)

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

本文由 伯乐在线 - 杨帅 翻译。未经许可,禁止转发!
英文出处:lessmilk。迎接插足翻译组。

在上一篇HTML5教程中,我们做了贰个简化版的Flappy Bird。尽管能够“称得上”是一款游戏了,但却是一款异常低级庸俗的游艺。在那篇文章中大家来看1看如何给它增加动画成效和音响效果。就算并不曾改观游戏的建制,但却能够使游戏变得更为有趣。你能够点击这里先体验一下。

澳门皇家国际娱乐,管敬仲的创建

在preload()中加上管敬仲的载入

JavaScript

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

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

接下来再在create()中增添画1组管仲的章程。因为大家在娱乐中要用到众多管敬仲,所以大家先做多少个带有20段管敬仲的组。

JavaScript

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

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

后天大家必要3个新的办法来把管敬仲增加到游戏中,默许情状下,全体的管仲都未有被激活也未曾呈现。大家选叁个管仲激活他并体现他,保障他在不在展现的事态下移除他的激活状态,那样大家就有用不尽的管敬仲了。

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

前面包车型地铁法子只浮现了1段管仲,不过大家在一条垂直的线上要显示六段,并有限援助中间有三个能让鸟儿通过的裂口。上面包车型客车诀窍实现了此意义。

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

今昔得以测试一下了,已经局地游戏的旗帜了。

本文由68399皇家赌场发布于最新解决方案,转载请注明出处:教你用 HTML5 制作Flappy Bird(下)

关键词: 68399皇家赌场 HTML5

最火资讯