基于THML5移動智能引擎設計

邵天會

【摘要】 隨著計算機網絡的發展我們的工作模式隨著改變，計算機網絡思維逐漸改變著各個領域，移動終端也提出了更高的要求。進行移動終端智能引擎設計的技術隨之改變，從產品的前臺到后臺的管理，從硬件的速度和功耗，到軟件的效率和人性化，原來的技術已經無法滿足需求，HTML5的定義給了更多的改變的空間和實現的可能。HTML5的特性和CSS3的優點結合，讓移動智能引擎更強。

【關鍵字】 HTML5 智能移動終端 引擎

一、基于HTML5的優點

網站訪問過程中客戶端對服務器發出的請求導致服務器壓力增大，解決服務器壓力瓶頸是我們一直努力的方向。目前應用最廣泛的技術是HTML5，通過HTML5和JS的結合，邏輯處理的大部分轉移到客戶端，服務器端負責接口。我們以往使用的HTML進行移動網站訪問，其中嵌入大量的Flash動畫，Flash動畫不僅需要相應的插架支持，并且需要占用大量的硬件資源。在移動設備中顯然不允許，HTML5的出現解決了這個問題。HTML本身的特性讓我們實現移動引擎更優化。

HTML5是HTML的第五次修訂，2010年推出以來，由于優秀的特點對瀏覽器的完美支持，得到了業內的廣泛支持和應用，2014年10月正式標準化。

HTML5相對傳統HTML的優點：

1.跨平臺

在Windows、IOS以及Linux平臺上HTML5都可以完美運行并顯示出優秀的特性，不論手機移動設備或者電腦終端，都完美支持。移動終端應用目前大部分都轉向HTML5。

2.硬件要求低

程序員只需要簡單配置的電腦就可以進行開發設計，針對用戶最關心的運行配置問題，可以說目前任何配置的設備都可以比傳統HTML更快運行，比傳統HTML顯示更優的效果。

3.優秀的動畫、視頻顯示效果

HTML5動畫、視頻處理能力相比傳統HTML更優秀，HTML5利用自身的功能把動畫和視頻與瀏覽器進行結合，不需要其他的插件配合，更好的利用硬件資源和網絡資源，做到更快的訪問和顯示，給用戶更好的體驗，開發人員也更容易開發，并更好的去控制顯示格式和效果。

4.canvas標簽的應用

HTML5增加了canvas標簽來進行圖形的設計，對于復雜的圖形特別是多維、特效等要求的圖形，canvas標簽有著優秀的體現，并且給用戶更好的視覺效果。

5.媒體訪問控制

在傳統的HTML中視頻通常應用插件支持比如flash等，這種解決方式占用大量的硬件資源，html5的媒體訪問控制很好的解決了此類問題，不需要任何插件的支持，瀏覽器自動支持聲音和視頻文件的播放，同時針對不同顯示大小的終端設備可以進行不同的自動調節。同時對于現在流行的app和一些圖像識別等有著良好的支持和優秀的表現。

6.優秀的離線存儲

針對用戶的本地離線存儲html5更好的支持，讓用戶體驗更短的啟動時間，更快的網速等特性。

二、移動智能引擎設計

利用HTML5對移動智能引擎進行模塊框架設計。移動終端區別PC終端：屏幕大小多樣，橫屏和豎屏模式切換操作，移動終端硬件資源有限等。本模塊設計兼顧了移動終端和PC終端的特性，因此同樣適用PC終端。只有部分功能適用移動終端。

游戲的功能模塊在軟件中占比重大，模塊的實現也相對復雜，我們選擇游戲作為HTML5移動終端智能引擎的樣本，進行游戲的要素實現。找到PC終端和移動終端的共同點進行設計模塊，做到適用移動終端的同時滿足最大的通用性。

1.動畫模塊

游戲重要的元素是動畫，動畫的效果直接影響游戲的代入感和體驗感，其他的軟件中動畫是游戲中的第一要素，豐富的動畫效果使游戲的動感大大增強。同樣，其他APP中的設計動畫展現出的圖形、圖像元素是必不可少的。HTML5中的canvas可以利用drawImange（）實現基于HTML頁面圖片的直接操作。

2.聲音模塊

HTML5利用Audio中的方法可以直接在頁面中進行播放聲音，雖然很多瀏覽器對聲音格式的要求不一，并且多重聲音進行同時播放產生重疊效果時，處理的方式比較特殊，但是Audio的方法很好的解決了此類問題，兼容了各種瀏覽器，并且讓移動終端不需要占用很多資源。

3.資源模塊

游戲良好的體驗需要資源加載的保障，游戲的每次執行占用了大量的系統資源和硬件資源，同時資源的下載需要良好的網絡帶寬，加載過慢或者緩存過少，用戶的游戲無法順暢進行，自然無法得到很好的體驗，我們將資源模塊進行了批量下載處理，解決了此類問題。

4.人物模塊

游戲中的基本元素是人物，人物的多樣性和共同性同時存在，這里我們參考了面向對象的類的方法，人物的共性進行類的方法設置，多樣性進行在此基礎上特定的設置，從而實現了資源共享的模塊方式。

5.背景模塊

背景是游戲發生的地理位置，時間的總和，移動終端具有屏幕小的特點，我們利用HTML5進行所有元素都要展示時，需要進行元素的歸類，當某個元素出現時，我們可以在屏幕的某個位置進行按鈕設置，按鈕的點擊會出現該元素的具體屬性，這種方法很好的解決了移動重點屏幕小但是又可以方便的展示所有的元素方法。

6.觸摸應答模塊

現在的移動終端設備大多使用觸摸功能，用戶的操作主要依靠觸摸屏幕來實現，HTML5的媒體控制可以完美解決此類問題，對用戶觸摸位置即使相應，判斷用戶要執行的操作內容，屏幕進行相應的應答。

7.數據的離線存儲、讀取

為了游戲的通暢，我們往往采用部分數據的離線存儲，方便游戲隨時調用，反映及時，HTML5中的Storage利用localStorage把數據進行離線存儲到移動終端保證游戲的流暢度，同時關閉瀏覽器也不會影響存儲。

8.模塊之間的邏輯處理

為了各個模塊能夠按照預先設定邏輯進行執行，本模塊起到綜合調度功能，對各個模塊產生的數據進行分析判斷，通過參數進行尋找下個模塊入口，進而啟動相應的模塊。

在開發模塊的過程中，主要的問題：

1.干擾性

JS的本身特點，全局變量在各模塊中需要注意是否被無意更改，各模塊中隨時使用私有方法來保護自己本身的變量，并且保證軟件的延展性。

2.通用性

我們設計的模塊中一類為構造函數模塊，一類為具體實現模塊。為了達到模塊的通用性我們將模塊中的基礎部分進行類的操作，類包含同樣的屬性，后者的模塊進行了方法的實現，我們對其進行私有方法設置。

3.模塊的高效性

移動終端引擎主要應用范圍是移動終端，我們移動終端的資源一般是少于PC終端，所以開發模塊中要注意模塊運行速度，整體提高引擎的速度。

參 考 文 獻

[1]陳志泊編著.數據倉庫與數據挖掘[M].北京：清華大學出版社，2009，89-106

[2]安淑芝編著.數據倉庫與數據挖掘[M].北京：清華大學出版社，2006，150-171

[3]張路斌.HTML5 Canvas游戲開發實戰[M].機械工業出版社，2013：100-186

[4]李東博.HTML5+CSS3從入門到精通[M].清華大學出版社，2013：23-59