毕业论文-基于HTML5的消除类游戏
- 格式:doc
- 大小:633.00 KB
- 文档页数:22
本科学生毕业论文(设计)题目(中文):基于HTML5的智力游戏设计(英文):Design of Intelligent Game Based on HTML5 姓名 xxx学号xxx院(系)电子与信息工程学院专业、年级电子信息工程指导教师 xxx 讲师2017年 5月10日xxx科技学院本科毕业论文(设计)诚信声明本人郑重声明:所呈交的本科毕业论文(设计),是本人在指导老师的指导下,独立进行研究工作所取得的成果,成果不存在知识产权争议,除文中已经注明引用的内容外,本论文不含任何其他个人或集体已经发表或撰写过的作品成果。
对本文的研究做出重要贡献的个人和集体均已在文中以明确方式标明。
本人完全意识到本声明的法律结果由本人承担。
本科毕业论文(设计)作者签名:二〇一七年五月十日毕业论文(设计)任务书课题名称基于HTML5的智力游戏设计姓名xxx学号xxx院系电子与信息工程学院专业电子信息工程指导教师xxx 讲师2015年10月20日2、毕业论文(设计)内容要求:该课题需要设计和实现一个在网页上运行的智力游戏,需要使JavaScript 语言和Webstorm或其他前端开发工具,要求所设计的游戏画面良好,运行流畅。
(1)游戏介绍:①游戏为益智类游戏,越到后面越难越有挑战;②游戏玩法:使用键盘上、下、左、右键控制所有方块往这个方向移动。
③游戏规则:当所有方块往一个方向移动时,数字相同的方块可以相加变成一个方块,当拼出一个方块为2048,即为胜利;当16宫被占满且所有相邻方块不能再相加时,游戏结束;④游戏界面:游戏界面有新游戏,记录当前分数,游戏介绍,记录历史最高分;⑤按照游戏的系统实现方法,做出系统分析、系统设计、系统实施。
(2)主要工作量和工作流程如下:①进行系统的需求分析;②开始搭建开发平台和环境;③根据需求分析和设计图来进行代码的编写;④对功能模块进行测试;⑤对项目整体进行测试;⑥将项目打包上传至网站;⑦完成毕业论文撰写,论文格式严格按照xxx科技学院本科毕业设计(论文)规范撰写,字数不少于10000字;⑧准备答辩。
神奇消消乐(HTML小游戏使用JavaScript开发)神奇消消乐是一款基于HTML和JavaScript开发的小游戏,它的规则简单而有趣,容易上手并且适合各个年龄段的玩家。
本文将详细介绍神奇消消乐的开发过程和主要功能,以及如何运用HTML和JavaScript技术来实现这款小游戏。
1. 游戏概述神奇消消乐是一款以消除连连看为基础的HTML小游戏。
玩家需要在有限的时间内消除游戏区域中的所有方块,通过选择两个相同的方块使它们消失并得分。
随着游戏的进行,难度会逐渐增加,玩家需要更多的注意力和反应速度来完成挑战。
2. 游戏界面设计为了使游戏界面看起来美观且易于操作,我们采用了简洁而直观的设计风格。
游戏区域呈正方形形状,由多个小方块组成。
在游戏的开始界面,我们以醒目的字体展示游戏的名称,并提供开始按钮供玩家点击。
游戏进行中,玩家可以看到剩余时间、得分等信息,以及当前可消除的方块。
3. 游戏功能实现为了实现神奇消消乐的主要功能,我们使用了JavaScript编程语言。
以下是游戏的主要功能实现方式:1) 创建游戏区域和方块:通过JavaScript函数和DOM操作,我们可以在HTML页面中动态地创建游戏区域,并使用随机数来生成不同类型的方块。
2) 方块点击事件:通过添加方块的点击事件监听器,玩家可以选择两个相同的方块进行消除。
当方块被点击时,我们可以通过判断其类型来执行相应的操作,如消除、得分增加等。
3) 连线检测:为了判断两个方块是否可以消除,我们需要进行连线检测。
通过遍历游戏区域并比较方块的类型和位置,我们可以确定是否存在连线路径,并在玩家消除方块时进行相应的提示或奖励。
4) 时间限制和计时器:为了增加游戏的挑战性,我们设置了时间限制,并在页面上显示倒计时器。
通过JavaScript的计时器函数,我们可以每秒更新时间并检查游戏是否结束。
5) 得分计算和排名系统:在游戏结束时,我们将根据玩家的得分进行排名,并在页面上展示排名列表。
Computer Era No.320190引言随着移动互联的迅猛发展,FLASH 在移动设备中具有一定的局限性,而HTML5和JavaScript 拥有跨平台、不需要安装以及不需要更新等特点,只要用智能手机、平板或台式电脑的网页浏览器就可以进行操作[1]。
当代学生爱玩手机,对富有激情和挑战的项目具有强烈的使用动机。
如果在学习中引入闯关式教学考核项目,将课程知识融入到闯关式的游戏场景中,既考查了学生的学习能力,又契合当代学生的心理特点。
学生在学习中体验到游戏的互动性、趣味性、竞争性和即时反馈等特性,必定可以提升在线学习的乐趣。
本文提出了利用HTML5和JavaScript 网页技术来开发闯关游戏。
它主要利用HTML5新增的拖放功能和使用JavaScript 控制游戏运作。
1HTML5和JavaScript 简介HTML5是目前HTML 最新的修改版本,2014年10月由万维网联盟(W3C )完成标准制定。
设计HTML5的目标是为了在移动设备上支持多媒体。
HTML5的优势主要表现以下方面[2]。
⑴跨平台性。
不需要考虑兼容性和不同平台的多个版本的发布,为开发者节省了巨大的开发投入,也是未来大家首先的开发方式。
⑵标准化。
这个也是跨平台的基础,因为未来所有浏览器、所有设备均遵循这一标准。
标准化是得以广泛使用的基础,就像TCP/IP 协议,因为其标准化,才得以让网络世界互通互联。
⑶易学易用。
人人都应该会HTML5,这是可以不需要任何特定开发环境的,只要用记事本,电脑上装有浏览器就可以开始,效果可见。
第四,易传播,DOI:10.16644/33-1094/tp.2019.03.013基于HTML5的闯关游戏式课程教学考核的设计和实现*徐晓(无锡机电高等职业技术学校,江苏无锡214028)摘要:随着移动互联网的发展,网页中的功能效果将通过HTML5和JavaScript 来实现。
为了激发学生的学习动机,文章提出了利用HTML5和JavaScript 网页技术来实现闯关游戏式课程教学考核。
HTML5课程设计题目:基于html5的贪吃蛇游戏学院:__商学院___________专业:__ 信息管理与信息系统**:**指导教师:田更2015年6月10日摘要随着互联网技术的不断发展和计算机性能的不断提升,用户享受互联网的方式也开始不断的变化,越来越多的应用可以直接以浏览器打开的方式使用,数据则是存储在云端,更加的安全可靠,方便用户共享数据。
在各种应用不断的趋于更加网络话的同时,一种新的技术标准也随之产生,那就是HTML5(HTML是一种标记语言也是一种标准,互联网开发居于此)。
HTML5是近十年来Web(互联网)标准最巨大的飞跃,和以前的版本不同,HTML5并非仅仅用来表示Web内容,它的使命是将Web带入一个成熟的应用平台,在这个平台上,视频、音频、图象和动画,以及同电脑的交互都被标准化。
也就是说HTML5是通过开放的技术和标准来实现一个无插件模式的富客户端,这个客户端可以在移动终端、PC(个人计算机)或者其他可以有网络的地方轻松的运行。
所以此时研究HTML5,并且大胆的实践有着重要的意义。
课题内容是使用HTML5技术基于Web的环境来制作一个网络版的“坦克大战”游戏应用,该游戏使用了HTML5中的Canvas(画布)、WebSocket(HTML5中最新使用的一种网络连接协议,用于实时通讯)、Audio(HTML5中控制声音的技术)等最新的技术。
目前HTML5标准尚未成熟,很多地方仍在变动,API(应用程序接口)仍不是很稳定,所以还无法真正的完全商用或者全部普及开,但这并不会影响我们来研究它。
服务器端采用的Nodejs(一种Javascript程序语言框架,可以在服务器端运行Javascript语言)这种新型的框架来开发,Nodejs使用Javascript语言来开发,使整个应用从客户端到服务器端编程都是使用Javascript,大大的减少学习成本和开发成本,并且Nodejs性能强大,有很大的研究价值。
一个基于HTML,Javascript的消除游戏消除游戏-消消乐一个基于HTML,Javascript的消除游戏。
使用了createjs框架。
-> view online demoscreenshot:Example 1:Example “hint()”:Example [col&row]:{col:20, //set 20 columnsrow:16, //set 16 rows}usage:<div class="game-container"><canvas id="js-game" width="300" height="250" class="gamecanvas"></canvas></div><script src="res/zepto.min.1.1.6.js"></script><script src="res/easeljs-0.8.2.min.js"></script><script src="res/tweenjs-0.6.2.min.js"></script><script src="res/hammer.min.js"></script><script src="xiaoxiaole.js"></script><script>var xxl = new XiaoXiaoLe("js-game", "img" ,{col:6, //6 columnsrow:5, //5 rows},function (score) { //score changed calback$("#js-score-num").text(score)},function (score) { //game end calbackalert("gameover!!,You get " + score + " points");},function (time) {$("#js-time-down").text(time)});xxl.start();// hintxxl.hint();</script>index.html:<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>XiaoXiaoLe</title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><link rel="stylesheet" href="res/index.css" /></head><body><div class="main"><div class="score"><button id="js-start">start</button><button id="js-hint">hint</button><button id="js-chint">close hint</button><div class="score-num">score:<span id="js-score-num">0</span></div><div class="score-time">time left:<span id="js-time-down">00:00</span></div></div><div class="game-container"><canvas id="js-game" width="300" height="250" class="gamecanvas"></canvas></div></div><script src="res/zepto.min.1.1.6.js"></script><script src="res/easeljs-0.8.2.min.js"></script><script src="res/tweenjs-0.6.2.min.js"></script><script src="res/hammer.min.js"></script><script src="xiaoxiaole.js"></script><script type="text/javascript">var xxl = new XiaoXiaoLe("js-game", "img",{col:6, //6 columnsrow:5, //5 rows},function (score) { //score changed calback$("#js-score-num").text(score)}, function (score) { //game end calbackalert("gameover!!,You get " + score + " points");}, function (time) {$("#js-time-down").text(time)});$("#js-start").click(function () {xxl.start();})$("#js-hint").click(function () {xxl.hint();})$("#js-chint").click(function () { xxl.closeHint();})</script></body></html>。
基于HTML5的“闯关游戏式”移动学习平台的开发和设计陈宏扬(广东轻工职业技术学院,广东广州510300)[摘要]慕课平台建设在我国已有一定规模,但慕课学习平台难以长期吸引那些没有学习兴趣和学习自主性的学生。
随着互联网教育的快速发展,教育游戏越来越热,游戏化学习思维也越来也得到社会认可。
如果能够在慕课平台融入游戏化学习功能,让学生在学习中体验到游戏的互动性、趣味性、竞争性及即时反馈等特性,必然能够提升在线学习的乐趣,激发学生学习动机。
为了适应当代大学生富有激情和挑战的特点,提出了基于HTML5的“闯关游戏式”移动学习平台的开发,以期能够提升慕课平台的学习效果。
[关键词]移动学习;教育游戏;游戏化学习;闯关游戏式The Development and Design of the Passing Game Mobile Learning PlatformBased on HTML5CHEN Hongyang(Guangdong Industry Polytechnic,Guangzhou 510300,China)Abstract:MOOC platform construction has a certain scale in China, but it is difficult to appeal to the students who have no interest and learning autonomy in learning. With the rapid development of internet education, educational games become more and more hot, learning thinking based on game is also increasingly recognized by society. If game learning function can be integrated into MOOC platform, students can experience the game of interactive, interesting, competitive and instant feedback and other characteristics in the study, then it will be able to enhance the fun of online learning, to stimulate students to learn motivation. In order to adapt to the characteristics of passion and challenge of college students, the paper putted forward the development of the "HTML5" mobile learning platform, in order to improve the learning effect.Key words:mobile learning; educational game; Game based learning;Passing game随着教育信息化改革的不断深入以及“互联网+”时代的来临,出现了大量的在线自主学习平台,包括MOOC、SPOC等,相较于传统教学模式,这些平台更加强调学生学习的积极主动性和自觉性,如果缺乏学习动机,在线学习就难以持续[1]。
基于s3c2440平台的消除类游戏的设计与实现摘要进入21世纪以来,我国经济迅速发展,人民生活水平不断提高。
随着国民生活水平的不断提高,物质上的提高已经不能满足人们的需求,而精神上的需求已越来越受到人们的关注。
研究表明保持愉悦的心情能更高效率的完成自己的工作,而且愉悦的心情对于身体的健康也是有帮助的。
那么怎样才能保持愉悦的心情呢?影响愉悦的心情的因素有很大一部分是由于工作的疲劳导致的,一款有趣且玩法新颖的游戏能够很大程度地解决这个问题。
在工作之余我们可以通过游戏将自己在工作中的思维暂时转换一下,放松在工作中紧绷的大脑。
消除类游戏在各类小游戏中是非常受欢迎的一款老少皆宜的游戏,在各大游戏门户网站上都有类似游戏的下载,例如:4399,7k7k以这两个网站游戏为典型,代表的是网络版本消除类游戏,在IOS和安卓商城,两大平台上也有大量此类APP,而且下载量巨大,由此看出这是一款适应当今潮流的一款游戏。
这款游戏不需要复杂的操作流程只需动动手指,而且界面风格可以随着不同群体的喜好而改变。
该游戏的计时计分系统提供了很强的竞争排名方式,在游戏过程中各种技能的获取以及技能释放所获得的分数奖励也大大提高了游戏的趣味性。
本次设计的消除类游戏是基于s3c2440平台的一款游戏,首先该游戏工程的编码以及调试是在Linux系统下的QT中进行的,然后再进行交叉编译,将编译后的可执行文件烧写到arm板上运行。
关键词:消除类游戏 Arm Linux QTAbstractThe new era of 21st century has witnessed rapid development of Chinese economy and increasing improvement of people’s living standard.However,nowadays people are no longer satisfied with the material needs.In effect they increasingly concern about the spiritual needs.Researches show that the work can be efficiently accomplished when people keep a cheerful heart. Moreover, keeping a cheerful heart is beneficial to people’s health. But how can we keep a pleasant heart? It is almost work fatigue that should be responsible for depression in mind. But this problem can be eased to a large extent by a kind of entertaining and novel game. After work we can refresh our minds and relax ourselves by being involved in games.Elimination of games which can be downloaded at many game portals have found their increasing popularity in the young and the elderly. For instance, 4399 and 7k7k are classic tile-matching video games of network version. We can find abundant APPs of elimination of games which have large downloads in two platforms, the IOS and the Android Market. So we can come to the conclusion that this kind of games can meet the current trend.The advantages of the games are as follows. First, these games require no complex operation process but the movement of fingers. Second, the interface style can be transformed according to the favor of users. Finally, these games create a system of reckoning by time and score and give the game players rewards acquired by getting and releasing abilities. The competition and reward greatly increase the enjoyment of these games.The design of the elimination of games is based on a game in a platform of s3c2440. Furthermore, the code and debug are completed in QT under the Linux system. Finally, the cross compiled and executable file is programmed to ARM board for operation.Keywords:Elimination of games,ARM,Linux,QT研究的背景与意义进入21世纪以来,随着科技日新月异的发展,计算机、微型智能机以及互联网也得到了快速发展和迅速普及,微型掌上智能机已经成为人们日常生活中不可缺少的一部分,所以微型化、智能化的嵌入式产品将会成为信息化产品的发展趋势。
基于HTML5的海底鱼群大作战游戏设计与实现作者:杜佳玲徐建华杜雨航张成来源:《电脑知识与技术》2021年第31期摘要:网页上的游戏常采用Flash技术实现,但随着HTML5技术的发展,越来越多的浏览器不再支持Flash。
针对当下Flash不再更新的问题,设计并实现了HTML5的海底鱼群大作战游戏,采用HTML5、JavaScript、Canvas等前端相关技术进行设计和实现,使该游戏不用依靠Flash便能在网页上实现其动画效果。
该文首先结合HTML5的相关发展背景,提出该课题研究背景及其意义,接着介绍关于课题中会使用到的HTML5相关技术及其新特性,之后对该游戏进行可行性分析,同时设计出海底鱼群大作战游戏的整体游戏框架并且完成相关功能模块,最终根据设计方案对该游戏功能进行实现并且对课题项目进行测试。
关键词:HTML5;游戏;Canvas;海底鱼群中图分类号:TP391 文献标识码:A文章编号:1009-3044(2021)31-0097-031 引言随着HTML5技术的不断进步,同时带动了游戏行业的快速发展,游戏在人们生活中随处可见。
目前较为成熟的网页技术仍以Flash为平台为主,但随着HTML5技术的快速发展,Flash已经被越来越多浏览器所禁用。
正是由于HTML5技术的日益成熟,网页中较多的功能效果将会采用HTML5技术来实现。
目前HTML5技术在支持音频、图像、动画以及与设备交互上具有明显优势,又因为HTML5具有强大的跨平台能力,使得其成为最热门的互联网应用开发技术之一。
本文将采用HTML5技术来完成海底鱼群大作战游戏的设计与开发。
2 关键技术2.1 HTML5技术自从最原始的HTML创建以来,其应用于Web上的效果非常明显,网页效果的展示也变得越来越多元化,HTML5不仅是Web的基础,也是构建互联网网页结构的主要语言。
HTML5被认定将成为下一代互联网的标准,也会是构建和呈现互联网内容的语言方式。
XXXXX大学本科生毕业论文设计基于HTML5的消除类游戏作者姓名:指导教师:所在学院:专业(系):班级(届):二〇XX 年 X 月 X 日目录中文摘要、关键字 (1)1 引言 (2)1.1 研究背景 (2)1.2 研究现状 (2)1.3 研究目的 (3)1.4 本文主要内容 (3)2 研究技术分析 (4)2.1 HTML5简介 (4)2.2. 游戏引擎 (4)2.3 开发环境 (5)3 项目的设计与开发 (6)3.1 游戏玩法 (6)3.2 需求分析 (6)3.3 初步设计 (6)3.4 游戏开始流程 (7)3.5 部分程序界面与实现 (9)4 总结 (14)4.1 项目学习阶段总结 (14)4.2 项目实施阶段总结 (15)4.3 扩展知识 (15)致谢 (17)参考文献 (18)英文摘要、关键字 (19)基于HTML5的消除类游戏软件学院软件工程专业指导教师XXX作者XXX摘要:近几年来社会不断地快速发展,也让人们在工作中产生了很多这样那样的压力,随着科技的进步,人们更希望通过网络、通过游戏来释放自己的压力,以往的技术都只是让游戏在笔记本或者移动产品上单独运行,并不可以跨平台操作,这也增加了开发者的工作量,因此经过人们不懈的努力,终于在原有基础上对html进行了改革,这就是HTML5。
HTML5具有很多新的特性,最主要的还是它具有跨平台兼容性,不仅可以在电脑上运行,还可以在移动终端运行,不仅如此HTML5中的Canvas元素可以使浏览器直接创建并处理图像,减轻了开发人员的负担,而且使界面更加美观,具有很好的用户体验。
减少了用户刷新页面的时间,得到了更多人的认可,因此基于HTML5所制作的游戏也就成了很多人的研究课题。
本文通过介绍HTML5的一些特性,以及对游戏引擎的学习,比如cocos2d,unity3d 等的认识,并通过当下比较流行的消除类游戏的研发过程分析来使HTML5的内容更加形象,并对HTML5的前景做了一些分析。
关键词:HTML5 Canvas 游戏引擎 cocos2d unity3d1 引言1.1研究的背景当今社会,随着经济的不断发展,人们对精神领域的追求也在不断加强,人们不再满足于只在笨拙的台式机上进行工作,而是越来越倾向于使用移动电子产品,并且人们对于网页的设计,刷新的速度都有了更高的要求,在这样的一个时代要求下,以前的网页制作语言HTML已经不能满足人们的要求,需要在移动、跨平台等新特性下研发更新html语言。
[1]先前的几个html版本,主要针对的是静态的文本网页,用于显示文档和共享一些数据,后来动态网站和应用程序的出现,使得网页更具有灵动性,但是这些都是基于第三方的插件或者Adobe Flash来完成的,这些插件可以使网站更加丰富,可以提供人机交互的功能。
随着网店和网页游戏的不断兴起,Web早就不能只满足于静态的文档,但是Web本身又不具备对视频,音频,图像处理的开发功能,想要在网页中添加这些就必须借助第三方插件,另外有时还需要其他的技术来支持HTML,让它支持多种媒体,这就加重了开发人员的工作量,不仅如此,人们再刷新网页时由于内容过多,耗费时间较长,用户体验差。
因此通过不懈的努力,HTML5终于应运而生。
1.2研究的现状HTML5对旧的Web网页制作技术做了大量的改进、创新。
它增加了很多新的元素,将一些模块动态化,另外HTML5的核心目标是增加了比如<audio>、<video>等新的媒体元素,这样就可以不用第三方插件来播放多媒体,操作更加简单方便。
不仅如此新增加的Canvas 元素,可以使浏览器直接创建并处理图形,使得网页布局更加美观大方,也方便了开发人员,代码更加简洁。
HTML5不仅是对互联网的改革,它更增加跨平台性,兼容性更好,它将互联网带向了一个更加成熟的平台,使用HTML5开发的程序,不仅可以在电脑上运行,同样人们也可以在移动产品上使用程序,人们获取信息更加方便,快捷。
大大的满足了人们对了解各种信息的迫切要求,无论是查看文档信息,还是加载动画、视频,都增加了页面的刷新速度,具有良好的用户体验。
HTML5新增加的这些功能,也为网页游戏提供了开发上的便利条件,不再需要第三方插件来支持游戏的音效,动画,给网页游戏开创了一个新的时代。
在国内外也掀起了一股学习开发HTML5游戏的热潮,之前的网页游戏开发成本高,即需要服务器端有需要客户端的支持,而现在HTML5可以跨平台操作,可以在更多的移动产品上进行操作,更能满足人们对于便捷的要求。
同时开发者只需要在原有基础上了解一下增加的新的HTML5和JS语言,当然对于游戏少不了的还有各种引擎,这些会在后面的文章中有所涉及。
1.3研究的目的由当前的游戏开发趋势来看,以后将会是HTML5的时代,当刷新HTML5的游戏时会像刷新页面那样简单,而且它的所有技术都是开放性的,方便开发者学习和应用。
为使用者提供了更加精美的动画效果,这对有游戏的设计来说至关重要,很多游戏能够得到人们的广泛关注除了玩法新颖意外,那就是画风优美,让人赏心悦目,这也是HTML5游戏的独特之处。
但是毕竟HTML5是基于浏览器的语言,所以由此开发的游戏也是轻量级的小游戏,随着移动电子产品的多元化,人们更希望通过游戏来释放自己在工作学习中的压力,虽然HTML5不能制作大型游戏,也因此游戏种类千变万化,丰富了人们的生活,不至于再长时间万同一款游戏时觉得枯燥无味。
这也为游戏开发者和供应商提供了更多的机会。
此外HTML5还提供了诸如重力感应,离线地图、多点触控等其他的交互应用功能。
无论是对于游戏还是网站来说都是一次质的飞越,而作为一个具有探索,好奇心的软件学生来说,学习HTML5必将对自己以后进入社会,对自己以后的工作有所帮助,不断学习新的技术,跟上时代的潮流,这是我们当代大学生的重要职责。
本文通过对HTML5进行短暂的学习之后,完成了对HTML5的小型的实践游戏,来巩固对学习内容的理解,找到了网页与游戏的相当好的契合。
1.4本文主要内容首先使用了HTML5新添加的<audio>元素标签,对音频进行添加,不再借助第三方软件,方便了我们的编程,只需添加相应的声音文件即可,代码减少了很多,也体现了在各浏览器中的兼容性。
而且我们还可以隐藏播放时的界面,这样就不会影响界面的美观了。
音频功能是有了新的标签,那么人们更多的是注重视频的添加不再那么麻烦,针对这一点HTML5也为此创建了<video>元素标签,使得视频的添加不再过于繁琐,代码也不再过于臃肿。
很多人认为视频要比音频的添加困难,因为视频还包括了图像,但是对于HTML5来说只需要一个标签而已,与音频的添加完全相似。
对于游戏来说最主要的就是界面要美观,这就要说到我们HTML5最主要的新元素<Canvas>了,通过Canvas你可以创建绚丽的图形和游戏界面,不仅如此你还可以通过JavaScript API来控制Canvas进行交互应用,产生动态的图画,动态的更新数据。
不再借助第三方的Flash软件来显示动画,还可以自定义动画内容,方便快捷。
HTML5还可以进行本地存储,这个新的功能可以用来存储分数或者是玩家的排行榜。
尽可能的使用新的特性标签来设计实现游戏的基本功能。
2研究技术分析2.1 HTML5简介HTML5是万维网html语言的第五个版本,目前比较流行的版本是HTML4.01,虽然相较先前的版本有了很大的改善,但是随着移动应用的发展,以前的那些版本已经远远达不到人们对于科学技术的要求,Html需要在包括语言方面,语法方面和UI、API等各方面的更新,因此就产生了现在这个新的版本。
在HTML5之前人们更注重用html来制作一些静态的网页,那时候人们通过网络的交互还不是那么发达,从网络上了解外界信息的心情也不是那么迫切,博客,网店也没有兴起。
但是近几年随着科技和经济的不断发展,人们更倾向于从网上获取信息,在网上购买商品,节省了人们很多的时间与精力。
因此再2010年HTML5正式被大家所认可,实现了Web领域近十几年来质的飞跃,将Web推向了一个更高、更成熟、更稳定的平台。
[3]在此基础上HTML5将音频,视频,动画等内容融为一体,更是增加了很多新的元素标签,去除了一些繁琐,冗长的标签,将一些相似标签融为一体,比如增加了表单验证标签,节省了表单输入时的麻烦,这些新的标签是网页结构更加紧凑合理。
比如hgroup可以将标题进行分组,合成一个个的整体,使开发页面也更加整洁;还有新添加的导航标签nav,有利于搜索引擎的结果整理。
HTML5相较其他版本的以大亮点就是将audio和video引入到标签中,这样网页播放音频和视频时就不必借助第三方插件,本身就可以做到了。
当然对于游戏来说最主要的还是图形动画的界面要美观,这样才可以吸引更多的人来玩,对于这方面不得不提的就是Canvas标签了,它与其他元素不同,不像audio等元素直接将现有元素插到网页中,而是可以独立的处理或创建2D图形,不仅如此,还可以通过JavaScript语言来控制Canvas的图形来响应与用户交互的动态图形与动画。
2.2游戏引擎介绍完了主要的开发语言平台,那开发过游戏的人都应该了解,开发一款游戏最重要的莫过于引擎了,下面我将介绍一下本次研究课题中所使用到的引擎。
游戏引擎是整款游戏的核心,是游戏的心脏,它提供很多种模板供开发者使用,使游戏设计者不必从零开始,就已经有可用的人物,工具等,减轻了开发者的工作量,也降低了学习游戏开发的门槛。
一般的游戏引擎包括渲染、场景、摄像、脚本、物理因素(重力、摩擦等)、碰撞检测、音效等系统,游戏玩家所体验到的关卡、剧情、玩法等都由引擎来控制,它在整个游戏中扮演着发动机的角色,为整个游戏提供动力,也扮演着幕后角色,在后台指挥者游戏的进程。
一款完整的游戏包括游戏资源(如声音、图片等)和游戏引擎共同组成,缺一不可。
随着游戏种类的不断增加,游戏引擎也是多种多样,一般分为2D引擎和3D引擎,其中2D的引擎又有不同的种类比如cocos2d、Box2D、gamemark、untiy2d等,3D的游戏引擎包括Unity3D、away3D、wolfenstein3D engine、Panda3D等各种各样的引擎可以写出风格各异的游戏,丰富了人们的精神世界。
本文所列举的实例游戏采用的是cocos2d-html5的游戏引擎,这款引擎主要针对用HTML5来编写的游戏,cocos2d-html5包括了导演、场景、布景、摄像机、人物、动作等主要的概念。
导演是整个引擎或者是整个游戏的总指挥,它控制着其他的控件,比如人物该有什么样的动作,有什么样的语言等等,总之其他的事物都要服从导演的指挥;场景和布景主要是负责游戏的背景以及各关卡之间的转换作用,是人们对于一个游戏的第一印象;摄像机是将人物或场景的转换记录下来,连成一段合理的故事;人物和动作也是游戏的灵魂,这里的人物又叫做精灵,其实并不是单纯的指人,也可以是方块等其他的物体,就是给这些精灵附上了动作,才使游戏有了动态的效果。