js 象棋游戏 _ 支持双方在线对战

 

说明：实在对不住诸位，的确是我弄错了，views/index.ejs里的对 socket.io.js的引用使用了我本地的绝对路径，需要修改为<script src="/socket.io/socket.io.js"></script>即可，对此我重新打了个包。再次歉意！！！

 

上周做了javascript版的象棋游戏【详见 js 写中国象棋游戏_应用backbone、canvas】，在iteye上发布后，承蒙诸位赏脸，有所反响。

 

    经广大朋友指点，本周在前一游戏的基础上增加了 双方玩家可在 浏览器 上 在线对战 的 功能，有朋友提议用 ajax 或 falsh 可以通信，但前者较初级，后者非前端技术。衡量下接受了另一个网友提议的 nodeJS + websocket，实际开发是使用 express + socket.io 框架实现。因暂无 nodeJS 服务器可用，需要大家先自己在电脑上配置下环境运行，非常简单。

 

配置方法：

1、下载附件文件压缩包，解压到本地，如 E:/chess

2、如无 nodeJS 先安装 http://nodejs.org/

2、运行 cmd，执行 npm install -g express [ 安装express框架包 ] 

3、命令进入chess文件夹 执行 npm install  [ 安装依赖包，主要是 socket.io ] 【注意文件夹路径，有人反馈，找不到，是因为解压方式的不同，可能会是 E:/chess/chess 】

4、启动 node app.js

 

上述四步即可，如果无法运行 可留言。

 

功能介绍：

1、使用chrome打开 本地服务 ，可以先通过 ipconfig 查询自己的本地IP，如172.7.1.60，用浏览器打开本地IP加端口号，如 http://172.7.1.56:3000 ，会自动为网址后添加随机数作为房间号， 如 http://172.7.1.56:3000/31 【如只本地测试也可以打开 http://127.0.0.1:3000 】，  此时会提示“暂无其他玩家，将本页面网址发给朋友打开，即可进行游戏连接”。如图

 

 

2、当另一可访问你电脑的玩家打开同样的网址，或自己再本机用另一浏览器打开同样的网址， 会提示 “对方已进入，可以开始游戏”。注意房间号要相同。

 

3、当双方都点击开始后，棋子自动从棋盒进入棋盘并摆放好位置。如图

 

4、双方按象棋规则进行，被吃掉的子会自动放回棋盒。如图

 

5、当一方获胜时，提示胜利

 

6、此时可以点击开始 进行新一轮游戏

 

7、当一方离开时，提示“对方已离开”

 

8、右下角，有一个简单的实时聊天框，以供双方及时通讯

 

象棋本身的制作规则建议看 【详见 js 写中国象棋游戏_应用backbone、canvas】。

本案例主要使用了 

jQuery - 底层

Backbone - MVC框架，对象棋视图、模型、事件有效管理

express - 封装 nodeJS，作后台服务

socket.io - 封装 websocket，作数据通信

 

本来是想做一个可多房间选择版的，已初步完成并可用，但因还需要维护各房间状态，本周无法及时发布，暂弃。如图

 

 

还望广大朋友支持的功能有

1、如何做各种状态下的声音提示

2、找一个可以免费使用的支持nodeJS的服务器，放上去可供大家直接试用

3、支持摄像头实时视频

 

现在我们前端开发可以用 nodeJS 搭后台环境，可以用 socket 做通信，前端已经已经成为越来越重要的存在，望广大前端爱好者，共同努力，扩大我们前端的作用 及 影响。

 

有意见、建议欢迎留言

 

评论

22 楼 huangchao064 2013-07-10  

楼主.按照你的做法,不行啊.
报错提示如下:
module.js:340
    throw err;
Error:Cannot find module 'express'
....
是什么问题呢?
刚开是不行.我就把你第二步划掉的npm install -g express的命令也打上去.下载完后还是不行啊

21 楼 hailongshih 2013-07-10  

为啥我这边界面出来,点击开始没有反应

20 楼 yuan_bin1990 2013-07-10  

逐行分析JS源代码 写道

yuan_bin1990 写道

非常不错，想研究研究学习学习，不知怎么入手，能简单的说下不，谢谢。

介个是要从何说起呢，是js语法 还是 象棋思路

大概的说下思路吧，还有入口在哪里，再研究学习之前，要具备哪些技术基础、框架知识才看得懂。这样的话看起来方便些。

19 楼 charryong 2013-07-10  

ok，部署成功！

18 楼 kuchaguangjie 2013-07-10  

顶!!!!!!

17 楼 逐行分析JS源代码 2013-07-09  

charryong 写道

奇怪，我这下不了。。。。，估计是铁通的原因。。。。

已发你邮件

16 楼 charryong 2013-07-09  

奇怪，我这下不了。。。。，估计是铁通的原因。。。。

15 楼 逐行分析JS源代码 2013-07-09  

charryong 写道

代码无法下载？？？

刚又试了下，可以下载的，并且现在下载次数还在一直增加

14 楼 charryong 2013-07-09  

代码无法下载？？？

13 楼 hlj317 2013-07-09  

hailongshih 写道

lz真神人,一周功夫就进步这么大

天下无难事，只怕有心人~~楼主非常好地印证了这一点，可说是我辈的楷模~~~

12 楼 逐行分析JS源代码 2013-07-09  

yuan_bin1990 写道

非常不错，想研究研究学习学习，不知怎么入手，能简单的说下不，谢谢。

介个是要从何说起呢，是js语法 还是 象棋思路

11 楼 hailongshih 2013-07-09  

lz真神人,一周功夫就进步这么大

10 楼 yuan_bin1990 2013-07-09  

非常不错，想研究研究学习学习，不知怎么入手，能简单的说下不，谢谢。

9 楼 chenhaifeng 2013-07-09  

逐行分析JS源代码 写道

感谢二楼的建议，刚查了下应该可行，今天试用下，

我最近也在玩appfog这个云部署，支持多种语言，还不错。有机会多交流。

8 楼 逐行分析JS源代码 2013-07-09  

感谢二楼的建议，刚查了下应该可行，今天试用下，

7 楼 flex_莫冲 2013-07-09  

速度真快。支持楼主

6 楼 hlj317 2013-07-09  

你好，楼主，我下载了你的资源，自己配置了一下，非常不错，在没钱买象棋或者没网的情况下，可以跟朋友或者母亲大人利用局域网，进行象棋对战。

有几个意见，供楼主参考：

1.node的配置截图可否能更详细的把流程展现出来，考虑到不少读者对node并不熟悉；

2.低版本的chrome似乎并不支持socket.io，我想楼主可以顺便把可用版本的chrome下载地址也发布出来，或者说是保证能用的浏览器；

3.第三步和第四步可否能说得再详尽一些，比如在DOS下怎么寻找目录，要考虑到有不少读者对DOS命令的操作并不熟悉；

4.在游戏开始之后，可否有自己走，或者是对方走的提示，这样也许用户体验会更好。

总的来说，这个JS做的象棋游戏非常棒，HTML5强大的一些交互功能也是未来的趋势，希望楼主能用JS做出更棒更好的游戏来，持续关注楼主，也希望有更多的网友能一起支持楼主，互相探讨，互相学习。

5 楼 逐行分析JS源代码 2013-07-09  

最初失误把 express/ socket的依赖包也更新上去了，我已经删掉了，这个需要在配置的时候通过 npm install自己安装依赖包，才有效

4 楼 逐行分析JS源代码 2013-07-09  

不好意思诸位，刚提交的文件有些问题，又更新了下。请重新下载

3 楼 拽的欠扁 2013-07-09  

下的东西解压不了。