五子棋训练

237 阅读2分钟

1.初始化棋盘

  • 应用for循环,给棋盘增加格子

2.捆绑事件 bindEvent

* 对棋盘进行点击事件,if游戏没有结束

  • 首先创建temp获取点击TD的信息,如果点击的DOM的nodename为TD,计算每个棋盘格子的边长,创建两个变量,positionx和positiony,这两个变量为布尔值:例如 positionx为 鼠标点击元素的距离是否比棋格边长的一半大;
  • 然后写出三目运算
positionx?parseInt(temp.line) + 1 : parseInt(temp.line)

image.png

  • 最后创建chesspoint元素组装棋子的信息,x,y,c;并传给chessmove函数dang参数

else 游戏结束

  • 询问玩家是否从新开始 (window.confirm('是否从新开始')
  • 如果输入是,则清除数组,初始化棋盘,并将游戏状态设置为没有结束。

3.棋子移动函数 chessmove

  • 落子前确定是否有棋子 exist函数 游戏是否继续;
  • 将棋子的信息推送给新数组,chessArr;
  • 创建newchess变量封装棋子元素,如果棋子的x和y小于14,那移动的棋格就为当下chesspoint里x,y指向的棋格,定义变量封装棋格和棋子
  • 如果x>14,就代表是最右侧的那条线,移动棋格的line就为13;
  • 如果y>14,就代表是最下侧的那条线,移动棋格的row就为13;
  • 如果x和y都>14,就代表是最右下角的格子,移动棋格的line和row都为13;
  • 确定移动后的颜色,无非就是黑白两种颜色,非黑即白
  • 最后核查游戏是否结束 check()

4.确定重复棋子函数 exist

exist函数里传入的移动前棋子的信息,在chessArr里对比有无和移动棋子的x和y都相同的,返回结果,判断结果是否为underfined,返回布尔值。

5.核查游戏是否结束 check函数 核对落子是否连成五个,四种情况 (横着,竖着,斜着)

  • 循环chessArr,定义棋子2,棋子3,棋子4,棋子5;定义indexchess为chessArr[i];

横向寻找的方法,其他方向依次类推

  • 在chessArr里找是否有与indexchess的x+1&&y&&c的值返回结果给chess2
  • 在chessArr里找是否有与indexchess的x+2&&y&&c的值返回结果给chess3
  • 在chessArr里找是否有与indexchess的x+3&&y&&c的值返回结果给chess4
  • 在chessArr里找是否有与indexchess的x+4&&y&&c的值返回结果给chess5 如果chess2,chess3,chess4,chess5,都为true,则将他们传送给end函数

end结束函数

  • 首先将游戏状态设置为结束,
  • 然后添加棋子顺序的数字和赢家的内样式