丁聪08113681围住逃课男游戏设计与开发文档格式.docx
- 文档编号:6504857
- 上传时间:2023-05-06
- 格式:DOCX
- 页数:75
- 大小:989.42KB
丁聪08113681围住逃课男游戏设计与开发文档格式.docx
《丁聪08113681围住逃课男游戏设计与开发文档格式.docx》由会员分享,可在线阅读,更多相关《丁聪08113681围住逃课男游戏设计与开发文档格式.docx(75页珍藏版)》请在冰点文库上搜索。
设计题目:
围住逃课男游戏设计与开发
专题:
指导教师:
赵莹职称:
讲师
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;
网页版游戏;
ABSTRACT
WiththerapidincreaseofthecomputerperformanceandthecontinuousdevelopmentoftheInternettechnology,usersalsobegintochangewaysofenjoyingtheInternetconstantly.Sotherequirementsfornetworkapplicationareincreasinglyhigh.Moreandmoreapplicationcanbedirectlyusedinthewayofopeningthebrowser,userdataarestoredintheclouds,andthereforethiswillnotonlyincreasethesafetybutalsobecontinentforuserstosharedata.Atthesametimeofvariousapplicationcontinuouslytendstobemorewebified,anewstandardoftechnologyemergesasthetimesrequire,whichisHTML5.HTML5isanewgenerationofInternetstandardsdevelopmentlanguage,nowadays,asoneofthehottestwebdevelopmenttechnology,byvirtueofitspowerfulfeaturesandcrossplatformadvantages,itwilltakethewebintoanewapplicationplatform,onwhichtheimage,theanimation,theaudio,thevideoandhuman-computerinteractioninthisplatformwillbemoreperfectlystandardized.
Firstofall,thepaperstartswiththecurrentsituationanddevelopmenttrendofHTML5technologyathomeandabroad,towhichIcarryontheoverallanalysis,andthendiscussesthedevelopmentofHTML5,JavaScriptandCSSanditsrelateddevelopmenttechnologies,newHTML5featuresanditsapplicationareintroduced.ThisdesignbasedondevelopedabasedonHTML5webversionofthe“Surroundingtruantstudents”gameapplication,thegameinterfacesimple,simpleoperation,smoothrunning,perfectfunction,fulloffun.UsingCanvasnewlyaddedHTML5graphicsfeaturetocreatethegamestage,anduseimgandaudiotagstocompletethegamebackgroundandsoundsettings.Thecharacters,mapmodule,arithmeticmoduleandprocesscontrolmoduleofthegamearemadebyusingJavaScriptcodingtoimprovethecompatibilityandpracticabilityoftheprogram.GamelayoutisachievedbyusingCSSstyle,simpleandpowerful.Therearetwogamemodelsinthegame,theclassicandthefriendsgamemode,eachmodecorrespondingtodifferentnumberandimageofthecharacteranimation,usingmobilealgorithmtorealizethecontrolofgamedifficulty.Ofcourse,thecharacterlocationandmaplayoutandotherrelateddataarestoredandmanagedinthewholegameprogress,toensuretheconsistencyandreal-timeofgamedata.Thedesignanddevelopmentofthegameisareferencetoaverypopulargameon“weixin”platformin2014,named“surroundedneuroticcats”,funandstrongbutalsothememoryoftheclassic.
Keywords:
HTML5;
Canvas;
JavaScript;
CSS;
Webpagegames;
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)触控科技推出GameCreatorOnline:
2014年9月,为了方便缺乏HTML5技术却对此感兴趣的人实现自己的想法,触控科技提供了在线HTML5模板,对资源进行整合并上线发布,构建了全民开发HTML5的蓝图。
(3)万维网联盟正式宣布HTML5标准定稿完成:
2014年10月29日,经过长达8年的艰辛努力,万维网联盟激动地宣布,HTML5标准规范终于制定完成并已公开发布。
进一步推动了HTML5游戏的发展。
(4)DataEye发布D—HAPHTML5游戏统计分析平台:
2014年11月5日,DataEye正式发布了D—HAPHTML5游戏统计分析平台,凭借其强大且专业的数据统计和分析技术为终端运营的数据保驾护航,给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.1HTML5标准简述及意义
HTML5的制定是为了取代1999年所制定的HTML4.01和XHTML1标准成为新的HTML标准,目前仍处于发展阶段,但是大部分主流浏览器已经较好的支持HTML5技术了,其中最完美的当属Chrome浏览器。
HTML5技术主要有两大特点,首先,增强了Web页面的表现性能;
其次,添加了本地数据库等Web应用的功能。
HTML5不但继承了上一个版本全部功能和特性而且还增加了部分新的语法特性和功能,其中就包括<
canvas>
、<
audio>
和<
video>
标签,同时还集成了矢量图形实现方式(SVG)的相关内容。
这些元素的添加为在网页中的展现和插入更多的多媒体和图片内容提供了便利。
随着互联网的飞速发展,传统的Web界面技术早已不能满足人们对于交互特性日益增长的需求,Web标准是网页设计与开发的一个趋势。
而HTML5是近十年Web开发标准中最大的飞跃。
与传统Html4.0相比HTML5新增了以下这些功能:
(1)绘图(Canvas):
可以动态生成二维图形、图表、图像以及动画,并进行展示。
实现图片甚至视频的像素级处理。
(2)音频和视频支持(AudioandVideo):
HTML5标准为这两个元素提供了完整、通用且可脚本化控制的API,因而开发人员不必使用插件就能播放音频和视频。
(3)地理定位(Geolocation):
通过在Web应用程序中共享其地理位置信息,用户可以享受与位置感知相关的服务,例如全球定位功能。
(4)实时和跨源通讯(Communication):
构建实时和跨源通信的两个重要模块:
XMLHttpRequestLevel2与跨文档消息通信,严格限制运行在同一浏览器中的框架、标签页、窗口间的通信,增强了安全性。
(5)通讯(WebSockets):
通过定义一个全双工通信信道,让仅用Web上的一个Socket实现通信成为可能。
WebSocket不仅加强了常规HTTP通信的增量,对于实时的和事件驱动的Web应用程序而言,它还代表着一次卓越的进步。
(6)后台处理(WebWorkers):
HTML5WebWorkers可以为Web应用程序提供后台处理功能。
由于它对多线程有非常好的支持性,所以使用了HTML5的JavaScript应用程序可以充分利用多核CPU带来的优势。
(7)离线应用(Offline):
HTML5的离线应用缓存使得在无网络连接状态下运行应用程序成为可能。
适合阅读和写电子邮件、编辑文档等等,避免了加载应用程序时所需的常规网络请求,从缓存中加载资源可以节省带宽。
(8)数据存储(WebStorage):
开发者可以通过将需要跨源请求重复访问的数据直接存储在客户端浏览器中,以减少网络流量。
同时可以在关闭浏览器很久后再次打开时恢复数据[7-9]。
1.4.2JavaScript标准简述及意义
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就可以解释执行,从而真正实现“writeonce,runeverywhere”。
综上所述,JavaScript是一种基于对象(Object-Based)和事件驱动(EventDriven)并具有安全性能的脚本语言。
通过把JavaScript嵌入在HTML页面中,可以赋予网页动态效果;
采JavaScript开发客户端的应用程序,可以实现与客户的交互[10-12]。
1.4.3CSS标准简述及意义
CSS(CascadingStyleSheet)是指层叠样式表,用于控制网页内容的外观并允许将样式信息和网页内容分离的一种标记语言。
引入它的目的是让HTML语言更好地适应页面的美工设计。
它在HTML语言的基础上,提供了丰富的格式化功能,比如颜色、背景、字体、和整体排版等,同时网页设计者可以针对各种可视化浏览器来设置不同的样式风格。
随着CSS的广泛应用,CSS技术越来越成熟,CSS的发展经历了CSS1、CSS2和CSS3这3个循序渐进的标准:
(1)CSS1.0:
1996年12月,W3C(万维网联盟)发布了CSS1规范,该规范主要定义了网页的一些基本属性,例如颜色、字体、行间距和字间距等。
(2)CSS2.0:
1998年5月,CSS2规范发布。
CSS2规范是基于CSS1设计的,其中包含了CSS1所有的功能和特征,并以此为基础添加了一些高级的功能,如定位和浮动等,另外,还添加了一些高级的选择器,如子选择器、相邻选择器和通用选择器等。
(3)CSS3.0:
2001年5月,W3C完成了CSS3的工作草案。
该草案完成了CSS3的发展路线图的制定,详细列出了所有模块,并计划在未来逐步统一规范。
CSS3标准被分为若干个相互独立的模块,这将有助于理清
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 丁聪 08113681 围住 逃课 游戏 设计 开发