HTML5游戏开发的研究与实现研究

杨芳菊

【摘 要】在几个月之前，Adobe宣布将在2020彻底停止FlasH的开发和更新，这意味着从1996就开始使用的Flash将被淘汰，而HTML5将走向台前。HTML5作为下一代的Web标准，其功能在不斷的完善，不断的细化，不断的稳定，有着许多吸引人目光的特性。在HTML5众多的标签中，canvas是其中十分重要的一种，这种标签的引入使得HTML5可以实现各种各样图形、表格以及动画的动态生成，也就是说，HTML5已经具备了进行游戏开发的条件，可以用于游戏的开发。本文主要研究基于HTML5游戏开发的研究以及实现问题。

【关键词】HTML5；游戏开发

HTML5的迅速发展也带动了游戏产业的发展，许多游戏公司都使用HTML5开发出了品质优秀，创收丰富的游戏。近年来，网页游戏由于其方便、快捷、省时的优点，受到了许多玩家的青睐，而HTML5的成熟使得3D页游的质量大幅提升，形成了一股流行浪潮。下面将具体研究如何利用HTML5进行游戏的开发与研究。

1 开发核心技术分析

1.1 基于canvas标签的游戏图像呈现技术

作为新一代的Web标准，HTML5中用于游戏开发有一种很重要的技术就是canvas标签。Canvas是HTML5新增的一种页面元素，本质上是一个图形绘制器，可以进行各种图形、动画的绘制。Canvas里面含有一个基于JS的接口（API），可以使用脚本来实现图画的动态绘制，canvas的作用主要体现在两个方面，一个方面是呈现以及更新游戏中的3D画面；另一个方面是制作游戏中一些2D画面。随着HTML5的逐步流行和发展，canvas也会与各大浏览器兼容，目前火狐、谷歌以及IE等浏览器都对canvas提供支持。

1.2 基于WebGL的游戏画面渲染技术

作为一种3D图形绘制的标准，主要是用于为浏览器中的canvas标签提供3D加速渲染的支持，使得网页游戏在运行3D画面的时候可以更加流畅的运行，而且这种3D渲染加速还不需要通过浏览器插件。在目前的游戏开发中，实现游戏场景的创建以及渲染时主要使用的是JS的一个开源3D库——THREE.js，这个开源3D库的主要作用是创建一些包括灯光、材质以及模型等元素在内的3D场景，然后使用WebGL标准进行渲染。目前主流的浏览器，如谷歌、火狐、UC以及IE等，都对WebGL标准提供支持。

1.3 基于NodeJS的服务端程序技术

NodeJS是基于谷歌V8引擎下的JS支持实现的在服务器端的可扩展程序，主要用于为编写高效率的网络服务程序提供一个平台。相较于其他的程序，NodeJS能够消除客户端程序与服务器端程序之间的语言差异，使得游戏开发过程中的代码可以进行复用，大大减少了开发游戏的复杂度以及工作量，提高开发游戏的效率。游戏的服务器前端可以使用NodeJS进行搭建，定义游戏中的信息，然后与各个客户端进行实时通信，完成游戏信息的更新，服务器的前端同时连接着保存游戏用户的账号信息的数据库。目前的各种主流操作系统，例如Windows7，Windows10、Linux以及Windows Server 2003等系统都可以运行这种服务器前端。

1.4 基于WebSocket的网页实时通信技术

WebSocket是HTML提供的服务器与浏览器之间的双向通信技术，主要的作用是进行信息的实时通信。相较于其他的网络通信技术，WebSocket是一种效率十分高的网络通信技术，只需要和服务器进行一次握手就可以实现信息的双向传递。在进行游戏的开发时，可以利用此项技术在服务器中建立Socket的服务，然后与每一个客户的服务端连接，完成游戏信息的实时更新与消息的处理。

1.5 基于Audio的3D音效技术

在解决了画面以及通信的技术之后，游戏开发还有一个很重要的方面就是音效，HTML5中有一个新增元素，专门用来为游戏提供音频文件的播放，也就是Audio。在JS中，有一个由谷歌公司提出的专门用于网页音频处理的接口，就是Web Audio接口。这是一种功能十分强大的接口，特别是在音锥技术以及3D定位技术方面，可以根据声源来定位玩家位置，从而实现左右声道控制的功能。这种技术可以将以前的游戏音效品质大大提高，为游戏玩家提供高品质的享受，极大的提升玩家的游戏体验。

2 基于HTML5开发游戏的特点分析

2.1 简洁的页面

在现代这个信息爆炸的时代，对于屏幕上呈现的信息来说，少即是多，相较于Flash，使用HTML5开发游戏时可以使得界面更加的简洁、干净。由于HTML5高度的集成性，可以使得以前那些必须呈现出来的内容隐藏在界面中，只在游戏界面上呈现最主要的内容。

2.2 个性化的用户体验

随着市场化经济的不断完善，进行游戏开发的公司也越来越多，市面上的游戏也越来越多，每天都会有很多款游戏上架。游戏用户面对种类、数量如此繁多的游戏，早已经产生了疲劳感，想要吸引用户的目光就需要全方面提升用户的体验，也就是加强用户的个性化体验。而HTML5由于其优秀的实时通信能力，可以实现客户端与服务器之间的实时信息交流，这样游戏开发方就可以获得游戏用户在进行游戏时的各种数据，实时手机用户的各种意见以及建议。在收集齐这些数据之后，游戏开发方就可以根据这些用户自己的特性数据为其提供个性化的服务，将游戏的一些界面以及操作按照这些数据进行改进，使得游戏用户有一个更好的游戏体验。

3 游戏引擎的设计与实现

在进行游戏开发时，设计游戏引擎是开发游戏的基础，主要是负责游戏的底层运算的实现。在进行游戏引擎的设计时可以根据游戏的性质，构造一个2D或者3D的游戏引擎，其中囊括了该游戏主要的一些框架和模块。引擎能够将底层的实现进行封装，然后将高层的API呈现给用户。本文以设计一个2D引擎为例进行详解。

设计游戏引擎的第一步就是建立模型，然后设立模块。模块主要包括核心模块、基础模块、动作模块等等。核心模块中主要放置的是核心的类；基础模块中是在引擎类中提炼出的抽象类；动作类包含有一些与动作有关的类，可以根据动作持续的时间来进行分类，持续时间短的立即动作以及持续时间长的持续动作，也可以根据数量进行分类，分为复合动作以及单一动作，在动作模块中还应该包含有动作容器，对所有的动作类进行管理，负责动作状态的实时更新以及实现动作的逻辑。除了这些模块以外，还有算法模块、动画模块、扩展模块、加载模块以及结构图模块等。

4 结束语

现阶段正处于游戏行业的上升期，对于各大游戏公司来说，为了能够在市场上站稳脚跟，就必须紧跟时代的脚步，利用时下流行的技术进行游戏开发。HTML5正处于其快速上升期，引起了互联网以及游戏行业的广泛关注，对于游戏开发者来说，应该利用好这个风口，将HTML5技术广泛的应用到游戏开发中，提高游戏的质量，提升用户的游戏体验，为公司带来更好的收益。

【参考文献】

[1]郑逸凡.基于HTML5技术的Web游戏设计[J].计算机光盘软件与应用.2014（17）.

[2]黄悦深.基于HTML5的移动Web App开发[J].图书馆杂志. 2014（07）.

[3]严伟中.关于HTML5的核心技术研究与应用[J].网络安全技术与应用.2014（03）.endprint