基于HTML5跨平臺技術的手機客戶端游戲開發(fā)與研究

吳禎

摘要：隨著全球信息科學技術的不斷飛速發(fā)展，各類手機客戶端游戲層出不窮，文章探究了基于HTML5跨平臺技術的手機客戶端游戲的開發(fā)，以《2048》游戲為案例進行具體分析與研究。

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

中圖分類號：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及其應用現(xiàn)狀

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

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

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

2 基于HTML5跨平臺技術的手機客戶端游戲開發(fā)與研究

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

2.1 《2048》簡介

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

2.2 基于HTML5跨平臺技術的《2048》手機客戶端游戲開發(fā)

2.2.1 游戲架構

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

2.2.2 HTML5的應用

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

3 結束語

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

參考文獻：

[1] 李麗平，薛玉倩. 基于HTML5跨平臺移動應用開發(fā)的研究與實踐[J]. 河北軟件職業(yè)技術學院學報，2017，19（2）：35-38.endprint