【分享】从零开始，开发一个五子棋棋谱记录系统（一）

Question

基本棋盘
五子棋的棋盘是15×15的，一共是225个交叉点。
如图
所以页面的结构应该是这样：一个大的div作为整个棋盘的边界，或者我们叫它board_main
<div id='board_main'></div>然后，是15行。于是我们在board_main里面增加15个
<div class='row'></div>注意，每一行是对应“一条线”，而不是一行空格。每一行有15个交叉点，这样，给每一行里加入15个div，暂时先叫blank吧。基本结构如下：<div id='board_main'>
<div class='row'>
<div class='blank'>
</div>
<div class='blank'>
</div>
<div class='blank'>
</div>
<div class='blank'>
</div>
<!--……一共15个交叉点-->
</div>
<div class='row'>
</div>
<div class='row'>
</div>
<!--……一共15行-->
</div>
这样，再通过css的控制就可以显示出基本的空白棋盘了。CSS代码倒不是很难，让每个最内层的<div class='blank'>大小与棋盘上一个方格相等即可，每一行15个交叉点，一个棋盘15行，大小就不用我说了吧废话少说，还是贴一下CSS代码吧：#board_main
{
background:url('/images/board-orc.png') center center no-repeat;/*挺大的一张背景图片*/
height:768px;
width:787px;
}.row
{
height:50px;
width:780px;
margin-left:25px;
}
.row div
{
cursor:pointer;
height:50px;
width:50px;
float:left;
line-height:50px;
text-align:center;
font-weight:bold;
-moz-user-select:none;
}
注意我的代码，最后一段，我没有写.blank，而是用了.row div，因为过一会那个.blank的class会变掉。
一会还有棋子落在棋盘上，索性把黑棋和白棋的样式也贴一下：
.black
{
background:url('/images/black-orc.png') center center no-repeat;
color:white;
}.white
{
background:url('/images/white-orc.png') center center no-repeat;
}
然后我想了想，加了个 空白位置鼠标指向出现一个小方框的效果
.blank:hover
{
height:48px;
width:48px;
border:1px solid #B5B5B5;
}
效果还不错，不过现在还不能动呢一会就让它动起来。

Answer 1

让棋盘动起来：最基本的思路，让棋盘动起来就是改变它们的class。为了减少代码量，我使用了jquery库。
<script type="text/javascript" src="js/jquery.js"></script>一边贴代码一边说吧
var istone = 1;//初始第一手棋
var icolor = 'black';//第一手棋是黑棋
$(document).ready(
  function (){
  $("#board_main .row div").click(
  function (){
  if ($(this).attr("class") == 'blank')//当被点击的div是没有棋子的位置时才有效
{
$(this).html(istone);//棋子上写数字
$(this).attr("class",icolor);//注意，这里改变了这个div的class，也就是说它会显示一个黑棋或者白棋
if (icolor == "black")
{
icolor = "white";//ok，如果这个棋子是黑色，那么下一手就是白棋了
}
else if (icolor == "white")
{
icolor = "black";//反之亦然
}
istone ++;//下一手的数字
}
  }
  );
});
这样就是一个最基本的能够点击的棋盘,不过还不能后退,也不能存进数据库里去。要有更强大一些的页面效果，需要对棋盘进行改进。

Answer 2

不熟悉jquery的话，得去熟悉一下了简单看看选择器的基础知识，查查手册上的函数应该就可以了。我用到的函数也没几个。上班ing，一会回家写一下如何记录整个棋局的过程，以及如何前进后退，还有支持键盘方向键以及鼠标右键的js代码。支持键盘方向键以及鼠标右键的js代码是在起点看小说的时候，在那个小说的页面上抄的，哈哈。

Answer 3

（今儿有点事情耽搁了）
记录棋局：记录棋局主要是用一定格式把棋局记录下来，方便数据库存取和页面显示。因为棋盘正好是15×15的，所以就很方便地用16进制来表示坐标，2位表示一个坐标。X坐标从左到右分别为1，2，3，4……f
y坐标从下到上为1，2，3，4……f因为我也不愿意每次点击的时候去算我点击的是哪一行哪一列的哪个div，所以最简单的方式：把这些div的id设为坐标。所以棋盘的代码改进成这样：
<div id="board_main">
<div class="row">
    <div id="f1" class="blank"></div>
    <div id="f2" class="blank"></div>
    <div id="f3" class="blank"></div>
    <div id="f4" class="blank"></div>
    <div id="f5" class="blank"></div>
    <div id="f6" class="blank"></div> 
       <!--……一共15个交叉点-->
  </div>
  <div class='row'>
……
  </div>
  <div class='row'>
……
  </div>
    <!--……一共15行-->
</div>
后台是php的，输出这样的棋盘很简单。后面这个过程还会再改进的。
如此，再改进一下页面的js，甭管怎么样，先把点击的顺序记录下来：
var istone = 1;
var icolor = 'black';
var strrecord = ""; //这是用来记录的字符串
$(document).ready(
  function (){
  $("#board_main .row div").click(
 function (){
  if ($(this).attr("class") == 'blank')
   {
$(this).html(istone);
$(this).attr("class",icolor);
strrecord += $(this).attr("id");//每次有效的落子，我们都把它记下来。其实以后如果想扩展成在线对弈系统的话，可以ajax把它发出去
if (icolor == "black")
{
icolor = "white";
}
else if (icolor == "white")
{
icolor = "black";
}
istone ++;
}
  }
 );
});
strrecord 这个变量里面就保存了棋局的记录。我们可以把它存在数据库里，并且，如果我们能根据它还原出这个棋盘，我们就成功了一大半。现在的状态是：每次落子， istone 保存了下一手的手数（号码）， icolor 是下一手的颜色，（其实可以看istone是奇数还是偶数算出来，懒得算了。）strrecord 保存着整个过程。好了，后面就是如何利用strrecord 来制作前进和后退功能了。

Answer 4

记号，，，，，，，，，，，，，xuexi