吳禎

摘要：隨著全球信息科學(xué)技術(shù)的不斷飛速發(fā)展，各類手機(jī)客戶端游戲?qū)映霾桓F，文章探究了基于HTML5跨平臺(tái)技術(shù)的手機(jī)客戶端游戲的開發(fā)，以《2048》游戲?yàn)榘咐M(jìn)行具體分析與研究。

關(guān)鍵詞：HTMI5；手機(jī)客戶端；游戲開發(fā)

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：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及其應(yīng)用現(xiàn)狀

Hyper Text Markup Language（HTML），也被稱為超文本標(biāo)記語(yǔ)言，它是一種用于創(chuàng)建和查看web頁(yè)面和web瀏覽器的信息設(shè)計(jì)類型的標(biāo)記語(yǔ)言。早在20世紀(jì)90年代，萬(wàn)維網(wǎng)聯(lián)盟w3c的創(chuàng)始人就已經(jīng)編寫了一個(gè)包含20個(gè)標(biāo)簽頁(yè)的“HTML標(biāo)簽”文檔，作為一個(gè)出現(xiàn)和發(fā)展的網(wǎng)絡(luò)的文件奠定了堅(jiān)實(shí)的基礎(chǔ)。在此之后不到十年的發(fā)展中，IETF和W3C聯(lián)合開發(fā)并發(fā)布了多種標(biāo)記語(yǔ)言。在1999年年底，W3C發(fā)布了HTML 4.0，至今仍舊在使用。而HTML5的第一個(gè)草案于7年前發(fā)布，這是HTML發(fā)展中具有里程碑意義的。而后HTML5開始正式取代HTML4.01和xhtml1.0的標(biāo)準(zhǔn)版本。與此同時(shí)，W3C發(fā)布了一份聲明，希望為新一代的Web站點(diǎn)構(gòu)建一個(gè)開放的應(yīng)用程序平臺(tái)，并以HTML為中心。如今，HTML5增強(qiáng)了Web的本地?cái)?shù)據(jù)庫(kù)及其性能，可以說(shuō)HTML5的標(biāo)準(zhǔn)規(guī)范已經(jīng)成為Web技術(shù)的標(biāo)準(zhǔn)。

現(xiàn)如今，隨著智能手機(jī)的普及，作為取代HTML4.01和XHTML1.0 標(biāo)準(zhǔn)的HTML 5，它包含了移動(dòng)應(yīng)用平臺(tái)開發(fā)過(guò)程中所需的最新技術(shù)，這即是說(shuō)，HTML5不僅包含了全部的技術(shù)組合，此外在減少頁(yè)面的同時(shí)也減少了多樣化插件的網(wǎng)絡(luò)應(yīng)用。另外，HTML5還優(yōu)化了手機(jī)客戶端的結(jié)構(gòu)，賦予其更先進(jìn)的意義。無(wú)論是在程序構(gòu)件或用戶吸引方面，HTML5都有著極具價(jià)值的數(shù)據(jù)驅(qū)動(dòng)。

面對(duì)不斷發(fā)展的市場(chǎng)與需求，HTML5+應(yīng)運(yùn)而生。HTML5+實(shí)際上是在HTML5的基礎(chǔ)增強(qiáng)了其規(guī)范性，HTML5+補(bǔ)充調(diào)用JS API后，在功能性與實(shí)際體驗(yàn)方面均有了顯著的提高。例如，通過(guò)plus.oauth調(diào)用的單點(diǎn)登錄、通過(guò)plus.geolocation調(diào)用原生定位等功能。目前，HTML5+在隨著發(fā)展不斷修繕與提高，但其功能性的增強(qiáng)已經(jīng)受到業(yè)內(nèi)的廣泛關(guān)注。此外，在HTML的基礎(chǔ)上，HTML5+還增加了一個(gè)引擎，這個(gè)創(chuàng)新點(diǎn)將大大提升移動(dòng)端的通用功能。

2 基于HTML5跨平臺(tái)技術(shù)的手機(jī)客戶端游戲開發(fā)與研究

本文選取一款益智類游戲——《2048》作為研究對(duì)象，對(duì)其中基于HTML5及HTML5+的技術(shù)展開相應(yīng)的研究。

2.1 《2048》簡(jiǎn)介

《2048》是時(shí)下較為流行的數(shù)字類益智游戲，其最早發(fā)行時(shí)間可追溯至2014年?！?048》的原版游戲是由Gabriele Cirulli開發(fā)的，并在GitHub上發(fā)布，而后由于游戲流行被移植至各個(gè)平臺(tái)當(dāng)中。《2048》游戲界面簡(jiǎn)潔，操作方便，存在一定的游戲難度，在社會(huì)不同群體中均有用戶。從技術(shù)角度看，《2048》已經(jīng)通過(guò)HTML5和HTML5+的最新特性，在Android和IOS兩大系統(tǒng)下已經(jīng)能夠?qū)崿F(xiàn)跨平臺(tái)技術(shù)，同時(shí)，在運(yùn)行速度方面也有了顯著提升。

2.2 基于HTML5跨平臺(tái)技術(shù)的《2048》手機(jī)客戶端游戲開發(fā)

2.2.1 游戲架構(gòu)

制作一個(gè)游戲，由于邏輯處理的過(guò)程比較大，通常我們需要提前考慮邏輯架構(gòu)問(wèn)題：將完整的游戲邏輯拆散，如此既可以將開發(fā)過(guò)程清晰明確，又有利于游戲的后期維護(hù)?！?048》游戲相對(duì)較為簡(jiǎn)單，同時(shí)為了保證開發(fā)的效率與質(zhì)量，通常不考慮面向?qū)ο蟮脑O(shè)計(jì)，而采用使用面向過(guò)程的開發(fā)方式。但即使如此，游戲架構(gòu)的構(gòu)件也是有必要的。通常來(lái)說(shuō)，首先會(huì)使用HTML構(gòu)建游戲的UI，游戲的主邏輯會(huì)使用js/jquery來(lái)編寫，游戲的主邏輯主要用于操作游戲的數(shù)據(jù)，這一大體的結(jié)構(gòu)是我們通常所說(shuō)的MVC的結(jié)構(gòu)，其中“M”是指游戲的模型層，即游戲數(shù)據(jù)；“V”為視圖層，即UI；“C”為控制層，即游戲的主邏輯。此外，一方面，由于在《2048》游戲中存在動(dòng)畫，因此需要編寫動(dòng)畫效果邏輯，通常采用js/jquery來(lái)編寫，以此實(shí)現(xiàn)動(dòng)畫的處理，游戲主邏輯產(chǎn)生的一些變化會(huì)經(jīng)由動(dòng)畫效果邏輯傳到UI層。另一方面，一些更底層的邏輯被置于支撐邏輯當(dāng)中，支撐邏輯包含一些供游戲運(yùn)轉(zhuǎn)的底層邏輯和游戲主邏輯模塊與游戲數(shù)據(jù)模塊溝通。

2.2.2 HTML5的應(yīng)用

在《2048》游戲手機(jī)客戶端開發(fā)的過(guò)程中，HTML5在在Android和IOS 中Hybrid App的開發(fā)應(yīng)用較多。在移動(dòng)應(yīng)用開發(fā)中，主流開發(fā)模式可以分成三種方式： Native、Hybrid和WebApp。然而，在2013年，以單一的WebApp作為開發(fā)的模式受到了一定的打擊，許多開發(fā)者將目光轉(zhuǎn)向了Native開發(fā)模式。與此同時(shí)，WebApp有著更新速度快、跨平臺(tái)等優(yōu)勢(shì)，開發(fā)者對(duì)這一優(yōu)勢(shì)的渴望也并未減弱，因此，在2013年的發(fā)展當(dāng)中，Hybrid App 數(shù)量的激增，并且增速驚人。簡(jiǎn)言之，Hybrid App是 Native App 和 Mobile Web 二者混合開發(fā)的產(chǎn)物，HTML5 的頁(yè)面被嵌入到 Natvie App 的 webview 中。Hybrid App作為一種全新的APP，它不同于過(guò)去原生APP，而是介于web-app、native-app這兩者之間的App，并將二者的優(yōu)勢(shì)集于一身——能夠跨平臺(tái)開發(fā)同時(shí)有著良好的用戶交互體驗(yàn)。而在Hybrid 架構(gòu)下提升HTML5 頁(yè)面（尤其是被嵌入的 H5 應(yīng)用）加載速度和性能是將手機(jī)游戲開發(fā)推向新高度的重要技術(shù)。首先，需要對(duì)H5頁(yè)面或應(yīng)用進(jìn)行模塊化，引入模塊加速器，對(duì)于模塊加速器的種類可以在諸多品種中加以選擇，模塊化的方式不僅有利于后期的代碼維護(hù)，在Hrbrid架構(gòu)中還將有利于性能的提升。其次，啟用AppCache ，并引入增量更新機(jī)制?？傮w思路為Html5 應(yīng)用首次啟動(dòng)時(shí)，調(diào)用 Native 提供的加載資源文件專用的 Device API 來(lái)請(qǐng)求所需的資源文件，由 Native 層發(fā)出真正的資源請(qǐng)求，并將請(qǐng)求結(jié)果緩存在手機(jī)的SD卡上；H5 應(yīng)用再次啟動(dòng)時(shí)，所有的靜態(tài)資源都是通過(guò) Device API 讀取本地緩存，無(wú)需再走網(wǎng)絡(luò)；H5 應(yīng)用出現(xiàn)靜態(tài)資源更新時(shí)，在應(yīng)用啟動(dòng)時(shí)首先通過(guò) Device API 加載需要更新的文件，并更新本地緩存，其他未變更文件繼續(xù)走緩存。

3 結(jié)束語(yǔ)

綜上所述，隨著信息技術(shù)與手機(jī)游戲的發(fā)展，HTML5在手機(jī)客戶端游戲的開發(fā)中扮演著原來(lái)越重要的角色，其應(yīng)用的簡(jiǎn)便與快捷及應(yīng)用效果將大大推動(dòng)手機(jī)客戶端游戲的開發(fā)進(jìn)程。文章以《2048》為例，分析其基于HTML5跨平臺(tái)技術(shù)的手機(jī)客戶端游戲開發(fā)，基于此，旨在為我國(guó)未來(lái)手機(jī)客戶端游戲開發(fā)提供些許參考。

參考文獻(xiàn)：

[1] 李麗平，薛玉倩. 基于HTML5跨平臺(tái)移動(dòng)應(yīng)用開發(fā)的研究與實(shí)踐[J]. 河北軟件職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2017，19（2）：35-38.endprint