【软件分享】WEB中国象棋,人和人对战。

王集鹄 2009-06-23 11:31:14
加精

棋盘是一个9*10的矩阵,Javascript没有直接的二维数组,就用一维来表示
坐标和数值下标的公式:position = y * 9 + x;

棋谱回放演示:
http://www.renrousousuo.com/Review/ChineseChess.aspx?id=-1


初始的棋盘布局是一样的,定义个数组常量:
1为“将” 2为“士” 3为“象”...
整数为红子、负数为黑子
var CChessConsts = {
classes: {
"0": "space"
,"1": "red1", "2": "red2", "3": "red3", "4": "red4", "5": "red5", "6": "red6", "7": "red7"
,"-1": "black1", "-2": "black2", "-3": "black3", "-4": "black4", "-5": "black5", "-6": "black6", "-7": "black7"
}
, initBorad: [
-5, -4, -3, -2, -1, -2, -3, -4, -5
, 00, 00, 00, 00, 00, 00, 00, 00, 00
, 00, -6, 00, 00, 00, 00, 00, -6, 00
, -7, 00, -7, 00, -7, 00, -7, 00, -7
, 00, 00, 00, 00, 00, 00, 00, 00, 00
, 00, 00, 00, 00, 00, 00, 00, 00, 00
, +7, 00, +7, 00, +7, 00, +7, 00, +7
, 00, +6, 00, 00, 00, 00, 00, +6, 00
, 00, 00, 00, 00, 00, 00, 00, 00, 00
, +5, +4, +3, +2, +1, +2, +3, +4, +5
]
};


每个棋盘格子是一个td,通过改变背景图来显示不同的状态
棋盘和棋子的样式表:
.div_desktop {width:459px;height:538px;}
.div_desktop input {width:65px;position:absolute;}
.div_desktop .input_username {border:none 0;background:transparent;left:70px;width:100px;font-weight:bold;}
.div_desktop .input_rank {border:none 0;background:transparent;width:70px;font-weight:bold;}
.div_player {position:relative;}

.table_board{width:459px;height:510px;background:url(/Images/chinesechess_board.gif)}
.table_board td{width:51px;height:51px;text-align:center;line-height:34px;}

.chess{background:url(/Images/chinesechess_corner.gif);}
.space{background:none;}
.red1{background-position:0 0;}
.red2{background-position:-50px 0;}
.red3{background-position:-100px 0;}
.red4{background-position:-150px 0;}
.red5{background-position:-200px 0;}
.red6{background-position:-250px 0;}
.red7{background-position:-300px 0;}
.black1{background-position:0 -50px;}
.black2{background-position:-50px -50px;}
.black3{background-position:-100px -50px;}
.black4{background-position:-150px -50px;}
.black5{background-position:-200px -50px;}
.black6{background-position:-250px -50px;}
.black7{background-position:-300px -50px;}
.redJiang{background-position:-200px -100px;}
.blackJiang{background-position:-250px -100px;}

.cur_drag{cursor:pointer;}
.div_selection{width:50px;height:50px;background:url(/Images/chinesechess_corner.gif) no-repeat 0 -100px;}
.div_from{width:50px;height:50px;background:url(/Images/chinesechess_corner.gif) no-repeat -50px -100px;}
.div_to{width:50px;height:50px;background:url(/Images/chinesechess_corner.gif) no-repeat -50px -100px;}
.cur_kill{cursor:url(/Images/kill.cur),auto;}
.cur_move{cursor:url(/Images/footprint.cur),auto;}

.div_manual{width:300px;height:510px;border:1px solid #75c6d9;overflow:scroll;}


棋子能移动的位置是在用户选中棋子时计算,给可移动的位置加一些特殊效果,有不错的用户体验。(本程序中通过改变鼠标指针图案来表示)

计算棋子能移动的位置:
ChineseChess.prototype.updateMovepoints = function() {
this.movepoints = {};
if (this.selection < 0) return;
if (this.echoPlace != this.currPlayer) return;
var chess = this.types[this.selection];
var x = this.selection % 9;
var y = Math.floor(this.selection / 9);
var offset = [{ x: +1, y: 00 }, { x: -1, y: 00 }, { x: 00, y: +1 }, { x: 00, y: -1 }];
var offsetX = [{ x: +1, y: +1 }, { x: -1, y: -1 }, { x: +1, y: -1 }, { x: -1, y: +1 }];
var offset8 = [
{ x: +2, y: -1 }
, { x: +2, y: +1 }
, { x: -2, y: -1 }
, { x: -2, y: +1 }
, { x: +1, y: +2 }
, { x: -1, y: +2 }
, { x: -1, y: -2 }
, { x: +1, y: -2 }
];
var position;
var mx, my, i;
switch (Math.abs(chess)) {
case 1: // 帅
for (i = 0; i < offset.length; i++) {
mx = x + offset[i].x;
my = y + offset[i].y;
if (mx < 3 || mx > 5 || my < 0 || my >= 10) continue;
if (chess > 0 && my < 7) continue;
if (chess < 0 && my > 2) continue;
position = my * 9 + mx;
if (this.types[position] == 0) {
this.movepoints[position] = "move";
} else {
if (sign(this.types[position]) != sign(chess))
this.movepoints[position] = "kill";
}
}
// 见面
i = chess > 0 ? 3 : 2;
mx = x + offset[i].x;
my = y + offset[i].y;
while (mx >= 0 && mx < 9 && my >= 0 && my < 10) {
position = my * 9 + mx;
if (this.types[position] != 0) {
if (this.types[position] == -chess)
this.movepoints[position] = "kill";
break;
}
mx += offset[i].x;
my += offset[i].y;
}
break;
case 2: // 士
for (i = 0; i < offsetX.length; i++) {
mx = x + offsetX[i].x;
my = y + offsetX[i].y;
if (mx < 3 || mx > 5 || my < 0 || my >= 10) continue;
if (chess > 0 && my < 7) continue;
if (chess < 0 && my > 2) continue;
position = my * 9 + mx;
if (this.types[position] == 0) {
this.movepoints[position] = "move";
} else {
if (sign(this.types[position]) != sign(chess))
this.movepoints[position] = "kill";
}
}
break;
case 3: // 象
for (i = 0; i < offsetX.length; i++) {
mx = x + offsetX[i].x;
my = y + offsetX[i].y;
if (mx < 0 || mx >= 9 || my < 0 || my >= 10) continue;
if (this.types[my * 9 + mx] != 0) continue; // 中间有棋子
mx += offsetX[i].x;
my += offsetX[i].y;
if (mx < 0 || mx > 9) continue;
if (chess > 0 && my < 5) continue;
if (chess < 0 && my > 4) continue;
position = my * 9 + mx;
if (this.types[position] == 0) {
this.movepoints[position] = "move";
} else {
if (sign(this.types[position]) != sign(chess))
this.movepoints[position] = "kill";
}
}
break;
case 4: // 马
for (i = 0; i < offset8.length; i++) {
var check = Math.floor(i / 2);
mx = x + offset[check].x;
my = y + offset[check].y;
if (mx < 0 || mx >= 9 || my < 0 || my >= 10) continue;
if (this.types[my * 9 + mx] != 0) continue; // 中间有棋子
mx = x + offset8[i].x;
my = y + offset8[i].y;
if (mx < 0 || mx >= 9 || my < 0 || my >= 10) continue;
position = my * 9 + mx;
if (this.types[position] == 0) {
this.movepoints[position] = "move";
} else {
if (sign(this.types[position]) != sign(chess))
this.movepoints[position] = "kill";
}
}
break;
case 5: // 車
for (i = 0; i < offset.length; i++) {
mx = x + offset[i].x;
my = y + offset[i].y;
while (mx >= 0 && mx < 9 && my >= 0 && my < 10) {
position = my * 9 + mx;
if (this.types[position] == 0) {
this.movepoints[position] = "move";
} else {
if (sign(this.types[position]) != sign(chess))
this.movepoints[position] = "kill";
break;
}
mx += offset[i].x;
my += offset[i].y;
}
}
break;
case 6: // 炮
for (i = 0; i < offset.length; i++) {
mx = x + offset[i].x;
my = y + offset[i].y;
var kill = false;
while (mx >= 0 && mx < 9 && my >= 0 && my < 10) {
position = my * 9 + mx;
if (this.types[position] == 0) {
if (!kill) this.movepoints[position] = "move";
} else {
if (kill) {
if (sign(this.types[position]) != sign(chess))
this.movepoints[position] = "kill";
break;
}
kill = true;
}
mx += offset[i].x;
my += offset[i].y;
}
}
break;
case 7: // 兵
for (i = 0; i < offset.length; i++) {
if (chess > 0 && (offset[i].y > 0 || y > 4 && offset[i].x != 0)) continue;
if (chess < 0 && (offset[i].y < 0 || y < 5 && offset[i].x != 0)) continue;
mx = x + offset[i].x;
my = y + offset[i].y;
if (mx >= 0 && mx < 9 && my >= 0 && my < 10) {
position = my * 9 + mx;
if (this.types[position] == 0) {
this.movepoints[position] = "move";
} else {
if (sign(this.types[position]) != sign(chess))
this.movepoints[position] = "kill";
}
}
}
break;
}
}
...全文
1917 143 打赏 收藏 转发到动态 举报
写回复
用AI写文章
143 条回复
切换为时间正序
请发表友善的回复…
发表回复
waitwinrandy 2012-07-25
  • 打赏
  • 举报
回复
怎么拷过去显示不了、但还是支持
dpj2008 2012-04-11
  • 打赏
  • 举报
回复
楼主很牛 向你学习啊
grikcy 2012-04-09
  • 打赏
  • 举报
回复
楼主牛人,,学习下
wengmoumou 2011-04-14
  • 打赏
  • 举报
回复
不错 不知道能不能弄出人机对战的 呵呵 那样就更方便了
xkj942gry 2010-12-14
  • 打赏
  • 举报
回复
太简单了,就这个?
Myxingyun 2010-12-14
  • 打赏
  • 举报
回复
真的很不错,给人很多启发!
cuiyanhome 2010-12-13
  • 打赏
  • 举报
回复
LZ啊,我最近也再写一个小游戏,你人人对战怎么写的啊,我对这块很迷茫。

我只是想简单是实现一下,一个人在一台机器上玩,另一个人在另一台机器上能看到那个人的操作就行,或者操作结果也行

请楼主指教啊~~~
xiaomin_____ 2010-11-06
  • 打赏
  • 举报
回复
NB!
iLove9ouHenry 2010-10-14
  • 打赏
  • 举报
回复
强悍!
qq2297634 2010-09-06
  • 打赏
  • 举报
回复
真强大啊
华仔lugl 2010-09-05
  • 打赏
  • 举报
回复
收藏一下
awperpvip 2010-01-24
  • 打赏
  • 举报
回复
gao
zhdefei 2010-01-02
  • 打赏
  • 举报
回复
有软件吗
tan124 2009-12-04
  • 打赏
  • 举报
回复
学习,再研究
dandan996 2009-06-28
  • 打赏
  • 举报
回复
只能说很牛~
chinakow 2009-06-28
  • 打赏
  • 举报
回复
强人!学习了!
我一直在寻找 2009-06-28
  • 打赏
  • 举报
回复
楼主N牛X;
但是我测试出来一个小问题;老将被吃了后子还能动;
lrh_079 2009-06-28
  • 打赏
  • 举报
回复
mark
jiangwenbin_2008 2009-06-28
  • 打赏
  • 举报
回复
很好,好好学习。谢谢
flxue 2009-06-27
  • 打赏
  • 举报
回复
FANTASTIC
MARK
STUDYING
加载更多回复(123)

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧