【HTML5游戏开发】二次开发 BrowserQuest 第一集

研究HTML5，有一些时间了，加了好几个HTML5技术交流群，知道了BrowserQuest这个开源的东西，也接触了不少引擎，如：比较流行的cocos2d家族的cocos2d-html5引擎，但考虑到自己是一个人在开发，以玩的心态想实现一个自己的游戏，不一定非得在手机上运行，所以暂时先把cocos2d-html5放一下，它这个引擎不错，最起码引擎游戏思想，架构还是不错的。如主要元素：导演》场景》层》精灵》动作》地图》动画》粒子等操作很不错，但是我发现用了它之后，因为它的封装，基本快把HTML5的语法都忘记的差不多了。所以我想用cocos2d-html5的思想，二次开发BrowserQuest，BrowserQuest这个开源的源码很不错，BrowserQuest是Mozilla和LittleWorkshop合作开发的一款多人在线RPG游戏，这款游戏完全是用HTML5开发完成，没有任何的flash，它通过使用WebSocket通讯连接一台主服务器来获取其它玩家的移动信息，这个对于我这个初学游戏开发的新人来说是很好的一个示例。本人一直从事JAVA开发，8年的java开发经验，目前是java技术经理，但觉得看java的东西很累了，想玩玩游戏开发，在家没事，想开发一个RPG游戏，回忆学生时代的传奇世界那时的疯狂，考虑再三，觉得BrowserQuest基本都满足的我需求（HTML5开发的，RPG游戏，有源码）。

废话不说了，动手先架起BrowserQuest，让游戏跑起来，这样就可以看看它的游戏过程。

安装部署过程：

百度获得BrowserQuest的下载地址，把BrowserQuest源码下载到本地。

官方网站:http://browserquest.mozilla.org/

代码下载地址:https://github.com/mozilla/BrowserQuest

1、安装node.js，下载地址为http://nodejs.org/

并通过npminstall[MODULE_NAME]安装如下组件，如npminstallunderscore或npminstall-dunderscore

使用npminstall-d可以自动配置package.json，并安装所有需要依赖的包

underscore

log

bison

websocket

websocket-server

sanitizer

memcache

2、下载BrowserQuest，地址:https://github.com/mozilla/BrowserQuest

3、准备一个Webserver，如tomcat7

4、准备一个支持HTML5的浏览器，如FireFox,Chrome等，建议使用FireFox,加上FireBug以便方便对js代码进行跟踪测试

BrowserQuest的目录结构

解压完成的目录结构为

bin

client

server

shared

tools

目前来说，只和client和server有关系。

其中server需要使用node.js框架启动，client使用tomcat7启动，其实指和用户浏览器相关的部分。

Node启动Server

进入server目录，将config_local.json-dist改名为config_local.json

需要把node_modulescopy到browserquest里，如下图

进入browserquest目录，使用nodeserver/js/main.js命令，如下图所示

Tomcat7启动Client

进入client/config目录，将config_build.json-dist改名为config_build.json,并且将config_build.json中的host修改为127.0.0.1

[html]viewplaincopy

{

"host":"127.0.0.1",

"port":8000

}

修改tomcat的配置，增加一个webcontext，注意docbase是到browserquest目录而不是client目录

[html]viewplaincopy

<ContextdocBase="D:/workspaces/HTML5/BrowserQuest-master/">

</Context>

启动Tomcat

浏览器访问

访问地址为http://localhost:8080/client

即可进入测试。

测试在node的服务端能看到很多输出

[html]viewplaincopy

[ThuNov22201212:29:48GMT+0800(中国标准时间)]DEBUGReceived:0,ddd,21,60

[ThuNov22201212:29:48GMT+0800(中国标准时间)]INFOdddhasjoinedworld1

[ThuNov22201212:29:48GMT+0800(中国标准时间)]DEBUGReceived:20,927,929,10

20,1021,1022,1120,1121,1122,1220,1221,1222,1320,1321,1322,11920,11921,12120,1212

1,810235,815222,818209

[ThuNov22201212:29:48GMT+0800(中国标准时间)]DEBUGPushed21newspawnsto

510

[ThuNov22201212:29:50GMT+0800(中国标准时间)]DEBUGReceived:4,29,225

[ThuNov22201212:29:50GMT+0800(中国标准时间)]DEBUGdddismovingto(29,2

25).

[ThuNov22201212:29:50GMT+0800(中国标准时间)]DEBUGReceived:26,4

[ThuNov22201212:29:54GMT+0800(中国标准时间)]DEBUGReceived:21

[ThuNov22201212:29:54GMT+0800(中国标准时间)]DEBUGgroupdiff:

[ThuNov22201212:29:54GMT+0800(中国标准时间)]DEBUGReceived:20,926,928,18

20,1821,12220,867220

[ThuNov22201212:29:54GMT+0800(中国标准时间)]DEBUGPushed6newspawnsto

510

无法连接到服务端

最常见的问题是点Play后，页面停留在connecting上，请检查一下两点配置：

1、node.js服务端是否启动正常，可通过http://127.0.0.1:800/status如果返回类似[0,0,0,0]。如果无法返回检查是否有相关的模块，或8000端口是否被占用。

2、tomcat的web路径要配置到client的上一级，client必须作为子目录。

安装过程中，可以看到，用到了Node.js和服务器端tomcat（当然你可以选择其它中间件，只是支持html访问即可。）浏览器必须支持HTML5，建议使用火狐和谷歌浏览器。

所以我对Nodejs进行了研究，至于中间件对于我来说，已经很熟悉了。

到这里我已经完成了安装和部署了。