基于HTML5的Flappy Bird游戏——毕业论文

毕 业 设 计中文题目基于HTML5的Flappy Bird游戏英文题目Flappy Bird Game Based on The HTML5 院 系：计算机与信息工程学院年级专业： 软件工程（金融服务）姓 名：学 号：指导教师：职 称： 年 月摘要摘 要基于HTML5的Flappy Bird游戏是一款无需下载客户端程序的网页游戏，适合上班族和学生进行休闲娱乐。游戏主要通过鼠标点击控制小鸟成功穿越长短不同的管道所组成的障碍并获取得分，考验玩家的反应能力和敏捷度。开发本款游戏使用到了前后台技术。采用的框架是Phaser、struts2、Hibernate。基于HTML5标准标记语言和JavaScript动态脚本语言，结合Ajax技术实现游戏界面和功能。其中，HTML5的众多新增标签元素在开发过程中起到了举足轻重的作用。所以本次课题的重点在于研究如何使用HTML5语言来开发这款网页游戏。本次游戏开发基本成功实现了预期目标，游戏功能已基本完善。游戏共分为六个模块，启动加载模块、菜单模块、游戏开始模块、游戏准备模块、游戏主界模块和游戏结束模块，界面简洁美观，游戏功能大致完成，实现了鼠标和小鸟的交互行为、重力模型、小鸟穿越管道得分以及游戏过程中出现大量道具等丰富的游戏功能。后期还希望通过问卷调查等方式采集玩家体验的感受，使功能以及界面上更具有Flappy Bird的独立风格。关键词：HTML5；网页游戏；Flappy BirdABSTRACTABSTRACTFlappy Bird game based on the HTML5 is a web game that does not need to download the client program that is suitable for office workers and students for leisure and entertainment. The game is mainly through clicking the mouse to control the bird successfully pass through the barriers of different length of pipes and then get scores to test the players reaction ability and agility.The development of this game uses the forward and backward technology. The framework adopted are Phaser, struts2, Hibernate. The game is based on the HTML5 standard markup language, JavaScript dynamic scripting language and combines with Ajax technology to achieve the games interface and function. Among them, the number of new HTML5 tags elements played a pivotal role in the development process. So the focus of this project is to study how to use the HTML5 language to develop this web game.The development of this game successfully achieved the expected goals. The games functions have been almost completed. The game is divided into six modules which are launch module, menu module, game starting module, game preparing module, the main module and the end module. The interface is simple and beautiful. The functions of the game are substantially completed. The interactive behavior of the mouse and the bird, the gravity model, the bird pass through the pipes to get scores, a large number of props during the game and other rich game functions are realized. The latter I also hope to adopt a questionnaire survey and other ways to capture the feelings of users experience, so that the function and the interface have a more independent style of Flappy Bird.Key Words: HTML5; Web Game; Flappy Bird目录目 录第1章引言11.1 研究背景11.2 研究目标及意义21.3 论文组织结构31.4 本章小结4第2章Flappy Bird 游戏分析52.1 可行性分析52.1.1 技术可行性分析52.1.2 经济可行性分析62.1.3 操作可行性分析62.2 主要工具及技术62.2.1 相关应用技术简介62.2.2 开发工具及运行环境82.3 Flappy Bird 游戏需求分析92.3.1 游戏玩法介绍92.3.2 需求分析92.4 本章小结11第3章Flappy Bird 游戏的总体分析123.1 设计思想123.1.1 概要设计123.1.2 详细设计133.2 本章小结17第4章游戏实现184.1 启动、加载界面184.2 游戏开始界面214.3 游戏准备界面224.4 游戏开始界面224.5 游戏结束界面244.6 游戏演示254.7 本章小结29第5章结论与展望305.1 结论305.2 进一步的工作计划315.3 本章小结31参考文献32致 谢33第1章 引言第1章 引言1.1 研究背景众所周知，传统网游有一诟病就是游戏前需要先下载客户端程序，而程序一般很大，会占用大量内存，基本上是300M以上，有些甚至需要超过1G。所以传统网游下载既占用内存又耗费时间。需求推动社会进步，既然传统网游已经无法满足玩家的需求，那么紧跟着互联网技术飞速发展的脚步，一种新品种游戏1就在人们的期盼中孕育而生了，即网页游戏2。而恰恰网页游戏就完美地避开了这一问题，它不用下载安装客户端程序，使用到的是最新的开发技术，JAVA和Active X3等。“网页游戏”和传统网游的主要不同在于，玩家与游戏的交流方式不同，网页游戏通过使用浏览器，把玩家和游戏直接联系在一起，即玩家通过浏览器直接进入游戏界面，简单方便。网页游戏的未来发展趋势相当可观，因为它的潜在用户很多，并且玩家体验游戏的过程得到了极大的简化，使得未来的用户数量呈持续递增趋势。而近期行业里的专业人士提出，可以将浏览器当做一个虚拟的操作系统，这无疑是更加肯定了网页游戏的地位。为了实现网页游戏，我们需要了解网页游戏要使用到的开发语言HTML5。以前人们要看视频首先需要先下载软件，并且在本机上安装有视频播放器，而玩游戏都是通过下载内存很大的客户端游戏，既占本机的内存容量，又在游戏前耗费下载时长。那么，有需求就会有发展，紧跟着玩家用户需求的不停提出，技术也随之发展起来了。一种新型技术诞生了，也就是流视频和网页游戏。但是因为HTML标准没有紧跟时代，一时间flash成为了主要的浏览器插件。同时IE掌握了整个web世界的主动权。引起了其他公司的不满，于是在商讨过后决定制定一个新的世界语言标准HTML5。众所周知，HTML5是当今最主流的标准通用标记语言，其功能特性也是在保持持续强大稳定的发展当中。当然HTML5也是在不断摸索研究中逐渐强大起来的，它的发展经历了几个阶段。第一阶段：Web增强与破垄断阶段Web主要在webapp、流媒体、游戏和三个方面做到了功能和技术的增强。其中在游戏方面的增强主要体现在HTML5新增了Canvas、WebGL两种渲染方式。其中最显著的特性就是新增了Canvas4标签。借助Canvas标签，HTML5拥有了进行游戏开发的能力，可以实现各式各样的图形、表格和动画等的效果。传统网游是通过flash5来实现游戏中的动画效果，但是flash有一个致命的缺点就是播放或浏览动画必须通过flash player才可以，这样就导致了它的移值性很差。而使用Canvas就可以直接实现动画效果，不用使用到外部插件，故移植性得到了大大的提高。这也是HTML5适合用于网页游戏开发的重要原因之一，解决了移植问题6。第二阶段：移动互联网阶段HTML5兼容性非常好。首先，HTML5实现了极大程度的浏览器兼容，这样就保证了开发出的网页游戏具备最大的浏览器兼容性。除了良好的浏览器兼容，HTML57还做到了最大程度的设备兼容。无论你的电脑运行的是哪种操作系统，无论你的移动设备是安卓还是苹果，HTML5都是被支持的。第三阶段：HTML5时代来临原来的HTML5出现了诸多不如原生应用的表现，如表1.1所示。表1.1 原来的HTML5与原生应用的对比原来的HTML5原生应用性能ios流畅流畅Android低端机很卡工具各类高级记事本Xcode、Eclipse ADT等专业IDE能力只有7w个语法和API40w+API以上这些性能、工具和能力方面的不足造成了研发人员在使用HTML5制作出的App和原生应用不一致。于是，人们提出了解决方案。首先通过硬件升级，将CPU的速度进行成倍得提升。其次商讨出了新型的OS厂商策略，他们将浏览器的内置对象进行改变，使之具备更好的性能。同时再伴随着相关软件技术的逐步成熟，HTML5的这些障碍都被克服了。现在的HTML5应用已经成功地做到了和原生App一样的效果，无论是功能还是体验操作，都是有过之而无不及的。另外，HTML5是开放的，因为在研发过程中，HTML5是由几十甚至上百家国际企业共同商讨研发出来的新一代标准标记语言，所以HTML5具有至高的标准型，也侧面反映出它的持久性。综上所述，HTML5的优势众多，性能突出，较适用于开发网页游戏。1.2 研究目标及意义网游在当今很主流很火爆，它弥补了端游的遗憾，不用下载客户端程序来建立玩家与游戏的联系，而是直接通过浏览器实现和玩家的交互，方便高效，且市场巨大。这是我想要研究本课题的原因之一。此外，HTML5作为当今最流行最标准的标准标记语言，其使用范围广泛，且功能强大，特别是又在原先的HTML4.01的基础上新增、删改了很多标签，这使得我非常的想要进行学习和了解，所以我选择了基于HTML5的Flappy Bird游戏作为我本次论文的研究课题。那么，这个课题开发还涉及到多个技术。我们通过前后台对应用技术进行划分学习。前台使用到的框架是Phaser框架。Phaser框架8是一款开源游戏框架，提供免费下载，使用方便有效，专门针对HTM5进行游戏开发。而我们要使用的HTML5的最核心的新标签就是Canvas画布元素，所以使用Phaser框架作为本次游戏的开发框架是最合适、恰当的。其次，要进行JavaScript9的深入学习。在开发过程中，我们需要在Canvas画布上添加各种样式，而样式的代码实现就是通过JavaScript来开发，使得图形或动画可以直接在浏览器中显示出来。后台使用到的框架是struts2框架和Hibernate框架。之所以使用到后台是因为游戏中要实现登陆注册功能，那么就需要后台数据和服务器的支持，所以，本次游戏开发需要结合struts2框架和Hibernate框架。同时，还要对Ajax技术进行研究学习，利用它可以实现刷新网页时，不加载全部页面，只更新局部，弥补了传统网页的遗憾，从而使得网页刷新更高效便捷。所以，本次研究课题主要紧抓住HTML5、Phaser、struts2、Hibernate、Canvas画布、JavaScript、Ajax技术进行研究学习。1.3 论文组织结构论文共分为五章。第1章引言。主要介绍了网页游戏的概念以及围绕HTML5介绍了其历史和现状以及研究的意义。第2章Flappy Bird游戏分析。划分为两部分，首先是围绕Flappy Bird游戏进行了三方面的可行性分析，分别为技术可行性分析、经济可行性分析、操作可行性分析。其次介绍了本次开发使用的工具、技术以及运行环境。最后对Flappy Bird游戏进行需求分析，首先针对游戏玩法进行了详细介绍，再对本游戏的需求进行多方面的分析。第3章Flappy Bird游戏的总体设计。分为两方面，对游戏进行了全面的概要设计和详细设计，主要通过画图来展示设计的模块。第4章游戏实现。主要针对游戏的各个界面是如何通过代码实现功能进行详细的解释，并粘贴大量代码图辅助解释。最后，演示游戏，展示游戏截图。第5章结论与展望。主要总结了本次论文的研究课题以及取得的收获和不足，并指明进一步的工作方向。1.4 本章小结第一章引言首先简要介绍了网页游戏的概念和与传统网游相比下的优势所在，阐述本课题的研究意义，再结合开发技术，深入探讨本课题的研究目标。其次将论文划分成章节，并且围绕要点对每章的内容进行概述。第2章 Flappy Bird 游戏分析第2章 Flappy Bird 游戏分析2.1 可行性分析2.1.1 技术可行性分析开发本款游戏主要用到的技术有Phaser框架、HTML5、JavaScript、struts2、Hibernate、Ajax。现在着重来讨论一下这些技术的可行性。首先，Phaser框架是一款免费的游戏开源框架，主要用于Canvas画布和WebGL渲染。而我们要使用的HTML5的最核心的新标签就是Canvas画布元素，所以使用Phaser框架作为本次游戏的开发框架是最合适、恰当的。其次，众所周知，HTML5是当今最主流的标准通用标记语言，所以要开发网页游戏，也是必须要用到HTML5的。HTML5实现了极大程度的浏览器兼容。并且，最新的HTML5新增了一个Canvas画布元素，而这个元素可以大大简化我们的开发代码。Canvas用英文翻译即为画布，顾名思义，该标签相当于一块画布，浏览器可以直接在上面绘制矢量图，使用JavaScript10添加需要的样式，使得图形或动画可以直接在浏览器中显示出来，因此Flash 和Silverlight的使用率随之被削弱。我们都知道，flash有一个致命的缺点就是播放或浏览动画必须通过flash player才可以，这样就导致了它的移值性很差。而使用Canvas11就可以直接实现动画效果，移植性得到了大大的提高。所以HTML5既是最适合也是最方便的开发网页游戏的语言。最后，使用JavaScirpt来实现具体的样式和功能。我们在HTML中嵌入JavaScript脚本，让脚本中的样式发挥作用，来呈现出不同的动态效果。因为游戏中需要实现登陆注册功能和排行榜功能，这就涉及到后台数据和服务器。使用到的框架是struts2框架和Hibernate框架。struts2在struts1的基础上改进，已经成为了一个高度成熟的框架，不管是稳定性还是可靠性都得到了广泛的证明。所以使用这个框架的安全性和有效性都得到了极大的保证。Hibernate框架通过对JDBC进行对象封装，通过java语言开发，实现对数据库数据的控制。Ajax弥补了传统网页的遗憾，它通过让后台和服务器实现小部分的数据交换来实现刷新网页时，不加载全部页面，只更新局部需要更新的内容。从而使得网页刷新更高效便捷。以上这些技术都是被广泛使用和大量推广的，并且适合用于开发网页游戏，所以采取以上技术可行。第2章 Flappy Bird 游戏分析2.1.2 经济可行性分析开发基于HTML5的Flappy Bird游戏12使用的Phaser框架是免费的游戏开源框架，可以直接下载使用，所以开发过程不产生经济费用。且本游戏免费开放，游戏关卡亦没有设置收费项目或要求玩家购买游戏道具，故游戏过程也没有产生经济费用。总而言之，这是个免费的娱乐休闲小游戏，故经济可行。2.1.3 操作可行性分析本次开发的Flappy Bird游戏操作简单，极易上手，主要考验的是玩家的反应速度，在游戏玩法上并没有刻意刁难玩家。主要是通过鼠标点击控制小鸟的飞行，只要不触碰管道及地面，即可继续游戏并获取得分，故本游戏的操作性强。2.2 主要工具及技术2.2.1 相关应用技术简介2.2.1.1 HTML5技术简介为了取代HTML的旧版本，HTML513在人们的热切期待中孕育而生，且在不断地发展强大当中，以便能更加适应网页的应用。HTML5在原先的旧版本上做出了极大的改变，主要体现在对标签元素进行了大量的增加、删除和修改，甚至是一些语义上的变化。首先，增加了许多便捷的标签元素。例如当用户需要在页面中添加音乐或视频时，只需通过标签的使用即可实现插入音频的效果，使用方法为，而无需再通过加载flash插件来实现，方便高效。再比如新增了一种新型的页面渲染方式，通过14标签直接在网页中构建一块画布，而JavaScript就是画笔，将网页中需要的形态和样式全部勾勒在画布上面，提供给用户神奇而又强大的功能体验。同时，HTML5删除了大量冗余的属性和标签，例如像设置页面字体的标签就被删除掉了，取而代之的是style属性。大量冗余的标签被删除，使得HTML5更精简，开发人员在使用标签时也不再那么混乱。而HTML5也修改了部分标签，例如标签在过去具有超链接和锚的双重含义，而现如今在HTML5中已经被去掉了锚这个用法了。总之，这些元素标签的改变使得HTML5变得更简洁、更便利、更高效、更有创造性15。122.2.1.2 Phaser框架技术简介Phaser框架是一款开源游戏框架，提供免费下载，使用方便有效，专门针对HTM5进行游戏开发。Phaser框架对浏览器的要求极低，只要浏览器支持Canvas，那么就可以使用Phaser框架进行游戏的开发。Phaser框架是为小型网页游戏开发量身定制的技术，所以支持所有游戏中涉及到的鼠标、键盘等交互功能，提供音乐和视频的嵌入功能。提供两种画面渲染方式，Canvas画布和WebGL渲染。同时，Phaser框架也是支持手机端的。Phaser框架的文件结构如图2.1所示：图2.1 Phaser框架结构图要使用Phaser，首先需要实例化phaser.game对象，将Canvas放置在参数parent上，通过创建不同的场景state，并封装不同的动作，实现利用Phaser框架制作网页游戏的效果。2.2.1.3 JavaScript技术简介JavaScript是一种动态脚本语言，普遍应用于为网页添加各式各样的动态功能。我们通常在HTML中嵌入JavaScript脚本。下面详细阐述一下JavaScript16脚本语言的特点。第一、使用脚本语言不需要通过服务器执行，只要在用户的客户端机上运行就可以了。第二、脚本语言可以输入，也可以输出。第三、脚本语言简单易懂，入门迅速，利于学习。第四、脚本语言必须和HTML语言相结合使用，要通过浏览器解释执行。2.2.1.4 Canvas简介众所周知，HTML517的最核心的新标签就是Canvas画布元素，而这个元素可以大大简化我们的开发代码。Canvas用英文翻译即为画布，顾名思义，该标签相当于一块画布，浏览器可以直接在上面绘制矢量图，使用JavaScript添加用户需要的各种样式，使得图形或动画可以直接在浏览器中显示出来。因此Flash 和Silverlight的使用率随之被削弱。我们都知道，flash有一个致命的缺点就是播放或浏览动画必须通过flash player才可以，这样就导致了它的移值性很差，而使用Canvas就可以直接实现动画效果。而目前Canvas也具备了极大的浏览器兼容性。2.2.2 开发工具及运行环境2.2.2.1 开发工具简介在Flappy Bird的编程过程中，我选择采用MyEclipse 18、Adobe Dreamweaver和Adobe Photoshop来作为本次开发使用的技术工具。MyEclipse是当今非常流行的一款集成式开发环境，是从eclipse发展而来的，增加了自身的插件，用来进行Java、JavaEE和移动应用的开发19。Myeclipse的功能涵盖到了整个开发过程中，首先开发人员可以在其上面进行编程工作，当问题出现可以实时进行代码的调试，最后在运行之后，亦可在console平台上观察到代码实现效果的输出。对于我们本次游戏需要使用到的后台的框架Struts、Hibernate，以及开发语言HTML5、JS、SQL，在Myeclipse上都是可以运行的。Myeclipse的使用方法很简单，步骤是新建一个java工程，新建包和类，在类中进行编辑，写上要实现的方法。然后将我们的项目工程部署到tomcat，并在浏览器中输入正确的工程地址，就可以在本地浏览器中观察到我们的网页实现效果了。无需联网，实时高效。Adobe Dreamweaver是一款网页编辑器，可以轻松制作网页和网站，用它制作出来的网页可以跨越不同平台和浏览器的限制。DreamweaverCS4中新增的实时视图可以让用户在修改代码的同时，直接观察到浏览器上页面的相应变化，这无疑是大大提高了开发人员的开发效率和准确度。因为Dreamweaver中自带大量的对象支持，在编写JavaScript时的效率也得到了极大的提升。因为在Flappy Bird的开发过程中，需要加载到许多图片，如小鸟、管道、背景等等。而从网上搜索下载到的图片并不一定适用于本游戏，有时需要进行抠图或修图才能使用。所以我决定使用一款P图软件对图片进行修饰，使之适合Flappy Bird游戏，让画面更加美观可视化。而Adobe Photoshop是P图软件中最为权威，功能最为强大的，所以我决定采用Adobe Photoshop作为本次开发游戏的另一技术工具。Adobe Photoshop是一款风靡全球的技术先进的图像处理软件，应用率普及。巧妙地使用PS中大量的绘图工具，可以制作出形形色色、美不胜收的图片。除此之外，PS不仅可以处理图形图像，还可以对文字、视频、出版等多方面的内容进行编辑制作，功能相当强大。2.2.2.2 浏览器简介HTML5实现了极大程度的国内外浏览器兼容20。本次开发，我主要使用到的是火狐浏览器对Flappy Bird进行测试和体验。Mozilla Firefox，译“火狐”，是一款流行的网页浏览器，由Mozilla基金会和开源团体共同开发。Firefox内置了分页浏览、拼字检查、即时书签、下载管理器和自定义搜索引擎等等功能。Firefox浏览器是一个开源网页浏览器。可以在Windows， Linux和 MacOS X平台上使用，它除了体积小速度快以外，还有其它一些高级的特征，主要特性有:标签式浏览，使上网速度更快;可以禁止弹出式窗口;自定制工具栏;扩展管理;更好的搜索特性;快速而方便的侧栏.这个版本做了脱胎换骨的更新，代码更优秀，功能更强大，包括安装程序，界面和下载管理器都作了改进。它的使用率极高，用户受众多，并且性能优良。启动、加载速度快，图形渲染高效，所以决定使用火狐浏览器。2.3 Flappy Bird 游戏需求分析2.3.1 游戏玩法介绍Flappy Bird是一款基于HTML5的网页游戏，游戏玩法简单，操作性强，是一款适合上班族和学生的休闲娱乐活动。首先玩家可根据喜好进行游戏场景、小鸟形象和游戏难度的选择。选择不同的难度，小鸟飞行的速度和管道的间隙都会有所不同。选择后游戏开始。单击鼠标操控小鸟跳跃，持续点击鼠标，小鸟会不断往上飞行，若松开鼠标，小鸟会迅速下落。在飞行过程中，要控制小鸟顺利穿越随机产生的长短不同的管道间隙，每成功穿越一组管道，加一分。在管道中也会随机产生不同的食物。当小鸟吃到金币时，会有加分奖励；当小鸟吃到虫子时，会瞬间变小更易穿越管道间隙；当小鸟吃到炸弹时，会瞬间变大，穿越管道间隙的难度亦随之增加。当小鸟碰撞到管道或是掉落到地面，游戏结束并展示成绩排行榜。2.3.2 需求分析2.3.2.1 功能需求分析针对基于HTML的Flappy Bird游戏，进行以下功能性需求分析：第一、本游戏需要有一个预加载的功能，一打开网页即启动加载，如加载进度条、加载游戏背景、加载游戏中所需的所有图片（小鸟、管道、道具）、加载各种游戏所需的音效、背景音乐等各类资源。第二、增加用户选择功能。玩家可根据喜好进行游戏背景、游戏场景、小鸟形象和游戏难度的选择。不同小鸟形象的选择，界面立刻作出响应，在游戏开始界面即实现小鸟变换的效果。不同难度的选择，需要实现小鸟飞行速度的变化和管道间隙的变化等功能。第三、在游戏开始界面，需要对游戏进行部分显示，比如显示游戏标题logo、游戏背景图片等，使玩家有直观的游戏初始化体验。在界面上相应位置上放置游戏开始按钮，点击按钮跳转到游戏主界面。第四、在游戏主界面，需要实现大量游戏效果。需要实现小鸟的跳跃、管道的随机产生、小鸟穿越管道检测、小鸟与管道的碰撞检测、小鸟的触地检测以及小鸟吃到不同道具时要做出不同的动作响应（加分、形状变化、立即死亡等）。第五、判断游戏是否结束。当小鸟碰撞到管道、掉落到地面或是吃到炸弹，即提示游戏结束。第六、产生游戏得分，并显示当前排名。2.3.2.2 非功能需求分析针对基于HTML521的Flappy Bird游戏，进行以下非功能性需求分析。第一、性能需求分析：（1）满足时间特性要求。本游戏需要加载背景图片、音效等资源，但是加载时间不超过一秒，游戏响应时间足够迅速(5s)，能够满足用户要求。（2）满足适应性要求。本游戏是基于HTML5编写的，而HTML5可以良好地兼容采用各种操作系统的个人电脑，并支持多种浏览器，具有良好的适应能力。（3）满足可使用性要求。游戏操作界面简单明了，游戏规则简单，上手迅速，可使用性强。（4）满足可维护性要求。游戏框架采用Phaser框架，可免费直接从网上下载，代码使用HTML5结合JavaScript脚本语言，简单易懂，并且在编写程序时，本人对代码进行了大量注释，代码结构清晰明了，利于个人和他人日后对游戏进行维护和修改。第二、可靠性需求分析：游戏在使用过程中，无明显bug和卡顿现象，经测试可靠度高，符合可靠性需求。第三、对操作环境的需求：游戏对操作环境要求很低，只需在装有Windows系列操作系统和支持HTML5的浏览器的个人电脑上即可运行成功。2.4 本章小结第二章Flappy Bird游戏分析通过三个角度对游戏进行深入剖析。首先，进行可行性分析；其次，介绍了游戏的开发环境和开发工具，明确研究方向；最后，对游戏玩法进行介绍，并对游戏的功能和非功能两方面进行需求分析。第3章 Flappy Bird 游戏的总体分析第3章 Flappy Bird 游戏的总体分析第3章 Flappy Bird 游戏的总体设计3.1 设计思想3.1.1 概要设计根据需求分析，主要将Flappy Bird分为六个游戏模块。第一个模块是启动加载界面，负责游戏预加载；第二个模块是游戏菜单界面，提供游戏场景、小鸟形象和游戏难度供玩家进行选择；第三个模块是游戏开始界面，在预加载之后显示，展示游戏logo等部分游戏界面；第四个模块是游戏准备界面，点击屏幕，跳转到第五个模块界面；第五个模块是游戏主界面，小鸟开始飞行，控制小鸟穿过障碍获取得分；第六个模块是游戏结束界面，弹出成绩排行榜。图3.1为概要设计流程图。图3.1概要设计流程图3.1.2 详细设计继概要设计之后，对模块界面展开逐一的详细设计，对每个界面的功能、属性进行详细阐述。3.1.2.1 启动、加载界面启动、加载界面主要负责加载进度条、游戏背景、游戏中所需的所有图片（小鸟、管道、道具）、背景音乐。图3.2游戏启动、加载界面流程图3.1.2.2 菜单界面在游戏的菜单界面，玩家可根据喜好进行游戏场景、小鸟形象和游戏难度的选择。游戏场景的不同，主要体现在游戏背景和管道的样式不一致。游戏难度的不同，主要体现在小鸟飞行的速度和管道的间隙有所不同。选择的游戏难度越大，小鸟的飞行速度越快，管道之间的间隙也越小，游戏的难度亦随之增大。图3.3 游戏菜单界面流程图3.1.2.3 游戏开始界面在游戏的开始界面，实现游戏标题logo和小鸟的联动上下浮动效果，并且加载出游戏场景图。在界面上需实现游戏背景和地面的分开滚动效果，背景滚动比地面滚动慢一点。并且制作游戏开始按钮，点击按钮跳转到游戏主界面。图3.4游戏开始界面流程图3.1.2.4 游戏准备界面首先，需要实现交互动作，通过鼠标点击来操控小鸟的跳跃。其次，构建重力模型，在鼠标点击前先保持小鸟固定。图3.5游戏准备界面流程图3.1.2.5 游戏主界面主界面的制作流程需要遵从游戏规则进行。第一、构建重力模型，使小鸟的运动轨迹符合真实生活中的物理现象。第二、在游戏过程中，需要控制管道的持续出现，并随机出现上下管道的长短，并控制管道之间的间隙是固定的。第三、当小鸟吃到不同的道具时，需要做出不同方式的响应，如加分或小鸟形态变化或是直接死亡的状态。在界面上需要针对吃到不同道具时的不同提示，使玩家更清晰明了地了解目前的得分情况等等。第四、在游戏过程中，当小鸟有不同的行为时，需要配合播放不同的音效等等。第五、要实现小鸟和管道的碰撞检测以及小鸟的触地检测，当发生触地、碰撞或是吃到炸弹时，游戏结束。图3.6游戏主界面流程图3.1.2.6 游戏结束界面当小鸟和管道发生碰撞、小鸟触地或是吃到炸弹时，游戏结束。显示玩家的本轮得分、排行榜详情。玩家可选择是否开始新一轮游戏。图3.7游戏结束界面流程图3.2 本章小结第三章Flappy Bird游戏的总体设计主要通过绘制流程图对游戏的设计思路进行阐述。概要设计主要对游戏进行一个整体规划，详细设计针对游戏的每个模块进行功能、需求上的分析，在思路明确的情况下进行开发。33第4章 游戏实现第4章 游戏实现Flappy Bird游戏采用Phaser框架，首先引入主文件，实例化phaser.game对象，将Canvas放置在参数parent上，通过创建boot、preload、menu、play四个场景state，并封装不同的动作，实现游戏功能。4.1 启动、加载界面启动、加载界面主要实现游戏预加载功能。使用到两个游戏场景boot、preload。在boot场景中先是在load.image()方法中放入进度条的图片，用这张图片来创建一个sprite精灵，再利用load.setPreloadSprite方法指向这个sprite对象以此来实现动态的加载进度条效果。在preload场景中调用Phaser.loader对象来加载大量图片、音效等资源，最后通过调用boot场景启动游戏。图4.1进度条图4.2场景图1图4.3场景图2图4.4场景图3图4.5地板图4.2 菜单界面在game.jsp中编写菜单页面的样式。首先，实现各类场景图片、小鸟形象的切换。例如背景图切换，定义好背景图bg前后两次的样式，然后当鼠标滑过背景图，触发hover事件，调用bg后的样式on,把背景图的url进行替换来达到背景图的切换效果。同理，场景图和小鸟形象的切换也是这样。在界面中多处使用的样式是旋转和放大效果，主要是通过在样式里写transform属性,设置参数旋转scale、放大rotate的数值来实现的。其次，实现开关灯效果。在light列表里绑定onclick事件，当鼠标点击开关灯的图像时，就触发lightoff或lighton方法。关灯lightoff方法里写上将主页的背景图片置空，颜色为黑，将场景图的style样式进行掩藏。当点击开灯时，对背景图等进行样式的重现。最后，实现登陆和注册功能。先制作两个登陆和注册的按钮，点击登陆后，弹出登陆的模态框，利用表单对输入的信息进行提交，和数据库中的用户名、密码进行匹配，匹配正确，则登陆成功，否则，重新输入。注册功能则是通过对输入的用户名、密码进行数据库存储。图4.6背景图1图4.7背景图2图4.8背景图3图4.9关灯图4.10开灯4.3 游戏开始界面游戏开始界面，创建一个menu场景，将动作封装在这个方法里。首先，我们来实现游戏背景和地面的分开滚动效果，背景滚动比地面滚动慢一点。使用TileSprite对象加载地面和背景图，并调用autoScroll(x,y)方法实现滚动效果。因为我们只需要背景图和地面在水平位置上的滚动，所以设置y=0，就保持图片在垂直方向上保持不动。分别设置x方向的速度，且设置为负值，并给地面的数值偏大，则实现了背景图和地面都向左滚动，并且地面比背景图滚动速度快。小鸟翅膀的扇动通过SpriteSheet方法实现。再将小鸟和标题文字封装在一个组里，利用补间动画Tween对象对组进行一个整体操作，实现小鸟和标题文字同时上下浮动的效果。其次，制作游戏难度切换的功能。共有三个难度Easy、Medium、Hard。在menu场景中先编写rank先、后的样式，然后当鼠标点击难度，触发click事件，调用rank后的样式, 可以看到主页上rank的样式变化；在play场景中也写上触发click事件，index的值赋给a, a的取值不同，小鸟的速度和管道间隙就不同了，实现随着难度叠加，小鸟的飞行速度加快，管道空隙变小的效果。最后是添加一个开始游戏的按钮。利用Phaser中的Button对象来实现按钮。图4.11小鸟的三个帧4.4 游戏准备界面定义play场景。依旧使用TileSprite对象加载地面和背景图，具体实现方法与菜单界面相同，这里就不加以赘述了。新增鼠标点击和固定小鸟的功能。首先通过game.physics.enable() 方法开启物理系统，并设置gravity.y = 0使小鸟暂时固定在空中。接着通过在signal对象上绑定Ondown信号，鼠标点击代表Ondown信号被触发，触发后执行小鸟飞行动作。小鸟翅膀的挥动是通过spritesheet方法来实现的，spritesheet方法的原理是加载一个图片，并在这个图片上划分出帧来，以后使用这个图片的sprite就可以用这些帧来播放动画。要在sprite上实现动画，我们首先还得先定义一个动画，就是定义这个动画是由哪些帧组成的。小鸟的动画是fly方法，用animations属性来添加fly动画，fly方法里给了小鸟向上的速度。图4.12准备4.5 游戏主界面主界面的功能实现依然写在play场景中。管道的循环出现需要利用时钟对象Timer来重复产生管道并以指定的时间间隔无限重复执行loop函数，直到调用了Timer对象的stop()方法才停止。碰撞检测需要用到两处，一个是小鸟和管道的碰撞，另一个是小鸟与地面的碰撞。采用collide函数来实现小鸟和管道发生碰撞时，小鸟被管道弹开的效果。采用overlap方法来实现小鸟和地面发生碰撞，而不产生力的相互作用的效果。 小鸟的飞翔需要构建重力模型。通过使用 game.physics.enable() 方法开启Phaser.Physics.ARCADE物理系统，设置小鸟的重力gravity.y。在准备界面，小鸟需要固定在空中，则将重力设置为0。当游戏开始时，给小鸟设置一个适当的重力值。其次，给小鸟设置一个向上的速度和角度，则实现了模拟现实世界中的运动状态。在游戏过程中，设置了大量道具。利用随机数在管道间隙中随机产生不同的道具。当小鸟吃到不同的钱币时，对当前分数进行不同数值的加分。当小鸟吃到皇冠时，利用补间动画进行横纵坐标的扩大，实现小鸟瞬间变大的效果，并设置持续的时间，之后进行缩小动作，变回原样。同理，当小鸟吃到糖果时，利用补间动画行横纵坐标的收缩，实现小鸟瞬间变小的效果，并设置持续的时间，之后进行放大动作，变回原样。当小鸟吃到炸弹时，调用gameover方法，跳转到游戏结束界面。当小鸟吃到道具时，在界面上使用补间动画实现一个tips淡出的效果，对道具的功能进行相应的提示。在游戏过程中，我们要实现多处音效的播放。game.add.sound() 来得到一个sound对象，再调用它的play方法即可实现声音的播放效果。图4.13管道图4.14金币图4.15银币 图4.16铜币 图4.17糖果图4.18皇冠图4.19炸弹4.6 游戏结束界面游戏结束，显示玩家当前得分和历史前三名的玩家姓名和成绩。将玩家当前成绩与现存数据库中排名第十的分数比较，如果当前用户的分数大于排第十的分数，就把当前的分数插入到数据库中去。用户登录后会把用户名保存到session中，如果session没有用户名，说明用户没登录，这时候是不会插入数据到数据库中的。其次，制作重玩按钮replayBtn，点击实现跳转到游戏开始界面。图4.20游戏结束图4.21得分榜第4章 游戏实现4.7 游戏演示首先进入游戏启动、加载界面，玩家可以看到进度条的动态加载效果。图4.22加载中迅速加载完跳转到游戏开始界面，玩家可根据喜好进行游戏场景、小鸟形象和游戏难度的选择。图4.23游戏开始界面选择后，跳转到游戏准备界面：图4.24游戏准备界面点击屏幕，正式开始游戏，通过点击鼠标控制小鸟飞行，持续点击鼠标，小鸟会不断往上飞行，若松开鼠标，小鸟会迅速下落。在飞行过程中，要控制小鸟顺利穿越随机产生的长短不同的管道间隙，每成功穿越一组管道，加一分。在管道中也会随机产生不同的食物。当小鸟吃到金币时，会有加分奖励；当小鸟吃到虫子时，会瞬间变小更易穿越管道间隙；当小鸟吃到炸弹时，会瞬间变大，穿越管道间隙的难度亦随之增加。图4.25游戏主界面当小鸟碰撞到管道、掉落到地面或是吃到炸弹时，提示游戏结束。显示当前得分和历史最高成绩。点击选择重玩。图4.26游戏结束界面4.8 本章小结第四章游戏实现主要围绕每个界面功能的实现方法进行详细阐述，列举了重点函数方法，深刻介绍了如何通过代码实现游戏功能。并通过截图粘贴的方式来演示游戏，利用生动形象的方式使玩家对Flappy Bird有进一步的了解。第5章 结论与展望第5章 结论与展望5.1 结论本文研究的是基于HTML5的一款Flappy Bird网页游戏，运用Phaser框架、struts2框架和Hibernate框架，结合JavaScript脚本语言和Ajax技术实现。本游戏成功达到了预期目的，实现了多个界面的切换、难度的递增以及小鸟穿越各种障碍和获取得分的效果。游戏玩法简单，操作性强，是一款适合上班族和学生的休闲娱乐活动。本次游戏的开发较为成功的实现了前期的各项任务要求，总体成效是可喜的。本文首先针对Flappy Bird游戏进行三方面的可行性分析，再进行功能和非功能两部分的需求分析，以此来确定课题的可行度。其次明确游戏的开发环境和开发工具，使开发过程更有效、更科学。接着围绕游戏展开全面的概要设计和模块的详细设计。概要设计对游戏进行整体规划，将Flappy Bird分为上述六个游戏模块，并确定每个模块之间的联系。详细设计针对每个界面进行功能、需求上的分析，使游戏从设想落实到实践上。经过上述分析之后，对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的浏览器访问。HTML5把应用直接移植到网页中，用户通过打开网页直接体验游