毕业设计（论文）-围住逃课男游戏设计与开发.doc

编号：（）字号本科生毕业设计（论文）围住逃课男游戏设计与开发 08113681网络11-3班题目：姓名：学号：班级：二一五年六月中国矿业大学本科生毕业设计姓 名： 学 号：08113681学 院：计算机科学与技术学院专 业：网络工程 设计题目：围住逃课男游戏设计与开发专 题：指导教师：职 称：讲师2015年6月徐州中国矿业大学毕业设计任务书学院计算机科学与技术学院专业年级网络工程11级姓名任务下达日期：2015年 1 月 12日毕业设计日期： 2015年1月 19日至 2015 年 6月 3日毕业设计题目：围住逃课男游戏设计与开发毕业设计专题题目：毕业设计主要内容和要求：研究内容：（1）采用最新的html5、javascript技术和css3标准来构建各种常见类型的游戏；（2）实现游戏的模式设置、难度设置、背景设置、声音设置、用户信息存储与管理；（3）利用javascript技术解决html5有关浏览器的兼容问题；（4）开发富有趣味性和技术性的游戏，掌握html5、javascript技术和css3标准中与游戏开发相关的理论知识。工作要求：在完成最低工作量：（1）设计与开发基于html5的游戏开发；（2）装订好论文（包括不低于3000字的翻译）；电子版设计论文；程序源代码；系统使用说明书的基础之上，尽量完成该课程设计的其他要求及一些扩展功能。院长签字：指导教师签字：中国矿业大学毕业设计指导教师评阅书指导教师评语（基础理论及基本技能的掌握；独立解决实际问题的能力；研究内容的理论依据和技术方法；取得的主要成果及创新点；工作态度及工作量；总体评价及建议成绩；存在问题；是否同意答辩等）：成绩：指导教师签字：年月日中国矿业大学毕业设计评阅教师评阅书评阅教师评语（选题的意义；基础理论及基本技能的掌握；综合运用所学知识解决实际问题的能力；工作量的大小；取得的主要成果及创新点；写作的规范程度；总体评价及建议成绩；存在问题；是否同意答辩等）：成绩：评阅教师签字：年月日中国矿业大学毕业设计答辩及综合成绩答辩情况提出问题回答问题正确基本正确有一般性错误有原则性错误没有回答答辩委员会评语及建议成绩：答辩委员会主任签字：年月日学院领导小组综合评定成绩：学院领导小组负责人：年月日摘要随着计算机性能的飞速提升和互联网技术的持续发展，用户享受互联网的方式也越来越简单快捷，因而对于网络应用的要求也越来越高。目前，越来越多的应用可以用浏览器打开的方式直接使用，用户数据则存储在云端，这样不仅增加了安全性还方便了用户共享数据。当网络化在各种应用中不断普及的同时，一种新的技术标准应运而生，那就是html5。html5是新一代互联网标准的开发语言，作为当今最炙手可热的web开发技术，凭借其强大的功能特性和跨平台等优势，它将把web带入一个崭新的应用平台，图像、动画、音频和视频，以及人机交互在这个平台上都会被更加完善地标准化，给用户更好的体验。本文首先从国内外html5 技术的发展现状和趋势入手，对其进行整体分析，然后讨论了html5、javascript和css及其相关开发技术的发展历程，介绍了html5新增的功能及其应用。以此为基础设计开发了一款基于html5 技术的网页版“围住逃课男”的游戏应用，该游戏界面简洁，操作简单，运行流畅，功能完善，趣味十足。采用html5新添加的canvas绘图功能创建游戏舞台，并使用img和audio标签完成了游戏背景和音效的设置。使用javascript编码设计游戏的人物模块、地图模块、算法模块和流程控制模块，提高了程序的兼容性和实用性。游戏布局则采用css样式实现，用法简单且功能强大。游戏主要有经典和基友两种游戏模式，每种模式对应不同数量和形象的人物动画，同时采用移动算法的切换实现了游戏难度的控制。当然，在整个游戏过程中实现了对人物位置和地图布局等相关数据的存储和管理，确保了游戏数据的统一性和实时性。本游戏是参照2014年在微信平台上十分火爆的游戏围住神经猫设计开发的，趣味性很强同时也是对经典的缅怀。关键词：html5；javascript；css；canvas；网页版游戏；abstractwith the rapidincrease of the computer performance and the continuous development of the internet technology, users also begin to change ways of enjoying the internet constantly. so the requirements for network applicationare increasingly high. more and more application can be directly used in the way of opening the browser, user data are stored in the clouds, and therefore thiswill not only increase the safety but also be continent for users to share data. at the same time of various application continuously tends to be more webified, a new standard of technology emerges as the times require, which is html5. html5 is a new generation of internet standards development language, nowadays, as one of the hottest web development technology, by virtue of its powerful features and cross platform advantages, it will take the web into a new application platform, on which the image, the animation, the audio, the videoand human-computer interaction in this platform will be more perfectly standardized. first of all, the paper starts with the current situation and development trend of html5 technology at home and abroad, to which i carry on the overall analysis, and then discusses the development of html5, javascript and css and its related development technologies, new html5 features and its application are introduced. this design based on developed a based on html5 web version of the “surrounding truant students”game application, the game interface simple, simple operation, smooth running, perfect function, full of fun. using canvas newly added html5 graphics feature to create the game stage, and use img and audio tags to complete the game background and sound settings. the characters, map module, arithmetic module and process control module of the game are made by using javascript coding to improve the compatibility and practicability of the program.game layout is achieved by using css style, simple and powerful. there are two game models in the game, the classic and the friends game mode, each mode corresponding to different number and image of the character animation, using mobile algorithm to realize the control of game difficulty. of course, the character location and map layout and other related data are stored and managed in the whole game progress, to ensure the consistency and real-time of game data. thedesign and development of the game is a reference to a very popular game on “weixin” platform in 2014, named “surrounded neurotic cats”, fun and strong but also the memory of the classic.keywords:html5; canvas; javascript; css; webpagegames;目 录1 绪论11.1课题的目的和意义11.2国内外发展现状和趋势11.3课题主要的内容和功能介绍21.3.1课题主要的内容21.3.2围住逃课男游戏功能介绍31.4相关技术简介31.4.1 html5标准简述及意义31.4.2 javascript标准简述及意义41.4.3 css标准简述及意义51.5开发工具51.6本文章节安排62 系统分析72.1系统设计分析72.2系统需求分析72.2.1游戏角色72.2.2需求分析72.2.3用例分析82.3本章小结103 系统概要设计113.1系统总体功能设计113.2各模块及其对应的功能123.2.1数据管理模块123.2.2 用户操作界面相关模块123.3程序流程控制133.4本章小结154 系统详细设计164.1数据管理模块设计164.2舞台模块设计174.2.1定义圆点174.2.2绘制地图184.2.3舞台模块部分代码194.3逃课男模块的设计214.3.1逃课男定义214.3.2绘制人物动画214.4算法模块的设计224.4.1随机移动算法模块224.4.2最短路径算法模块264.5声音控制模块的设计304.6游戏流程模块的设计314.6.1各流程模块功能定义314.6.2程序流程控制的实现344.7应对浏览器的html5支持374.7.1利用javascript解决html5兼容问题374.7.2使css兼容374.8本章小结385 总结与展望395.1总结395.2展望39参考文献41翻译部分42英文原文42中文译文46致谢49第50页中国矿业大学2015届本科生毕业设计（论文）1 绪论1.1课题的目的和意义当前，在互联网技术高速发展的同时，其在人们日常学习、工作、生活中的作用和地位也日益凸显，自身也在不断发展并完善。随着时代的进步，人们逐渐开始使用互联网技术及其附属功能所提供的各种便捷服务与应用，无论何时何地都能享受到它为我们生活、工作以及学习所带来的好处和便利。与此同时，随着互联网基础用户的不断增多和相关开发者的底层平民化，人们创造和完善其功能和服务的步伐也会越来越快。对于整个互联网游戏行业，无论是从其所具有的商业价值层面还是从其开发所需要的技术层面上来讲，随着游戏开发设计的方法和模式的推陈出新，不断有公司在尝试和挑战与其相关的新的开发模式和技术。然而，毕竟整个互联网游戏行业处于一个相对开放的平台，在开发和运营游戏的过程中，大家应当遵循一个被共同认可的标准模式。这样不但规避了垄断和一家独大式的竞争模式，而且避免了开发路径偏激化、开发标准多样化和开发结构复杂化等问题。正是基于此，html5技术应运而生，凭借其符合大多数开发者的标准和技术体系，在网络革新中不断发展和壮大。就目前来看，尽管距html5游戏的普及还有着一段时间，但不可否认的是，html5游戏已经逐渐被市场所接受，甚至在改变web游戏的某些方面。另外，目前人们所认识的互联网已经不仅仅是传统意义和规模上的互联网，它驱使过去出现的所有模式和应用向着更加快捷和移动的方向发展和壮大，人们在日常生活中可以通过智能手机、平板电脑和可穿戴设备等各式各样的移动设备来享受互联网提供的应用和服务。可以看到，html5技术必将凭借其强大的功能特性和跨平台等优势深入改变人们日常学习、工作和生活中的方方面面1-3。本课题应用html5及其相关技术完成了过去仅用web 技术难以实现的功能，而且对比之前的技术体系性能提升很多，同时创新性和前瞻性十足，可以说是基于html5 技术的一次最佳实践。相对于其他应用来说，游戏本身有着无可替代的作用，其拥有很强的互动性，可以直接在网页中运行。在给人带来轻松愉快的同时，也借此将html5技术的相关功能融入到人们的日常生活之中。1.2国内外发展现状和趋势html5好比投向互联网行业的一颗重磅炸弹，推动了许多领域进行彻底革新。例如，前几年野蛮成长的手机应用。虽然html5从出现到尘埃落定一直在争议中曲折发展，但是随着html5页面的推广和html5游戏的涌现，互联网巨头纷纷向以html5应用为中心的领域靠拢。由此预见一个新的移动互联网黄金时代即将到来，而html5游戏也将华丽蜕变。下面来盘点一下html5游戏现状：（1） html5游戏在微信朋友圈中疯狂传播：2014年7月，html5游戏发展的里程碑式产品围住神经猫在微信朋友圈中疯狂传播，人们纷纷炫耀用更少的步数围住此猫，创造了3天点击量过亿的奇迹。电商纷纷借助html5游戏增强广告趣味性，从而调动用户参与的积极性，并诱导用户在朋友圈中传播。（2） 触控科技推出game creator online：2014年9月，为了方便缺乏html5技术却对此感兴趣的人实现自己的想法，触控科技提供了在线html5模板，对资源进行整合并上线发布，构建了全民开发html5的蓝图。（3） 万维网联盟正式宣布html5 标准定稿完成：2014年10月29日，经过长达8年的艰辛努力，万维网联盟激动地宣布，html5标准规范终于制定完成并已公开发布。进一步推动了html5游戏的发展。（4） dataeye发布dhap html5游戏统计分析平台：2014年11月5日，dataeye正式发布了dhap html5游戏统计分析平台，凭借其强大且专业的数据统计和分析技术为终端运营的数据保驾护航，给html5游戏开发者们提供了精良装备，让他们大展身手，为html5游戏运营的多样化打下了夯实的基础。（5） 首届html5大会在北京召开：2014年11月19日，首届html5大会在京召开，诸多游戏行业内的大佬们出席了会议，他们纷纷对html5游戏的未来做了一些展望，多数大佬比较看好html5游戏的前景。然而，html5的发展也不是一帆风顺，不久前，微信创始人张小龙在一次面向微信公众平台用户的演说中，公开表示微信已经对html5游戏的传播进行了限制。紧随其后，12月30日，微信公众平台正式发布公告，表示将对诱导用户关注公众账号和诱导用户分享朋友圈的行为进行整顿。这无疑沉重打击了依赖微信生态圈进行病毒传播来推广html5游戏的部分开发者。总之，面临众多机遇和挑战，html5游戏不管以何种方式在在游戏市场中立足，其终端游戏的运营都离不开数据的保驾护航，另一方面，精细化运营始终是所有游戏运营商的共同目标。也许随着技术的成熟，html5游戏在精细化运营方面越来越出色，届时，运营数据的精细化将会成为每款游戏在市场上占据一席之地的主导因素4-6。1.3课题主要的内容和功能介绍1.3.1课题主要的内容本课题的主要内容是使用最新的html5canvas绘图功能绘制游戏界面；采用javascript编程实现游戏的流程控制；应用css样式标准来完善页面布局，从而构建各种常见类型的游戏，实现游戏的模式设置、背景设置、声音设置、难度设置、用户信息存储与管理等功能。1.3.2围住逃课男游戏功能介绍启动支持html5的浏览器之后，用户通过输入有效地址或者点击相关链接即可进入“围住逃课男”游戏的主界面。游戏模式包括两种：经典模式和基友模式。游戏主要功能包括：（1）玩家必须通过鼠标点击地图上未被选中的点，同时“逃课男”会四处逃窜，直到玩家将其困住，最后逼至无路可走方可获胜，系统记录所用步数。如果“逃课生”逃跑到地图边缘的任一点，则围捕失败游戏结束。（2）游戏开始后，自动播放背景音乐，同时加载图片初始化舞台。利用随机函数将地图中的部分点设置成已被选中的点。当玩家点击鼠标时有按键音。（3）进入游戏主界面后有经典和基友两种游戏模式可供选择，任意选择其中一种，将加载相应人物和算法模块开始游戏，中途有重玩按钮，游戏结束后有再玩按钮。1.4相关技术简介1.4.1 html5标准简述及意义html5的制定是为了取代1999年所制定的html4.01和xhtml1标准成为新的html标准，目前仍处于发展阶段，但是大部分主流浏览器已经较好的支持html5技术了，其中最完美的当属chrome浏览器。html5技术主要有两大特点，首先，增强了web页面的表现性能；其次，添加了本地数据库等web应用的功能。html5不但继承了上一个版本全部功能和特性而且还增加了部分新的语法特性和功能，其中就包括、和标签，同时还集成了矢量图形实现方式（svg）的相关内容。这些元素的添加为在网页中的展现和插入更多的多媒体和图片内容提供了便利。随着互联网的飞速发展，传统的web界面技术早已不能满足人们对于交互特性日益增长的需求，web标准是网页设计与开发的一个趋势。而html5是近十年web开发标准中最大的飞跃。与传统html4.0相比html5新增了以下这些功能：（1）绘图（canvas）：可以动态生成二维图形、图表、图像以及动画，并进行展示。实现图片甚至视频的像素级处理。（2）音频和视频支持（audio and video）：html5标准为这两个元素提供了完整、通用且可脚本化控制的api，因而开发人员不必使用插件就能播放音频和视频。（3）地理定位（geolocation）：通过在web应用程序中共享其地理位置信息，用户可以享受与位置感知相关的服务，例如全球定位功能。（4）实时和跨源通讯（communication）：构建实时和跨源通信的两个重要模块：xmlhttprequest level2与跨文档消息通信，严格限制运行在同一浏览器中的框架、标签页、窗口间的通信，增强了安全性。（5）通讯（web sockets）：通过定义一个全双工通信信道，让仅用web上的一个socket实现通信成为可能。websocket不仅加强了常规http通信的增量，对于实时的和事件驱动的web应用程序而言，它还代表着一次卓越的进步。（6）后台处理（web workers）：html5 web workers可以为web应用程序提供后台处理功能。由于它对多线程有非常好的支持性，所以使用了html5的javascript应用程序可以充分利用多核cpu带来的优势。（7）离线应用（offline）：html5的离线应用缓存使得在无网络连接状态下运行应用程序成为可能。适合阅读和写电子邮件、编辑文档等等，避免了加载应用程序时所需的常规网络请求，从缓存中加载资源可以节省带宽。（8）数据存储（web storage）：开发者可以通过将需要跨源请求重复访问的数据直接存储在客户端浏览器中，以减少网络流量。同时可以在关闭浏览器很久后再次打开时恢复数据7-9。1.4.2 javascript标准简述及意义javascript是一种跨平台、基于对象和事件驱动的脚本语言，最早是由netscape公司开发。凭借其开发环境简单、不需要java编译器、可以直接在web浏览器上运行的优势，从而倍受web设计者的推崇。javascript的主要特点如下：（1） 脚本编写语言javascript是一种脚本语言，采用小程序段的方式编程，虽然其基本结构形式与c、c+、vb、delphi十分相像，但是与这些语言有所不同，由于javascript是解释型语言，所以在程序执行过程中只被逐行地解释并运行，不需要预先编译。（2） 基于对象的语言javascript既是一种基于对象（object-based）的语言，又可以看作是一种面向对象的语言。javascript可以把html页面中的每个元素都看作是对象，并且这些对象之间存在着层次关系。通过操作html对象的方法和属性，可以捕捉到用户在浏览器中的操作，从而实现页面的动态效果。（3） 简单性javascript在语法上可以理解为基于java的语句和控制流，对于已经学习了java语言的人，使用javascript开发将会变得非常容易；反之，学习javascript也是对学习java的一种非常好的过渡。（4） 安全性javascript不但不可以将数据保存到服务器上，而且不能访问本地的硬盘，同时不允许对网络文档进行修改和删除，是一种安全性较高的语言。只能通过浏览器实现信息浏览或动态交互，可以有效地防止数据破坏和丢失。（5） 动态性javascript是动态的，它可以直接响应用户或客户的操作，无需经过web服务程序。javascript对用户的响应是以事件驱动的方式进行的。（6） 跨平台性javascript与操作环境无关，只依赖于浏览器本身，只要浏览器可在计算机上运行且支持javascript就可以解释执行，从而真正实现“write once，run everywhere”。综上所述，javascript 是一种基于对象（object-based）和事件驱动（event driven）并具有安全性能的脚本语言。通过把javascript嵌入在html页面中，可以赋予网页动态效果；采javascript开发客户端的应用程序，可以实现与客户的交互10-12。1.4.3 css标准简述及意义css（cascading style sheet）是指层叠样式表，用于控制网页内容的外观并允许将样式信息和网页内容分离的一种标记语言。引入它的目的是让html语言更好地适应页面的美工设计。它在html语言的基础上，提供了丰富的格式化功能，比如颜色、背景、字体、和整体排版等，同时网页设计者可以针对各种可视化浏览器来设置不同的样式风格。随着css的广泛应用，css技术越来越成熟，css的发展经历了css1、css2和css3这3个循序渐进的标准：（1）css 1.0：1996年12月，w3c（万维网联盟）发布了css1规范，该规范主要定义了网页的一些基本属性，例如颜色、字体、行间距和字间距等。（2）css 2.0：1998年5月，css2规范发布。css2规范是基于css1设计的，其中包含了css1所有的功能和特征，并以此为基础添加了一些高级的功能，如定位和浮动等，另外，还添加了一些高级的选择器，如子选择器、相邻选择器和通用选择器等。（3）css 3.0：2001年5月，w3c完成了css3的工作草案。该草案完成了css3的发展路线图的制定，详细列出了所有模块，并计划在未来逐步统一规范。css3标准被分为若干个相互独立的模块，这将有助于理清模块化规范之间的关系，减小完整文件的体积。目前流行的浏览器都对css有良好的支持，但不同浏览器对css3很多细节的处理存在差异。采用css3规范以后，网页的布局会更加合理，样式会更加美观。但css3还没有完全普及，各个浏览器对css3的支持还处于发展阶段。如果所有浏览器都支持css3样式，那么网页设计者将可以使用统一的标记，在不同浏览器上实现一致的显示效果，网页设计将会变得更加容易13-16。1.5开发工具html5 近年来发展迅猛，随着主流浏览器对 html5 技术支持的不断完善以及 html5 技术的不断成熟，越来越多的开发人员开始使用html5来制作各种效果显著、内容丰富而且交互性强的web应用。虽然目前html5 的标准还不是特别完善，但是显而易见，html5 已经逐渐被市场所接纳，有着广阔且良好的发展前景。正是如此，不断吸引着开发工具提供商向html5 技术靠拢，纷纷推出了各自支持html5的新版本。下面为大家介绍三款优秀的html5 开发工具，相信大家对它们都不会陌生。（1） adobe dreamweaver cs6：adobe dreamweaver cs6是一款能够同时实现网页制作和网站管理的网页编辑器，不仅提供对移动程序和html 网站的可视化编辑界面，其 fluid grid 排版系统还通过整合css样式表功能实现了自适应版面的跨平台兼容性。（2） intellij idea：intellij idea作为java语言开发的集成环境，由于其在j2ee支持、ant、junit和cvs整合、智能代码助手、代码补全、重构和审查、以及创新的gui设计等方面的超常功能，在业界被公认为最好的java开发工具之一。尤其是它的调试（debug)功能，可以实现对javascript、java代码、jquery和ajax等技术的调试。（3） jetbrains webstorm：webstorm 是jetbrains公司旗下一款javascript 开发工具。倍受广大中国js开发者的喜爱，有着“最强大的html5编辑器”、“最智能的javascript ide”和“web前端开发神器”等称号。由于本次开发使用到webstorm，下面就具体简述一下webstorm及其主要特点。webstorm出自声名赫赫的jetbrains公司,原本是jetbrains专门为web开发人员所设计的一个快速、轻量的商用ide，而且与intellij idea同源，继承了intellij idea在js部分的强大功能。自身包含快速智能的支持代码重构和格式化、代码提示和补全细节的自定义，拥有良好的编辑体验，如快速查看代码结构及定义、快速定位最近的编辑等，以及便于调试的优秀特性。webstorm的优势主要包括以下三点：（1）由jetbrains开发，是用于html5应用开发的javascript专业编辑器，系出名门且与强大的java开发工具intellij idea同源，拥有强大的技术支持。（2）通过提供出众且强大的代码补全、智能提示和程序重构等功能，大大提高了开发人员编写javascript代码并嵌入html5页面的效率。（3）提供了非常有价值的html5模板，并非只是简单的开发模板，而是具有很高参考价值的知名实际项目模板17-20。1.6本文章节安排本文共分为五章，基本内容安排如下：第1章 绪论，阐述了课题的研究目的及意义，介绍了html5及其相关技术目前在国内外的发展现状及趋势，概述了课题的主要研究内容及功能，之后又详略有序地对html、javascript和css等相关技术和标准进行简介，最后向大家介绍了三款html5的优秀开发工具。第2章 系统分析，主要是对该系统进行了需求分析和用例分析，对系统的总体结构进行了分析，对系统的功能模块进行了划分。第3章 系统概要设计，主要是对该系统的程序模块进行分析、地图读取及修改、游戏中的声音控制分析，之后给出了程序流程图，最后分析了实现该游戏的各个模块需要解决的问题，并提出了解决方案。第4章 系统详细设计，首先对该系统的服务端进行了设计分析，之后又对地图功能模块、人物模块、算法模块、绘制画布等各个部分的具体实现进行了说明，然后给出了实现这些模块的部分关键代码。最后针对浏览器关于html5和css兼容问题提出解决方案。最后一部分是总结与展望，总结了系统的优点与不足，并提出可进行扩展的功能设计，给出了下一步的研究方向。2 系统分析系统分析是指把要解决的问题看作一个系统，通过综合分析其系统要素，最终找出解决问题的可行方案的咨询方法。对游戏系统进行系统设计分析和系统需求分析，可以有效地提出解决问题的方案和满足用户的需求。2.1系统设计分析用户体验（ue）是指用户在玩游戏的过程中建立的心理感受，主要包括：游戏画面是否美观、游戏界面是否友好、游戏运行是否流畅？等等，所以对于每一种游戏来说良好的用户体验至关重要。然而良好的用户体验，必须做到以下几点：（1） 界面友好：游戏界面简洁舒适，能够完美地展示游戏内容。（2） 操作简单：游戏玩法简单易学，操作简单，容易上手。（3） 运行流畅：要能够快速响应用户请求并处理相关信息。（4） 趣味十足：游戏的意义在于其娱乐性，使人们开心快乐。（5） 可扩展性：不仅要实现游戏的基本功能，还要拓展和附加功能来丰富游戏内容，增加趣味性。（6） 节约资源：高速有效地利用资源可以节省系统的资源，尤其是对于游戏应用，要做到快速响应用户操作并进行相关信息处理，就必须合理地利用和配置资源，使资源利用率最大化21-22。2.2系统需求分析2.2.1游戏角色本游戏的创作灵感来自目前广泛存在的大学生逃课现象，由此背景设定在教室，主要有两个游戏角色，一个是想要逃课的学生，另一个是试图阻止学生逃课的老师。游戏玩家：即玩游戏的人，在游戏中扮演老师的角色，通过鼠标点击地图上未被选中的圆点形成一个圈，从而将想要逃课的男生困住直至无路可走。逃课男：玩家可以选择游戏模式：经典或基友模式，经典模式中系统自动加载一个逃课男；基友模式则加载两个逃课男。在玩家围困它们的同时，按一定的移动算法四处逃窜。2.2.2需求分析游戏类系统设计要能够提供美观舒适的游戏画面、友好的交互界面，同时能响应用户的各项操作请求，并将这些请求转化为与之相对应的各项命令。其功能需求可以概括为以下几个方面：（1） 舞台控制功能在游戏开始后，系统调用相应函数，自动加载并初始化舞台。在舞台上随机布置已选中的圆点和未选中的圆点，每次形成的舞台都是不同的，以此增加趣味性和互动性。（2）背景音乐及鼠标点击音效控制功能用户开始游戏后，播放背景音乐，可以使用户得到放松。当用户点击鼠标进行游戏时，鼠标音效响起，避免了玩家在游戏过程中的单调乏味，从而丰富了游戏的内容，增加了游戏的趣味性和可玩性。（3）游戏模式设置功能进入游戏开始界面后，有两个游戏模式可供玩家选择，经典模式比较简单，只需围住一个逃课男；基友模式则较为困难，需要将两个逃课男都围住。这样不仅丰富了游戏的功能，提高了游戏与玩家的交互性，还增强了和趣味性可玩性。（4） 人物模块的相关功能在经典模式下运行游戏，系统会加载人物模块在舞台中央绘制出一个左右摇摆的逃课男；在基友模式下运行游戏则加载两个手舞足蹈的逃课男，两只模式下的人物形象各有特色。（5）算法模块的相关功能游戏进行的过程中，在玩家通过鼠标点击地图上未选中的点围捕逃课男的同时，逃课男会按照一定的算法移动来摆脱困境。两种游戏模式的算法不同，经典模式中使用最短路径算法；基友模式中采用随机移动算法。这样就提高了游戏的娱乐性。（6）流程控制模块的相关功能进入游戏主界面后，点击经典或者基友模式开始游戏，系统会自动调用相应模块的函数加载舞台和人物，游戏进行的过程中，点击“重玩”按钮即可重玩本局游戏；游戏结束后显示游戏结果。点击“再玩”按钮则重新开始游戏。2.2.3用例分析用例分析是连接需求与设计的桥梁，而用例图则是对系统功能的一个宏观描述，画好用例图是由软件需求向最终实现迈出的至关重要的第一步。本设计的用例图由用例、参与者以及它们之间的关系构成，主要用于为系统的功能需求建模。从而描述出系统需要的功能，即从外部用户的角度观察，分析游戏系统应该实现哪些功能，这样有利于开发人员以一种可视化的方式更好地理解系统的功能需求23。（1）游戏模式用例图用例图2.1主要描述了本游戏主要有两种游戏模式可选：经典（单人）模式和基友（双人）模式。不同模式会在舞台上加载不同形象和数量的人物动画，同时控制人物进行移动的算法也会变换。游戏平台玩家游戏模式选择双人模式单人模式图2.1游戏模式用例图（2）玩家所具有功能的用例图用例图2.2描述了玩家在游戏过程中可进行的各项操作。首先玩家可以选择喜欢的游戏模式进行游戏，通过鼠标点击舞台上的圆点来改变地图布局，达到围住逃课男的目的。在游戏过程中，玩家可以点击重玩按钮刷新地图。游戏结束后，系统显示游戏结果以及玩家的最佳成绩，同时提供再玩按钮，让玩家重新体验游戏的乐趣。游戏平台玩家点击重玩按钮重玩本局点击再玩重新开始游戏点击鼠标来围捕逃课男选择游戏模式显示游戏结果图2.2玩家进行各项操作的用例图2.3本章小结对本游戏的系统分析由两部分组成。首先对系统进行设计分析，围绕良好的用户体验为中心，提出了必须达到的六个要求；然后对系统进行需求分析，其中包括游戏角色制定、需求分析和用例分析。游戏角色给出玩家扮演的人物和需要围捕的角色；需求分析以提供美观舒适的游戏画面和友好的交互界面为目的，给出游戏需要实现的各项功能；用例分析通过文字描述和用例图结合以一种可视化的方式分析系统的功能需求，从而达到有效提出解决方案和满足用户需求的目的。3 系统概要设计系统概要设计是在用户研究和设计之间架起的一座桥梁，通过无缝结合用户研究与游戏设计，实现用户目标与需求向具体界面设计的完美转换。3.1系统总体功能设计本游戏程序模块按功能主要划分为两大部分：一是数据管理模块，主要负责有关人物位置信息和地图布局数据的分配、记录和管理。二是用户操作界面模块，其中整合了以下5个支持游戏运行要素的模块：（1） 舞台模块：主要负责游戏界面的绘制、地图布局的修改。（2） 人物模块：主要负责加载人物图片，生成人物动画。（3） 算法模块：主要负责人物移动的算法，进行逃窜。（4） 声音控制模块：主要负责播放背景音乐和鼠标点击音效。（5） 流程控制模块：主要负责整个游戏的运行流程以及响应用户的相关操作。围住逃课男游戏的总体模块如图3.1所示。围住逃课男数据的显示游戏操作界面数据管理数据的记录算法的相关功能流控程制人物移动控制舞台的相关功能人物的相关功能算法切换响操应作生成逃课男加载动画判断是否被围控制地图绘制画面处理信息声音控制背景音乐点击音效图3.1围住逃课男游戏的总体模块图3.2各模块及其对应的功能3.2.1数据管理模块数据管理模块的具体功能主要是分配和管理相关数据。其中包括及时更新逃课男在地图上的位置信息、对玩家操作步骤数进行记录和显示游戏结果。3.2.2 用户操作界面相关模块用户界面操作模块的具体功能主要有负责响应用户的相关操作，绘制游戏界面、初始化游戏舞台、加载人物动画、更改地图布局、对数据进行相应处理等功能。分为游戏主函数模块、舞台模块、人物模块、算法模块、流程控制模块和声音控制模块。 游戏主函数模块是指对整个游戏的canvas舞台设置相应监听事件，并且能够精确响应用户各项操作和请求的函数模块。本模块整合了加载游戏资源、选择游戏模式、初始化舞台、播放背景音乐、控制鼠标点击音效、绘制游戏界面、生成人物动画、修改地图布局、切换人物移动算法、判断逃课男是否被围住、记录相关数据并显示游戏结果等内容，并且对与之相关函数模块进行了系统性调用。 舞台模块分三步完成，第一步，先创建一个canvas画布并利用css样式设置好背景图片、颜色和对齐方式等等。第二步，在circlejs文件中对地图中要用到的圆点进行定义，通过数组矩阵的方式在中写出游戏所需要用到的地图数组；在catjs文件中对舞台上加载的人物图片进行定义，使用spritesheet方法读取人物图片生成动画。第三步，在stage中调用createmap和createcat函数来实现舞台初始化和游戏界面的绘制。 逃课男模块分两步完成。首先在catjs文件中定义好人物出现所需加载的图片资源、此类中的各个初始值、获取和更新所处地图位置信息等相关函数。然后在主函数中通过调用createmap函数指定人物在舞台出现的位置以及绘制逃课男出场的动画。 模式选择模块实现的功能是用户关于游戏模式选泽的操作。其中包括确定各模式中所需加载的场景图片、人物动画、地图布局以及移动算法等游戏资源。可以通过对图片添加鼠标点击的监听事件实现。 流程控制模块实现的主要功能是对整个游戏的流程进行控制，同时能够及时响应玩家的请求和操作并进行相关信息处理。调用startgame函数绘制游戏开始界面；调用entergame函数定义游戏进行时的相关功能；调用gameover函数绘制游戏结束界面；借助resetgame函数定义重玩游戏的相关操作。 算法切换模块实现的功能是关于逃课男以何种移动算法摆脱玩家的围捕。在catmove函数中定义了逃课男的移动算法，在经典模式下调用最短路径算法；在基友模式下则调用随机移动算法。同时实现在不同游戏模式下的算法切换。 声音控制模块实现的功能是在用户开始游戏后，播放背景音乐，可以使用户得到放松。当用户点击鼠标进行游戏时，鼠标音效响起，避免了玩家在游戏过程中的单调乏味，从而丰富了游戏的内容，增加了游戏的趣味性和可玩性。主要使用了html5 新添加的audio功能，凸显了html5技术的新特性。3.3程序流程控制本游戏程序按照模块功能可划分为三个各自独立的流程部分。（1） 数据管理模块流程。本模块在游戏开始后自动加载游戏的资源包，然后从中读取人物和地图数据生成游戏界面，同时在游戏过程中响应用户请求并记录用户数据，如图3.2所示。开始结束加载游戏资源读取人物和地图数据绘制游戏界面记录用户数据图3.2 数据管理模块流程图（2） 用户界面操作模块控制流程。游戏开始后会有一个游戏资源的加载过程，而且游戏加载被设置为有定时的，这是为了防止进程挂起给游戏运行带来的不必要的麻烦。系统从游戏资源中读取人物和地图数据被设置为触发式，每次触发都会重新绘制游戏所需的canvas画布，然后在canvas画布上初始化舞台，绘制游戏界面，如图3.3所示。开始结束定时器触发是否再玩一次绘制地图和逃课男进行游戏是否重玩是否成功加载游戏资源绘制游戏主界面选择游戏模式获取人物和舞台数据否显示游戏结果是是否是否图3.3 用户界面操作模块流程图（3） 人物模块移动控制流程。每当逃课男位置发生改变时，系统会自动更新逃课男的位置信息并记录用户的相关数据。与此同时系统会判断逃课男所处位置各个方向的状况，为下一步的移动做准备，如图3.4所示。开始结束根据相应的算法移动逃课男的位置或地图信息是否发生变化系统更新逃课男的位置信息并记录数据否是判断是否有路可走否是图3.4 人物模块移动控制流程3.4本章小结本游戏系统的概要设计主要包括系统总体功能设计、各模块及其对应功能设计和程序流程控制。游戏系统按功能划分为数据管理模块和用户操作管理模块，各模块及其对应功能设计将系统细分为七个小模块，同时逐个对其功能进行分析；程序流程控制使用流程图分别介绍了数据管理流程、用户界面操作流程以及人物移动控制流程。通过紧密结合用户研究和游戏设计，提出把用户目标与需求转换成具体界面设计的解决方案。4 系统详细设计详细设计是一个细化概要设计的过程，它的主要