javascript实例-五子棋规则(1)

五子棋游戏规则在写代码之前我们得先弄清楚游戏的相关规则是什么,然后在去实现对应相关规则.五子棋规则： 1、棋子必须在棋盘内活动。 2、黑白子数目必须满足。 3、黑子先行4、时间限制 5、横向、竖向、斜向五子（五子以上）相连则为赢棋盘与棋子对接现在我们把前面写的棋盘和棋子这两段代码采用单体模式给重新组织在一起。1：声明一个命名空间:创建五子棋命名空间,这样可是更好的把代码给组织在一块,以便管理和维护.var WuZiQi = {}WuZiQi.QiPan = function(){...} //棋盘 WuZiQi.BaiQi = function(){...} // 白棋 WuZiQi.HeiQi = function(){...} // 黑棋 结构体系图:2：划分3大块（规则，黑子，白子）为了更好的和单体模式组合在一起,对前面的棋盘代码和棋子代码重新组织和修改了下,以下为修改后的代码图:棋子活动范围控制为了确保每个棋子只能在棋盘上活动,我们可以在棋盘上添加一个单击事件只有在事件触发的时候棋子才出创建出来.如果点击的不是棋盘那棋子根本就不会创建出来.这样就可以控制到棋子的活动范围了..如图:WuZiQi.QiPan.obj : 获取棋盘对象addEventListener : 给棋盘对象添加单击事件function(e){...} : 当点击格子的时e事件对象就会被传递到函数中,通过e.target.id来获取当时点击的格子ID(坐标),然后在当前ID(坐标)处创建棋子.注意:因为没做兼容性调整,所以本示例只支持火狐浏览器.仅供学习 参考.