邵天會(huì)

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

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

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

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

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

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

1.跨平臺(tái)

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

2.硬件要求低

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

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

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

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

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

5.媒體訪問(wèn)控制

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

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

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

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

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

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

1.動(dòng)畫模塊

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

2.聲音模塊

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

3.資源模塊

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

4.人物模塊

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

5.背景模塊

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

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

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

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

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

8.模塊之間的邏輯處理

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

在開(kāi)發(fā)模塊的過(guò)程中，主要的問(wèn)題：

1.干擾性

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

2.通用性

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

3.模塊的高效性

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

參 考 文 獻(xiàn)

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

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

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

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