基于HTML5跨平台技术的手机客户端游戏开发与研究

吴祯

摘要：随着全球信息科学技术的不断飞速发展，各类手机客户端游戏层出不穷，文章探究了基于HTML5跨平台技术的手机客户端游戏的开发，以《2048》游戏为案例进行具体分析与研究。

关键词：HTMI5；手机客户端；游戏开发

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2017）29-0073-02

Abstract： With the rapid development of global information science and technology， all kinds of mobile client games are endless， the article explores the development of mobile client game Based on HTML5 cross platform technology， and analyzes and studies the "2048" game as a case.

Key words： HTMI5； mobile client； game development

1 HTML及其应用现状

Hyper Text Markup Language（HTML），也被称为超文本标记语言，它是一种用于创建和查看web页面和web浏览器的信息设计类型的标记语言。早在20世纪90年代，万维网联盟w3c的创始人就已经编写了一个包含20个标签页的“HTML标签”文档，作为一个出现和发展的网络的文件奠定了坚实的基础。在此之后不到十年的发展中，IETF和W3C联合开发并发布了多种标记语言。在1999年年底，W3C发布了HTML 4.0，至今仍旧在使用。而HTML5的第一个草案于7年前发布，这是HTML发展中具有里程碑意义的。而后HTML5开始正式取代HTML4.01和xhtml1.0的标准版本。与此同时，W3C发布了一份声明，希望为新一代的Web站点构建一个开放的应用程序平台，并以HTML为中心。如今，HTML5增强了Web的本地数据库及其性能，可以说HTML5的标准规范已经成为Web技术的标准。

现如今，随着智能手机的普及，作为取代HTML4.01和XHTML1.0 标准的HTML 5，它包含了移动应用平台开发过程中所需的最新技术，这即是说，HTML5不仅包含了全部的技术组合，此外在减少页面的同时也减少了多样化插件的网络应用。另外，HTML5还优化了手机客户端的结构，赋予其更先进的意义。无论是在程序构件或用户吸引方面，HTML5都有着极具价值的数据驱动。

面对不断发展的市场与需求，HTML5+应运而生。HTML5+实际上是在HTML5的基础增强了其规范性，HTML5+补充调用JS API后，在功能性与实际体验方面均有了显著的提高。例如，通过plus.oauth调用的单点登录、通过plus.geolocation调用原生定位等功能。目前，HTML5+在随着发展不断修缮与提高，但其功能性的增强已经受到业内的广泛关注。此外，在HTML的基础上，HTML5+还增加了一个引擎，这个创新点将大大提升移动端的通用功能。

2 基于HTML5跨平台技术的手机客户端游戏开发与研究

本文选取一款益智类游戏——《2048》作为研究对象，对其中基于HTML5及HTML5+的技术展开相应的研究。

2.1 《2048》简介

《2048》是时下较为流行的数字类益智游戏，其最早发行时间可追溯至2014年。《2048》的原版游戏是由Gabriele Cirulli开发的，并在GitHub上发布，而后由于游戏流行被移植至各个平台当中。《2048》游戏界面简洁，操作方便，存在一定的游戏难度，在社会不同群体中均有用户。从技术角度看，《2048》已经通过HTML5和HTML5+的最新特性，在Android和IOS两大系统下已经能够实现跨平台技术，同时，在运行速度方面也有了显著提升。

2.2 基于HTML5跨平台技术的《2048》手机客户端游戏开发

2.2.1 游戏架构

制作一个游戏，由于逻辑处理的过程比较大，通常我们需要提前考虑逻辑架构问题：将完整的游戏逻辑拆散，如此既可以将开发过程清晰明确，又有利于游戏的后期维护。《2048》游戏相对较为简单，同时为了保证开发的效率与质量，通常不考虑面向对象的设计，而采用使用面向过程的开发方式。但即使如此，游戏架构的构件也是有必要的。通常来说，首先会使用HTML构建游戏的UI，游戏的主逻辑会使用js/jquery来编写，游戏的主逻辑主要用于操作游戏的数据，这一大体的结构是我们通常所说的MVC的结构，其中“M”是指游戏的模型层，即游戏数据；“V”为视图层，即UI；“C”为控制层，即游戏的主逻辑。此外，一方面，由于在《2048》游戏中存在動画，因此需要编写动画效果逻辑，通常采用js/jquery来编写，以此实现动画的处理，游戏主逻辑产生的一些变化会经由动画效果逻辑传到UI层。另一方面，一些更底层的逻辑被置于支撑逻辑当中，支撑逻辑包含一些供游戏运转的底层逻辑和游戏主逻辑模块与游戏数据模块沟通。

2.2.2 HTML5的应用

在《2048》游戏手机客户端开发的过程中，HTML5在在Android和IOS 中Hybrid App的开发应用较多。在移动应用开发中，主流开发模式可以分成三种方式： Native、Hybrid和WebApp。然而，在2013年，以单一的WebApp作为开发的模式受到了一定的打击，许多开发者将目光转向了Native开发模式。与此同时，WebApp有着更新速度快、跨平台等优势，开发者对这一优势的渴望也并未减弱，因此，在2013年的发展当中，Hybrid App 数量的激增，并且增速惊人。简言之，Hybrid App是 Native App 和 Mobile Web 二者混合开发的产物，HTML5 的页面被嵌入到 Natvie App 的 webview 中。Hybrid App作为一种全新的APP，它不同于过去原生APP，而是介于web-app、native-app这两者之间的App，并将二者的优势集于一身——能够跨平台开发同时有着良好的用户交互体验。而在Hybrid 架构下提升HTML5 页面（尤其是被嵌入的 H5 应用）加载速度和性能是将手机游戏开发推向新高度的重要技术。首先，需要对H5页面或应用进行模块化，引入模块加速器，对于模块加速器的种类可以在诸多品种中加以选择，模块化的方式不仅有利于后期的代码维护，在Hrbrid架构中还将有利于性能的提升。其次，启用AppCache ，并引入增量更新机制。总体思路为Html5 应用首次启动时，调用 Native 提供的加载资源文件专用的 Device API 来请求所需的资源文件，由 Native 层发出真正的资源请求，并将请求结果缓存在手机的SD卡上；H5 应用再次启动时，所有的静态资源都是通过 Device API 读取本地缓存，无需再走网络；H5 应用出现静态资源更新时，在应用启动时首先通过 Device API 加载需要更新的文件，并更新本地缓存，其他未变更文件继续走缓存。

3 结束语

综上所述，随着信息技术与手机游戏的发展，HTML5在手机客户端游戏的开发中扮演着原来越重要的角色，其应用的简便与快捷及应用效果将大大推动手机客户端游戏的开发进程。文章以《2048》为例，分析其基于HTML5跨平台技术的手机客户端游戏开发，基于此，旨在为我国未来手机客户端游戏开发提供些许参考。

参考文献：

[1] 李丽平，薛玉倩. 基于HTML5跨平台移动应用开发的研究与实践[J]. 河北软件职业技术学院学报，2017，19（2）：35-38.endprint