html5的横版格斗游戏的设计与实现
HTML5标准的出现，代表着web的未来发展方向。和旧的 HTML 相比，新的标准不再只是被用来显示网页内容，更多用途是提供成熟的服务应用,具备优秀的多媒体元素和跨平台能力，对音频视频、事件处理、绘图等的支持为web游戏的开发提供了良好的基础。本文游戏的开发，就是依托HTML5技术的支持，开发一款拥有基础功能的2d格斗游戏，通过HTML+CSS搭建游戏环境，调用HTML5 Canvas API实现游戏效果，运用JavaScript语言编写游戏逻辑，使游戏项目拥有相对完善的基本功能，并且实现跨多平台运行。本文游戏采用面向对象的思想开发，是一款基于浏览器运行2d格斗游戏，玩家可以操作自身对象，实现行走，跳跃，击打，释放技能的操作，击败对手获取游戏胜利，自身血量归零则失败。游戏被拆分成4个基本模块UI、场景、角色、系统，分别实现各个功能模块，最终组装完成完整的游戏逻辑。本论文的主要研究内容如下开发一款2d格斗游戏如何实现其的功能和逻辑。将前端技术应用到了游戏开发中，研讨运用前端技术HTML、CSS、JavaScript开发跨平台游戏的可能性，该游戏是利用新兴web技术的一次尝试，具有重要意义。
目录
1 绪论 1
1.1 选题背景及意义 1
1.2 国内外研究现状 1
1.3 论文的组织结构 2
2 相关技术概述 4
2.1 HTML5概述 4
2.2 JavaScript概述 4
2.3 jQuery概述 6
2.4 CSS3概述 6
3游戏项目需求分析 7
3.1 可行性分析 7
3.1.1 技术可行性 7
3.1.2 应用可行性 7
3.1.3 时间可行性 7
3.2 游戏项目基本功能需求 7
3.3 游戏项目非功能需求 8
4 游戏设计及实现 9
4.1 游戏整体设计 9
4.1.1 游戏主要流程设计 9
4.1.2 游戏功能模块设计 10
4.2 游戏功能实现 11
4.2.1 游戏UI模块实现 11
4.2.2 游戏场景地图实现 12 *好棒文|www.hbsrm.com +Q: #351916072#
4.2.3 游戏角色模块实现 13
4.2.4 游戏系统模块实现 20
5 游戏测试 24
5.1 项目测试方案 24
5.1 项目测试过程 24
6总结与展望 26
6.1 总结 26
6.2 展望 26
参考文献 28
致谢 30
1 绪论
1.1 选题背景及意义
2014年10月，万维网联盟宣布，经过接近8年的艰苦努力，HTML5标准规范终于制定完成，随着该规范的日益成熟，HTML5已成为主流页面语言。新的标准带来更多的新功能的支持，让开发web游戏变得简单。
传统游戏开发,开发者需要针对平台的选择不同的语言开发,例如最常见得Android与iOS平台游戏,往往是同一款游戏,却需要多次开发,游戏更新与维护也需要针对平台分别进行,工作量是巨大的。而HTML5游戏依托浏览器运行，凭借着原生浏览器的支持，开发者可以开发出在任何操作系统中运行的游戏，相较传统游戏开发，HTML5游戏在开发、迭代和成本上都具有巨大的优势。
在移动设备和PC逐渐成为浏览信息与数字内容的主流工具的今天，硬件设备得到飞速的发展，硬件能力极大增强，性能足以承载更加丰富的内容，支持更加绚丽的渲染效果。同时，网络技术的进步和发展，使得网页载入时间的缩短，用户体验大大增强。HTML游戏性能相较传统游戏不足的差距进一步缩小。伴随着各大浏览器对HTML5新特性和Canvas、WebGL等新功能的支持，HTML5在游戏领域有了更大的发展空间，环境更加成熟，性能比以前的技术系统要高得多，具有足够的突破性和前沿性。HTML5正凭借着巨大的优势和潜力，不断渗透到游戏开发领域，将在未来游戏领域迎来爆发式的发展。
在我国，拥有全球最大的游戏市场，游戏用户的数量也是极为庞大，HTML5游戏的市场前景是巨大的，很对HTML5游戏平台也是很活跃的，例如微信小游戏，QQ轻游戏等。在这种大环境下，涌现了很多HTML5游戏发行商，也出现了很对的优质HTML5游戏。可以看出，无论是技术还是市场环境都给予了HTML5游戏很大的成长空间
因此，学习了解 HTML5 并且尝试做出成果是一个很好的选择，使用HTML5相关技术来创造越来越多的新的应用程序的将改变世界，促进着这个时代的变化，研究HTML5技术并应用于游戏实践开发具有重要意义。
1.2 国内外研究现状
HTML5受到瞩目的契机是前苹果CEO乔布斯的公开声明，表示苹果公司的移动设备将不再支持Flash，并以HTML5作为主要发展方向。Flash是90年代兴起的一款浏览器插件，弥补了HTML4在多媒体支持上的缺陷，Flash技术也为网页游戏提供了技术支持，催生了大量基于Flash技术的网页游戏。但随着时代发展，浏览网站的平台除了PC还转向诸多操作系统各不相同的移动设备，额外安装插件不仅增加了设备的潜在风险，还给用户和开发者带来不便。
HTML5技术的出现解决了这些问题，使得浏览器重新取回了主导权。HTML5 Canvas提供了API允许网页开发者直接在浏览器指定区域绘制图像，这让使用JavaScript开发网页游戏变得简单，网页游戏开发将不再依来Flash。2014年，HTML5开始在国内游戏行业兴起，期间涌现了大量HTML5游戏开发商，社区，游戏引擎，专属渠道，以及一些传统游戏公司在HTML5领域的开拓，HTML5游戏行业迅速发展形成一定规模。然而，HTML5游戏原生APP游戏对比仍然有很大的落差，受到JavaScript脚本运行和canvas渲染性能的限制，必须依靠高效性能引擎，开发过程中针对渲染、物理和复杂数学计算的优化仍然是困扰HTML5游戏最重要的技术瓶颈，加之受到资金投入、研发周期的影响，现大多数面市HTML游戏依旧属于低成本的休闲小游戏，HTML5游戏行业正处于向重度游戏领域探索的阶段。
1.3 论文的组织结构
游戏项目的主要内容是开发一款在基于浏览器运行的2d游戏。本论文的组织结构如下：
第 1 章是绪论。介绍论文课题来源，选题的背景和意义，分析现状和未来的发展趋势，接着再从国内外研究现状切题进行分析。最后介绍本论文的组织结构。
第 2 章是相关技术概述。介绍了HTML5技术的一些概念，接下来介绍了JavaScript语言的特性和优势，然后对JavaScript工具库jQuery进行介绍，最后介绍了用到的有关样式的CSS3技术。
目录
1 绪论 1
1.1 选题背景及意义 1
1.2 国内外研究现状 1
1.3 论文的组织结构 2
2 相关技术概述 4
2.1 HTML5概述 4
2.2 JavaScript概述 4
2.3 jQuery概述 6
2.4 CSS3概述 6
3游戏项目需求分析 7
3.1 可行性分析 7
3.1.1 技术可行性 7
3.1.2 应用可行性 7
3.1.3 时间可行性 7
3.2 游戏项目基本功能需求 7
3.3 游戏项目非功能需求 8
4 游戏设计及实现 9
4.1 游戏整体设计 9
4.1.1 游戏主要流程设计 9
4.1.2 游戏功能模块设计 10
4.2 游戏功能实现 11
4.2.1 游戏UI模块实现 11
4.2.2 游戏场景地图实现 12 *好棒文|www.hbsrm.com +Q: #351916072#
4.2.3 游戏角色模块实现 13
4.2.4 游戏系统模块实现 20
5 游戏测试 24
5.1 项目测试方案 24
5.1 项目测试过程 24
6总结与展望 26
6.1 总结 26
6.2 展望 26
参考文献 28
致谢 30
1 绪论
1.1 选题背景及意义
2014年10月，万维网联盟宣布，经过接近8年的艰苦努力，HTML5标准规范终于制定完成，随着该规范的日益成熟，HTML5已成为主流页面语言。新的标准带来更多的新功能的支持，让开发web游戏变得简单。
传统游戏开发,开发者需要针对平台的选择不同的语言开发,例如最常见得Android与iOS平台游戏,往往是同一款游戏,却需要多次开发,游戏更新与维护也需要针对平台分别进行,工作量是巨大的。而HTML5游戏依托浏览器运行，凭借着原生浏览器的支持，开发者可以开发出在任何操作系统中运行的游戏，相较传统游戏开发，HTML5游戏在开发、迭代和成本上都具有巨大的优势。
在移动设备和PC逐渐成为浏览信息与数字内容的主流工具的今天，硬件设备得到飞速的发展，硬件能力极大增强，性能足以承载更加丰富的内容，支持更加绚丽的渲染效果。同时，网络技术的进步和发展，使得网页载入时间的缩短，用户体验大大增强。HTML游戏性能相较传统游戏不足的差距进一步缩小。伴随着各大浏览器对HTML5新特性和Canvas、WebGL等新功能的支持，HTML5在游戏领域有了更大的发展空间，环境更加成熟，性能比以前的技术系统要高得多，具有足够的突破性和前沿性。HTML5正凭借着巨大的优势和潜力，不断渗透到游戏开发领域，将在未来游戏领域迎来爆发式的发展。
在我国，拥有全球最大的游戏市场，游戏用户的数量也是极为庞大，HTML5游戏的市场前景是巨大的，很对HTML5游戏平台也是很活跃的，例如微信小游戏，QQ轻游戏等。在这种大环境下，涌现了很多HTML5游戏发行商，也出现了很对的优质HTML5游戏。可以看出，无论是技术还是市场环境都给予了HTML5游戏很大的成长空间
因此，学习了解 HTML5 并且尝试做出成果是一个很好的选择，使用HTML5相关技术来创造越来越多的新的应用程序的将改变世界，促进着这个时代的变化，研究HTML5技术并应用于游戏实践开发具有重要意义。
1.2 国内外研究现状
HTML5受到瞩目的契机是前苹果CEO乔布斯的公开声明，表示苹果公司的移动设备将不再支持Flash，并以HTML5作为主要发展方向。Flash是90年代兴起的一款浏览器插件，弥补了HTML4在多媒体支持上的缺陷，Flash技术也为网页游戏提供了技术支持，催生了大量基于Flash技术的网页游戏。但随着时代发展，浏览网站的平台除了PC还转向诸多操作系统各不相同的移动设备，额外安装插件不仅增加了设备的潜在风险，还给用户和开发者带来不便。
HTML5技术的出现解决了这些问题，使得浏览器重新取回了主导权。HTML5 Canvas提供了API允许网页开发者直接在浏览器指定区域绘制图像，这让使用JavaScript开发网页游戏变得简单，网页游戏开发将不再依来Flash。2014年，HTML5开始在国内游戏行业兴起，期间涌现了大量HTML5游戏开发商，社区，游戏引擎，专属渠道，以及一些传统游戏公司在HTML5领域的开拓，HTML5游戏行业迅速发展形成一定规模。然而，HTML5游戏原生APP游戏对比仍然有很大的落差，受到JavaScript脚本运行和canvas渲染性能的限制，必须依靠高效性能引擎，开发过程中针对渲染、物理和复杂数学计算的优化仍然是困扰HTML5游戏最重要的技术瓶颈，加之受到资金投入、研发周期的影响，现大多数面市HTML游戏依旧属于低成本的休闲小游戏，HTML5游戏行业正处于向重度游戏领域探索的阶段。
1.3 论文的组织结构
游戏项目的主要内容是开发一款在基于浏览器运行的2d游戏。本论文的组织结构如下：
第 1 章是绪论。介绍论文课题来源，选题的背景和意义，分析现状和未来的发展趋势，接着再从国内外研究现状切题进行分析。最后介绍本论文的组织结构。
第 2 章是相关技术概述。介绍了HTML5技术的一些概念，接下来介绍了JavaScript语言的特性和优势，然后对JavaScript工具库jQuery进行介绍，最后介绍了用到的有关样式的CSS3技术。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/xxaq/329.html
