用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%，几乎达到火狐3.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的移动应用，而且直接通过手机的浏览器即可浏览。除此以外，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();
}

以上是该游戏的开发心得，欢迎大家试玩这款游戏。

作者：神奇时代