DEMO下载
效果图
分析
- 采用微信小程序的canvas制作五子棋;
- 确定棋盘大小及格数;
- 绘制棋盘—-通过棋盘宽高和格数计算间距,同时保存坐标点;
- 黑方和白方下子—-定义一个布尔变量代表各自的身份;
- 重置棋盘—-重新开始;
- 通过判断当前棋手,悔棋时进行改变。
绘制棋盘
1 | drawLine(arr){ |
绘制当前点击坐标的棋子
1 | // 获取当前点击位置的坐标 |
五子棋胜利方判断
五子棋胜利就是横向、纵向、45度斜线方向、135度斜线方向连成五个颜色相同的棋子,为了更加清楚的表示,我将四个方向的判断做四个函数处理。
1 | checkTransverse(arr,po){//横向检查 |
重置棋盘
1 | resetChessBoard(){ |
注意
- 绘制棋盘前必须清空canvas,方便最后的重新开始和重置棋盘;
- 对当前棋子的坐标四个方向的判断,采用的原始坐标而不是计算后的绘制坐标;
- 在判断持棋人时,各自采用一个值,方便添加悔棋功能。