基于THML5移動智能引擎設(shè)計(jì)

邵天會

【摘要】 隨著計(jì)算機(jī)網(wǎng)絡(luò)的發(fā)展我們的工作模式隨著改變，計(jì)算機(jī)網(wǎng)絡(luò)思維逐漸改變著各個(gè)領(lǐng)域，移動終端也提出了更高的要求。進(jìn)行移動終端智能引擎設(shè)計(jì)的技術(shù)隨之改變，從產(chǎn)品的前臺到后臺的管理，從硬件的速度和功耗，到軟件的效率和人性化，原來的技術(shù)已經(jīng)無法滿足需求，HTML5的定義給了更多的改變的空間和實(shí)現(xiàn)的可能。HTML5的特性和CSS3的優(yōu)點(diǎn)結(jié)合，讓移動智能引擎更強(qiáng)。

【關(guān)鍵字】 HTML5 智能移動終端 引擎

一、基于HTML5的優(yōu)點(diǎn)

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

HTML5是HTML的第五次修訂，2010年推出以來，由于優(yōu)秀的特點(diǎn)對瀏覽器的完美支持，得到了業(yè)內(nèi)的廣泛支持和應(yīng)用，2014年10月正式標(biāo)準(zhǔn)化。

HTML5相對傳統(tǒng)HTML的優(yōu)點(diǎn)：

1.跨平臺

在Windows、IOS以及Linux平臺上HTML5都可以完美運(yùn)行并顯示出優(yōu)秀的特性，不論手機(jī)移動設(shè)備或者電腦終端，都完美支持。移動終端應(yīng)用目前大部分都轉(zhuǎn)向HTML5。

2.硬件要求低

程序員只需要簡單配置的電腦就可以進(jìn)行開發(fā)設(shè)計(jì)，針對用戶最關(guān)心的運(yùn)行配置問題，可以說目前任何配置的設(shè)備都可以比傳統(tǒng)HTML更快運(yùn)行，比傳統(tǒng)HTML顯示更優(yōu)的效果。

3.優(yōu)秀的動畫、視頻顯示效果

HTML5動畫、視頻處理能力相比傳統(tǒng)HTML更優(yōu)秀，HTML5利用自身的功能把動畫和視頻與瀏覽器進(jìn)行結(jié)合，不需要其他的插件配合，更好的利用硬件資源和網(wǎng)絡(luò)資源，做到更快的訪問和顯示，給用戶更好的體驗(yàn)，開發(fā)人員也更容易開發(fā)，并更好的去控制顯示格式和效果。

4.canvas標(biāo)簽的應(yīng)用

HTML5增加了canvas標(biāo)簽來進(jìn)行圖形的設(shè)計(jì)，對于復(fù)雜的圖形特別是多維、特效等要求的圖形，canvas標(biāo)簽有著優(yōu)秀的體現(xiàn)，并且給用戶更好的視覺效果。

5.媒體訪問控制

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

6.優(yōu)秀的離線存儲

針對用戶的本地離線存儲html5更好的支持，讓用戶體驗(yàn)更短的啟動時(shí)間，更快的網(wǎng)速等特性。

二、移動智能引擎設(shè)計(jì)

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

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

1.動畫模塊

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

2.聲音模塊

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

3.資源模塊

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

4.人物模塊

游戲中的基本元素是人物，人物的多樣性和共同性同時(shí)存在，這里我們參考了面向?qū)ο蟮念惖姆椒ǎ宋锏墓残赃M(jìn)行類的方法設(shè)置，多樣性進(jìn)行在此基礎(chǔ)上特定的設(shè)置，從而實(shí)現(xiàn)了資源共享的模塊方式。

5.背景模塊

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

6.觸摸應(yīng)答模塊

現(xiàn)在的移動終端設(shè)備大多使用觸摸功能，用戶的操作主要依靠觸摸屏幕來實(shí)現(xiàn)，HTML5的媒體控制可以完美解決此類問題，對用戶觸摸位置即使相應(yīng)，判斷用戶要執(zhí)行的操作內(nèi)容，屏幕進(jìn)行相應(yīng)的應(yīng)答。

7.數(shù)據(jù)的離線存儲、讀取

為了游戲的通暢，我們往往采用部分?jǐn)?shù)據(jù)的離線存儲，方便游戲隨時(shí)調(diào)用，反映及時(shí)，HTML5中的Storage利用localStorage把數(shù)據(jù)進(jìn)行離線存儲到移動終端保證游戲的流暢度，同時(shí)關(guān)閉瀏覽器也不會影響存儲。

8.模塊之間的邏輯處理

為了各個(gè)模塊能夠按照預(yù)先設(shè)定邏輯進(jìn)行執(zhí)行，本模塊起到綜合調(diào)度功能，對各個(gè)模塊產(chǎn)生的數(shù)據(jù)進(jìn)行分析判斷，通過參數(shù)進(jìn)行尋找下個(gè)模塊入口，進(jìn)而啟動相應(yīng)的模塊。

在開發(fā)模塊的過程中，主要的問題：

1.干擾性

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

2.通用性

我們設(shè)計(jì)的模塊中一類為構(gòu)造函數(shù)模塊，一類為具體實(shí)現(xiàn)模塊。為了達(dá)到模塊的通用性我們將模塊中的基礎(chǔ)部分進(jìn)行類的操作，類包含同樣的屬性，后者的模塊進(jìn)行了方法的實(shí)現(xiàn)，我們對其進(jìn)行私有方法設(shè)置。

3.模塊的高效性

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

參 考 文 獻(xiàn)

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

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

[3]張路斌.HTML5 Canvas游戲開發(fā)實(shí)戰(zhàn)[M].機(jī)械工業(yè)出版社，2013：100-186

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