当前位置:>>新闻&文章>>游闻速递>>TV新闻
App Store之外的革命：HTML5技术促网站手机化
来源：多玩
作者：eNet游戏
【核心提示】　　打算钓到大鱼的人首先需要知道哪里能找到大鱼。可惜关于某年某月某日在某处有大鱼咬钩这类情报的保鲜期跟钓上来的鱼差不多，很快就没用了。　　一个叫的论坛，会员数量...
　　打算钓到大鱼的人首先需要知道哪里能找到大鱼。可惜关于某年某月某日在某处有大鱼咬钩这类情报的保鲜期跟钓上来的鱼差不多，很快就没用了。　　一个叫的论坛，会员数量已经接近10万，全都是喜欢分享&鱼讯&的钓鱼爱好者。不过，当会员们收钩回家或者回到有Wi-Fi的度假别墅再登陆论坛，跟众人分享适合下杆的地点(或单纯想要炫耀一下收获)时，这些情报基本已经失去参考价值。假如人们能在船上一边垂钓一边用手机登陆网站发帖直播，效果会大大不同。　　&钓鱼方面的爆料很快就会过时。爱好者们如果能在钓鱼的地方直接发帖，效果会更好，因此我们发现不少用户有这样的需求，希望可以用手机随时登陆论坛发帖。&First Light Net公司首席运营官迈克&霍奇登(Mike Hodgdon)说。First Light Net公司位于科罗拉多州的科罗拉多斯普林斯，旗下有等多个户外活动主题网站。　　于是成为最早一批引进手机浏览优化技术的网站，2007年他们已经开始自己动手改革网站格式，以更适用于手机屏幕显示。可不久后它发现了一家名为dotMobi的公司，这家公司位于爱尔兰的都柏林，不仅是少数出售.mobi域名的企业之一，同时还提供网站的手机浏览体验优化工具。现在，Bigfishtackle.mobi的网页查看、浏览和论坛发帖等功能已经完美地浓缩在三四英寸的手机屏幕上，但使用效果丝毫不逊于用台式机访问常规网站。　　等先行网站代表了一股不断壮大的新趋势，很多创业企业都很注重企业网站的手机访问效果。　　.mobi域名的设计初衷并非是让大家另开一个独立网站&&而是一个代表手机浏览优化的扩展名。所以无需改变网址，霍奇登介绍说：&你可以在.mobi网站发帖，但帖子会立刻整合到常规网站。&　　dotMobi全球营销总监宾伊&布兰德(Pinky Brand)推算，经过手机浏览优化的企业网站可迅速增加10%～15%的流量。换句话说，这个数字也代表没有优化的企业损失的流量，因为消费者试图用手机访问企业的常规网站时发现很难在手机的小屏幕上浏览。　　&很多消费者现在喜欢用手机访问企业网站。其实，只要有网站的企业就同时有了手机网站，因为手机也可以上网访问普通网站。只不过很多企业还没有意识到自己的网站在手机上看起来有多糟糕。&布兰德说。　　Bigfishtackle.mobi是首批用dotMobi技术上线的网站。虽然很多用户只选择某个版本的网站，但霍奇登发现有相当可观的用户会从常规网站转到手机版，具体比例高达40%，也就是说四成的用户访问常规网站后选择跳转到更适合手机浏览的版本。对一个只花了8000多美元的改造项目来说，这种效果相当惊人。　　&你可以仔细想一下，手机用户的市场规模那么大，这对很多类型的企业都很有意义，&霍奇登说，&比起只适合计算机浏览的网站，这样会有更多机会。&　　开发者们，新机会来了　　刚刚掀起的网站手机化运动可能会成为手机技术企业的下一个目标，其中不仅包括正在手机程序开发热潮中鏖战的公司，更给了错过程序开发潮的企业一个机会。不过从长远来看，手机网站的影响力和商业利益最后都可能超越手机程序。　　开发一个代表你公司的专门手机程序成本高昂，需要大量人力投入。米奇&拉扎尔(Mitch Lazar)是社交媒体技术公司Taptu的首席执行官，公司在英国的剑桥和美国的丹佛都设有总部。他介绍说，最早期的那些手机数据软件开发人员如果希望软件在一款手机上运行，就必须为这种手机专门开发一个程序，常常是打算兼容多少种手机就要开发多少个程序版本。　　拉扎尔自己就是一个早早投身于手机互联网开发的先行军，上世纪90年代就为专门开发了一个CNN手机服务。　　&因为必须为市场上有的每一种手机定制相应程序，成本高，发行过程也很麻烦，&拉扎尔说，&为了适应不同的发行商，我们最后竟然开发了差不多500个不同版本的CNN手机服务产品。&　　近些年出现了两种理念截然相反的技术发展方向，大大简化了开发过程。首先是苹果公司，苹果以风靡全球的iPhone为核心，打造出一个受其严格控制的手机程序开发体系。接着是谷歌的Android操作系统，为开发人员提供了一个开放式的平台，编写出的程序只需经过略微调整就可以在更多手机设备上运行。　　iPhone的成功和Android大军的集结带动起一个飞速膨胀的手机程序市场，但这种热度也为每个希望自己的手机软件能崭露头角的企业带来新的挑战。首先，企业必须和某个程序商店签约，比如苹果的iPhone程序店，而对方会从收入中提成。而且程序要想出现在虚拟商店的货架上，还要经过漫长而严苛的测试和认证过程。　　不过，最大的挑战是程序上市后的宣传问题。以苹果程序店为例，每个程序都要与其他30多万个程序一起争夺消费者的注意力&&这还只是一家程序店而已。而且就算消费者注意到你的软件，他们是否真的会用呢？随着手机用户下载的程序越来越多，已经有很多人开始担心程序过剩的问题。　　Taptu公司的拉扎尔表示：&这是过滤功能的失败，问题根本是无法筛选出对你最重要的东西。这个问题久而有之，自从互联网像个高压水管一样将海量信息向我们发来之后就已经开始有这方面的忧虑。&　　Taptu公司推出的MyTaptu社交信息聚合程序可帮助用户在手机上建立个性化的浏览体验，无需在不同软件之间跳转，可以帮助一些企业应用在这个飞速发展的手机程序海洋中更容易被市场发现。　　尽管Taptu这类工具会有所帮助，但很多小企业主仍然觉得想借手机程序出头堪比大海捞针。与其想方设法将一个简陋的程序塞进消费者的手机去压箱底，还不如把钱和时间拿去改善企业网站。　　尼亭&毕安德瑞(Nitin Bhandari)是美国加州山景城Skyfire公司的合作创始人兼首席产品官，这家公司的手机浏览器技术可以将普通网页转化为适于手机浏览的格式。他认为企业现在更重视手机网站开发是顺应形势之举，因为手机网络带宽的进步和新型浏览器的出现都大大提高了手机设备的能力。　　&现在的手机比以前好、网络比以前好、浏览器也比以前好。&他说。不过应该什么时候、用什么方式去赶手机网站这股热潮仍是个颇复杂的问题。　　&现在对手机网站有很多误解，&温哥华的网站优化公司Strangeloop总裁乔舒亚&比克斯比(Joshua Bixby)说，&企业仍不知道该做些什么，而大公司的精力还是放在为各种不同牌子的手机开发软件。&　　比克斯比认为，&手机网站要想得到更多重视，大概要等企业管理层某日用iPhone访问竞争对手的网站，然后突然发现别人的网站在手机上运行的都比自己公司的要好。这时他们才会命令IT部门调整方向，将手机网站开发放在首位。&　　DotMobi的布兰德建议企业在开发手机网站时记住三大要素：手机用户访问时要能找到网站；网站的内容要有办法适应手机格式；还要有办法显示这些适用于手机的内容。　　敬爱的HTML 5　　最主要的一个技术工具是HTML 5，这是第一代适用于手机浏览的开发语言，可以用来创建手机版网站，以及手机版&网络程序& &&通俗说就是基于网站的程序和插件，可以通过谷歌Chrome或苹果Safari等利用Webkit开源网页编译系统的浏览器访问，Webkit就是HTML 5规范中的一部分。　　&网络程序基本上就是披着程序外衣的HTML。&NewBay软件公司的高级产品经理马克&布里滕(Mark Britten)表示，他的公司在西雅图和都柏林都设有办公室。&用起来比XML更轻便，更快捷。&　　对于没有IT部门的小型企业来说，最大的利好消息是根本无需了解HTML 5也可以做出好网站。比如dotMobi提供的goMobi服务平台，很多类似的解决方案都可以帮你承担这些苦差事。在goMobi平台，只需要用简单的拖拽方法，企业经营者就可以将普通网站变成手机网站。而且根据布兰德的介绍，整个转换过程只需要几分钟。dotMobi还提供免费的服务，经营者可以在这里测试已经做好的网站，查看在不同手机设备上的显示效果。　　很多HTML 5的拥趸声称基于这一平台的手机优化网站和新兴起的网络程序可以将企业从手机程序店的肉搏战中解救出来，企业可以直接将客户吸引到手机网站&&这样也有助于将用户的注意力从一大堆手机程序中拉走，增加手机上网的使用率。　　&手机程序其实有很高的客户流失率。你过去下载的那些程序现在都是身上的虚拟负担，而网络浏览量只会继续不断增加。&Skyfire的毕安德瑞说。　　比克斯比认为，不论是对程序开发商还是对用户，网站手机优化革命最终会削弱手机程序店的地位&&但他承认在手机程序市场的巅峰期还很难想像那一场景。　　他说：&我们现在看到的手机程序只是手机互联网成熟过程中的一个阶段，手机浏览器才是未来的主宰。&　　Taptu的拉扎尔有不同想法：程序的重要地位不会变，HTML 5这样的技术只是让企业有更多选择，可以从各种角度参与手机互联网，可以是手机网站，也可以是手机程序。　　&HTML 5让Taptu不用更改很多代码就可以完成一个智能浏览器解决方案，你还是会使用很多手机程序。只不过这些程序会和网站一样都是用HTML 5语言来编写。&他说。　　由于企业开发手机网站的过程越来越简单，会有更多公司决定加入这一队伍。相对来说开发手机版网站的成本并不高，某些新企业甚至可能直接用手机网站来做企业网站。　　尽管如此，dotMobi公司的布兰德认为，是否要对网站进行手机优化或是否进一步支持手机商务，这些取决于企业对受众群的了解。　　如霍奇登表示，非常肯定用户对手机网站的兴趣，于是抢先从dotMobi注册了30个.mobi域名。他也看到了开发手机商务的巨大潜力，比如通过手机购买钓鱼许可，然后用手机屏幕来显示。　　霍奇登表示：&.mobi网站跟我们一直以来做的东西没有区别，只是个外延。&　　布兰德则觉得手机网站的发展&令他想起15年前的电脑互联网发展&，都是受到设备功能和网络连接能力进步的推动。不过比起手机互联网日新月异的发展速度，当年电脑网络的发展速度稍落下风。大概要归功于创业者之间的相互交流，人们会说，&我试了这个效果不错，或许你也合适。&
共有留言条&&
声明：您所发表的言论将被众多人阅读，因此，您所发表的言论应不违反中国法律，不违背一般的道德原则，否则，您必须对您的不当言论引发的一切不良后果负责；此外，我们的管理员有权删除您发表的不当言论。
龙腾世纪 汉化
PES2011试玩
FIFA2011试玩
美腿双姝COS
逢泽丽奈清纯写真
蓝色驱魔师同人
高端镜头拍CJ美女
CJ最牛摄影师
软妹制服诱惑
2011武侠网游之战
原著剧情极致演绎
鹿鼎记SD娃娃
| 加入收藏
网站合作、内容监督、商务咨询、投诉建议：010-
合作建议：
Copyright &
硅谷动力公司版权所有 京ICP证000088号Phaser是一个简单易用且功能强大的html5游戏框架，利用它可以很轻松的开发出一个html5游戏。在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏：Flappy Bird，希望大家看后也能做出自己的html5游戏。大家可以先点击这里来试玩一下我已经做好的这个游戏，感受一下Phaser的游戏效果，游戏的完整代码我已经放到github上了。支持的浏览器：IE9+、Firefox、Chrome、Opera、Safari以及移动端的能支持html5的浏览器，推荐使用谷歌浏览器，因为它性能最好。phaser.js的源码可以到它在github上的托管里去下载，游戏要用到的图片声音等素材资源请点击这里下载。Phaser的使用非常简单，只需要引入它的主文件，然后在页面中指定一个用来放置canvas的元素，然后实例化一个 Game 对象就可以了。&!DOCTYPE html&&html&&head&&meta charset="utf-8" /&&title&game&/title&&script src="js/phaser.js"&&/script&&/head&&body&&div id="game"&&/div&&script&var game = new Phaser.Game(288,505,Phaser.AUTO,'game'); //实例化一个Phaser的游戏实例&/script&&/body&&/html&我们来看看Phaser.Game这个函数都有哪些参数：Phaser.Game(width, height, renderer, parent, state, transparent, antialias, physicsConfig)width: 游戏的宽度,也就是用来渲染游戏的canvas的宽度，单位为pxheight: 游戏的高度，也就是用来渲染游戏的canvas的高度，单位为pxrenderer: 使用哪种渲染方式，Phaser.CANVAS 为使用html5画布，Phaser.WEBGL 为使用性能更加好的WebGL来渲染，Phaser.AUTO为自动侦测，如果浏览器支持WebGL则使用WebGL,否则使用Canvasparent: 用来放置canvas元素的父元素，可以是一个元素id，也可以是dom元素本身，phaser会自动创建一个canvas并插入到这个元素中。state: state可以理解为场景，在这里指定state表示让游戏首先加载这个场景，但也可以不在这里指定state，而在之后的代码中决定首先加载哪个state。关于state我后面还会有详细的说明。transparent: 是否使用透明的canvas背景antialias: 是否启用抗锯齿physicsConfig: 游戏物理系统配置参数以上所有参数都是可选的，它们的默认值以及更详细的信息可以看这里，一般我们只需指定前面那4到5个参数就行了。&实例化Game对象后，接下来要做的就是创建游戏会用到的各种场景了，也就是上面说的state，那么怎么才能创建一个state呢？state可以是一个js自定义对象，也可以是一个函数，只要它们存在preload、create、update这三个方法中的任意一个，就是一个合法的state。//state可以是一个自定义对象var state1 = {
preload : function(){ },
create : function(){ },
update : function(){ }
}//state也可以是一个构造函数var state2 = function(){
this.preload = function(){ };
this.create = function(){ };
this.update = function(){ };}//只要存在preload、create、update三个方法中的一个就可以了var state3 = function(){
this.update = function(){
};}//当然state里也可以存在其他属性或方法var state4 = function(){
this.create = function(){ };
this.aaa = function(){ }; //其他方法
this.bbb = 'hello'; //其他属性}&其中的preload方法，是用来加载资源的，它会最先执行。create方法是用来初始化以及构建场景的，它要等到在preload里加载的资源全部加载完成后才执行。最后update方法是更新函数，它会在游戏的每一帧都执行，以此来创造一个动态的游戏。在这个游戏中，我们会用到4个state，我们可以通过game.state.add()方法来给游戏添加state，然后用game.state.start()方法来调用state,详细信息请看state的文档var game = new Phaser.Game(288,505,Phaser.AUTO,'game'); game.States = {}; //创建一个对象来存放要用到的stategame.State.boot = function(){ ... }
//boot场景，用来做一些游戏启动前的准备game.State.prelaod = function(){ ... } //prelaod场景，用来显示资源加载进度game.State.menu = function(){ ... } //menu场景，游戏菜单game.State.play = function(){ ... } //play场景，正式的游戏部分//把定义好的场景添加到游戏中game.state.add('boot',game.States.boot);game.state.add('preload',game.States.preload); game.state.add('menu',game.States.menu); game.state.add('play',game.States.play); //调用boot场景来启动游戏game.state.start('boot');&&制作资源加载进度条游戏要用到的一些图片、声音等资源都需要提前加载，有时候如果资源很多，就有必要做一个资源加载进度的页面，提高用户等待的耐心。这里我们用一个state来实现它,命名为preload。因为资源加载进度条需要一个进度条的背景图片，所以在制作这个state前，我们还需要另一个最基础的state,用来加载那张进度条图片，我们命名为boot。game.States.boot = function(){
this.preload = function(){
game.load.image('loading','assets/preloader.gif'); //加载进度条图片资源
this.create = function(){
game.state.start('preload'); //加载完成后，调用preload场景
};}&Phaser中资源的加载都是通过 Phaser.Loader 这个对象的方法来完成的,游戏实例的load属性就是指向当前游戏的Loader对象，在我们这里就是game.load。Loader对象有许多方法，不同的方法可以加载不同的资源，例如加载图片我们用的是game.load.image()方法，具体的方法列表请自行参考文档。在preload这个场景中，我们需要把游戏后面会用到的所有资源都进行加载，然后还要展示一个加载进度条给用户看。Loader对象提供了一个 setPreloadSprite 方法，只要把一个sprite对象指定给这个方法，那么这个sprite对象的宽度或高度就会根据当前加载的百分比自动调整，达到一个动态的进度条的效果。game.States.preload = function(){
this.preload = function(){
var preloadSprite = game.add.sprite(50,game.height/2,'loading'); //创建显示loading进度的sprite
game.load.setPreloadSprite(preloadSprite);
//用setPreloadSprite方法来实现动态进度条的效果
//以下为要加载的资源
game.load.image('background','assets/background.png'); //游戏背景图
game.load.image('ground','assets/ground.png'); //地面
game.load.image('title','assets/title.png'); //游戏标题
game.load.spritesheet('bird','assets/bird.png',34,24,3); //鸟
game.load.image('btn','assets/start-button.png');
game.load.spritesheet('pipe','assets/pipes.png',54,320,2); //管道
game.load.bitmapFont('flappy_font', 'assets/fonts/flappyfont/flappyfont.png', 'assets/fonts/flappyfont/flappyfont.fnt');//显示分数的字体
game.load.audio('fly_sound', 'assets/flap.wav');//飞翔的音效
game.load.audio('score_sound', 'assets/score.wav');//得分的音效
game.load.audio('hit_pipe_sound', 'assets/pipe-hit.wav'); //撞击管道的音效
game.load.audio('hit_ground_sound', 'assets/ouch.wav'); //撞击地面的音效
game.load.image('ready_text','assets/get-ready.png'); //get ready图片
game.load.image('play_tip','assets/instructions.png'); //玩法提示图片
game.load.image('game_over','assets/gameover.png'); //gameover图片
game.load.image('score_board','assets/scoreboard.png'); //得分板
this.create = function(){
game.state.start('menu'); //当以上所有资源都加载完成后就可以进入menu游戏菜单场景了
}}上面我们提到了Sprite对象，也就是游戏开发中俗称的精灵，同样在Phaser中sprite对象也是制作游戏过程中用得最多的也是最重要的一个对象之一。我们可以用一幅图片来创建一个sprite,然后用Phaser提供给我们的众多属性和方法来对它进行操作。上面我们是利用game.add.sprite()来创建sprite的，并且创建后会自动把它添加到当前的游戏中，game.add代表的是Phaser.GameObjectFactory对象，该对象提供了了一系列快捷方法来方便我们创建游戏的各种组件。我们这里制作的资源加载进度页面非常简单，大概就是下面这个样子：&制作游戏菜单页面资源加载完成后就该进入到游戏菜单页面了,说是菜单页，但我们这里只是提供一个开始游戏的按钮而已，作为教程就别搞那么复杂啦。做好后的效果如下：下面我们就来实现这个页面。首先是背景图与地面，我们看到这两个东西是会动的，地面移动动的速度快一些，背景图慢一些，在Phaser中有专门的东西来处理这种效果，叫做TileSprite，什么是TileSprite呢？TileSprite本质上还是一个sprite对象，不过这个sprite的贴图是可以移动的，并且会自动平铺来弥补移动后的空缺，所以我们的素材图片要是平铺后看不出有缝隙，就可以拿来当做TileSprite的移动贴图了。TileSprite的贴图既可以水平移动也可以垂直移动，或者两者同时移动，我们只需要调用TileSprite对象的autoScroll(x,y)方法就可以使它的贴图动起来了，其中x是水平方向的速度，y是垂直方向的速度。game.States.menu = function(){
this.create = function(){
var bg = game.add.tileSprite(0,0,game.width,game.height,'background'); //当作背景的tileSprite
var ground = game.add.tileSprite(0,game.height-112,game.width,112,'ground').autoScroll(-100,0); //当作地面的tileSprite
bg.autoScroll(-10,0); //让背景动起来
ground.autoScroll(-100,0); //让地面动起来
}}&然后来制作游戏标题，游戏标题flappy bird这几个字是一张图片，然后那个鸟是一个sprite，并且我们在sprite上执行了动画，使它的翅膀看起来是在动的。我要说的是怎么在sprite对象上实现动画。首先在加载鸟的图片时，我们加载的不当当就是一张鸟的图片，我们加载的是一个这样的图片：我们看到这张图片有三只鸟，更确切的说是一只鸟的三个状态，或者说是动画中的三个帧。那我们怎样让他变成动画呢？在Loader对象中有一个spritesheet的方法，就是专门用来加载这种多帧图片的，我们看一下这个方法：spritesheet(key, url, frameWidth, frameHeight, frameMax, margin, spacing)key : 给这张图片指定的名称，以后在创建sprite等对象时会要用到的url: 图片的地址frameWidth :& 图片中每帧的宽度frameHeight : 图片中每帧的高度frameMax : 最多有几帧margin : 每帧的外边距spacing : 每帧之间的间隔我们上面那张鸟的图片，每一个鸟的宽高分别是34px和24px,所以frameWidth应该是34，frameHeight是24，然后我们这个动画有三帧，frameMax为3，帧与帧之间没有间隙，margin与spacing都为0。实际上spritesheet方法就是能让我们加载一个图片，并在这个图片上划分出帧来，以后使用这个图片的sprite就可以用这些帧来播放动画啦。要在sprite上实现动画，我们首先还得先定义一个动画，就是定义这个动画是由哪些帧组成的。sprite对象有个animations属性，代表的是Phaser中专门管理动画的对象：AnimationManager，该对象有一个add方法，用来添加动画，还有一个play方法，用来播放动画，它们具体的参数可以参阅文档。下面再说一个非常重要的对象：Phaser.Group，也就是组。组相当于一个父容器，我们可以把许多对象放进一个组里，然后就可以使用组提供的方法对这些对象进行一个批量或是整体的操作。比如要使组里的对象同意进行一个位移，只需要对组进行位移就可以了，又比如要对组里的所有对象都进行碰撞检测，那么就只需要对这个组对象进行碰撞检测就行了。下面我们要制作的这个游戏标题是由一张文字图片和一支鸟组成的，我们就是把这两个东西放在一个组中，然后来进行整体的操作。game.States.menu = function(){
this.create = function(){
var titleGroup = game.add.group(); //创建存放标题的组
titleGroup.create(0,0,'title'); //通过组的create方法创建标题图片并添加到组里
var bird = titleGroup.create(190, 10, 'bird'); //创建bird对象并添加到组里
bird.animations.add('fly'); //给鸟添加动画
bird.animations.play('fly',12,true); //播放动画
titleGroup.x = 35; //调整组的水平位置
titleGroup.y = 100; //调整组的垂直位置
game.add.tween(titleGroup).to({ y:120 },1000,null,true,0,Number.MAX_VALUE,true); //对这个组添加一个tween动画，让它不停的上下移动
}}&&上面代码中的Tween对象，是专门用来实现补间动画的。通过game.add的tween方法得到一个Tween对象,这个方法的参数是需要进行补间动画的物体。然后我们可以使用Tween对象的to方法来实现补间动画。&to(properties, duration, ease, autoStart, delay, repeat, yoyo)properties :& 一个js对象，里面包含着需要进行动画的属性，如上面代码中的 {y:120}duration : 补间动画持续的时间，单位为毫秒ease : 缓动函数，默认为匀速动画autoStart : 是否自动开始delay : 动画开始前的延迟时间，单位为毫秒repeat : 动画重复的次数，如果需要动画永远循环，则把该值设为 Number.MAX_VALUEyoyo : 如果该值为true,则动画会自动反转&最后是添加一个开始游戏的按钮。Phaser提供了Button对象让我们能很简单的实现一个按钮。game.States.menu = function(){
this.create = function(){
var btn = game.add.button(game.width/2,game.height/2,'btn',function(){//添加一个按钮
game.state.start('play'); //点击按钮时跳转到play场景
btn.anchor.setTo(0.5,0.5); //设置按钮的中心点
}}&Phaser中很多对象都有一个anchor属性，它表示这个物体的中心点，物体的位置平移、旋转的轴，都是以这个中心点为参照的。所以上面代码中我们要使按钮水平垂直居中，除了要把按钮的x,y属性分别设为游戏的宽高的一半外，还要把按钮的中心点设为按钮的中心。&最后我们把所有代码合起来，得到了menu这个state的最终代码，该state只需要一个create方法就行了：game.States.menu = function(){
this.create = function(){
game.add.tileSprite(0,0,game.width,game.height,'background').autoScroll(-10,0); //背景图
game.add.tileSprite(0,game.height-112,game.width,112,'ground').autoScroll(-100,0); //地板
var titleGroup = game.add.group(); //创建存放标题的组
titleGroup.create(0,0,'title'); //标题
var bird = titleGroup.create(190, 10, 'bird'); //添加bird到组里
bird.animations.add('fly'); //添加动画
bird.animations.play('fly',12,true); //播放动画
titleGroup.x = 35;
titleGroup.y = 100;
game.add.tween(titleGroup).to({ y:120 },1000,null,true,0,Number.MAX_VALUE,true); //标题的补间动画
var btn = game.add.button(game.width/2,game.height/2,'btn',function(){//按钮
game.state.start('play');
btn.anchor.setTo(0.5,0.5);
}}&第二部分教程：用Phaser来制作一个html5游戏&&flappy bird （二）