数字媒体技术基于HTML5&JavaScript的射击类游戏设计与实现.doc
《数字媒体技术基于HTML5&JavaScript的射击类游戏设计与实现.doc》由会员分享,可在线阅读,更多相关《数字媒体技术基于HTML5&JavaScript的射击类游戏设计与实现.doc(35页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、广东东软学院本科毕业设计(论文)本科毕业设计(论文)基于HTML5&JavaScript的射击类游戏设计与实现Design and Implementation of Shooting Game Based on HTML5 & JavaScript 院 (系)计算机学院专 业数字媒体技术班 级数字媒体技术一班学 号16210320127学生姓名黄耀辉指导教师李梁奇提交日期2020年4月23日毕业设计(论文)原创性声明本人郑重声明:所呈交的毕业设计(论文),是本人在指导老师的指导下,独立进行的设计(研究)工作及取得的成果,论文中引用他人的文献、数据、图件、资料均已明确标注出,论文中的结论和结果
2、为本人独立完成,不包含他人已经发表或撰写的作品及成果。对本文的研究作出贡献的个人和集体,均已在论文中作了明确的说明。本人完全意识到本声明的法律结果由本人承担。毕业论文作者(签字): 签字日期: 年 月 日成绩评定 成绩项论文成绩(百分制)折合比例实得成绩(折合分)指导教师成绩30%评阅教师成绩20%答辩成绩50%总评成绩 注:毕业设计(论文)成绩按百分制评定。答辩成绩不及格的(评分低于60分的),则该毕业设计(论文)总评成绩为答辩成绩。内容摘要随着HTML5的诞生,一系列的新特性也随之出现,而我认为最为核心的特性莫过于它的跨平台兼容性了。它不单单能够在计算机上运行,而且能够在移动端上运行。除此
3、之外,HTML5中的Canvas元素允许浏览器直接创建以及处理图像,这在让开发人员更加轻松的同时,也使得界面更加好看,让用户拥有了更加良好的体验,大大缩短了用户加载的时间。正因为这种种的优点,让HTML5获得了更多的赞同。基于HTML5的游戏已经成为了一个比较热门的研究课题。本文首先从整体上介绍了HTML5的研究现状,然后叙述出本次课题研究的目的以及意义,分析了本次游戏所用到的相关技术。游戏系统主要通过设置主体物、障碍物、计时器等,实现由主物体射击、障碍物触发边界会加速反弹、主体物躲避障碍物等功能。主要运用了HTML5、CSS、JavaScript等技术,在Windows10的软件环境以及通过
4、Adobe Dreamweave开发工具下进行。关键词: HTML5 CSS JavaScript Adobe Dreamweave 射击类游戏AbstractWith the birth of HTML5, a series of new features have emerged, and I think the most core feature is its cross platform compatibility. It can run not only on the computer, but also on the mobile end. In addition, the can
5、vas element in HTML5 allows the browser to directly create and process images, which makes the developers easier, but also makes the interface more beautiful, makes the user have a better experience, and greatly shortens the user load time. Because of these advantages, HTML5 has gained more approval
6、. The game based on HTML5 has become a hot research topic.The article first introduces the current research status of HTML5 as a whole, then describes the purpose and significance of this research, and analyzes the relevant technologies used in this game. The main function of the game system is to s
7、hoot by the main object, trigger the boundary of the obstacle, accelerate the rebound and avoid the obstacle by setting the main object, obstacle and timer. Mainly used HTML5, CSS, JavaScript and other technologies, in the windows 10 software environment and through Adobe Dreamweave development tool
8、s.Key words: HTML5 CSS JavaScript Adobe Dreamweave Shooting games目录第一章 绪论11.1 课题研究现状11.2 课题研究的目的与意义2第二章 相关技术介绍32.1 HTML5介绍32.2 CSS介绍32.3 JavaScript介绍42.4 游戏引擎技术介绍4第三章 游戏引擎及功能分析63.1 游戏引擎63.2 游戏功能分析63.2.1 玩家操作规则功能分析63.2.2 子弹功能分析63.2.3 障碍物功能分析73.2.4 计时器功能分析7第四章 游戏功能实现及展示74.1 游戏功能实现84.1.1 游戏背景实现84.1.2 玩
9、家飞机功能实现94.1.3 玩家子弹类实现94.1.4 障碍物功能实现104.1.5 计时器功能实现124.1.6 游戏结果判定124.2 游戏功能展示13第五章 游戏实际测试效果155.1 UI界面功能测试155.2 游戏内功能测试15结论15参 考 文 献18致谢19广东东软学院本科毕业设计(论文)第一章 绪论1.1 课题研究现状随着经济的快速发展,人们对精神方面的追求日益提高。他们不再只是对笨拙的台式计算机上工作感到满意,反而更加喜欢去使用移动设备。在网页设计以及加载速度等方面都需要更高要求的情况下,以前的网页制作语言HTML再也不能满足人们的要求了。开始需要在移动、跨平台等新特性下研发
10、更新HTML语言。之前的HTML版本基本上是面对静态文本网页,被用作显示文档以及共享数据。而随着动态网站以及应用程序的诞生,网页变得更加灵活,不过这也是有条件的需要通过第三方插件或Adobe Flash来完成。多种的插件能够让网站变得更多彩,并且它们还能够提供人机交互的功能。由于在线商店以及网页游戏越来越受人们的欢迎,Web已经不能再像从前一样仅仅满足于静态文档。如果要将这些功能添加到网页当中就必须通过第三方插件。不仅如此,甚至有时HTML仍然需用到其他的一些技术来使其支撑各种的媒体。这不仅增加了程序人员的压力,还因为人们加载网页的时候内容太多,需要很长的时间,使得用户体验感很差。因此,通过不
11、断的努力,HTML5终于诞生了。HTML5对从前的网页制作技术进行了非常多的改进甚至是创新。首先它添加了非常多的新元素并动态化了一些模块,其次也是比较重要的一点是它添加了新的媒体元素,从而实现无需第三方的插件即可播放多媒体,让开发人员更容易操作。新的Canvas元素不单单能够使浏览器创建以及处理图形,让网页当中的布局更为得体,同时还为程序人员提供了便利,让代码变得更加精简。HTML5不单单是互联网的改革。由于其新增的跨平台性以及其更加优秀的兼容性,互联网成为了更加完善的平台。如今人们通过HTML5所开发的程序不单单能够在计算机上运行,而且同样能够在移动产品上使用,从而使人们更容易、更快速地获取
12、到信息。不论是查看文档的信息,亦或是加载的动画以及视频,它均能够提高页面的加载速度,让用户拥有更加好的体验。HTML5一系列的新功能也让开发人员对于网页游戏的开发变得更加方便,他们再也不用通过第三方的插件支撑游戏的声音效果以及动画,网页游戏因此正式步入到了新时代,无论是国内还是国外的开发人员他们都纷纷开始投入到HTML5游戏的学习以及开发当中。以前网页游戏开发成本非常高的其中一个非常重要的原因便是服务器端它得凭借客户端的支撑,如今HTML5已经不仅仅能够在Web端上操作,而且还能够在移动端上进行操作了。这无疑让开发人员的操作变得更加便利。同时,开发人员只需在原有的基础上了解一下增加的新的HTM
13、L5以及JavaScript语言。当然,各种各样的引擎也是开发网页游戏必不可少的。1.2 课题研究的目的与意义按照现在游戏开发的这个趋势,我认为不久的将来便会成为HTML5的时代。人们在刷新HTML5游戏的时候就如同刷新页面一样方便。不仅如此,与HTML5所相关联的技术均是开放给所有人的,这对于开发人员学习以及应用来说非常的方便。它提供了更优秀的动画效果,这也十分迎合了进行游戏设计的开发者们。许多的游戏可以受到用户的追捧除了别出一格的游戏玩法以外,还有就是能够让人印象深刻,漂亮的画风。这也是HTML5游戏比较特别的地方。不过,HTML5它是一种基于浏览器的语言,因此从中开发的游戏也只能是一些比
14、较轻量级的小型游戏。随着移动电子产品的多样化,越来越多的人想要凭借游戏释放工作以及学习带给他们的压力。尽管HTML5不可以制作大型的游戏,不过也因祸得福制作的游戏种类千变万化,丰富了人们的生活。游戏种类的多样化也为游戏的开发商以及供应商提供了非常多的机会。除此之外,HTML5它还提供了比较多的交互应用功能。这一系列的交互应用功能,无论是对于游戏还是对于网站来说,都是质的飞跃。第二章 相关技术介绍2.1 HTML5介绍HTML5,顾名思义它是HTML第五个版本。虽然主流的HTML4.01版本和之前的版本对比起来已经完善了不少。不过由于各种各样移动端应用快速的发展,它已经不能满足开发人员们的要求。
15、语言、语法、UI以及API等等方面都需要更新,为了满足这一系列的要求,HTML5诞生了。早些时候开发人员更倾向于通过HTML制作静态网页,那个时候人们利用网络的交互并不发达,也不是那么急切需要从网络当中了解外界的信息。不过近些年来,随着技术以及经济的快速发展,人们更加倾向于从网上获取信息。作为HTML新一代版本,当然少不了一系列的新特性:(1)增添了能够体现结构语义化的标签,例如、等等。这一系列的标签使网页结构变得更紧凑以及合理,同时它们对开发页面的整洁也同样有很大的帮助;(2)表单相关内容有所增加表单元素、表单属性以及input输入类型。这对于开发人员制作表单相关内容的时候来说更加方便了;(
16、3)新增了视频以及音频标签,这样一来开发人员把视频以及音频标签引入后,网页播放视频以及音频就不再需要像之前一样借助第三方插件了;(4)Canvas以及SVG绘图;(5)地理定位,通过getCurrentPosition()这一个方法从而得到用户的位置;(6)增添了拖放API;(7)Web Worker。开发人员可以于当前JavaScript的主线程当中,通过Worker类加载一个JavaScript文件从而开始一个新线程,起到互不阻塞执行的效果,而且提供主线程以及新线程间数据交换的接口:postMessage以及onmessage;(8)新增的本地存储解决方案Web Storage,不过它不是
17、为了取代cookie而制定的标准,cookie作为HTTP协议的一部分用作处理客户端与服务器的通信依然是必不可少的,session依赖于实现的客户端状态保持。WebStorage它用来解决那些原本不该使用cookie,却不能不去使用cookie的本地存储。2.2 CSS介绍CSS即层叠样式表,它是一种计算机语言,用来表示文件的样式。它不但能够静态修改网页,还能够使用非常多的脚本语言来动态地格式化网页中的元素。开发人员主要通过CSS使页面变得更加美观以及一致,不仅如此,它还能够将内容以及格式分隔开来。在先前CSS并不存在的时候,开发人员如果需要修改HTML元素样式的话则需要给所有的HTML元素逐
18、个去定义样式属性。假如遇到HTML的内容很多的时候,开发人员便需要定义非常多的重复样式属性,而且修改的时候还需要一一修改,花费很多功夫,因此CSS诞生了。CSS影响程序人员构建Web站点,而且可能会一直持续下去。把网页的表示信息从(X)HTML文件当中移除出去,然后将它们统一保留在一个样式表当中。这具有非常多的优点,例如降低了文件的大小、节省了网络的带宽以及让开发人员更加容易维护等等。不仅仅如此,站点的表现信息以及核心内容的分离,可以让站点的开发人员在比较短的时间内对网站进行大工程量的修改。CSS大大精简了开发人员所编写的网页格式代码,除此之外,外部样式表还将被浏览器保存到缓存当中,从而加快网
19、页内容加载的速度,同时也缩减了需要上传代码的数量,这得益于重复设置的格式只能够保存一次的特点。开发人员只需通过修改保存了网站格式的CSS样式表文件便能够调整站点的风格以及特色。当需要修改页面数量非常多的站点时,这个用途便能够大派用场了。开发人员不再需要像从前一样一个个网页的修改了,这大大减轻了开发人员的工作量,提高了他们的工作效率。2.3 JavaScript介绍JavaScript 是如今互联网当中最受欢迎的脚本语言,它可以用在HTML以及Web当中,甚至能够普遍地用在所有的电脑端以及移动端的设备当中。它是具备函数优先、轻量级、解释型或即时编译型的编程语言。尽管它是因为被用作开发Web页面而
20、闻名,不过其实它同时也被用作许多不是浏览器的环境当中。与服务器端的脚本语言并不相同,JavaScript它主要是作为客户端的脚本语言在用户浏览器当中运行,而且不需要服务器的支撑。因此,在早些时候许多的程序人员倾向于使用它来减轻服务器的负担。不过,这同时也带来另一个问题安全性。随着服务器的强大,尽管开发人员倾向于在服务端上运行脚本从而确保安全,然而JavaScript凭借它的跨平台以及易于使用等一系列的优点依然是十分受大众的欢迎。同时,有一些特殊的功能还必须依赖于它才能够在客户端当中进行支持。由于引擎和框架的快速发展,以及它们的事件驱动和异步IO等等一系列的特性,JavaScript也慢慢被用于
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 数字媒体技术 基于HTML5&JavaScript的射击类游戏设计与实现 数字 媒体 技术 基于 HTML5 JavaScript 射击 游戏 设计 实现
限制150内