纯JavaScript制作围棋棋盘

发表于 2009年9月26日由 kily

同学们这次要让大家开开眼界啦。在上上上文中提到的书中有这样一个实例：用纯JavaScript制作一个围棋棋盘，本来以为很复杂，但看到作者给出的代码时就很惊讶，简简单单几行代码就能实现这样一个效果真是强大啊。

效果如下图：

js-chessboard

JavaScript代码如下：


for(var x = 0; x<19; x++){
for(var y = 0; y<19; y++){
	var div = document.createElement("div");
	document.body.appendChild(div);
	div.style.position = "absolute";
	div.style.width = "23px";
	div.style.height = "23px";
	div.style.left = x*23 + "px";
	div.style.top = y*23 + "px";

	var s = ((x-9)%9 ? 0 :(x-9)/9)+1 + (((y-9)%9 ? 0 : (y-9)/9)+1)*3;
	if(s==4&&(x/3)%2==1 && (y/3)%2==1) s="X";

	div.style.backgroundImage = "url(B" +s+ ".gif)";
}
}
}

短短十来行代码却凝结了多少经验和智慧，值得细细品味。

点这里看效果

《纯JavaScript制作围棋棋盘》上有 14 条评论

伊迭在 2010年11月3日12:32 说：

搜“围棋”竟然看到你头像，点过来了……
不过能不能够换个颜色啊…

回复 ↓
- kily 在 2010年11月4日13:08 说：
  
  @伊迭哈哈。感慨这个世界太小了哈~
  
  回复 ↓
淘宝网减肥药在 2009年10月4日14:37 说：

是啊。确实厉害

回复 ↓
hiro 在 2009年9月28日09:21 说：

棋盘应该不难吧，难得是实现下棋的逻辑！

回复 ↓
wuleilei 在 2009年9月27日17:28 说：

哇，没想这么几行代码，太牛了，我是写不出来的~

回复 ↓
- kily 在 2009年9月27日18:58 说：
  
  @wuleilei 确实很强悍，我还在领悟中……
  
  回复 ↓
willerce 在 2009年9月27日15:16 说：

研究算法很有趣.
我把标题看成,制作围棋.一看代码,呃,吓一跳,这几行代码,就可以下棋了?

回复 ↓
- kily 在 2009年9月27日15:47 说：
  
  @willerce 呵呵，后面有下棋的功能实现，不过方法比较复杂没有纯界面这么容易。
  
  回复 ↓
A.shun 在 2009年9月27日11:16 说：

这都行。。。

回复 ↓
- kily 在 2009年9月27日15:08 说：
  
  @A.shun 事实告诉我们：Nothing impossible。。。
  
  回复 ↓
安在 2009年9月27日10:17 说：

看错了…还以为是围棋游戏…狂汗ing

回复 ↓
- kily 在 2009年9月27日10:42 说：
  
  @安呵呵。这只是个界面，后面他会讲如何实现下棋的效果。
  
  回复 ↓
安在 2009年9月27日10:16 说：

算法这东西…很神奇…

回复 ↓
安在 2009年9月27日10:15 说：

要抢就抢~

回复 ↓

发表评论取消回复