网页版五子棋

  

 

哎， 最挺忙的，但事还是得做，既然学了javascript。也总得写点东西出来吧。也就是在这样的背景下，我决定做一个网页版五子棋。

  先看看图片吧

 

 

 

 写网页版五子棋大概也就是这样了，先用CSS+DIV写一个棋盘，其余部分就全给javascript就OK了。

 

再说说我写这个时所遇到的一些问题及解决方法。

一、写过table的人就知道，当一个单元格中的内容为空时，它的边框默认是不显示的。棋盘中的每一个单元格，在没有下棋前，它当然是空的，那要怎样才能显示也它的边框呢？我们可以加上下面一段代码：

 

上面的代码对整个table有两个约束条件，border-conllapse:collapse这是说相邻单元格间的边框线是重叠的，而默认值是分开的。Empty-cell:show是当单元格中的内容为空时，将它的边框显示出来。

 

二、在点击某个单元格时，如何获取该单元格的坐标的问题。

对于这个问题，我们可以首先给table加上一个监听。再通过循环比较各个单元格是否和event.srcElement相等，若相等，则刚刚点的就是这个单元格。

下面是我写的一个小示例：

 

 

三、判断算法的部分，这个很简单，但很容易出一些小错，很难调试的，得仔细才好。

关于这个我的思路很简单，就是横，竖，左纵，右纵各个方向判断，若哪个方向有五颗子就判它赢了。

其它具体的东西就不多说，其实现这个就这么简单，仔细点就好了！

再说说关于写javascript的一点心得吧。

一、变量的命名一定要规范化，变量名要见名知义，且各个不同方法中别用一些同名的变量，这样不关是你会混乱淆，浏览器有时也会混淆。会导致一些奇怪的错误。

二、写的javascript代码一步一步的测试通过，确保这一过程没错再进行下一过程的编写，这样更容易发现错误。

三、一旦出错，要善于使用alert()方法一步一步调试。

四、javascript的代码在不同的浏览器上可能有不同的解释，所以我们平时的练习尽量使用IE吧。