哎, 最挺忙的,但事还是得做,既然学了 javascript 。也总得写点东西出来吧。也就是在这样的背景下,我决定做一个网页版五子棋。
先看看图片吧
写网页版五子棋大概也就是这样了,先用CSS+DIV写一个棋盘,其余部分就全给javascript就OK了。
再说说我写这个时所遇到的一些问题及解决方法。
一、写过table的人就知道,当一个单元格中的内容为空时,它的边框默认是不显示的。棋盘中的每一个单元格,在没有下棋前,它当然是空的,那要怎样才能显示也它的边框呢?我们可以加上下面一段代码:
上面的代码对整个table有两个约束条件,border-conllapse:collapse这是说相邻单元格间的边框线是重叠的,而默认值是分开的。Empty-cell:show是当单元格中的内容为空时,将它的边框显示出来。
二、在点击某个单元格时,如何获取该单元格的坐标的问题。
对于这个问题,我们可以首先给table加上一个监听。再通过循环比较各个单元格是否和event.srcElement相等,若相等,则刚刚点的就是这个单元格。
下面是我写的一个小示例:
三、判断算法的部分,这个很简单,但很容易出一些小错,很难调试的,得仔细才好。
关于这个我的思路很简单,就是横,竖,左纵,右纵各个方向判断,若哪个方向有五颗子就判它赢了。
其它具体的东西就不多说,其实现这个就这么简单,仔细点就好了!
再说说关于写javascript的一点心得吧。
一、变量的命名一定要规范化,变量名要见名知义,且各个不同方法中别用一些同名的变量,这样不关是你会混乱淆,浏览器有时也会混淆。会导致一些奇怪的错误。
二、写的javascript代码一步一步的测试通过,确保这一过程没错再进行下一过程的编写,这样更容易发现错误。
三、一旦出错,要善于使用alert()方法一步一步调试。
四、javascript的代码在不同的浏览器上可能有不同的解释,所以我们平时的练习尽量使用IE吧。