跳棋游戏—backbone框架开发

游戏效果

跳棋游戏—backbone框架开发

跳棋游戏 -- 【代码详细见附件，本版本暂只支持谷歌的 chrome 浏览器，其它浏览器后续支持】

作者：江潇

qq: 2270112418

Version: 0.0.1 2013-6-24 -- 建议使用 chrome 运行、调用本次和后面推出的示例

背景：学了段时间backbone框架，分析跳棋游戏比较适合于backbone的编程思维，其有多些个 collecton + model + view 模型。

其实本游戏当初我不用backbone时代码量会更少，但用了结构更清晰、且易于扩展。

如何应用backbone 请参见即将在iteye上连载的《逐行分析JS源代码之 backbone 》[今晚将推出第一部分]，欢迎批评指正。

后期将在分析其它源码时为本案例添加其它诸如 nodeJS 等可连网对战功能。

功能：1、chrome下运行附件里的 draughts.html，会自动生成棋盘。

2、选择左上角玩家数量，点击开始，在棋盘上生成对应的玩家棋子

3、选择任一棋子其周围会显示可跳位置，同常规跳棋

4、点击可跳位置，棋子会跳到目标位置

5、玩家在跳动过程中可悔棋一步

6、当玩家全部跳到对家阵地时，会弹框提示成功

重点：1、如何画出棋盘及标识每个坑的位置见下图跳棋游戏—backbone框架开发，

通过看上面的图，可得出，棋盘就是两个等边三角形交叉可得，且每个棋子生成有可遵循的规律。

我们以其所在坐标点为每个点的ID，如 12-0为第一层的ID，11-2，13-2为第二层的ID，坐标数值也可以按规范取出，详见 draughts.js里的 createCoords 方法

function loop( dir ){
	var j = 0,
	      k = 0;
	while( j < 13 ){
		_x = x - j * _lit + k * _lit * 2;
		if( dir ){
			_y = y + _lit * j * 2;
			_c = 12 - j + k*2 + '-' + j;
		} else {
			_y = y + _lit*2*( 16 - j );
			_c = 12 - j + k*2 + '-' + (16 - j);
		}
		me.createCoord( _c, _x, _y, j, k, dir );
		if( k == j ){
			j = k + 1;
			k = 0;
		} else {
			k++;
		}
         }
}

2、如何标识出每个坑与邻近坑的关系

通过上图我们可以看到每个点有六个相连点，左上、右上、左、右、左下、右下，而坐标关系如下

refers  = { 
	tl: (_x-1)+'-'+(_y-1),   //左上
	tr: (_x+1)+'-'+(_y-1),  //右上
	ll: (_x-2)+'-'+_y,  //左
	rr: (_x+2)+'-'+_y, //右
	bl: (_x-1)+'-'+(_y+1),  //左下
	br: (_x+1)+'-'+(_y+1) //右上
};
/*
*  上面这所以标出方向，是后面查询间隔跳的关联点是要用到
*/

如方向上的值所代表的坐标点在第一步中生成的坐标集合中存在，即意味该点存在，这样找到坑所有的存在的关联。详见 Coords.refer

3、点击某棋子时，如何找出可跳点

在第二步的基础上，查询A点一周的关联点，是否有棋子，如果没有则可跳，如果有，如点右下方B点已有其它棋子，则查询B的右下方位置C是否空缺，如空则可跳，再判断C一周是是否有棋子，如有再查找同方法的下一个位置是否有空缺，依次递归。详见 Piece.arround / Piece.getSkip / Piece.near / Piece.getNearBy

最后，本游戏只在两台电脑上测试通过，欢迎大家试用，如有问题建议，欢迎反馈

跳棋游戏—backbone框架开发

相关推荐