HTML5這一游戲新技術(shù)已經(jīng)被應(yīng)用于iPhone和Android平臺(tái)，應(yīng)用這一技術(shù)，使得玩家可以在手機(jī)上獲得和PC類似的網(wǎng)頁游戲體驗(yàn)，即通過點(diǎn)擊游戲地址直接進(jìn)入游戲。

跨平臺(tái)是HTML5游戲的一大優(yōu)勢(shì)，盡管使用現(xiàn)代瀏覽器（如Chrome）在PC上可以獲得非常棒的體驗(yàn)效果，但其在移動(dòng)平臺(tái)表現(xiàn)如何，是近一年以來大家都在熱議的話題。

本次為你帶來的是一款基于HTML5的大型網(wǎng)頁游戲——《三國(guó)時(shí)代OL》，該游戲由神奇時(shí)代團(tuán)隊(duì)所開發(fā)，即將在Google Chrome WebStore上發(fā)布。本文主要與大家分享一下該游戲的開發(fā)心得。在閱讀本文之前，你可以先在Chrome中試玩一下《三國(guó)時(shí)代OL》。

開發(fā)環(huán)境說明

開發(fā)所采用的技術(shù)：JavaScript、Canvas、CSS3、Application Cache、Localstorage、Audio等

模式：JS+CSS3+Canvas+DOM

參考第三方API：jQuery1.6、 jQuery Mobile、jQuery tmpl

多平臺(tái)：iOS、Android、PC

瀏覽器：桌面瀏覽器（Chrome、Firefox等），手機(jī)瀏覽器（自帶瀏覽器、Chrome、UC、QQ、Firefox、Opera、遨游、海豚等）

采用HTML5的原因

1. HTML5大勢(shì)所趨

用HTML5制作的游戲具備跨平臺(tái)特性，并且采用JS開發(fā)語言，大大降低了開發(fā)成本。另外各個(gè)瀏覽器廠商都在加強(qiáng)對(duì)HTML5的支持，彼此展開對(duì)市場(chǎng)的競(jìng)爭(zhēng)，對(duì)HTML5帶來了迅速的發(fā)展。另一方面HTML5是社交游戲發(fā)展的未來，得益于HTML5游戲無需下載的優(yōu)勢(shì)，尤其是針對(duì)智能手機(jī)而言，玩家可以在社區(qū)里隨時(shí)聊天、交友并相互分享游戲的快樂。與原生客戶端相比，更易于推廣，方便更新版本，用戶會(huì)在第一時(shí)間看到。游戲無需下載，可節(jié)省手機(jī)容量空間。只需打開手機(jī)瀏覽器，就可以通過網(wǎng)頁體驗(yàn)游戲。

2. iPhone上的HTML5

iPhone 4上的HTML5分為兩種模式：App Mode與Web Mode。

屏幕尺寸：App Mode——320x460 有效繪畫區(qū)（全屏）；Web Mode——320x356 或者 320x416（沒有地址欄）

調(diào)試：設(shè)置>Safari > 開發(fā)，打開調(diào)試，即可幫助開發(fā)者查看日志，有效解決問題。

離線：可以保存應(yīng)用到桌面，并采用離線方式，像本地應(yīng)用一樣打開運(yùn)行。

開發(fā)中的問題

1. HTML5的局限性

目前HTML5還缺少有效的開發(fā)工具。對(duì)于手機(jī)用戶來說，國(guó)內(nèi)網(wǎng)絡(luò)環(huán)境依然以GPRS為主，下載速度以及流量限制了大批用戶。

以Chrome、Safari為主的webkit內(nèi)核比較成熟，但其它瀏覽器廠商都在研發(fā)新的內(nèi)核，造成了大量兼容性問題，對(duì)開發(fā)者而言，需要做大量的適配工作，也由于不兼容，影響了用戶體驗(yàn)。

另一方面，與原生客戶端游戲相比，HTML5所支持的功能較少或者欠缺，在性能上也是存在不足，但是隨著硬件性能和內(nèi)核引擎的提升，將來會(huì)有所改觀。

2. iOS 4性能問題

由于采用iOS 4，用到Retina圖象優(yōu)化方式，造成Canvas繪圖效率下降。實(shí)際上可以用過兩種方式避免，對(duì)于使用Canvas，可先放大再用viewport的0.5倍縮放，另一種是使用Dom做為游戲呈現(xiàn)方式，采用transform3D加速。 而Safari 5采用Nitro JavaScript引擎。蘋果表示，Mac版Safari 5運(yùn)行JavaScript腳本的速度比Safari 4快30%，比Chrome 5.0快3%，幾乎達(dá)到火狐3.6的兩倍。

3. Android問題

Android系統(tǒng)版本及瀏覽器比較多，標(biāo)準(zhǔn)不統(tǒng)一，造成大量機(jī)型適配工作。

4. Audio 問題

到目前為止，在手機(jī)上播放音效情況很糟糕。

開發(fā)所用技術(shù)

1. Application Cache

為什么要用Application Cache：第一次下載資源和代碼后，可以緩存到瀏覽器緩存區(qū)，從而加快游戲加載代碼和資源的時(shí)間，以及在國(guó)內(nèi)網(wǎng)絡(luò)環(huán)境不好的情況下，有效緩解一些問題。

通過下面代碼，我們可以了解ApplicationCache的基本原理和更新實(shí)現(xiàn)。

<htmlmanifest="test.manifest"> ... </html> CACHE MANIFEST#version v1 ?#指明緩存入口CACHE:index.htmlstyle.cssimages/logo.pngscripts/main.js?#以下資源必須在線訪問NETWORK:login.php

如何更新：當(dāng)你的資源或者代碼修改后，在Manifest文件中，修改一下版本號(hào)即可，代碼實(shí)現(xiàn)如下。

var appCache = window.applicationCache; if (appCache.status ==window.applicationCache.UPDATEREADY) { appCache.swapCache();window.location.reload();//得到最新版本緩存列表，并且成功下載資源，更新緩存到最新 }2. jQuery Mobile

jQuery Mobile框架可以讓熟悉jQuery框架的開發(fā)者快速開發(fā)出基于HTML5的移動(dòng)應(yīng)用，而且直接通過手機(jī)的瀏覽器即可瀏覽。除此以外，jQuery Mobile也有很好的擴(kuò)展性，用戶可以很好地對(duì)其進(jìn)行定制修改。

jQuery Mobile也很好的為我們定義并展示了好的用戶體驗(yàn)，很多東西值得開發(fā)者借鑒。

示例1：從jQuery Mobile借鑒過來，實(shí)現(xiàn)了平滑效果的頁面切換，如果不采用CSS，用JavaScript實(shí)現(xiàn)后的效率很低。在三國(guó)時(shí)代中，當(dāng)切換功能頁面時(shí)，可以看到劃動(dòng)的效果。

.slide.in {-webkit-animation-name:slideinfromright;-webkit-animation-timing-function:ease-in-out;-webkit-animation-duration:350ms; } @-webkit-keyframes slideinfromright {from { -webkit-transform: translateX(100%);to { -webkit-transform: translateX(0); } $(currentPage).addClass("slidein");

示例2：實(shí)現(xiàn)了一個(gè)會(huì)閃爍的框，作為游戲中新手引導(dǎo)的高亮顯示效果。

.splash{border:5pxsolid #dedede;-webkit-animation-name:splashAnim; -webkit-animation-timing-function:ease-in-out;-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite; } @-webkit-keyframes splashAnim {from { border-color: #eeee00;}to { border-color: #000000;} }3. Slider Bar

Slider Bar是游戲中用到的一個(gè)很實(shí)用的功能，用戶無需每次都打開Input輸入框來輸入數(shù)字，用戶可以通過劃動(dòng)滾動(dòng)條來改變數(shù)字。HTML5增加了<inputtype="range" />這個(gè)標(biāo)簽，但其實(shí)在手機(jī)并沒有完全支持，實(shí)際上用JavaScript+CSS也能做出期望的效果。

可以通過下面的關(guān)鍵代碼，來了解Slider的實(shí)現(xiàn)原理。

sliderBar =document.createElement("div"); sliderBar.ontouchmove = function(evt) {sliderBarMove(evt); } sliderBarMove : function(evt) {x= evt.touches[0].pageX;sliderBar.style.left= x + "px";onChange(); }

以上是該游戲的開發(fā)心得，歡迎大家試玩這款游戲。

作者：神奇時(shí)代

總結(jié)

以上是生活随笔為你收集整理的用HTML5技术打造跨平台大型网游的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。