HTML5 QQ 斗地主诞生记

HTML5QQ斗地主 诞生记腾讯无线游戏产品部马亮（bertma）

关于我 • 2010年加入腾讯无线产部休闲游戏开发组从事:客户端软件\终端开发座右铭：……. • 2011年加入HTML5 QQ游戏大厅项目组 • 现在… 没法判断革命是否有理时候，直接就参与革命算了。晚了就不赶趟了。囧不要满足于做码农、屌丝！

谁需要HTML5？ 研究较早，但影响力不够~ 国外国内 • Google？ • Apple的Jobs ？ • 微软？ • Mozilla/Firefox ？ • Opera ？淘宝？新浪？百度？腾讯？姿态开放，有新浪微博作品牌阵地~ 推出微游戏~ 各种利好消息到来，可以抄底了~ 刚加入W3C，参与国际标准制定 Q+平台，Q立方浏览器，有一定的HTML5应用，加入W3C

谁需要HTML5？ • 用户想要HTML5吗？用户要的不是技术，是应用，是体验。如果你能拿Ajax实现一个开心农场，我想没谁会在乎它是不是Flash做的。 • 开发者想要 HTML5吗？“Written once, Run everywhere”．HTML5+CSS3+JS的开发环境，各个浏览器提供统一的用户体验。不需要增加新平台移植的学习成本。

Browser launch native apps • iPhone上URL Schemes的作用为应用程序提供了一个其他应用程序或者Safari可以启动他的方法.就像Android上Intent一样。只不过Intent的功能要比URL Schemes强很多。 • 原理：将相应Scheme注册到系统里面。如果有应用程序通过[[UIApplication sharedApplication] openURL:url]打开了Safari或者直接在Safari里面输入URL。系统会检测URL,然后对照已经注册的scheme来启动相应的应用程序.比较常见的scheme有Maps,mailto,tel,sms。当然你可以自己定义一个。定义方式参见： http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html

HTML5游戏框架探讨 • HTML5强实时交互游戏的关键-----WebSocket • AJAX-JCE-跨域访问 • 资源下载带来的“伤痛” • HTML5游戏大厅开发平台展望目录

HTML5休闲“页游”编程模式选择 有时候，多种风格混搭是不可避免的！

HTML5休闲游戏----程序框架发展方向 场景化 HTML5 游戏资源包核心逻辑界面UI代码界面逻辑核心解析逻辑 + 资源功能包

HTML5游戏场景化抽象 拍电影场景 • 1.什么是场景（what） • 2.为什么要用场景(why) • 3.如何应用场景(where) 拍人物拍风景？地图层精灵层

为什么要用场景? 休闲游戏特点：类似程序的游戏，各个页面有一定的规律，但又经常变化。能够很好的和现在的场景模式互通，转移成本较低，减少的工作量比较明显。在某种程度上实现ui改动与”我”无关。用了场景方式编写游戏，UI代码量减少40%，逻辑更加清晰。

如何应用场景？HTML5游戏----可视化制作与发展方向如何应用场景？HTML5游戏----可视化制作与发展方向

HTML5游戏----可视化制作与发展方向 目标：结合webGL,考虑加入粒子系统

目录 • HTML5游戏框架探讨 • HTML5点睛之笔-----WebSocket • AJAX-JCE-跨域访问 • 资源下载带来的“伤痛” • HTML5游戏大厅开发平台展望

HTML5强实时交互游戏的关键-----WebSocket • “轮询”方式实现服务器推送 • 为了实现即时通讯(real-time)，所用的技术都是轮询(polling)。轮询是在特定的时间间隔(time interval)（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客服端的浏览器.然而HTTP request 的header是非常长的，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽。---心跳协议 • 而最比较新的技术去做轮询的效果是Comet – 用了AJAX。但这种技术虽然可达到全双工通信，但依然需要发出请求(reuqest)。 • Websocket的优点 • 1. Header • 互相沟通的Header是很小的-大概只有 2 Bytes，保持服务器心跳 • 2. Server Push • 服务器可以主动传送数据给客户端，推送系统消息

Websocket前后端通信机制

Websocket前后端通信机制----后台动态扩容 • 文本帧（text frame）和二进制帧(binary frame） • 文本帧以字节0x00开头，以字节0xFF结尾。当中的文本内容要转换成UTF8编码。 • 二进制帧以字节0x80开始。和文本帧相反，二进制帧没有结束标志。在二进制帧的开始标识字节（0x80）之后就是长度字节。 • 传送数据是用base64序列化/json序列化/加密….的数据。 • 如何控制连接数？ • 后台侧检测到连接数超过一定限制后，会在三次握手成功后，首条协议回包时断开连接，并且提示用户服务器繁忙。 • 好处：有利于服务器流量控制和放量测试。

斗地主？ 基于Websocket的游戏断线重连机制用户手动刷新页面网络连接断开手机没电了浏览器异常退出

目录 • HTML5游戏框架探讨 • HTML5强实时交互游戏的关键-----WebSocket • AJAX-JCE-跨域访问 • 资源下载带来的“伤痛” • HTML5游戏大厅开发平台展望

AJAX-JCE-跨域访问

AJAX-JCE-跨域访问 • AJAX是Async Javascript And Xml,不过Xml目前在该领域逐渐少用,传送数据常用格式： • 二进制bianry type（ArrayBuffer）。采用二进制流进行数据传输 • Json(JavaScript Object Notation)类型： 1.动态属性，非严格类型，对象相当于map. 2.就两个方法parse,stringify,所有较新的浏览器都支持，及其简单。 JCE？ ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajax.overrideMimeType('text/plain; charset=x-user-defined'); ajax.responseType = "arraybuffer";

AJAX-JCE-跨域访问 • 在同一域的服务器端建立一个代理，浏览器向该代理网址发送请求，然后该代理向其他域的网址发请求，在获取回复后，或作处理或按原样发回到浏览器。 • 使用按需(On-Demand) Javascript 脚本。在页面内动态生成新的<script>，将其src属性指向别的网站的网址，这个网址返回的内容必须是合法的Javascript脚本，常用的是JSON消息。 • 使用IFRAME。在页面内嵌或动态生成指向别的网站的IFRAME，然后这2个网页间可以通过改变对方的anchor hash fragment来传输消息。

资源下载带来的“伤痛”---先抛出问题 • 做下载做进度条，只知道下载的个数，没法拿到当前下载的资源名。 • 大文件不支持断点续传 • IP与CDN别名缓存 • 程序控制缓存的增加，不要打扰用户，每5M一个提示。

离线存储 离线存储，即offlineStorage,它通过一个cache manifest文件告诉浏览器哪些资源需要缓存起来以便离线状态时使用。这样浏览器只在缓存文件修改时才重新更新cache,不仅使得用户可以在离线状态时访问web页面，同时也加快了web页面的加载速度，节约了流量，优化了用户体验。如何使用离线存储： ♦ 配置你的服务器。缓存文件所对应的mime-type是text/cache- manifest的，你需要配置服务器来发送对应的MIME类型信息，不然服务器无法识别。 ♦ 建立cache manifest文件 ♦ 在html5页面中，指定manifest='xxxx.manifest' ♦你还可以通过javascript api来干预缓存的更新（非必需）

典型的cache manifest文件结构 CACHE MANIFEST(必需以此行作为开头) # version # 缓存入口 CACHE: index.html style.css back.png # 以下资源必须在线访问 NETWORK: online.jsp # 如果url1无法访问则用url2代替 FALLBACK: /url1 /url2

如何更新离线资源 当离线资源发生变化时，资源会自动更新吗？答案是：不会。因为当你添加了manifest=xxx.manifest时，浏览器每次都只会去查看manifest文件有没有更新，而不再管里面罗列出的离线资源。只能通过更新manifest文件来更新离线资源，常见的做法是更新缓存文件的版本号，这样浏览器会重新下载缓存的资源，并在下一次访问时使用新的cache。可以借助javascript api 监听cache事件updateready来完成即时更新。 var cache = window.applicationcache; cache.addEventListener('updateready', function(){ cache.swapCache(); }, false);

离线存储的工作原理 当浏览器打开指定了manifest文件的网页时，会自动在后台下载manifest文件的CACHE及FALLBACK中指定的文件，离线缓存会在下次打开(或刷新)当前页面后生效。

离线存储的服务器端配置 • 用tomcat/nginx服务器来讲解。 • 讲到tomcat配置，熟悉的朋友自然就会想到web.xml这个文件，没错，在文件中加入如下配置就行： • 1<mime-mapping> • 2<extension>manifest</extension> • 3 <mime-type>text/cache-manifest</mime-type> • 4</mime-mapping> • 然后写一个xxx.manifest文件，xxx是你自己取的一个名字。这个文件的格式是这样的： • 对于nginx服务器来配置。 • 编辑mime.types,添加manifest文件映射。

离线存储的注意事项 • a.离线应用多个页面引用同一个manifest时，离线文件存在一起。chrome中会标识Master, Explicit，前者表示引用了manifest文件，后者表示是manifest文件里定义了它需要缓存。 • b.不同的manifest文件内容相同时，看起来是存两份，实际上chrome不会再去请求已离线缓存的相同url的文件，这个也可能与浏览器的普通缓存的存储策略有关。 firefox会去请求部分。 • 1、manifest中配置的绝对url必须和manifest的url的<scheme>要相同,不同的忽略； • 2、如果manifest的url的<scheme>是https:则必须是同源； • 3、如果url中有<fragment>，解析时候要去掉<fragment>部分。

离线存储的注意事项 • 1、浏览器会自动缓存引用了manifest文件的网页，一个manifest文件可以给多个网页引用 • 2、CACHE中的列表，每一行只对应一个文件，不支持通配符 • 3、NETWORK中的列表支持通配符，比如"/"可以表示所有根目录下的文件 • 4、FALLBACK中的列表，每行2个文件，中间用空格间隔，不支持通配符 • 5、CACHE列表定义的缓存资源比NETWORK列表定义的在线资源优先级高 • 6、如果网页中请求了既没有在CACHE及FALLBACK中定义的文件，也没有在NETWORK中定义的在线文件，则会请求失败 • 7、若manifest文件格式有错或定义的离线资源无法在线访问，则会更新失败(停止余下的更新任务)

本地存储用法简介 在HTML5中，本地存储是一个window的属性，可以通过window.localStorage或者window['localStorage']来访问。localStorage和sessionStorage的用法是一致的，接口如下： DOM Storage 接口 interface Storage { readonly attribute unsigned long length; getter DOMString key(in unsigned long index); getter any getItem(in DOMString key); setter creator void setItem(in DOMString key, in any data); deleter void removeItem(in DOMString key); void clear(); }; 本地存储只能存储字符串类型的数据，对于对象可以借助json.stringfy()和json.parse来实现存储。对于结构化的数据，可以考虑使用web sql database,支持基本的关系数据库功能，同时能够保证事务的一致性。

HTML5游戏大厅开发平台展望 • QQ游戏大厅HTML5版发布后,开始推广这个游戏平台,希望能有更多同行的HTML5游戏加入到开放平台中来,相互学习、共同进步。

谢谢

HTML5 QQ 斗地主诞生记