原生js实现五子棋

为什突然做这个，因为这是个笔试题，拖了一个月才写（最近终于闲了O(∩_∩)O），废话不多说，说说这个题吧

题目要求

编写一个单机【五子棋】游戏，要求如下：

1.使用原生技术实现，兼容 Chrome 浏览器即可。

2.实现胜负判断，并给出赢棋提示；任意玩家赢得棋局，锁定棋盘。

3.请尽可能的考虑游戏的扩展性，界面可以使用 DOM / Canvas 实现。考虑后续切换界面实现的方式成本最低。（比如选择使用 DOM 实现界面，需求改变为使用 Canvas 实现时尽可能少的改动代码）。

4.实现一个悔棋功能

5.实现一个撤销悔棋功能。

6.人机对战部分可选。

7.尽可能的考虑实现的灵活性和扩展性。

UI部分

棋盘

五子棋，首先我们会想到棋盘、棋子，这是棋类游戏的基本元素，实现棋盘、棋子基本的两种思路，一种使用html标签模拟，另外一种就是使用canvas去画。这里我们选择使用canvas。

    canvas.strokeStyle = "#ccc";
	for(let i = 0; i<=15; i++){
		canvasA.moveTo(20+40*i, 20);
		canvasA.lineTo(20+40*i, 620);
		canvasA.stroke();
		canvasA.moveTo(20, 20+40*i);
		canvasA.lineTo(620, 20+40*i);
		canvasA.stroke();
	}

主要的思路就是画等距离的直线，包活横向和纵向，用一个循环即可。

棋子

棋子的注意点就是位置，圆心和棋盘的交叉点要对齐，当鼠标点击某个范围的时候要在对应的交叉点为圆心处画圆。

oChess.addEventListener('click', (event) => {
	let x = Math.floor(event.offsetX/40),
		y = Math.floor(event.offsetY/40);
}, false)

我们以交叉点为中心的正方形（变长为棋格边长）为范围，也就是说每当鼠标点击到红色区域就在该中心点画棋子。这里获得中心点坐标之后就可以在对应点画棋子

//画棋子
const drawChessman = (x, y, temp) => {
	canvas.beginPath();
	canvas.arc(20+x*40,20+y*40, 18, 0, 360);
	canvas.closePath();
	canvas.fillStyle = temp ? "#fff" : "#000";
	canvas.fill();
}

其他

由于有悔棋功能，我们可以使用canvas的clearRect，但是，在清除棋子的时候不仅把棋子清除掉，而且棋子覆盖的棋盘也被清除掉，这是不被允许的，但是我们总不能把棋盘再重新画一遍，这样棋盘就会把棋子覆盖，而且总归是有性能问题。

这里耍了个小聪明，我们使用两个canvas来完成，底层的canvas用来画棋盘，上层的canvas用来画棋谱，并将其背景色设置为透明，这样清除棋子就不会影响到棋盘。

算法

界面是有了，但是玩的的时候怎么确定谁赢了？人机的时候电脑该怎么走？

赢法

这里使用一种最简单的算法，那就是先枚举出所有的赢法，然后再每走一步的时候都去判断下棋人赢的权重。那么有多少种赢的方式呢，当然是跟棋盘大小有关（可不是棋盘的宽高哦