1、毕 业 设 计中文题目 基于 HTML5 的 Flappy Bird 游戏英文题目 Flappy Bird Game Based on The HTML5院 系： 计算机与信息工程学院年级专业： 软件工程（金融服务）姓 名：学 号：指导教师：职 称： 年 月摘要摘 要基于 HTML5 的 Flappy Bird 游戏是一款无需下载客户端程序的网页游戏，适合上班族和学生进行休闲娱乐。游戏主要通过鼠标点击控制小鸟成功穿越长短不同的管道所组成的障碍并获取得分，考验玩家的反应能力和敏捷度。开发本款游戏使用到了前后台技术。采用的框架是Phaser、struts2、Hibernate 。基于 HTML5
2、标准标记语言和 JavaScript 动态脚本语言，结合 Ajax 技术实现游戏界面和功能。其中，HTML5 的众多新增标签元素在开发过程中起到了举足轻重的作用。所以本次课题的重点在于研究如何使用HTML5 语言来开发这款网页游戏。本次游戏开发基本成功实现了预期目标，游戏功能已基本完善。游戏共分为六个模块，启动加载模块、菜单模块、游戏开始模块、游戏准备模块、游戏主界模块和游戏结束模块，界面简洁美观，游戏功能大致完成，实现了鼠标和小鸟的交互行为、重力模型、小鸟穿越管道得分以及游戏过程中出现大量道具等丰富的游戏功能。后期还希望通过问卷调查等方式采集玩家体验的感受，使功能以及界面上更具有 Flapp
3、y 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
4、 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 standa
5、rd 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 l
6、anguage 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
7、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 realiz
8、ed. 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
9、本章小结 .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 章 游戏实现 .1
10、84.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。所以传统网游下载既占用内存又耗费时间。需求推动社会进步，既然传统网游已经无法满足玩家
11、的需求，那么紧跟着互联网技术飞速发展的脚步，一种新品种游戏 1就在人们的期盼中孕育而生了，即网页游戏 2。而恰恰网页游戏就完美地避开了这一问题，它不用下载安装客户端程序，使用到的是最新的开发技术，JAVA 和 Active X3等。“网页游戏”和传统网游的主要不同在于，玩家与游戏的交流方式不同，网页游戏通过使用浏览器，把玩家和游戏直接联系在一起，即玩家通过浏览器直接进入游戏界面，简单方便。网页游戏的未来发展趋势相当可观，因为它的潜在用户很多，并且玩家体验游戏的过程得到了极大的简化，使得未来的用户数量呈持续递增趋势。而近期行业里的专业人士提出，可以将浏览器当做一个虚拟的操作系统，这无疑是更加肯定
12、了网页游戏的地位。为了实现网页游戏，我们需要了解网页游戏要使用到的开发语言 HTML5。以前人们要看视频首先需要先下载软件，并且在本机上安装有视频播放器，而玩游戏都是通过下载内存很大的客户端游戏，既占本机的内存容量，又在游戏前耗费下载时长。那么，有需求就会有发展，紧跟着玩家用户需求的不停提出，技术也随之发展起来了。一种新型技术诞生了，也就是流视频和网页游戏。但是因为HTML 标准没有紧跟时代，一时间 flash 成为了主要的浏览器插件。同时 IE 掌握了整个 web 世界的主动权。引起了其他公司的不满，于是在商讨过后决定制定一个新的世界语言标准 HTML5。众所周知，HTML5 是当今最主流的
13、标准通用标记语言，其功能特性也是在保持持续强大稳定的发展当中。当然 HTML5 也是在不断摸索研究中逐渐强大起来的，它的发展经历了几个阶段。第一阶段：Web 增强与破垄断阶段Web 主要在 webapp、流媒体、游戏和三个方面做到了功能和技术的增强。其中在游戏方面的增强主要体现在 HTML5 新增了 Canvas、WebGL 两种渲染方式。其中最显著的特性就是新增了 Canvas4标签。借助 Canvas 标签，HTML5 拥有了进行游戏开发的能力，可以实现各式各样的图形、表格和动画等的效果。传统网游是通过flash5来实现游戏中的动画效果，但是 flash 有一个致命的缺点就是播放或浏览动画
14、必须通过 flash player 才可以，这样就导致了它的移值性很差。而使用 Canvas 就可以第 1 章 引言直接实现动画效果，不用使用到外部插件，故移植性得到了大大的提高。这也是HTML5 适合用于网页游戏开发的重要原因之一，解决了移植问题 6。第二阶段：移动互联网阶段HTML5 兼容性非常好。首先，HTML5 实现了极大程度的浏览器兼容，这样就保证了开发出的网页游戏具备最大的浏览器兼容性。除了良好的浏览器兼容，HTML57还做到了最大程度的设备兼容。无论你的电脑运行的是哪种操作系统，无论你的移动设备是安卓还是苹果，HTML5 都是被支持的。第三阶段：HTML5 时代来临原来的 HTM
15、L5 出现了诸多不如原生应用的表现，如表 1.1 所示。表 1.1 原来的 HTML5 与原生应用的对比原来的 HTML5 原生应用ios 流畅性能Android 低端机很卡流畅工具 各类高级记事本 Xcode、Eclipse ADT 等专业 IDE能力 只有 7w 个语法和 API 40w+API以上这些性能、工具和能力方面的不足造成了研发人员在使用 HTML5 制作出的App 和原生应用不一致。于是，人们提出了解决方案。首先通过 硬件升级，将 CPU的速度进行成倍得提升。其次商讨出了新型的 OS 厂商策略，他们将浏览器的内置对象进行改变，使之具备更好的性能。同时再伴随着相关软件技术的逐步成
16、熟，HTML5 的这些障碍都被克服了。现在的 HTML5 应用已经成功地做到了和原生 App一样的效果，无论是功能还是体验操作，都是有过之而无不及的。另外，HTML5 是开放的，因为在研发过程中，HTML5 是由几十甚至上百家国际企业共同商讨研发出来的新一代标准标记语言，所以 HTML5 具有至高的标准型，也侧面反映出它的持久性。综上所述，HTML5 的优势众多，性能突出，较适用于开发网页游戏。1.2 研究目标及意义网游在当今很主流很火爆，它弥补了端游的遗憾，不用下载客户端程序来建立玩家与游戏的联系，而是直接通过浏览器实现和玩家的交互，方便高效，且市场巨大。这是我想要研究本课题的原因之一。此外
17、，HTML5 作为当今最流行最标准的标第 1 章 引言准标记语言，其使用范围广泛，且功能强大，特别是又在原先的 HTML4.01 的基础上新增、删改了很多标签，这使得我非常的想要进行学习和了解，所以我选择了基于 HTML5 的 Flappy Bird 游戏作为我本次论文的研究课题。那么，这个课题开发还涉及到多个技术。我们通过前后台对应用技术进行划分学习。前台使用到的框架是 Phaser 框架。Phaser 框架 8是一款开源游戏框架，提供免费下载，使用方便有效，专门针对 HTM5 进行游戏开发。 而我们要使用的 HTML5的最核心的新标签就是 Canvas 画布元素，所以使用 Phaser 框
18、架作为本次游戏的开发框架是最合适、恰当的。其次，要进行 JavaScript9的深入学习。在开发过程中，我们需要在 Canvas 画布上添加各种样式， 而样式的代码实现就是通过 JavaScript 来开发，使得图形或动画可以直接在浏览器中显示出来。后台使用到的框架是 struts2 框架和 Hibernate 框架。之所以使用到后台是因为游戏中要实现登陆注册功能，那么就需要后台数据和服务器的支持，所以，本次游戏开发需要结合 struts2 框架和 Hibernate 框架。同时，还要对 Ajax 技术进行研究学习，利用它可以实现刷新网页时，不加载全部页面，只更新局部，弥补了传统网页的遗憾，从
19、而使得网页刷新更高效便捷。所以，本次研究课题主要紧抓住 HTML5、Phaser、struts2、Hibernate、Canvas画布、JavaScript、Ajax 技术进行研究学习。1.3 论文组织结构论文共分为五章。第 1 章引言。主要介绍了网页游戏的概念以及围绕 HTML5 介绍了其历史和现状以及研究的意义。第 2 章 Flappy Bird 游戏分析。划分为两部分，首先是围绕 Flappy Bird 游戏进行了三方面的可行性分析，分别为技术可行性分析、经济可行性分析、操作可行性分析。其次介绍了本次开发使用的工具、技术以及运行环境。最后对 Flappy Bird 游戏进行需求分析，首先
20、针对游戏玩法进行了详细介绍，再对本游戏的需求进行多方面的分析。第 3 章 Flappy Bird 游戏的总体设计。分为两方面，对游戏进行了全面的概要设计和详细设计，主要通过画图来展示设计的模块。第 4 章游戏实现。主要针对游戏的各个界面是如何通过代码实现功能进行详细的解释，并粘贴大量代码图辅助解释。最后，演示游戏，展示游戏截图。第 5 章结论与展望。主要总结了本次论文的研究课题以及取得的收获和不足，第 1 章 引言并指明进一步的工作方向。1.4 本章小结第一章引言首先简要介绍了网页游戏的概念和与传统网游相比下的优势所在，阐述本课题的研究意义，再结合开发技术，深入探讨本课题的研究目标。其次将论文
21、划分成章节，并且围绕要点对每章的内容进行概述。第 2 章 Flappy Bird 游戏分析第 2 章 Flappy Bird 游戏分析2.1 可行性分析2.1.1 技术可行性分析开发本款游戏主要用到的技术有 Phaser 框架、HTML5、JavaScript 、struts2 、Hibernate 、Ajax。现在着重来讨论一下这些技术的可行性。首先，Phaser 框架是一款免费的游戏开源框架，主要用于 Canvas 画布和 WebGL渲染。而我们要使用的 HTML5 的最核心的新标签就是 Canvas 画布元素，所以使用Phaser 框架作为本次游戏的开发框架是最合适、恰当的。其次，众所周
22、知，HTML5是当今最主流的标准通用标记语言，所以要开发网页游戏，也是必须要用到 HTML5的。HTML5 实现了极大程度的浏览器兼容。并且，最新的 HTML5 新增了一个Canvas 画布元素，而这个元素可以大大简化我们的开发代码。Canvas 用英文翻译即为画布，顾名思义，该标签相当于一块画布，浏览器可以直接在上面绘制矢量图，使用 JavaScript10添加需要的样式，使得图形或动画可以直接在浏览器中显示出来，因此 Flash 和 Silverlight 的使用率随之被削弱。我们都知道，flash 有一个致命的缺点就是播放或浏览动画必须通过 flash player 才可以，这样就导致了
23、它的移值性很差。而使用 Canvas11就可以直接实现动画效果，移植性得到了大大的提高。所以HTML5 既是最适合也是最方便的开发网页游戏的语言。最后，使用 JavaScirpt 来实现具体的样式和功能。我们在 HTML 中嵌入JavaScript 脚本，让脚本中的样式发挥作用，来呈现出不同的动态效果。因为游戏中需要实现登陆注册功能和排行榜功能，这就涉及到后台数据和服务器。使用到的框架是 struts2 框架和 Hibernate 框架。 struts2 在 struts1 的基础上改进，已经成为了一个高度成熟的框架，不管是稳定性还是可靠性都得到了广泛的证明。所以使用这个框架的安全性和有效性都
24、得到了极大的保证。Hibernate 框架通过对JDBC 进行对象封装，通过 java 语言开发，实现对数据库数据的控制。 Ajax 弥补了传统网页的遗憾，它通过让后台和服务器实现小部分的数据交换来实现刷新网页时，不加载全部页面，只更新局部需要更新的内容。从而使得网页刷新更高效便捷。以上这些技术都是被广泛使用和大量推广的，并且适合用于开发网页游戏，所以采取以上技术可行。第 2 章 Flappy Bird 游戏分析62.1.2 经济可行性分析开发基于 HTML5 的 Flappy Bird 游戏 12使用的 Phaser 框架是免费的游戏开源框架，可以直接下载使用，所以开发过程不产生经济费用。且
25、本游戏免费开放，游戏关卡亦没有设置收费项目或要求玩家购买游戏道具，故游戏过程也没有产生经济费用。总而言之，这是个免费的娱乐休闲小游戏，故经济可行。2.1.3 操作可行性分析本次开发的 Flappy Bird 游戏操作简单，极易上手，主要考验的是玩家的反应速度，在游戏玩法上并没有刻意刁难玩家。主要是通过鼠标点击控制小鸟的飞行，只要不触碰管道及地面，即可继续游戏并获取得分，故本游戏的操作性强。2.2 主要工具及技术2.2.1 相关应用技术简介2.2.1.1 HTML5 技术简介为了取代 HTML 的旧版本，HTML5 13在人们的热切期待中孕育而生，且在不断地发展强大当中，以便能更加适应网页的应用
26、。HTML5 在原先的旧版本上做出了极大的改变，主要体现在对标签元素进行了大量的增加、删除和修改，甚至是一些语义上的变化。首先，增加了许多便捷的标签元素。例如当用户需要在页面中添加音乐或视频时，只需通过标签的使用即可实现插入音频的效果，使用方法为，而无需再通过加载 flash 插件来实现，方便高效。再比如新增了一种新型的页面渲染方式，通过 14标签直接在网页中构建一块画布，而 JavaScript 就是画笔，将网页中需要的形态和样式全部勾勒在画布上面，提供给用户神奇而又强大的功能体验。同时，HTML5 删除了大量冗余的属性和标签，例如像设置页面字体的标签就被删除掉了，取而代之的是 style 属性。大量冗余的标签被删除，使得 HTML5 更精简，开发人员在使用标签时也不再那么混乱。而 HTML5 也修改了部分标签，例如标签在过去具有超链接和锚的双重含义，而现如今在 HTML5 中已经被去掉了锚这个用法了。总之，这些元素标签的改变使得 HTML5 变得更简洁、更便利、更高效、更有创造性 15。
