网站地图    收藏   

主页 > canvas引擎 > Phaser游戏引擎 >

Phaser实现Flappybird

来源:未知    时间:2017-11-15 14:07 作者:xxadmin 阅读:

[导读] 作者:channingbreeze 日期:2016-09-10 Flappybird小游戏曾经风靡全世界,虽然是一款非常简单的小游戏,但是却非常容易让人上瘾,一只呆萌的小鸟,几根绿色的柱子,随着手指的点击,在屏...







作者: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


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论