基于HTML5的FlappyBird游戏-毕业论文

中文题目XIAMENUNIVERSITYOF基于HTML5的FlappyBird游戏基于HTML5的FlappyBird游戏是一款无需下载客户端程序的网页游戏，适基于HTML5标准标记语言和JavaScript动态脚本语言，结合Ajax技术实现游戏模块和游戏结束模块，界面简洁美观，游戏功能大交互行为、重力模型、小鸟穿越管道得分以及游戏ABSTRACTFlappyBirdgamebasedontheHTML5isawebgamethatdoesnotneedtodownloadtheclientprogramthatissuitableforofficeworkersandstudeentertainment.Thegameismainlythroughclickingthemousetocontrolthebirdsuccessfullypassthroughthebarriersofdifferentlengthofpipesandthengetscorestotesttheplayer'sreactionabilityandagility.Thedevelopmentofthisgameusestheforwardandbackwardtechnology.TheframeworkadoptedarePhaser,struts2,Hibernate.ThegameisbasedontheHTML5standardmarkuplanguage,JavaScriptdynamicscriptinglanguageandcombineswithAjaxtechnologytoachievethegame'sinterfaceandfunction.Amongthem,thenumberofnewHTML5tagselementsplayedapivotalroleinthedevelopmentprocess.SothefocusofthisprojectistostudyhowtousetheHTML5languagetodevelopthiswebgame.Thedevelopmentofthisgamesuccessfullyachievedtheexpectedgoals.Thegame'sfunctionshavebeenalmostcompleted.Thegameisdividedintosixmoduleswhicharelaunchmodule,menumodule,gamestartingmodule,gamepreparingmodule,themainmoduleandtheendmodule.Theinterfaceissimpleandbeautiful.Thefunctionsofthegamearesubstantiallycompleted.Theinteractivebehaviorofthemouseandthebird,thegravitymodel,thebirdpassthroughthepipestogetscores,alargenumberofpropsduringthegameandotherrichgamefunctionsarerealized.ThelatterIalsohopetoadoptaquestionnairesurveyandotherwaystocapturethefeelingsofusers'experience,sothatthefunctionandtheinterfacehaveamoreindependentstyleofFlappyBird.KeyWords:HTML5;WebGame;FlappyBird 11.1研究背景 1 21.3论文组织结构 3 4 5 52.1.1技术可行性分析 52.1.2经济可行性分析 62.1.3操作可行性分析 6 6 6 8 9 9 9 3.1.1概要设计 3.1.2详细设计 3.2本章小结 4.1启动、加载界面 4.2游戏开始界面 4.3游戏准备界面 4.4游戏开始界面 4.5游戏结束界面 4.6游戏演示 第5章结论与展望 5.1结论 第1章引言第1章引言众所周知，传统网游有一诟病就是游戏前需要先下载客户端程序，而程序一般很大，会占用大量内存，基本上是300M以上，有些甚至需要超过1G。所以传统网游下载既占用内存又耗费时间。需求推动社会进步，既然传统网游已经无法满足玩盼中孕育而生了，即网页游戏²。而恰恰网页游戏就完美地避开了这一问题，它不用“网页游戏”和传统网游的主要不同在于，玩家与游戏的交流方式不同，网页游戏通过使用浏览器，把玩家和游戏直接联系在一起，即玩家通过浏览器直接进入游戏界面，简单方便。网页游戏的未来发展趋势相当可观，因为它的潜在用户很多，并且玩家体验游戏的过程得到了极大的简化，使得未来的用户数量呈持续递增趋势。而近期行业里的专业人士提出，可以将浏览器当做一个虚拟的操作系统，这为了实现网页游戏，我们需要了解网页游戏要使用到的开发语言HTML5。载时长。那么,有需求就会有发展，紧跟着玩家用户需求的不停提出，技术也随之发的主动权。引起了其他公司的不满，于是在商讨过后决定制定一个新的世界语言标是在保持持续强大稳定的发展当中。当然HTML5也是在不断摸索研究中逐渐强大起在游戏方面的增强主要体现在HTML5新增了Canvas、WebGL两种渲染方式。其中最显著的特性就是新增了Canvas⁴标签。借助Canvas标签，HTML5拥有了进行游戏开发的能力，可以实现各式各样的图形、表格和动画等的效果。传统网游是通过flash⁵来实现游戏中的动画效果，但是flash有一个致命的缺点就是播放或浏览动画必须通过flashplayer才可以，这样就导致了它的移值性很差。而使用Canvas就可以直接实现动画效果，不用使用到外部插件，故移植性得到了大大的提高。这也是保证了开发出的网页游戏具备最大的浏览器兼容性。除了良好的浏览器兼容，HTML57还做到了最大程度的设备兼容。无论你的电脑运行的是哪种操作系统，无原来的HTML5出现了诸多不如原生应用的表现，如表1.1所示。表1.1原来的HTML5与原生应用的对比原来的HTML5原生应用性能ios流畅流畅Android低端机很卡工具各类高级记事本Xcode、EclipseADT等专业能力只有7w个语法和API40w+APIApp和原生应用不一致。于是，人们提出了解决方案。首先通过硬件升级，将CPU的速度进行成倍得提升。其次商讨出了新型的OS厂商策略，他们将浏览器的内置对的这些障碍都被克服了。现在的HTML5应用已经成功地做到了和原生App一样的效际企业共同商讨研发出来的新一代标准标记语言，所以HTML5具有至高网游在当今很主流很火爆，它弥补了端游的遗憾，不用下载客户端程序来建立玩家与游戏的联系，而是直接通过浏览器实现和玩家的交互，方便高效，且市场巨大。这是我想要研究本课题的原因之一。此外，HTML5作为当今最流行最第1章引言准标记语言，其使用范围广泛，且功能强大，特别是又在原先的HTML4.01的基础上新增、删改了很多标签，这使得我非常的想要进行学习和了解，所以我选择了基那么,这个课题开发还涉及到多个技术。我们通过前后台对应用技术进行划分前台使用到的框架是Phaser框架。Phaser框架是一款开源游戏框架，提供免费是最合适、恰当的。其次，要进行JavaScript°的深入学习。在开发过程中，我们需戏中要实现登陆注册功能，那么就需要后台数据和服务器的支持，所以，本次游戏开发需要结合struts2框架和Hibernate框架。同时，还要对Ajax技术进行研究学习，利用它可以实现刷新网页时，不加载全部页面，只更新局部，弥补了传统网页的遗第1章引言。主要介绍了网页游戏的概念以及围绕HTML5介绍了其历史和现状第2章FlappyBird游戏分析。划分为两部分，首先是围绕FlappyBird游戏进行了三方面的可行性分析，分别为技术可行性分析、经济可行性分析、操作可行性分析。其次介绍了本次开发使用的工具、技术以及运行环境。最后对FlappyBird游戏进行需求分析，首先针对游戏玩法进行了详细介绍，再对本游戏的需求进行多方面第4章游戏实现。主要针对游戏的各个界面是如何通过代码实现功能进行详细的第5章结论与展望。主要总结了本次论文的研究课题以及取得的收获和不足，并第1章引言 第2章FlappyBird游戏分析开发本款游戏主要用到的技术有Phaser框架、HTML5、JavaScript、struts2、首先，Phaser框架是一款免费的游戏开源框架，而我们要使用的HTML5的最核心的新标签就是Canvas画布元素，所以使用画布元素，而这个元素可以大大简化我们的开发代码。Canvas用英文翻译即为画布，顾名思义，该标签相当于一块画布，浏览器可以直接在上面绘制矢量图，使用JavaScript添加需要的样式，使得图形或动画可以直接在浏览器中显示出来，因此播放或浏览动画必须通过flashplayer才可以，这样就导致了它的移值性很差。而使用Canvas就可以直接实现动画效果，移植性得到了大大的提高。所以HTML5既是最后，使用JavaScirpt来实现具体的样式和功能。我们在HTML中嵌入因为游戏中需要实现登陆注册功能和排行榜功能，这就涉及到后台数据和服务已经成为了一个高度成熟的框架，不管是稳定性还是可靠性都得到了广泛的证明。所以使用这个框架的安全性和有效性都得到了极大的保证。Hibernate框架通过对JDBC进行对象封装，通过java语言开发，实现对数据库数据的控制。Ajax弥补了传以上这些技术都是被广泛使用和大量推广的，并且适合用于开发网页游戏，所6开发基于HTML5的FlappyBird游戏2使用的Phaser框架是免费的游戏开源框架，可以直接下载使用，所以开发过程不产生经济费用。且本游戏免费开放，游戏关卡亦没有设置收费项目或要求玩家购买游戏道具，故游戏过程也没有产生经济费用。总而言之，这是个免费的娱乐休闲小游戏，故经济可行。本次开发的FlappyBird游戏操作简单，极易上手，主要考验的是玩家的反应速度，在游戏玩法上并没有刻意刁难玩家。主要是通过鼠标点击控制小鸟的飞行，只要不触碰管道及地面，即可继续游戏并获取得分，故本游戏的操作性强。2.2主要工具及技术2.2.1相关应用技术简介HTML5技术简介为了取代HTML的旧版本，HTML53在人们的热切期待中孕育而生，且在不断地发展强大当中，以便能更加适应网页的应用。HTML5在原先的旧版本上做出了极大的改变，主要体现在对标签元素进行了大量的增加、删除和修改，甚至是一些语义上的变化。首先，增加了许多便捷的标签元素。例如当用户需要在页面中添加音乐或视频时，只需通过<audio>标签的使用即可实现插入音频的效果，使用方法为<audiosrc="音乐或视频的地址"></audio>,而无需再通过加载flash插件来实现，方便高效。再比如新增了一种新型的页面渲染方式，通过<Canvas>14标签直接在网页中构建一块画布，而JavaScript就是画笔，将网页中需要的形态和样式全部勾勒在画布上面，提供给用户神奇而又强大的功能体验。同时，HTML5删除了大量冗余的属性和标签，例如像设置页面字体的标签<font>就被删除掉了，取而代之的是style属性。大量冗余的标签被删除，使得HTML5更精简，开发人员在使用标签时也不再那么混乱。而HTML5也修改了部分标签，例如<a>标签在过去具有超链接和锚的双重含义，而现如今在HTML5中已经被去掉了锚这个用法了。总之，这些元素标签的改变使得HTML5变得更简洁、更便利、更高效、更有创 7Phaser框架技术简介进行游戏开发。Phaser框架对浏览器的要求极低，只要浏览器支持Canvas,那么就可以使用Phaser框架进行游戏的开发。Phaser框架是为小型网页游戏开发量身定制的技术，所以支持所有游戏中涉及到的鼠标、键盘等交互功能，提供音乐和视频的嵌入支持手机端的。Phaser框架的文件结构如图2.1所示：|-opp,js|-opp,jsl-prefabsl--boat.js|--Level_intro.jsl--Level_master.jsl~Levet_round.jsl-moinintro.js|-moin_menu.jspretoad.js图2.1Phaser框架结构图要使用Phaser,首先需要实例化phaser.game对象，将Canvas放置在参数parent上，通过创建不同的场景state,并封装不同的动作，实现利用Phaser框架制作网页游戏的效果。我们通常在HTML中嵌入JavaScript脚本。下面详细阐述一下JavaScript'脚本语言的特点。第一、使用脚本语言不需要通过服务器执行，只要在用户的客户端机上运行就可以了。第二、脚本语言可以输入，也可以输出。第三、脚本语言简单易懂，入门迅速，利于学习。第四、脚本语言必须和HTML语言相结合使用，要通过浏览器众所周知，HTML5I|的最核心的新标签就是Canvas画布元素，而这个元素可以大大简化我们的开发代码。Canvas用英文翻译即为画布，顾名思义，该标签相当于一块画布，浏览器可以直接在上面绘制矢量图，使用JavaScript添加用户需要的各种样第2章FlappyBird游戏分析8式，使得图形或动画可以直接在浏览器中显示出来。因此Flash和Silverlight的使用率随之被削弱。我们都知道，flash有一个致命的缺点就是播放或浏览动画必须通过flashplayer才可以，这样就导致了它的移值性很差，而使用Canvas就可以直接实现动画效果。而目前Canvas也具备了极大的浏览器兼容性。2.2.2开发工具及运行环境在FlappyBird的编程过程中，我选择采用MyEclipse、AdobeDreamweaver和AdobePhotoshop来作为本次开发使用的技术工具。MyEclipse是当今非常流行的一款集成式开发环境，是从eclipse发展而来的，增加了自身的插件，用来进行Java、JavaEE和移动应用的开发[19]。Myeclipse的功能涵盖到了整个开发过程中，首先开发人员可以在其上面进行编程工作，当问题出现可以实时进行代码的调试，最后在运行之后，亦可在console平台上观察到代码实现效果的输出。对于我们本次游戏需要使用到的后台的框架Struts、Hibernate,以及开发语言HTML5、JS、SQL,在Myeclipse上都是可以运行的。Myeclipse的使用方法很简单，步骤是新建一个java工程，新建包和类，在类中进行编辑，写上要实现的方法。然后将我们的项目工程部署到tomcat,并在浏览器中输入正确的工程地址，就可以在本地浏览器中观察到我们的网页实现效果了。无需联网，实时高效。AdobeDreamweaver是一款网页编辑器，可以轻松制作网页和网站，用它制作出来的网页可以跨越不同平台和浏览器的限制。DreamweaverCS4中新增的实时视图可以让用户在修改代码的同时，直接观察到浏览器上页面的相应变化，这无疑是大大提高了开发人员的开发效率和准确度。因为Dreamweaver中自带大量的对象支持，在编写JavaScript时的效率也得到了极大的提升。因为在FlappyBird的开发过程中，需要加载到许多图片，如小鸟、管道、背景等等。而从网上搜索下载到的图片并不一定适用于本游戏，有时需要进行抠图或修图才能使用。所以我决定使用一款P图软件对图片进行修饰，使之适合FlappyBird游戏，让画面更加美观可视化。而AdobePhotoshop是P图软件中最为权威，功能最为强大的，所以我决定采用AdobePhotoshop作为本次开发游戏的另一技术工具。AdobePhotoshop是一款风靡全球的技术先进的图像处理软件，应用率普及。巧妙地使用PS中大量的绘图工具，可以制作出形形色色、美不胜收的图片。除此之外，PS不仅可以处理图形图像，还可以对文字、视频、出版等多方面的内容进行编辑制作，功能相当强大。 第2章FlappyBird游戏分析9HTML5实现了极大程度的国内外浏览器兼容20]。本次开发，我主要使用到的是火狐浏览器对FlappyBird进行测试和体验。MozillaFirefox,译“火狐”,是一款流行的网页浏览器，由Mozilla基金会和开源团体共同开发。Firefox内置了分页浏览、拼字检查、即时书签、下载管理器和自定义搜索引擎等等功能。Firefox浏览器是一个开源网页浏览器。可以在Windows,Linux和MacOSX平台上使用，它除了体积小速度快以外，还有其它一些高级的特征，主要特性有：标签性；快速而方便的侧栏.这个版本做了脱胎换骨的更新，代码更优秀，功能更强大，包括安装程序，界面和下载管理器都作了改进。它的使用率极高，用户受众多，并且性能优良。启动、加载速度快，图形渲染高效，所以决定使用火狐浏览器。2.3FlappyBird游戏需求分析2.3.1游戏玩法介绍FlappyBird是一款基于HTML5的网页游戏，游戏玩法简单，操作性强，是一款适合上班族和学生的休闲娱乐活动。首先玩家可根据喜好进行游戏场景、小鸟形象和游戏难度的选择。选择不同的难度，小鸟飞行的速度和管道的间隙都会有所不同。选择后游戏开始。单击鼠标操控小鸟跳跃，持续点击鼠标，小鸟会不断往上飞行，若松开鼠标，小鸟会迅速下落。在飞行过程中，要控制小鸟顺利穿越随机产生的长短不同的管道间隙，每成功穿越一组管道，加一分。在管道中也会随机产生不同的食物。当小鸟吃到金币时，会有加分奖励；当小鸟吃到虫子时，会瞬间变小更易穿越管道间隙；当小鸟吃到炸弹时，会瞬间变大，穿越管道间隙的难度亦随之增加。当小鸟碰撞到管道或是掉落到地面，游戏结束并展示成绩排行榜。功能需求分析针对基于HTML的FlappyBird游戏，进行以下功能性需求分析：第一、本游戏需要有一个预加载的功能，一打开网页即启动加载，如加载进度第2章FlappyBird游戏分析条、加载游戏背景、加载游戏中所需的所有图片(小鸟、管道、道具)、加载各种游戏所需的音效、背景音乐等各类资源。第二、增加用户选择功能。玩家可根据喜好进行游戏背景、游戏场景、小鸟形象和游戏难度的选择。不同小鸟形象的选择，界面立刻作出响应，在游戏开始界面即实现小鸟变换的效果。不同难度的选择，需要实现小鸟飞行速度的变化和管道间隙的变化等功能。第三、在游戏开始界面，需要对游戏进行部分显示，比如显示游戏标题logo、游戏背景图片等，使玩家有直观的游戏初始化体验。在界面上相应位置上放置游戏开始按钮，点击按钮跳转到游戏主界面。第四、在游戏主界面，需要实现大量游戏效果。需要实现小鸟的跳跃、管道的随机产生、小鸟穿越管道检测、小鸟与管道的碰撞检测、小鸟的触地检测以及小鸟吃到不同道具时要做出不同的动作响应(加分、形状变化、立即死亡等)。第五、判断游戏是否结束。当小鸟碰撞到管道、掉落到地面或是吃到炸弹，即提示游戏结束。第六、产生游戏得分，并显示当前排名。针对基于HTML5²I的FlappyBird游戏，进行以下非功能性需求分析。第一、性能需求分析：(1)满足时间特性要求。本游戏需要加载背景图片、音效等资源，但是加载时间不超过一秒，游戏响应时间足够迅速(<5s),能够满足用户要求。(2)满足适应性要求。本游戏是基于HTML5编写的，而HTML5可以良好地兼容采用各种操作系统的个人电脑，并支持多种浏览器，具有良好的适应能力。(3)满足可使用性要求。游戏操作界面简单明了，游戏规则简单，上手迅速，可使用性强。(4)满足可维护性要求。游戏框架采用Phaser框架，可免费直接从网上下载，代码使用HTML5结合JavaScript脚本语言，简单易懂，并且在编写程序时，本人对代码进行了大量注释，代码结构清晰明了，利于个人和他人日后对游戏进行维护和第二、可靠性需求分析：游戏在使用过程中，无明显bug和卡顿现象，经测试可靠度高，符合可靠性需求。第三、对操作环境的需求：游戏对操作环境要求很低，只需在装有Windows系列操作系统和支持HTML5的浏览器的个人电脑上即可运行成功。2.4本章小结第二章FlappyBird游戏分析通过三个角度对游戏进行深入剖析。首先，进行可行性分析；其次，介绍了游戏的开发环境和开发工具，明确研究方向；最后，对游戏玩法进行介绍，并对游戏的功能和非功能两方面进行需求分析。第3章FlappyBird游戏的总体分析点击重新开始游戏点击重新开始游戏第3章FlappyBird游戏的总体分析根据需求分析，主要将FlappyBird分为六个游戏模块。第一个模块是启动加载界面，负责游戏预加载；第二个模块是游戏菜单界面，提供游戏场景、小鸟形象和游戏难度供玩家进行选择；第三个模块是游戏开始界面，在预加载之后显示，展示游戏logo等部分游戏界面；第四个模块是游戏准备界面，点击屏幕，跳转到第五个模块界面；第五个模块是游戏主界面，小鸟开始飞行，控制小鸟穿过障碍获取得分；第六个模块是游戏结束界面，弹出成绩排行榜。图3.1为概要设计流程图。游戏预加载游戏预加载(加载背景图片、音效)菜单界面(选择游戏难度、场景等)游戏开始界面点击开始按钮游戏准备点击屏幕，小鸟飞行游戏主界面否小鸟落地、碰撞管道或吃到炸弹是游戏结束图3.1概要设计流程图第3章FlappyBird游戏的总体设计3.1.2详细设计继概要设计之后，对模块界面展开逐一的详细设计，对每个界面的功能、属性启动、加载界面启动、加载界面主要负责加载进度条、游戏背景、游戏中所需的所有图片(小鸟、管道、道具)、背景音乐。加载进度条加载进度条游戏预加载(加载背景图片等资源)加载小鸟、管道加载音效加载背菜图图3.2游戏启动、加载界面流程图在游戏的菜单界面，玩家可根据喜好进行游戏场景、小鸟形象和游戏难度的选择。游戏场景的不同，主要体现在游戏背景和管道的样式不一致。游戏难度的不同，主要体现在小鸟飞行的速度和管道的间隙有所不同。选择的游戏难度越大，小鸟的飞行速度越快，管道之间的间隙也越小，游戏的难度亦随之增大。 第3章FlappyBird游戏的总体设计菜单界面图3.3游戏菜单界面流程图游戏开始界面在游戏的开始界面，实现游戏标题logo和小鸟的联动上下浮动效果，并且加载出游戏场景图。在界面上需实现游戏背景和地面的分开滚动效果，背景滚动比地面滚动慢一点。并且制作游戏开始按钮，点击按钮跳转到游戏主界面。游戏标题和小鸟联动游戏标题和小鸟联动游戏背景滚动游戏开始界面地面滚动开始按钮图3.4游戏开始界面流程图第3章FlappyBird游戏的总体设计首先，需要实现交互动作，通过鼠标点击来操控小鸟的跳跃。其次，构建重力模型，在鼠标点击前先保持小鸟固定。游戏准备界面重力模型图3.5游戏准备界面流程图主界面的制作流程需要遵从游戏规则进行。第一、构建重力模型，使小鸟的运动轨迹符合真实生活中的物理现象。第二、在游戏过程中，需要控制管道的持续出现，并随机出现上下管道的长短，并控制管道之间的间隙是固定的。第三、当小鸟吃到不同的道具时，需要做出不同方式的响应，如加分或小鸟形态变化或是直接死亡的状态。在界面上需要针对吃到不同道具时的不同提示，使玩家更清晰明了地了解目前的得分情况等等。第四、在游戏过程中，当小鸟有不同的行为时，需要配合播放不同的音效等等。第五、要实现小鸟和管道的碰撞检测以及小鸟的触地检测，当发生触地、碰撞或是吃到炸弹时，游戏结束。第3章FlappyBird游戏的总体设计重力模型重力模型游戏背景滚动游戏主界面小鸟飞行小鸟和管道的碰撞检测加分小鸟的触地检测小鸟吃到道具小鸟变小直接死亡图3.6游戏主界面流程图游戏结束界面当小鸟和管道发生碰撞、小鸟触地或是吃到炸弹时，游戏结束。显示玩家的本轮得分、排行榜详情。玩家可选择是否开始新一轮游戏。显示得分显示得分游戏结束界面重新开始排行榜图3.7游戏结束界面流程图第3章FlappyBird游戏的总体设计第三章FlappyBird游戏的总体设计主要通过绘制流程图对游戏的设计思路进行阐述。概要设计主要对游戏进行一个整体规划，详细设计针对游戏的每个模块进行功能、需求上的分析，在思路明确的情况下进行开发。第4章游戏实现第4章游戏实现FlappyBird游戏采用Phaser框架，首先引入主文件，实例化phaser.game对象，将Canvas放置在参数parent上，通过创建boot、preload、menu、play四个场景state,并封装不同的动作，实现游戏功能。4.1启动、加载界面启动、加载界面主要实现游戏预加载功能。使用到两个游戏场景boot、preload。在boot场景中先是在load.image()方法中放入进度条的图片，用这张图片来创建一个sprite精灵，再利用法指向这个sprite对象以此来实现动态的加载进度条效果。在preload场景中调用对象来加载大量图片、音效等资源，最后通过调用boot场景启动游戏。第4章游戏实现图4.3场景图2图4.5地板图在gamejsp中编写菜单页面的样式。首先，实现各类场景图片、小鸟形象的切换。例如背景图切换，定义好背景图bg前后两次的样式，然后当鼠标滑过背景图，触发hover事件，调用bg后的样式on,把背景图的url进行替换来达到背景图的切换效果。同理，场景图和小鸟形象的切换也是这样。在界面中多处使用的样式是旋转和放大效果，主要是通过在样式里写transform属性，设置参数旋转scale、放大rotate的数值来实现的。其次，实现开关灯效果。在light列表里绑定onclick事件，当鼠标点第4章游戏实现击开关灯的图像时，就触发lightoff或lighton方法。关灯lightoff方法里写上将主页的背景图片置空，颜色为黑，将场景图的style样式进行掩藏。当点击开灯时，对背景图等进行样式的重现。最后，实现登陆和注册功能。先制作两个登陆和注册的按钮，点击登陆后，弹出登陆的模态框，利用表单对输入的信息进行提交，和数据库中的用户名、密码进行匹配，匹配正确，则登陆成功，否则，重新输入。注册功能则是通过对输入的用户名、密码进行数据库存储。第4章游戏实现图4.9关灯游戏开始界面，创建一个menu场景，将动作封装在这个方法里。首先，我们来实现游戏背景和地面的分开滚动效果，背景滚动比地面滚动慢一点。使用TileSprite对象加载地面和背景图，并调用autoScroll(x,y)方法实现滚动效果。因为我们只需要背景图和地面在水平位置上的滚动，所以设置y=0,就保持图片在垂直方向上保持不动。分别设置x方向的速度，且设置为负值，并给地面的数值偏大，则实现了背景图和地面都向左滚动，并且地面比背景图滚动速度快。小鸟翅膀的扇动通过SpriteSheet方法实现。再将小鸟和标题文字封装在一个组里，利用补间动画Tween对象对组进行一个整体操作，实现小鸟和标题文字同时上下浮动的效果。其次，制作游戏难度切换的功能。共有三个难度Easy、Medium、Hard。在menu第4章游戏实现场景中先编写rank先、后的样式，然后当鼠标点击难度，触发click事件，调用rank后的样式，可以看到主页上rank的样式变化；在play场景中也写上触发click事件，index的值赋给a,a的取值不同，小鸟的速度和管道间隙就不同了，实现随着难度叠加，小鸟的飞行速度加快，管道空隙变小的效果。最后是添加一个开始游戏的按钮。利用Phaser中的Button对象来实现按钮。图4.11小鸟的三个帧4.4游戏准备界面定义play场景。依旧使用TileSprite对象加载地面和背景图，具体实现方法与菜单界面相同，这里就不加以赘述了。新增鼠标点击和固定小鸟的功能。首先通过game.physics.enableO方法开启物理系统，并设置gravity.y=0使小鸟暂时固定在空中。接着通过在signal对象上绑定Ondown信号，鼠标点击代表Ondown信号被触发，触发后执行小鸟飞行小鸟翅膀的挥动是通过spritesheet方法来实现的，spritesheet方法的原理是加载一个图片，并在这个图片上划分出帧来，以后使用这个图片的sprite就可以用这些帧来播放动画。要在sprite上实现动画，我们首先还得先定义一个动画，就是定义这个动画是由哪些帧组成的。小鸟的动画是fly方法，用animations属性来添加fly动画，fly方法里给了小鸟向上的速度。图4.12准备4.5游戏主界面主界面的功能实现依然写在play场景中。管道的循环出现需要利用时钟对象Timer来重复产生管道并以指定的时间间隔无限重复执行loop函数，直到调用了Timer对象的stopO方法才停止。碰撞检测需要用到两处，一个是小鸟和管道的碰撞，另一个是小鸟与地面的碰撞。采用collide函数来实现小鸟和管道发生碰撞时，小鸟被管道弹开的效果。采用overlap方法来实现小鸟和地面发生碰撞，而不产生力的相互作用的效果。第4章游戏实现小鸟的飞翔需要构建重力模型。通过使用game.physics.enable)方法开启Phaser.Physics.ARCADE物理系统，设置小鸟的重力gravity.y。在准备界面，小鸟需要固定在空中，则将重力设置为0。当游戏开始时，给小鸟设置一个适当的重力值。其次，给小鸟设置一个向上的速度和角度，则实现了模拟现实世界中的运动状态。在游戏过程中，设置了大量道具。利用随机数在管道间隙中随机产生不同的道具。当小鸟吃到不同的钱币时，对当前分数进行不同数值的加分。当小鸟吃到皇冠时，利用补间动画进行横纵坐标的扩大，实现小鸟瞬间变大的效果，并设置持续的时间，之后进行缩小动作，变回原样。同理，当小鸟吃到糖果时，利用补间动画行横纵坐标的收缩，实现小鸟瞬间变小的效果，并设置持续的时间，之后进行放大动作，变回原样。当小鸟吃到炸弹时，调用gameover方法，跳转到游戏结束界面。当小鸟吃到道具时，在界面上使用补间动画实现一个tips淡出的效果，对道具的功能进行相应的提示。在游戏过程中，我们要实现多处音效的播放。game.add.sound()来得到一个sound对象，再调用它的play方法即可实现声音的播放效果。图4.14金币图4.15银币图4.16铜币图4.17糖果第4章游戏实现图4.18皇冠图4.19炸弹4.6游戏结束界面游戏结束，显示玩家当前得分和历史前三名的玩家姓名·成绩。将玩家当前成绩与现存数据库中排名第十的分数比较，如果当前用户的分数大于排第十的分数，就把当前的分数插入到数据库中去。用户登录后会把用户名保存到session中，如果session没有用户名，说明用户没登录，这时候是不会插入数据到数据库中的。其次，制作重玩按钮replayBtn,点击实现跳转到游戏开始界面。图4.20游戏结束图4.21得分榜4.7游戏演示首先进入游戏启动、加载界面，玩家可以看到进度条的动态加载效果。图4.22加载中迅速加载完跳转到游戏开始界面，玩家可根据喜好进行游戏场景、小鸟形象和游戏第4章游戏实现图4.23游戏开始界面选择后，跳转到游戏准备界面：图4.24游戏准备界面点击屏幕，正式开始游戏，通过点击鼠标控制小鸟飞行，持续点击鼠标，小鸟会不断往上飞行，若松开鼠标，小鸟会迅速下落。在飞行过程中，要控制小鸟顺利穿越随机产生的长短不同的管道间隙，每成功穿越一组管道，加一分。在管道中也会随机产生不同的食物。当小鸟吃到金币时，会有加分奖励；当小鸟吃到虫子时，会瞬间变小更易穿越管道间隙；当小鸟吃到炸弹时，会瞬间变大，穿越管道间隙的难度亦随之增加。图4.25游戏主界面当小鸟碰撞到管道、掉落到地面或是吃到炸弹时，提示游戏结束。显示当前得分和历史最高成绩。点击选择重玩。第4章游戏实现FE图4.26游戏结束界面第四章游戏实现主要围绕每个界面功能的实现方法进行详细阐述，列举了重点函数方法，深刻介绍了如何通过代码实现游戏功能。并通过截图粘贴的方式来演示游戏，利用生动形象的方式使玩家对FlappyBird有进一步的了解。第5章结论与展望第5章结论与展望本文研究的是基于HTML5的一款FlappyBird网页游戏，运用Phaser框架、struts2框架和Hibernate框架，结合JavaScript脚本语言和Ajax技术实现。本游戏成功达到了预期目的，实现了多个界面的切换、难度的递增以及小鸟穿越各种障碍和获取得分的效果。游戏玩法简单，操作性强，是一款适合上班族和学生的休闲娱乐活动。本次游戏的开发较为成功的实现了前期的各项任务要求，总体成效是可喜的。本文首先针对FlappyBird游戏进行三方面的可行性分析，再进行功能和非功能两部分的需求分析，以此来确定课题的可行度。其次明确游戏的开发环境和开发工具，使开发过程更有效、更科学。接着围绕游戏展开全面的概要设计和模块的详细设计。概要设计对游戏进行整体规划，将FlappyBird分为上述六个游戏模块，并确定每个模块之间的联系。详细设计针对每个界面进行功能、需求上的分析，使游戏从设想落实到实践上。经过上述分析之后，对HTML5、Phaser框架、struts2框架、Hibernate框架、JavaScript、Ajax技术以及Canvas元素进行深入研究学习，并结合前后台数据和服务器，利用代码完成游戏功在研究过程中，我深刻感受到HTML5的魅力所在。HTML5作为一种超文本标准标记语言，它的发展不容小觑，如同雨后春笋一般生命力旺盛，茁壮成长。所以HTML5的现在和未来都值得我们的密切关注。因为HTML5是世界通用并且公认的标准语言，所以基于HTML5的开发应用可以做到一次开发、多平台使用，因此开发者不用把时间放在修改移植上。无论是不同的设备还是不同的浏览器，都无需担心移植问题。目前各大浏览器厂商也在加大开发力度，全部发力于HTML5。在开发网页客户端的时候，HTML5可以无缝连接客户端，用户在使用APP的时候可以更好地共享数据和资源，直接打开网页就可以看到自己所需要使用的应用，方便快捷。HTML5添加了许多新的语法特征，包括video、audio、canvas等元素，为开发者提供了一套通用的处理视频和音频的API,Canvas元素让Web开发人员在不借助第三方插件的情况下直接使用JavaScript脚本语言在网页上进行绘图，这些元素在标记的时候不用安装任何插件，使用起来更加便利。如今的社交游戏有着大量的信息交换，并且需要实时交互，这正是HTML5的优势所在，在PC端上可以用支持HTML5的浏览器访问。第5章结论与展望HTML5把应用直接移植到网页中，用户通过打开网页直接体验游戏，避开客户端下载，提供方便快捷的用户体验。因为HTML5是国际标准通用标记语言，故不存在移植到不同平台上存在不兼容的问题。并且，HTML5是开放的，任何一次修改都是国际上认同的，做到了一次修改，统一变动。HTML5在原先的HTML基础上做出了重大变革，新增了大量标签，如Canvas画布、audio等等，也修改删除了大量冗余的标签元素，使得编程变得更轻松、更简洁。总而言之，HTML5的未来是光明的，它将持续带来更卓越的用户体验。5.2进一步的工作计划本课题的研究开发已经得到了初步的成功，但仍然存在一些不足之处需要完善，简要论述如下：首先，游戏还没有足够的创意性，后期还希望通过问卷调查、网络调查等方式采集玩家体验的感受，吸取建议，使功能以及界面上更具有FlappyBird的独立风格。同时，为了增强玩家的乐趣体验和游戏的知名度，还需要新增一个分享功能。实现通过微信、QQ等社交软件进行游戏成绩分享，并邀请好友共同参与游戏，但是由于开发时间不足和能力有限，目前还没有实现该功能