>

禁止转载,禁止转载

- 编辑:澳门博发娱乐官网 -

禁止转载,禁止转载

教你用 HTML5 制作Flappy Bird(下)

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

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

在上一篇HTML5教程中,我们做了一个简化版的Flappy Bird。虽然可以“称得上”是一款游戏了,但却是一款很无聊的游戏。在这篇文章中我们来看一看如何给它添加动画效果和音效。虽然并没有改变游戏的机制,但却能够使游戏变得更加有趣。你可以点击这里先体验一下。

教你用 HTML5 制作Flappy Bird(上)

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

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

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

sbf282.com 1

Flappy Bird是一款非常优秀且容易上手的游戏,可以作为一个很好的HTML5游戏的教程。在这片教程中,我们使用Phaser框架写一个只有65行js代码的简化版Flappy Bird。

点击此处可以先体验一下我们即将要制作的游戏。

提示1:你得会JavaScript
提示2:想学习更多关于Phaser框架的知识可以看这篇文章getting started tutorial(最近工作忙,稍后翻译)

蛋蛋的忧伤,看看《疯狂的小鸟》如何把人玩疯!

2014年02月13日 来源:搞趣网 作者:reimu 搞趣网官方微博

就在春节期间一款游戏大火,这款由越南人Dong Nguyen制作的名为《Flappy Bird疯狂的小鸟》的游戏以惊人的速度占据了AppStore榜首。早在 13 年 5 月游戏上线的无人问津到到现在的大红大紫,究竟是什么原因让它掀起这波浪潮,就连制作人自己都表示不理解,不过可以肯定的是这款疯狂的小鸟具有一定的成瘾性,它就是会让你在一次又一次的失败中不断尝试不断抓狂!

sbf282.com 2

下面小编收集了一部分国外玩家制作的视频,视频中的玩家在游戏过程中表情各种扭曲,简直要笑尿小编了!你在玩这款游戏时是不是也是这种表情呢?

黑胖纸玩疯狂的小鸟抓狂了,不断爆粗口

漂亮妹纸头发都玩白了

上面都是些抓狂的玩家,更有被小鸟虐的神志不清失去理智的技术宅做了一系列虐待蹂躏小鸟的游戏来发泄。同被小鸟虐过的小编表示这样的游戏哪有下载!我每天都要虐它 100 遍啊 100 遍!

暴打小鸟怒拿 40000 分!

技术宅做的用水管夹扁小鸟的游戏

疯狂的小攻略

音乐创作人 Dave Days 也为小鸟写了首《Flappy Bird之歌》,改编自英国电子乐队 Bastille 的《Pompeii》,听起来相当不错,很有那种蛋碎的忧伤,让我们来听一下吧。

《Flappy Bird之歌》Flappy Bird songI was once a normal guy who lived an average life.But then I played this horrid game now I want to die.This flappy bird flies up it flies down in a game I thought I'd love.Great pipes soared over the hills bringing challenge from above.But when you crash into the pipes.Does it almost feel like you got slapped in the face.When you fly into a pipe.Does it make you want to throw your phone till it breaks.Why am I being such an optimist about this.I hate this game with I never got it.I thought game were supposed to be fun.Cause when I play I really hate what I've become.Cause I lost all of my friends don't want to sleep or go to bed.I Can't put my phone down without smashing it on the ground.I was so confident then I got punched in the face by a pipe.Tried to but I can't quit and my high score, I can't beat it.Now I can't quit.

【责任编辑:reimu】

文中图片引用自网络,如有侵权请联系我们予以删除

设置

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

打开main.js,开始敲吧。

设置

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

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

本文由胜博发-前端发布,转载请注明来源:禁止转载,禁止转载