大概在两个月前，我给自己定了一个目标：每周在制作一个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工程的基本结构
|
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()方法。
|
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(); }, |
在这三个方法下面，我们再添加两个新的方法。
|
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() { 游戏。截至目前，我已经有了9款游戏。现在很多人希望我能写一下如何制作这些游戏，在这篇文章中，让我们来一起用HTML5制作Flappy Bird。
Flappy Bird是一款非常优秀且容易上手的游戏，可以作为一个很好的HTML5游戏的教程。在这片教程中，我们使用Phaser框架写一个只有65行js代码的简化版Flappy Bird。 点击此处可以先体验一下我们即将要制作的游戏。 提示1：你得会JavaScript 设置先下载我为教程制作的模板,里面包括:
用浏览器打开index.html，用文本编辑器打开main.js 在main.js中可以看到我们之前提到的Phaser工程的基本结构
接下来我们一次完成preload(),create()和update()方法，并增加一些新的方法。 小鸟的制作我们先来看如何添加一个用空格键来控制的小鸟。 首先我们来更新preload(),create()和update()方法。
在这三个方法下面，我们再添加两个新的方法。
|
