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%，幾乎達到火狐3.6的兩倍。

3. Android問題

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

4. Audio 問題

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

開發所用技術

1. Application Cache

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

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

<htmlmanifest="test.manifest"> ... </html> CACHE MANIFEST#version v1 ?#指明緩存入口CACHE:index.htmlstyle.cssimages/logo.pngscripts/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的移動應用，而且直接通過手機的瀏覽器即可瀏覽。除此以外，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(); }

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

作者：神奇時代

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。