首页»HTML/CSS»教你用HTML5制作Flappy Bird(一)

博悦彩票怎么注册: 教你用HTML5制作Flappy Bird(一)

来源:jobbole 发布时间:2014-03-23 阅读次数:

博悦网络检测

学院领导、各科室主任担任本次比赛评委,学院全体教师参加了观摩。(3)专升本考生不再加试专业课。

  大概在两个月前,我给自己定了一个目标:每周在制作一个HTML5新游戏。截至目前,我已经有了9款游戏。现在很多人希望我能写一下如何制作这些游戏,在这篇文章中,让我们来一起用HTML5制作Flappy Bird。

  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工程的基本结构

// 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()方法。

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

  在这三个方法下面,我们再添加两个新的方法。

// 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()中添加管子的载入

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

  然后再在create()中添加画一组管子的方法。因为我们在游戏中要用到许多管子,所以我们先做一个包含20段管子的组。

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

  现在我们需要一个新的方法来把管子添加到游戏中,默认情况下,所有的管子都没有被激活也没有显示。我们选一个管子激活他并显示他,保证他在不在显示的情况下移除他的激活状态,这样我们就有用不尽的管子了。

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段,并保证中间有一个能让小鸟通过的缺口。下面的方法实现了此功能。

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.5秒调用一次add_row_of_pipes()方法来实现管子的添加。为了达到这个目的,我们在create()方法中添加一个计时器。

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

  最后在restart_game()方法的最前面添加下面这行代码来实现游戏重新开始时停止计时器。

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

  现在可以测试一下了,已经有点儿游戏的样子了。

 实现得分和碰撞

  最后一步我们来实现得分和碰撞,这很简单。

  在create()中添加下面的代码来实现分数的显示。

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

  下面的代码放入add_row_of_pipes()用来实现分数的增加。

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

  下面的代码放入update()方法来实现每次碰到管子时调用restart_game()。

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

  大功告成!恭喜你获得了一个Flappy bird的HTML5版。点击这里获得全部资源。

  游戏的功能已实现,但实在是太简陋了。下面我们来添加音效、动画、菜单等。

  教你用HTML5制作Flappy Bird(二)

  原文链接: lessmilk   翻译: 伯乐在线 - 杨帅

QQ群:WEB博悦娱乐官方群(515171538),验证消息:10000
微信群:加小编微信 849023636 邀请您加入,验证消息:10000
提示:更多精彩内容关注微信公众号:全栈博悦娱乐中心(fsder-com)
网友评论(共0条评论) 正在载入评论......
理智评论文明上网,拒绝恶意谩骂 发表评论 / 共0条评论
登录会员中心