js 写中国象棋游戏_应用backbone、canvas

中国象棋  -- 【代码详细见附件,本版本暂只支持 谷歌的 chrome 浏览器,其它浏览器后续支持 】

作者: 江潇

Version: 0.0.1 

前段时间做了个跳棋,【见跳棋游戏—backbone框架开发】网友反馈功能还好,但棋子跳较简单,且可玩性不高。

建议可以做个象棋看看。于是上周日写了这个游戏,画面未用图片,美观差了些。

依然使用backbone框架管理MVC,目的交流backbone的使用【见透过源码学前端 之 Backbone 一】及二部分。

下载附件包,使用chrome浏览器运行 chess.html。业务代码在 core/chess.js

目前支持的功能有

1、生成棋盘

js 写中国象棋游戏_应用backbone、canvas

2、点击开始,生成双方玩家棋子

js 写中国象棋游戏_应用backbone、canvas

3、任一方可率先开始,规则同象棋规则

js 写中国象棋游戏_应用backbone、canvas

4、一方走过后,另一方底边线显彩色表示轮到该玩家进行

5、一方“将”被吃后,提示另一方获胜

js 写中国象棋游戏_应用backbone、canvas

尚待完善部分:

1、悔棋

2、操作声音提示

3、代码优化

4、欢迎指正其它bug

从结构上讲,参照跳棋,分为以下类:

chess  -- [view] app

coords -- [collection] 所有坐标点

coord  -- [model] 单个坐标点模型

pieces -- [collection] 所有棋子

pieceEl-- [view] 单个棋子视图

piece  -- [model] 单个棋子模型

parts  -- [collection] 某个棋子所有可跳点

partEl -- [view] 可跳点视图

part   -- [model] 单个可跳点模型

相比而言多了RULE,因跳棋难点在于画非矩阵棋盘及找出每个坐标与周围一圈坐标的关联,在此基础上跳子相对容易,

因为每个子跳法都是一样。

而象棋则棋盘及坐标规整画出来较容易,难点在于每个棋子的关联及吃子算法不一样,所有先在 RULE里定义

好规则,选中每个子时再据其规则,计算可走点及可吃点

另外 诚心求教 如何才能实现两个玩家在线实时对战功能,据说可以用 socket IO 进行实时消息推送,

我没用过,不明白如何着手,欢迎指教

相关推荐