基于HTML5的3D多人网页游戏实现方案

摘要： HTML5标准增强了网页在图形绘制、媒体播放、消息传送等方面的能力，为提高网页游戏性能创造了条件。基于该标准开发出一个3D多人网页游戏。介绍了其实现方案，测试了其相关性能，分析了该技术的可行性。
关键词： HTML5； WebGL； WebSocket； THREE.js；JavaScript

　中国网游产业已走过了11年，文化部发布的《2011中国网络游戏市场年度报告》显示，2011年中国网游市场规模为468.5亿元[1]。近年来，网页游戏（页游）因其方便省时等优点受到玩家青睐，正不断占领市场。2011年开始，3D页游的出现又使页游品质大幅提升。可以预测，高品质页游将在未来网游市场中占据一席之地。本文以自主研发的基于HTML5的3D多人网页游戏BillyRun为例，介绍了其实现方案，分析了其程序性能并展望了技术前景。

HTML5面向多媒体的互联网提供了新的标签进行支持:视频:Video,音频:audio,拖放:Drag,Drop,绘图:canvas,定位:Geolocation,Web存储:localStorage,sessionStorage,应用缓存:Application Cache,离线浏览,速度,减少服务器负载.

1 核心技术分析
1.1 以HTML5标准中Canvas元素为载体呈现游戏图像
　HTML5是最新的网页标准。广义论及HTML5实际是指包括HTML、CSS和JavaScript在内的一套技术组合，其目的在于减少浏览器对插件的依赖性和丰富网页的表现形式[2-3]。Canvas元素是HTML5中新增的页面元素，该元素是一个图形绘制容器，拥有一个基于JavaScript的API，可由脚本动态绘制图像[4]。BillyRun中的Canvas元素用于两个方面：一是呈现和更新3D游戏画面，二是绘制游戏中的部分2D画面。目前，IE、FireFox、Chrome、Opera等主流浏览器均支持Canvas元素。
1.2 基于WebGL的游戏画面渲染
　WebGL是一种3D绘图标准，该标准通过增加OpenGL ES 2.0的一个JavaScript绑定，为网页中Canvas元素提供硬件3D加速渲染，使网页3D程序能够流畅运行[5]，无需浏览器插件。游戏中场景创建和渲染使用了THREE.js。THREE.js是一个JavaScript开源3D库，能创建包括摄像机、灯光、材质、模型在内的三维场景，并由WebGLRenderer模块以WebGL标准渲染[6]。目前FireFox、Chrome、Opera、Safari等主流浏览器均支持WebGL标准。
1.3 基于NodeJS的服务端程序
NodeJS是基于Google V8引擎由JavaScript实现的服务器端可扩展程序，可作为编写高效网络服务程序的平台[7]。NodeJS消除了服务器端程序与客户端程序的语言差异，使代码可以复用，方便了页游开发。BillyRun服务器端由NodeJS搭建，其中定义了游戏信息，并通过Socket.IO模块与各客户端实时通信完成更新。服务器端连接了MySQL数据库，用于保存用户账号信息。目前服务器端在Linux、Windows 7和Windows Server 2003下均可运行。
1.4 基于WebSocket技术的网页实时通信
　WebSocket是HTML5提供的浏览器与服务器间全双工通信技术，主要用于实时通信服务。WebSocket十分高效，只须浏览器和服务器进行一次握手，便可双向传递数据。Socket.IO是Node.JS的一个开源模块，它对WebSocket进行了封装，提供了建立连接和消息推送的接口。BillyRun中基于此模块在服务器端建立了Socket服务，与每个客户端相连，完成信息更新和消息处理工作。目前，IE、FireFox、Chrome、Opera等主流浏览器均支持该技术。
1.5 Audio以及基于Web Audio API的3D音效
　Audio元素是HTML5中新增的元素，可实现音频文件播放等基本功能，支持HTML5的浏览器都能良好实现。Web Audio API由谷歌提出，是一套用于网页音频处理的JavaScript API[8]，其功能强大，尤其是3D定位和音锥技术，可根据声源与玩家的位置关系，控制左右声道实现立体音效。该技术能大大提高游戏品质，但目前只有Chrome浏览器能够支持。BillyRun中分别实现了这两套音效方案，兼顾了游戏品质和兼容性问题。
2 具体实现方案
2.1 游戏内容设计
BillyRun是一个空中对战射击游戏，游戏场景包括地面、天空和建筑物，每个玩家操作一架直升机在场景中飞行，可与其他玩家展开攻击或防御，已有多种游戏模式判定胜负。
2.2 程序整体结构
　BillyRun由服务器端程序和客户端程序两部分组成。服务器端程序实现了数据库交互、玩家事件处理、界面跳转等功能；客户端程序实现了界面显示、音效播放、游戏主循环等功能，运行在客户浏览器上。BillyRun功能结构图如图1所示。

2.3 程序执行流程
2.3.1 程序整体流程
　程序由客户端和服务器端组成，两端通过通信保持同步，其整体流程图如图2所示。

2.3.2 客户端程序流程
　客户端包含界面、加载、主循环、消息处理和输入系统5部分。
　（1）游戏有5个div元素封装的界面。玩家先后进入登录界面、游戏大厅界面、游戏房间界面、加载界面和最后的游戏界面，每局游戏结束时返回游戏大厅界面。
　（2）游戏的加载系统包括4部分：①场景模型和音频文件。为固定游戏资源，加载后保存在程序中，仅进行一次；②游戏信息。加载在每局游戏开始前执行，更新客户端信息；③玩家模型。加载在每局开始前执行；④加载本局游戏所需的玩家模型，使用如图3所示的动态加载方法，避免了重复加载，提高了程序效率。

基于HTML5的3D多人网页游戏实现方案相关推荐

基于HTML5平台做的“手机网页游戏”
游戏在这个娱乐年代怎么可能少,微信有了游戏,这个平台也成了它的主要增值空间."愤怒的小鸟"."捕鱼达人"."水果忍者",一个个耳熟能详的手机 ...
基于html篮球网页游戏,基于html5和jquery的篮球跳动游戏
今天给大家分享一款基于html5和jquery的篮球跳动游戏.这款实例和之前分享的HTML5重力感应小球冲撞动画类似.用鼠标拖动篮球,篮球在页面上跳动,可在演示中看下效果.效果图如下: 实现的代码. ...
基于html5制作3D拳击游戏源码下载
今天给大家分享一款基于HTML5实现的3d拳王游戏源码.这款实例适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器. 在线预览 ...
three.js加载3d模型_基于WebGL的3D技术在网页中的运用 ThingJS 前端开发
Three.js.ThingJS这些引擎库可以加载3D制作软件的模型,大幅度提高了制作效率,改变WebGL开发困难的局面,让Web开发者享受便捷的3D开发服务.三者的难度对比如下: ThingJS(框 ...
基于HTML5实现3D热图Heatmap应用
Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图已广泛被应用于气象预报.医疗成像.机房温度监控等行业,甚至应用于竞技体育领域的数据分析. http://www.hightopo.c ...
基于html5实现的推箱子小游戏
一.游戏功能分析 1)功能需求分析功能需求分析如图1-1所示. 小人推箱子:当箱子周围存在通道时,通过小人的左右移动实现推箱子功能. 炸毁墙面:小人当前所在位置的四周有墙面时,按下空格可以炸毁墙面 ...
基于 HTML5 的 3D 机房可视化实景监控
前言随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的同时,在监控系统中面临着严峻的现状问 ...
网页游戏一个服务器多少人,网页游戏开服数据报告
原标题:网页游戏开服数据报告一.网页游戏开服排行点评:本周网页游戏开服排行前三:<蓝月传奇>.<神印王座>.<传奇霸业>;本周优质开服数据共5634组,其中上榜 ...
基于HTML5气3D仿真培训系统
根据最近的上线HTML5的燃气3D培训仿真系统.曾经的老系统是採用基于C++和OpenGL的OpenSceneGraph引擎设计的,OSG引擎性能和渲染效果各方面还是不错的,但由于这次新产品需求要求能 ...

基于HTML5的3D多人网页游戏实现方案

基于HTML5的3D多人网页游戏实现方案相关推荐

最新文章

热门文章