h5游戏平台制作教程linux系统
分类:澳门新萄京最大平台

教你用 HTML5 制作Flappy Bird(上)

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

本文由 伯乐在线 - 杨帅 翻译。未经许可,禁止转载!
英文出处:lessmilk。欢迎加入翻译组。

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

澳门新萄京 1

Flappy Bird是一款非常优秀且容易上手的游戏,可以作为一个很好的HTML5游戏的教程。在这片教程中,我们使用Phaser框架写一个只有65行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。虽然可以“称得上”是一款游戏了,但却是一款很无聊的游戏。在这篇文章中我们来看一看如何给它添加动画效果和音效。虽然并没有改变游戏的机制,但却能够使游戏变得更加有趣。你可以点击这里先体验一下。

历史:移动时代的新开发标准,如HTML5,将在移动设备上获胜——乔布斯

设置

先下载我为教程制作的模板,里面包括:

  • 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()方法,并增加一些新的方法。

设置

首先下载新的模板。其中包括了我们在上一个教程中完成的代码和一个新的音效文件。

打开main.js,开始敲吧。

H5游戏的历史可以追溯到2010年,当时还未过世的乔布斯宣布苹果系统将不支持Flash,引得一片哗然,为此,乔布斯特意写了一篇《关于Flash的几点思考》的文章作回应。

小鸟的制作

我们先来看如何添加一个用空格键来控制的小鸟。

首先我们来更新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 &#h5游戏平台制作教程linux系统。039;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后你就可以得到一个用空格键来控制的小鸟了。

添加飞行动画

小鸟上下飞行的方式太单调了,我们来加一些特效,让它看起来有点儿游戏的样子。

1.下降时角度转动速度放慢,直到特定值。
2.上升时翻转角度。

第一个任务很简单,我们只需要添加两行代码到update()方法。

JavaScript

if (this.bird.angle < 20) this.bird.angle = 1;

1
2
if (this.bird.angle &lt; 20)  
    this.bird.angle = 1;

第二步我们有两个选择,
简单起见,我们可以只在jump()方法中添加

JavaScript

this.bird.angle = -20;

1
this.bird.angle = -20;

但是这中角度的骤变看起来有点儿别扭。所以,我们还可以让角度有个变化的过程。我们可以用如下代码替换掉上面的。

JavaScript

// create an animation on the bird var animation = this.game.add.tween(this.bird); // Set the animation to change the angle of the sprite to -20° in 100 milliseconds animation.to({angle: -20}, 100); // And start the animation animation.start();

1
2
3
4
5
6
7
8
// create an animation on the bird
var animation = this.game.add.tween(this.bird);
 
// Set the animation to change the angle of the sprite to -20° in 100 milliseconds
animation.to({angle: -20}, 100);
 
// And start the animation
animation.start();

也可以揉成一行代码:

JavaScript

this.game.add.tween(this.bird).to({angle: -20}, 100).start();

1
this.game.add.tween(this.bird).to({angle: -20}, 100).start();

这样一来就差不多了,如果你现在测试一下游戏,你会发现小鸟的角度变化得并不自然。像左边的图,但是我们想要的是右图的效果。

澳门新萄京 2

为了达到这个目的,我们要做的是改变小鸟的中心(anchor)。在create()方法中添加如下代码来改变中心(anchor)。

JavaScript

this.bird.anchor.setTo(-0.2, 0.5);

1
this.bird.anchor.setTo(-0.2, 0.5);

现在测试一下游戏你就会发现已经好得多了。

他从开放性,网络,可靠性,安全等几个方面证明falsh并不适合苹果,在最后的总结中写道:

管子的制作

在preload()中添加管子的载入

JavaScript

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

1
this.game.load.image(&#039;pipe&#039;, &#039;assets/pipe.png&#039;);

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

JavaScript

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

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

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

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&#039;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);

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

添加失败动画

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

动画效果添加完毕。

“移动设备关乎低功耗,触摸界面及开发网络标准,这些是Flash的短板。而移动时代的新开发标准,如HTML5,将在移动设备上获胜。”这句话在很多人眼中,尤其开发者眼中,似乎成为了H5游戏的尚方宝剑。

实现得分和碰撞

最后一步我们来实现得分和碰撞,这很简单。
在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 评论

添加音效

用Phaser添加音效非常容易。
(作者提供的音效文件貌似无法播放,大家可以找点儿别的代替。)

在preload()中添加

JavaScript

this.game.load.audio('jump', 'assets/jump.wav');

1
this.game.load.audio(&#039;jump&#039;, &#039;assets/jump.wav&#039;);

在create()中添加

JavaScript

this.jump_sound = this.game.add.audio('jump');

1
this.jump_sound = this.game.add.audio(&#039;jump&#039;);

最后在jump()中添加

JavaScript

this.jump_sound.play();

1
this.jump_sound.play();

来实现跳跃音效的调用。

最终效果的源码可以点击这里下载

最后附上译者Flappy Bird纪录,求超越。
澳门新萄京 3

赞 收藏 1 评论

还有现在最热门的微信棋牌游戏开发 h5游戏平台制作Q-2152876294搭建教程

关于作者:杨帅

澳门新萄京 4

(新浪微博:@JAVA程序员杨帅) 个人主页 · 我的文章

澳门新萄京 5

关于作者:杨帅

澳门新萄京 6

(新浪微博:@JAVA程序员杨帅) 个人主页 · 我的文章澳门新萄京,

澳门新萄京 7

在这篇文章,我们将使用HTML5来重现这个游戏,基于著名的开源HTML5游戏框架——Phaser。你将了解到游戏精灵、游戏状态,以及如何使用预加载(preload)、创建(create)与刷新(update)方法。最终效果呈现如下:

一、开发准备

首先访问Phaser官网,下载JavaScript版本的 ,选择用于生产环境的压缩版phaser.min.js。

项目文件结构如下:澳门新萄京 8

打开index.html,链接五个js文件,并添加页面标题,启动游戏时打开此文件即可:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>贪吃蛇</title>
    <script src="assets/js/phaser.min.js"></script>
    <script src="assets/js/menu.js"></script>
    <script src="assets/js/game.js"></script>
    <script src="assets/js/gameover.js"></script>
    <script src="assets/js/main.js"></script>
    <style>
        body{
            padding: 0;
            margin: 0;
        }

        canvas{
            margin: 0 auto;
        }
    </style>
</head>

<body>
</body>
</html>

二、游戏是如何组织的

基于Phaser的游戏是围绕“状态(state)”进行组织的,此处的“状态”可以看作是游戏的不同阶段,贪吃蛇游戏的状态较少,可简易的分为三个状态:

菜单状态,由menu.js处理,仅用于显示开始界面,点击转换到游戏状态。
游戏状态,由game.js处理,用于显示游戏界面、控制贪吃蛇运动,死亡后进入游戏结束状态。
游戏结束状态,由gameover.js处理,用于显示结束界面、最终得分,点击再次回到游戏状态。
main.js为主JavaScript文件,在其中创建游戏实例,注册各个游戏状态。

1、加载图像

到现在为止,我们仅仅预构了游戏框架,接下来我们来创建菜单状态,让它来显示游戏开始界面。

在HTML文件中我们已经引入了Phaser库,这使我们拥有了一个名为Phaser的全局对象,通过这个对象,我们可以访问Phaser库中哪些用于构建游戏的方法和函数。

现在我们使用Phaser对象来创建一个游戏实例,这个对象用来代表整个游戏,我们会为他添加不同的状态。

main.js

 

// JavaScript Document
var game;

//新建一600px宽、450px高的游戏实例
//Game对象用于管理启动、创建子系统、运行逻辑、渲染
//第三个参数表示要使用的渲染器
//第四个参数表示父级DOM元素
game = new Phaser.Game(600, 450, Phaser.AUTO, '');

//添加菜单状态
//第一个参数表示如何调用状态
//第二个参数是一个包含状态功能所需方法的对象
game.state.add('Menu', Menu);

game.state.start('Menu');

接下来初始化菜单状态对象(Menu),在menu.js中定义一个新对象Menu并为它添加函数。状态启动时,首先会调用preload函数,加载游戏所需资源;加载完成后,调用create函数,初始化游戏区域以及其他需要初始化的内容。

menu.js

// JavaScript Document
var Menu = {

preload: function () {
//加载图像以便于在其上添加游戏精灵
//第一个参数表示图像名称
//第二个参数表示文件路径
game.load.image('menu', './assetsmenu.png');
},

create: function () {
//添加一个游戏精灵,此处添加的精灵为游戏logo
//参数以此为:X,Y,图像名称(见上)
this.add.sprite(0,0,'menu');
}
};

到此,在浏览器中打开index.html,即可看到游戏开始界面,但还无法点击。(由于浏览器的安全限制,可能无法启动游戏,那么则需要一个本地web服务器

本文由澳门新萄京发布于澳门新萄京最大平台,转载请注明出处:h5游戏平台制作教程linux系统

上一篇:网络拓扑图应用,TWaver可视化编辑器的前世今生 下一篇:没有了
猜你喜欢
热门排行
精彩图文