基于HTML5&JavaScript的射击类游戏设计与实现.doc
《基于HTML5&JavaScript的射击类游戏设计与实现.doc》由会员分享,可在线阅读,更多相关《基于HTML5&JavaScript的射击类游戏设计与实现.doc(24页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、摘要随着HTML5的诞生,一系列的新特性也随之出现,而我认为最为核心的特性莫过于它的跨平台兼容性了。它不单单能够在计算机上运行,而且能够在移动端上运行。除此之外,HTML5中的Canvas元素允许浏览器直接创建以及处理图像,这在让开发人员更加轻松的同时,也使得界面更加好看,让用户拥有了更加良好的体验,大大缩短了用户加载的时间。正因为这种种的优点,让HTML5获得了更多的赞同。基于HTML5的游戏已经成为了一个比较热门的研究课题。本文首先从整体上介绍了HTML5的研究现状,然后叙述出本次课题研究的目的以及意义,分析了本次游戏所用到的相关技术。游戏系统主要通过设置主体物、障碍物、计时器等,实现由主
2、物体射击、障碍物触发边界会加速反弹、主体物躲避障碍物等功能。主要运用了HTML5、CSS、JavaScript等技术,在Windows10的软件环境以及通过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
3、run not only on the computer, but also on the mobile end. In addition, the canvas 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 t
4、he user load time. Because of these advantages, HTML5 has gained more approval. 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 relevan
5、t technologies used in this game. The main function of the game system is to shoot 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
6、 windows 10 software environment and through Adobe Dreamweave development tools.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 子弹
7、功能分析63.2.3 障碍物功能分析73.2.4 计时器功能分析7第四章 游戏功能实现及展示74.1 游戏功能实现84.1.1 游戏背景实现84.1.2 玩家飞机功能实现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 课题研究现状随着经济的快速发展,人们对精神方面的追求日益提高。他们不再只是对笨拙的台式计算机上工作感到满意,反而更加喜欢
8、去使用移动设备。在网页设计以及加载速度等方面都需要更高要求的情况下,以前的网页制作语言HTML再也不能满足人们的要求了。开始需要在移动、跨平台等新特性下研发更新HTML语言。之前的HTML版本基本上是面对静态文本网页,被用作显示文档以及共享数据。而随着动态网站以及应用程序的诞生,网页变得更加灵活,不过这也是有条件的需要通过第三方插件或Adobe Flash来完成。多种的插件能够让网站变得更多彩,并且它们还能够提供人机交互的功能。由于在线商店以及网页游戏越来越受人们的欢迎,Web已经不能再像从前一样仅仅满足于静态文档。如果要将这些功能添加到网页当中就必须通过第三方插件。不仅如此,甚至有时HTML
9、仍然需用到其他的一些技术来使其支撑各种的媒体。这不仅增加了程序人员的压力,还因为人们加载网页的时候内容太多,需要很长的时间,使得用户体验感很差。因此,通过不断的努力,HTML5终于诞生了。HTML5对从前的网页制作技术进行了非常多的改进甚至是创新。首先它添加了非常多的新元素并动态化了一些模块,其次也是比较重要的一点是它添加了新的媒体元素,从而实现无需第三方的插件即可播放多媒体,让开发人员更容易操作。新的Canvas元素不单单能够使浏览器创建以及处理图形,让网页当中的布局更为得体,同时还为程序人员提供了便利,让代码变得更加精简。HTML5不单单是互联网的改革。由于其新增的跨平台性以及其更加优秀的
10、兼容性,互联网成为了更加完善的平台。如今人们通过HTML5所开发的程序不单单能够在计算机上运行,而且同样能够在移动产品上使用,从而使人们更容易、更快速地获取到信息。不论是查看文档的信息,亦或是加载的动画以及视频,它均能够提高页面的加载速度,让用户拥有更加好的体验。HTML5一系列的新功能也让开发人员对于网页游戏的开发变得更加方便,他们再也不用通过第三方的插件支撑游戏的声音效果以及动画,网页游戏因此正式步入到了新时代,无论是国内还是国外的开发人员他们都纷纷开始投入到HTML5游戏的学习以及开发当中。以前网页游戏开发成本非常高的其中一个非常重要的原因便是服务器端它得凭借客户端的支撑,如今HTML5
11、已经不仅仅能够在Web端上操作,而且还能够在移动端上进行操作了。这无疑让开发人员的操作变得更加便利。同时,开发人员只需在原有的基础上了解一下增加的新的HTML5以及JavaScript语言。当然,各种各样的引擎也是开发网页游戏必不可少的。1.2 课题研究的目的与意义按照现在游戏开发的这个趋势,我认为不久的将来便会成为HTML5的时代。人们在刷新HTML5游戏的时候就如同刷新页面一样方便。不仅如此,与HTML5所相关联的技术均是开放给所有人的,这对于开发人员学习以及应用来说非常的方便。它提供了更优秀的动画效果,这也十分迎合了进行游戏设计的开发者们。许多的游戏可以受到用户的追捧除了别出一格的游戏玩
12、法以外,还有就是能够让人印象深刻,漂亮的画风。这也是HTML5游戏比较特别的地方。不过,HTML5它是一种基于浏览器的语言,因此从中开发的游戏也只能是一些比较轻量级的小型游戏。随着移动电子产品的多样化,越来越多的人想要凭借游戏释放工作以及学习带给他们的压力。尽管HTML5不可以制作大型的游戏,不过也因祸得福制作的游戏种类千变万化,丰富了人们的生活。游戏种类的多样化也为游戏的开发商以及供应商提供了非常多的机会。除此之外,HTML5它还提供了比较多的交互应用功能。这一系列的交互应用功能,无论是对于游戏还是对于网站来说,都是质的飞跃。第二章 相关技术介绍2.1 HTML5介绍HTML5,顾名思义它是
13、HTML第五个版本。虽然主流的HTML4.01版本和之前的版本对比起来已经完善了不少。不过由于各种各样移动端应用快速的发展,它已经不能满足开发人员们的要求。语言、语法、UI以及API等等方面都需要更新,为了满足这一系列的要求,HTML5诞生了。早些时候开发人员更倾向于通过HTML制作静态网页,那个时候人们利用网络的交互并不发达,也不是那么急切需要从网络当中了解外界的信息。不过近些年来,随着技术以及经济的快速发展,人们更加倾向于从网上获取信息。作为HTML新一代版本,当然少不了一系列的新特性:(1)增添了能够体现结构语义化的标签,例如、等等。这一系列的标签使网页结构变得更紧凑以及合理,同时它们对
14、开发页面的整洁也同样有很大的帮助;(2)表单相关内容有所增加表单元素、表单属性以及input输入类型。这对于开发人员制作表单相关内容的时候来说更加方便了;(3)新增了视频以及音频标签,这样一来开发人员把视频以及音频标签引入后,网页播放视频以及音频就不再需要像之前一样借助第三方插件了;(4)Canvas以及SVG绘图;(5)地理定位,通过getCurrentPosition()这一个方法从而得到用户的位置;(6)增添了拖放API;(7)Web Worker。开发人员可以于当前JavaScript的主线程当中,通过Worker类加载一个JavaScript文件从而开始一个新线程,起到互不阻塞执行的
15、效果,而且提供主线程以及新线程间数据交换的接口:postMessage以及onmessage;(8)新增的本地存储解决方案Web Storage,不过它不是为了取代cookie而制定的标准,cookie作为HTTP协议的一部分用作处理客户端与服务器的通信依然是必不可少的,session依赖于实现的客户端状态保持。WebStorage它用来解决那些原本不该使用cookie,却不能不去使用cookie的本地存储。2.2 CSS介绍CSS即层叠样式表,它是一种计算机语言,用来表示文件的样式。它不但能够静态修改网页,还能够使用非常多的脚本语言来动态地格式化网页中的元素。开发人员主要通过CSS使页面变得
16、更加美观以及一致,不仅如此,它还能够将内容以及格式分隔开来。在先前CSS并不存在的时候,开发人员如果需要修改HTML元素样式的话则需要给所有的HTML元素逐个去定义样式属性。假如遇到HTML的内容很多的时候,开发人员便需要定义非常多的重复样式属性,而且修改的时候还需要一一修改,花费很多功夫,因此CSS诞生了。CSS影响程序人员构建Web站点,而且可能会一直持续下去。把网页的表示信息从(X)HTML文件当中移除出去,然后将它们统一保留在一个样式表当中。这具有非常多的优点,例如降低了文件的大小、节省了网络的带宽以及让开发人员更加容易维护等等。不仅仅如此,站点的表现信息以及核心内容的分离,可以让站点
17、的开发人员在比较短的时间内对网站进行大工程量的修改。CSS大大精简了开发人员所编写的网页格式代码,除此之外,外部样式表还将被浏览器保存到缓存当中,从而加快网页内容加载的速度,同时也缩减了需要上传代码的数量,这得益于重复设置的格式只能够保存一次的特点。开发人员只需通过修改保存了网站格式的CSS样式表文件便能够调整站点的风格以及特色。当需要修改页面数量非常多的站点时,这个用途便能够大派用场了。开发人员不再需要像从前一样一个个网页的修改了,这大大减轻了开发人员的工作量,提高了他们的工作效率。2.3 JavaScript介绍JavaScript 是如今互联网当中最受欢迎的脚本语言,它可以用在HTML以
18、及Web当中,甚至能够普遍地用在所有的电脑端以及移动端的设备当中。它是具备函数优先、轻量级、解释型或即时编译型的编程语言。尽管它是因为被用作开发Web页面而闻名,不过其实它同时也被用作许多不是浏览器的环境当中。与服务器端的脚本语言并不相同,JavaScript它主要是作为客户端的脚本语言在用户浏览器当中运行,而且不需要服务器的支撑。因此,在早些时候许多的程序人员倾向于使用它来减轻服务器的负担。不过,这同时也带来另一个问题安全性。随着服务器的强大,尽管开发人员倾向于在服务端上运行脚本从而确保安全,然而JavaScript凭借它的跨平台以及易于使用等一系列的优点依然是十分受大众的欢迎。同时,有一些
19、特殊的功能还必须依赖于它才能够在客户端当中进行支持。由于引擎和框架的快速发展,以及它们的事件驱动和异步IO等等一系列的特性,JavaScript也慢慢被用于编写服务器端程序当中。2.4 游戏引擎技术介绍游戏引擎是一款游戏最为核心的东西,它就如同人的心脏,扮演着不可或缺的角色。开发人员可以使用它各种各样的模板,这样一来,他们就不需要从零开始了。现成的人物以及工具让开发人员的开发变得更加轻松,同时也降低了那些想要入门游戏开发人们的门槛。游戏引擎它不是什么玄乎的东西,所有的游戏基本都需要这样的代码来起到控制的作用。经过不断的发展,现在的游戏引擎已经发展成为了由若干个子系统一起构成的复杂系统。而随着游
20、戏种类的不断增加,游戏引擎也是多种多样,一般分为二维引擎和三维引擎,各种各样的引擎可以写出风格各异的游戏,这大大丰富了人们的精神世界。第三章 游戏引擎及功能分析3.1 游戏引擎本次基于HTML5&JavaScript的射击类游戏的实现我选择了CreateJS作为游戏引擎。CreateJS是一款官方开放源代码的HTML5游戏开发引擎,它大多数的应用程序接口都是在Flash原始的应用程序接口的基础上进行模仿以及实现的。CreateJS提供了许多开发的套件和工具。不仅如此,它们还能够直接将Flash动画转换为JS数据包,从而让用户更加容易去使用。特点:(1)Flash的用户能够非常容易地使用;(2)
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 基于 HTML5 JavaScript 射击 游戏 设计 实现
限制150内