日期:2014-05-16  浏览次数:20537 次

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

? ? 上周做了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 做通信,前端已经已经成为越来越重要的存在,望广大前端爱好者,共同努力,扩大我们前端的作用 及 影响。

?

有意见、建议欢迎留言

?

1 楼 chenhaifeng 1 小时前  
沙发,顶楼主,拿来学习学习。
2 楼 chenhaifeng 1 小时前  
楼主可以试试 appfog,看能不能部署上去
3 楼 拽的欠扁 1 小时前  
下的东西解压不了。
4 楼 逐行分析JS源代码 1 小时前  
不好意思诸位,刚提交的文件有些问题,又更新了下。请重新下载
5 楼 逐行分析JS源代码 1 小时前  
最初失误把 express/ socket的依赖包也更新上去了,我已经删掉了,这个需要在配置的时候通过 npm install自己安装依赖包,才有效
6 楼 hlj317 43 分钟前  
你好,楼主,我下载了你的资源,自己配置了一下,非常不错,在没钱买象棋或者没网的情况下,可以跟朋友或者母亲大人利用局域网,进行象棋对战。

有几个意见,供楼主参考:

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

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

3.第三步和第四步可否能说