HTML5 概念联机海战游戏 demo

HTML5概念联机海战游戏demo HTML5研究小组秀野堂主 Email:admin@xiuyetang.com

注意 warning • 本PPT表现上属于疲软，但内容坚挺，仁者见仁，智者见智 • 建议开发人员将部分内容拿回去加入开发手则，不收版权费 • 本游戏代码完全共享，但不建议商用，因为你没有十分合适的浏览器跑 • 以上属于吹牛打屁，大家可以听完后用热烈的掌声报复我

重型Web联机游戏的技术要求 • 实时、稳定的网络连接（webSocket） • 高效物理动作（抛物线、碰撞）（JS物理引擎） • 音效处理（audio） • 高性能的子线程运算（雷达）（webWorker） • 页面效果处理（开炮、航行）（canvas） • 实时数据的临时存储（localStorage） • 离线应用与文件缓存（applicationCache && manifest）

游戏界面基本层次-Canvas的工作

战斗与航行过程的物理实现 Y=x平方

雷达与地图数据 100000*100000=大地图 1000*500=我船的窗口区域在我船：X±500 Y±250范围内出现的船，都是需要在当前窗口显示的在我船： X±500 Y±250范围外的船，都仅在雷达中显示敌船敌船我船 500px 敌船 1000px

传输模式 Server (nodejs) 以数组形式存储用户信息，并广播所有用户信息设带宽为4M，则可带动的用户约为：10000个玩家 Websocket applicationCache LocalStorage canvas 一个用户向服务器传输的基本信息｛用户ID，坐标，航向，炮塔航向，血｝约400Bytes

架构模型 Chrome broswer localStorage applicationCaches websocket canvas audio Node.jswebsocketserver / web server

看演示

经验 • 在win7的64位操作系统下，所有浏览器都不定时出现canvas绘图异常，调试保存后往往看不到改动的效果。 • 开发基于nodejs的websocket服务端程序，绝不要使用win7。如果非要用windows操作系统，win2008 win2003 xp都很不错。推荐使用linux环境。 • 非iphone手机浏览器共同的问题：不支持websocket。 • applicationCache的使用需要做好版本与文件命名规划，否则更新是个问题 • Canvas动画制作一定要有面向过程的概念，不能脱离主程序 • localStorage吃不消密集读写，会崩溃 • SSJS非常好，建议关注

教训 • 浏览器在对HTML5标准的支持上有走回头路现象，应该严厉批评。 • 浏览器厂商总是称呼开发人员和用户为衣食父母，但是他们真的不是太孝顺。 • 在css的问题上，火狐总是喜欢自行一套，这往往加大开发工作量，而且增加代码量，间接增加带宽消耗。 • 如果您计划使用HTML5，请密切注意跟踪浏览器厂商与标准的变化，同时也要注意到相关的“走回头路”现象，制定好稳妥的技术架构与衍生方案很重要。 • 就浏览器支持的情况看，HTML5全面应用爆发还有麻烦。从图表中可以看到，如果现在上马HTML5，你会在API应用上面临被浏览器绞杀的局面。（本例子就是深受其害） • 现在是浏览器市场的乱世，也是移动互联网的乱世

浏览器厂商在HTML5上的问题

希望 • 群众基础越来越庞大，HTML5+CSS3+Canvas已经被广泛支持。 • HTML5一定会在非游戏领域发生巨大影响。 • HTML5的标准还在不断的演进，产生新的令人惊奇的变化。例如：audio也许会成为一个可以make voice的API，而不仅仅是一个player。 • 手机端的浏览器厂商在不断跟进。（skyfire，dolphin就是很好的例子） • Html5研究小组将构建物理引擎，2d游戏引擎列入计划。 • 有很多热心的公司坚定的支持html5研究小组

鸣谢 • SpillGames Asia（势必游） • Leiyoo（磊友） • CQ，susan，heaven，terry，黄何，田爱娜 • 所有给予我帮助和现场耐心听完的朋友们

HTML5 概念联机 海战游戏 demo