1.初始化棋盘
- 应用for循环,给棋盘增加格子
2.捆绑事件 bindEvent
* 对棋盘进行点击事件,if游戏没有结束
- 首先创建temp获取点击TD的信息,如果点击的DOM的nodename为TD,计算每个棋盘格子的边长,创建两个变量,positionx和positiony,这两个变量为布尔值:例如 positionx为 鼠标点击元素的距离是否比棋格边长的一半大;
- 然后写出三目运算
positionx?parseInt(temp.line) + 1 : parseInt(temp.line)
- 最后创建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结束函数
- 首先将游戏状态设置为结束,
- 然后添加棋子顺序的数字和赢家的内样式