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

        研究HTML5，有一些时间了，加了好几个HTML5 技术交流群，知道了BrowserQuest  这个开源的东西，也接触了不少引擎，如：比较流行的cocos2d 家族的 cocos2d-html5引擎，但考虑到自己是一个人在开发，以玩的心态想实现一个自己的游戏，不一定非得在手机上运行，所以暂时先把cocos2d-html5 放一下，它这个引擎不错，最起码引擎游戏思想，架构还是不错的。如 主要元素：导演》场景》层 》精灵》动作》地图》动画》粒子等操作 很不错，但是我发现用了它之后，因为它的封装，基本快把HTML5的语法都忘记的差不多了。所以我想用cocos2d-html5的思想，二次开发BrowserQuest ，BrowserQuest 这个开源的源码很不错，BrowserQuest 是 Mozilla 和Little Workshop 合作开发的一款多人在线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/

       并通过npm install [MODULE_NAME] 安装如下组件，如npm install underscore 或npm install -d underscore

       使用npm install -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_modules copy到 browserquest里，如下图

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

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

[html] view plaincopy
{ 
    "host": "127.0.0.1", 
    "port": 8000 
} 

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


[html] view plaincopy
<Context docBase="D:/workspaces/HTML5/BrowserQuest-master/" > 
 
</Context> 

启动Tomcat

浏览器访问

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

即可进入测试。

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

[html] view plaincopy
[Thu Nov 22 2012 12:29:48 GMT+0800 (中国标准时间)] DEBUG Received: 0,ddd,21,60 
[Thu Nov 22 2012 12:29:48 GMT+0800 (中国标准时间)] INFO ddd has joined world1 
[Thu Nov 22 2012 12:29:48 GMT+0800 (中国标准时间)] DEBUG Received: 20,927,929,10 
20,1021,1022,1120,1121,1122,1220,1221,1222,1320,1321,1322,11920,11921,12120,1212 
1,810235,815222,818209 
[Thu Nov 22 2012 12:29:48 GMT+0800 (中国标准时间)] DEBUG Pushed 21 new spawns to 
510 
[Thu Nov 22 2012 12:29:50 GMT+0800 (中国标准时间)] DEBUG Received: 4,29,225 
[Thu Nov 22 2012 12:29:50 GMT+0800 (中国标准时间)] DEBUG ddd is moving to (29, 2 
25). 
[Thu Nov 22 2012 12:29:50 GMT+0800 (中国标准时间)] DEBUG Received: 26,4 
[Thu Nov 22 2012 12:29:54 GMT+0800 (中国标准时间)] DEBUG Received: 21 
[Thu Nov 22 2012 12:29:54 GMT+0800 (中国标准时间)] DEBUG group diff: 
[Thu Nov 22 2012 12:29:54 GMT+0800 (中国标准时间)] DEBUG Received: 20,926,928,18 
20,1821,12220,867220 
[Thu Nov 22 2012 12:29:54 GMT+0800 (中国标准时间)] DEBUG Pushed 6 new spawns to 
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进行了研究，至于中间件对于我来说，已经很熟悉了。

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

评论

2 楼 avi9111 2017-06-09  

内陷到android, ios, winphone里面也是随便的，事实上也有一些人这么做了。。。。中国市场看的到，哈哈，做游戏发行的也是牛人

1 楼 avi9111 2017-06-09  

呵呵，做不下去了吧，没有第二集了吧，游戏是个深坑，谨慎进入，其实现在是2017年，我可以事后诸葛般的说，为什么Mozilla，我没看错，是那个浏览器吧，为什么他们要支持一款html5游戏，并开源捏，因为他们得给别人证明我的浏览器是能支持HTML5的，看HTML5的作品多吊，用我的浏览器内核吧

再说说服务器吧，回到2013年，那时候NODEJS可是不得了的东西，并不是中间件什么的（可以在MAC, LINUX都能跑的服务器啊，根本就不需要JVM，要说NODEJS是中间件，JVM是中间件么？）

这个游戏整个框架最屌的地方就是客户端，不管什么浏览器，只要支持HTML5的都能跑，服务器，所有系统的服务器都能跑。。。。。。。。。。。。。。如其说MOZILLA吊，不如说设计这个游戏框架的人吊，这是那个团队，哪个工作室做的捏，而且博主拿到这个游戏的时候已经是2013年，其实这个游戏2011年就有了，2012开源，倒不如说一开始开发人家就是GIT管理并开发的，发布后直接private变public就开源了，2011年的NODEJS，请自行GOOGLE，百度是搜不到的，所以说做HTML5游戏的人，做游戏的人都比较吊，不吹不黑，真的很吊，看到这些源码就后怕