您的位置:澳门新葡8455最新网站 > Web前端 > 教你用 HTML5 制作Flappy Bird(上)

教你用 HTML5 制作Flappy Bird(上)

发布时间:2019-12-02 18:02编辑:Web前端浏览(120)

    教你用 HTML5 制作Flappy Bird(上)

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

    本文由 伯乐在线 - 杨帅 翻译。未经许可,禁止转发!
    阿尔巴尼亚语出处:lessmilk。应接参与翻译组。

    大要在多少个月前,笔者给和煦定了三个指标:周周在炮制一个HTML5新游戏。结束近期,笔者早就有了9款游戏。现在成千上万人期望我能写一下怎么构建这几个游戏,在这里篇小说中,让大家来合作用HTML5制作Flappy Bird。

    澳门新葡8455最新网站 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(卡塔尔(英语:State of Qatar),create(卡塔尔和update(卡塔尔国方法,并追加一些新的主意。

    鸟儿的创设

    大家先来看如何增添两个用空格键来支配的小鸟。

    率先大家来更新preload(卡塔尔(قطر‎,create(卡塔尔(英语:State of Qatar)和update(卡塔尔(英语:State of Qatar)方法。

    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_澳门新葡8455最新网站,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(卡塔尔(英语:State of Qatar)中增加上面的代码来兑现分数的展现。

    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(卡塔尔(英语:State of Qatar)用来兑现分数的扩张。

    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 评论

    有关作者:杨帅

    澳门新葡8455最新网站 2

    (和讯搜狐:@JAVA程序员杨帅) 个人主页 · 作者的篇章

    澳门新葡8455最新网站 3

    本文由澳门新葡8455最新网站发布于Web前端,转载请注明出处:教你用 HTML5 制作Flappy Bird(上)

    关键词:

上一篇:网页中a链接中暗藏着险恶

下一篇:没有了