用HTML5技術打造跨平台大型網遊

HTML5這一遊戲新技術已經被應用於iPhone和Android平台，應用這一技術，使得玩家可以在手機上獲得和PC類似的網頁遊戲體驗，即通過點擊遊戲地址直接進入遊戲。

跨平台是HTML5遊戲的一大優勢，儘管使用現代瀏覽器（如Chrome）在PC上可以獲得非常棒的體驗效果，但其在移動平台表現如何，是近一年以來大家都在熱議的話題。

本次為你帶來的是一款基於HTML5的大型網頁遊戲——《三國時代OL》，該遊戲由神奇時代團隊所開發，即將在Google Chrome WebStore上發布。本文主要與大家分享一下該遊戲的開發心得。在閱讀本文之前，你可以先在Chrome中試玩一下《三國時代OL》。

開發環境說明

開發所採用的技術：JavaScript、Canvas、CSS3、Application Cache、Localstorage、Audio等

模式：JS+CSS3+Canvas+DOM

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

多平台：iOS、Android、PC

瀏覽器：案頭瀏覽器（Chrome、Firefox等），手機瀏覽器（內建瀏覽器、Chrome、UC、QQ、Firefox、Opera、遨遊、海豚等）

採用HTML5的原因

1. HTML5大勢所趨

用HTML5製作的遊戲具備跨平台特性，並且採用JS開發語言，大大降低了開發成本。另外各個瀏覽器廠商都在加強對HTML5的支援，彼此展開對市場的競爭，對HTML5帶來了迅速的發展。另一方面HTML5是社交遊戲發展的未來，得益於HTML5遊戲無需下載的優勢，尤其是針對智能手機而言，玩家可以在社區裡隨時聊天、交友並相互分享遊戲的快樂。與原生用戶端相比，更易於推廣，方便更新版本，使用者會在第一時間看到。遊戲無需下載，可節省手機容量空間。只需開啟手機瀏覽器，就可以通過網頁體驗遊戲。

2. iPhone上的HTML5

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

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

調試：設定>Safari > 開發，開啟調試，即可協助開發人員查看日誌，有效解決問題。

離線：可以儲存應用到案頭，並採用離線方式，像本地應用一樣開啟運行。

開發中的問題

1. HTML5的局限性

目前HTML5還缺少有效開發工具。對於手機使用者來說，國內網路環境依然以GPRS為主，下載速度以及流量限制了大批使用者。

以Chrome、Safari為主的webkit核心比較成熟，但其它瀏覽器廠商都在研發新的核心，造成了大量相容性問題，對開發人員而言，需要做大量的適配工作，也由於不相容，影響了使用者體驗。

另一方面，與原生用戶端遊戲相比，HTML5所支援的功能較少或者欠缺，在效能上也是存在不足，但是隨著硬體效能和核心引擎的提升，將來會有所改觀。

2. iOS 4效能問題

由於採用iOS 4，用到Retina圖象最佳化方式，造成Canvas繪圖效率下降。實際上可以用過兩種方式避免，對於使用Canvas，可先放大再用viewport的0.5倍縮放，另一種是使用Dom做為遊戲呈現方式，採用transform3D加速。 而Safari 5採用Nitro JavaScript引擎。蘋果表示，Mac版Safari 5運行JavaScript指令碼的速度比Safari 4快30%，比Chrome 5.0快3%，幾乎達到Firefox3.6的兩倍。

3. Android問題

Android系統版本及瀏覽器比較多，標準不統一，造成大量機型適配工作。

4. Audio 問題

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

開發所用技術

1. Application Cache

為什麼要用Application Cache：第一次下載資源和代碼後，可以緩衝到瀏覽器緩衝區，從而加快遊戲載入代碼和資源的時間，以及在國內網路環境不好的情況下，有效緩解一些問題。

通過下面代碼，我們可以瞭解ApplicationCache的基本原理和更新實現。

<htmlmanifest="test.manifest"> ... </html>CACHE MANIFEST       #version v1 ?       #指明緩衝入口       CACHE:       index.html       style.css       images/logo.png       scripts/main.js?       #以下資源必須線上訪問    NETWORK:       login.php

如何更新：當你的資源或者代碼修改後，在Manifest檔案中，修改一下版本號碼即可，代碼實現如下。

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

2. jQuery Mobile

jQuery Mobile架構可以讓熟悉jQuery架構的開發人員快速開發出基於HTML5的行動裝置 App，而且直接通過手機的瀏覽器即可瀏覽。除此以外，jQuery Mobile也有很好的擴充性，使用者可以很好地對其進行定製修改。

jQuery Mobile也很好的為我們定義並展示了好的使用者體驗，很多東西值得開發人員借鑒。

樣本1：從jQuery Mobile借鑒過來，實現了凹凸貼圖的頁面切換，如果不採用CSS，用JavaScript實現後的效率很低。在三國時代中，當切換功能頁面時，可以看到划動的效果。

.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：實現了一個會閃爍的框，作為遊戲中新手引導的高亮顯示效果。

.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是遊戲中用到的一個很實用的功能，使用者無需每次都開啟Input輸入框來輸入數字，使用者可以通過划動捲軸來改變數字。HTML5增加了<inputtype="range" />這個標籤，但其實在手機並沒有完全支援，實際上用JavaScript+CSS也能做出期望的效果。

可以通過下面的關鍵代碼，來瞭解Slider的實現原理。

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

以上是該遊戲的開發心得，歡迎大家試玩這款遊戲。

作者：神奇時代