作者：channingbreeze

日期：2016-09-10

Flappybird小游戏曾经风靡全世界，虽然是一款非常简单的小游戏，但是却非常容易让人上瘾，一只呆萌的小鸟，几根绿色的柱子，随着手指的点击，在屏幕上运动着。今天，我们就用Phaser，来还原这一神作！

先给一个线上地址，大家体验：http://game.webxinxin.com/flappybird/。

整个游戏分为四个场景来进行编写，但是前面两个场景都是为了加载资源做准备的，所以实际上只有两个主要的场景。

首先在boot场景中，将preloader.gif这个loading的图片资源加载进来，然后跳到preload场景，在preload场景中加载其他资源，这样的话，在加载资源的时候，就能够有一个以preloader.gif作为图片的进度条显示了。

在preload中，我们通过以下两句代码设置preloadSprite，然后再去加载其他的资源，这样就能够出现进度啦~~

var preloadSprite = game.add.sprite(34, game.height/2, 'loading');
game.load.setPreloadSprite(preloadSprite);

好了，资源都加载完毕了，接下来来实现menu场景：

背景，我们用tileSprite，地面，我们也用tileSprite，这样，我们就能够使用它的autoScroll来自动向后进行移动。然后，把title和小鸟都加入一个titleGroup中，让titleGroup进行tween动画，这样，title和小鸟就同步进行动画了。当然这里，小鸟自己还有一个animation需要跑。给开始按钮绑定一个时间，点击后，进入游戏主场景。

主场景刚进来的时候很简单，是一个静态的，它的做法和menu场景差不多，只需要把一些图片资源放在相应的位置上就行了。这里还需要定义好一个定时器，点击屏幕的时候进行启动。然后我们通过game.input.onDown.addOnce来实现点击屏幕的时候，调用startGame进行游戏。

在startGame中，我们做了一些必要的初始化工作，然后通过game.time.events启动之前定义好的定时器。在定时器中，我们会调用generatePipes来产生我们的柱子。

产生柱子的主要思路就是把柱子都放在一个pipeGroup中，然后两两配对，分为topPipe和bottomPipe。每次需要产生新的柱子的时候，先从pipeGroup中找，是否有被kill掉的对象，如果有，将它们复用，一些必要属性重置后，摆放好位置继续用，如果没有，那就调用game.add.sprite自己产生一个咯，然后放入pipeGroup中。注意，我们要设置pipeGroup的outOfBoundsKill为true，这样才能在柱子移出屏幕的时候，自动被kill。

在update中，我们设置了两个碰撞检测，一个是小鸟与地面的碰撞，一个是小鸟与柱子的碰撞，都进行了相应的处理，碰撞后，游戏结束，然后计算把得分显示出来。

游戏其实不难，用Phaser实现更简单，但是代码还是有很多可以改进的地方。（代码不是我的，这不是我的真实水平哈~~）

转载请注明出处：http://www.phaser-china.com/tutorial-detail-2.html