[分享]JS围棋,顺便帮我看看怎么取得行棋路线数组

多菜鸟 2008-10-08 10:55:48
加精
对js了解不多,这个JS围棋看得一知半解的,看到Tracks和行棋路线有关,
但不知道怎么得到其中的值,逐个打印出来。
多谢帮忙,顶者有分。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>禅棋传说</title>
<style type="text/css">
div { position: absolute; width: 23px; height: 23px; }
.B0 { background-image: url('http://www.wtostar.com/go/B0.gif'); }
.B1 { background-image: url('http://www.wtostar.com/go/B1.gif'); }
.B2 { background-image: url('http://www.wtostar.com/go/B2.gif'); }
.B3 { background-image: url('http://www.wtostar.com/go/B3.gif'); }
.B4 { background-image: url('http://www.wtostar.com/go/B4.gif'); }
.B5 { background-image: url('http://www.wtostar.com/go/B5.gif'); }
.B6 { background-image: url('http://www.wtostar.com/go/B6.gif'); }
.B7 { background-image: url('http://www.wtostar.com/go/B7.gif'); }
.B8 { background-image: url('http://www.wtostar.com/go/B8.gif'); }
.BX { background-image: url('http://www.wtostar.com/go/BX.gif'); }
.D0 { background-image: url('http://www.wtostar.com/go/D0.gif'); }
.D1 { background-image: url('http://www.wtostar.com/go/D1.gif'); }
.C0 { background-image: url('http://www.wtostar.com/go/C0.gif'); }
.C1 { background-image: url('http://www.wtostar.com/go/C1.gif'); }
</style>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
Array.prototype.indexOf = function (item) //给数组扩展一个indexOf方法
{
for ( var i=0; i<this.length; i++)
if (this[i] == item)
return i;
return -1;
};

var Site = //定义一个棋位类
{
Create: function(x, y) //棋位类的构造函数
{
var me = document.createElement("div"); //建一个div对象,将其扩展并封装成棋位。
document.body.appendChild(me); //附加到DOM树,实现棋位的呈现。
me.x = x; //记录棋位的X坐标
me.y = y; //记录棋位的Y坐标
me.style.left = x * 23 + "px"; //设置棋位水平方向的绝对位置
me.style.top = y * 23 + "px"; //设置棋位垂直方向的绝对位置
var s = ((x-9)%9?0:(x-9)/9)+1+(((y-9)%9?0:(y-9)/9)+1)*3; //计算并背景式样
me._backStyle = "B" + ((s==4&&(x/3)%2==1&&(y/3)%2==1) ? "X" : s);
me.Fill = this.Fill; //关联一个填充棋位的方法。
me.Tight = this.Tight; //关联计算紧气方法。
me.Kill = this.Kill; //关联计算死子方法。
me.onclick = this.Play; //绑定onclick事件到Play方法。
me.Fill(); //初始填充空子。
return me; //返回棋位对象,其实是一个封装了的div对象。
},
Fill: function(dot, going) //填充棋子的方法
{
if ( dot == undefined )
this.className = this._backStyle //无子,就设置为背景式样。
else
this.className = (going ? "C" : "D") + dot;
this.dot = dot; //保存棋子状态
},
Play: function() //行棋方法,由onclick事件触发
{
if ( this.dot == undefined ) //无子
{
var deads = this.Kill(current^1); //计算可以杀死的子
if (deads.length == 1 && this == rob) return; //打劫状态
for(var i=0; i<deads.length; i++)
deads[i].Fill();
if(i==1)
rob = deads[0] //记录打劫位置
else if (i>0 || !this.Tight(current))
rob = null //清打劫位
else return;
sound.play(); //落子有声!
var step = Tracks[Tracks.length-1];
if(step) step.site.Fill(step.site.dot);
this.Fill(current, true); //填入当前该填的子
Tracks.push( new Step(this, deads) );
current ^= 1; //用1来异或,正好反转黑白棋子。
};
//alert(Tracks[Tracks.length-1].Step());
},
Tight: function (dot) //计算紧气的块
{
var life = this.dot == undefined ? this : undefined; //当前位无子则算一口气
dot = dot == undefined ? this.dot : dot;
if (dot == undefined) return undefined;
var block = this.dot == undefined ? [] : [this];
var i = this.dot == undefined ? 0 : 1;
var site = this;
while (true)
{
for(var dx=-1;dx<=1;dx++) for(var dy=-1;dy<=1;dy++) if(!dx^!dy)
{
link = GetSite(site.x + dx, site.y + dy);
if (link) //有位
if (link.dot != undefined) //有子
{
if (link.dot == dot && block.indexOf(link) < 0 )
block.push(link);
}
else if (!life)
life = link
else if (life != link)
return undefined; //如果有两口气以上则无须再算
};
if ( i >= block.length) break;
site = block[i];
i ++;
};
return block; //返回只有一口气的块
},
Kill: function(dot) //计算杀死的子
{
var deads = [];
for(var dx=-1;dx<=1;dx++) for(var dy=-1;dy<=1;dy++) if(!dx^!dy)
{
var site = GetSite(this.x + dx, this.y + dy);
if (site && (site.dot == dot))
{
var block = site.Tight();
if (block) deads = deads.concat(block);
};
};
return deads; //返回可以提子的死子块
}
};

var Board = new Array(19); //全局的Board数组,表示棋盘。
var Tracks = []; //行棋线索数组,数组元素是Step对象。
var current = 0; //当前要下的子,0表示黑子,1表示白子,互相交替。
var rob = null; //如果有打劫时,记录打劫位置。
for(var x = 0 ; x < 19; x++)
{
Board[x] = new Array(19);
for(var y = 0; y < 19; y++)
Board[x][y] = Site.Create(x, y); //按位置创建棋位对象。
};
if (navigator.userAgent.indexOf(' MSIE ') > -1) //为IE浏览器构造声音对象
{
var sound = document.body.appendChild(document.createElement("bgsound"));
sound.play = function(){this.src = "http://www.wtostar.com/go/play.wav"};
}
else //为Firefox等其他浏览器构造声音对象
{
var sound = document.body.appendChild(document.createElement("span"));
sound.play = function()
{
this.innerHTML = "<bgsound src='http://www.wtostar.com/go/play.wav'>"
};
};
document.body.oncontextmenu = function() //悔棋事件
{
var step = Tracks.pop();
if (step)
{
step.site.Fill();
for (var i=0; i<step.deads.length; i++)
step.deads[i].Fill(current);
step = Tracks[Tracks.length-1];
if (step) step.site.Fill(current, true)
current ^= 1; //反转黑白棋子。
};
return false; //不弹出菜单。
};

function GetSite(x, y) //从棋盘取棋位的函数,越界不抛出异常。
{
if (x>=0 && x<19 && y>=0 && y<19)
return Board[x][y];
};
function Step(site, deads) //棋步类,记录每一步棋的状态
{
this.site = site; //记录棋步的位置
this.deads = deads; //记录被当前棋步杀死的棋子集合
};

//]]>
</script>
</body>
</html>
...全文
2615 150 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
150 条回复
切换为时间正序
请发表友善的回复…
发表回复
jiyihai 2011-04-25
  • 打赏
  • 举报
回复
没看懂,不过看起来蛮厉害的
zgyszk007 2008-10-25
  • 打赏
  • 举报
回复
有没有五子棋的程序?
多菜鸟 2008-10-22
  • 打赏
  • 举报
回复
[Quote=引用 147 楼 dandande 的回复:]
这个程序真难啃,把我累得似乎只剩一口气了。我总想把程序的思路理出来,可它就像游丝一样,忽悠忽悠转两圈就不见了。读这个程序的难点在于找出那个被围杀的集合,其中关键语句是:
Tight:
whill
for
if
if
if (link.dot == dot && block.indexOf(link) < 0 )
block.push(link);
也就是说,以Kill上来的那个site为中心,历数左上下右颜色相同的棋子,把…
[/Quote]
是啊,看起来挺简单的,啃起来却那么的力不从心,比一下才知道自己的JS水平,原来是这么菜。
dandande 2008-10-21
  • 打赏
  • 举报
回复
这个程序真难啃,把我累得似乎只剩一口气了。我总想把程序的思路理出来,可它就像游丝一样,忽悠忽悠转两圈就不见了。读这个程序的难点在于找出那个被围杀的集合,其中关键语句是:
Tight:
whill
for
if
if
if (link.dot == dot && block.indexOf(link) < 0 )
block.push(link);
也就是说,以Kill上来的那个site为中心,历数左上下右颜色相同的棋子,把它们装入block中,只要满足条件没退出whill循环,就把site=block[i]作为新的中心接着去数颜色相同的,数过的就不再数了,这由Array来控制,最终形成deads并被清空。

琦天娃娃 2008-10-21
  • 打赏
  • 举报
回复
.....单纯问下围棋还能说两句,jsp....不会....
metoo201 2008-10-20
  • 打赏
  • 举报
回复
路过~~~~~~~~~~~
yjinzaghi 2008-10-20
  • 打赏
  • 举报
回复
mark
多菜鸟 2008-10-20
  • 打赏
  • 举报
回复
[Quote=引用 138 楼 lqjava 的回复:]
hehe,有点明白了,要想打印出行棋路线很简单,代码如下:
<script>
function PrintWay()
{
var str;
str="";
var coler;
for (var i=0;i <Tracks.length;i++)
{
step = Tracks[i];
if(!i%2)
coler="黑";
else
coler="白";
str=str+"第"+(i+1)+"步"+coler+"方 X"+step.site.x+" Y"+step.site.y+" <br>";

}
document.write(str);
}
</…
[/Quote]

哈哈!太有才了,要的就是这个了,分数肯定不会少给你的。
hmilyzy 2008-10-19
  • 打赏
  • 举报
回复
学习!
java__king 2008-10-19
  • 打赏
  • 举报
回复
up
fbixiaozhu 2008-10-18
  • 打赏
  • 举报
回复
为什么显示语法错误。行141字符5,这个不是完整版?
fbixiaozhu 2008-10-18
  • 打赏
  • 举报
回复
[Quote=引用 7 楼 hbhbhbhbhb1021 的回复:]
呵呵,挺好的
主要思路就是修改className的背景图片
下棋的背景是
.D0 { background-image: url('http://www.wtostar.com/go/D0.gif'); }
.D1 { background-image: url('http://www.wtostar.com/go/D1.gif'); }
.C0 { background-image: url('http://www.wtostar.com/go/C0.gif'); }
.C1 { background-image: url('http://www.wtostar.com/go/C1.gif'); }

方法中主要是Play方法,中间调用Fill方法

JScript c…
[/Quote]
恩不错,我真开发一个 五子棋的,呵呵比这个简单。
多菜鸟 2008-10-18
  • 打赏
  • 举报
回复
[Quote=引用 130 楼 dandande 的回复:]
先别结帖,我正在啃这段代码,直到昨天我才看到这个围棋界面,那是在抹掉了所有注释后才看到的,这是怎么回事?前面早早就看到界面的朋友们是否也必须这样做?
尽管代码还需慢慢啃,但已经感到这是个非常非常漂亮的程序了,谢谢搂主拿来分享!
[/Quote]
你看不到界面可能是因为编码问题,注意你要用utf-8才行。
编程有钱人了 2008-10-18
  • 打赏
  • 举报
回复
up
wp_inyz 2008-10-18
  • 打赏
  • 举报
回复
我这运行正常
javabird1986 2008-10-18
  • 打赏
  • 举报
回复
dddddddddd
lqjava 2008-10-18
  • 打赏
  • 举报
回复
搂主一定要记得给分阿,俺是贫农。
lqjava 2008-10-18
  • 打赏
  • 举报
回复
hehe,有点明白了,要想打印出行棋路线很简单,代码如下:
<script>
function PrintWay()
{
var str;
str="";
var coler;
for (var i=0;i<Tracks.length;i++)
{
step = Tracks[i];
if(!i%2)
coler="黑";
else
coler="白";
str=str+"第"+(i+1)+"步"+coler+"方 X"+step.site.x+" Y"+step.site.y+"<br>";

}
document.write(str);
}
</script>
<input type="button" value="行棋路线" onclick="PrintWay();">
fomyth 2008-10-17
  • 打赏
  • 举报
回复
强人
real_name 2008-10-17
  • 打赏
  • 举报
回复
经典
加载更多回复(126)

87,997

社区成员

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

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