原生Javascript实现五子棋
棋盘绘制
1.设置居中标题
2.使用html5 canvas画布标签，居中、宽高设置为450px、阴影
3.使用js画线条，横竖都有15条线，每条线间距为30px，即棋盘宽高为420px（1430px），剩余30px平分给上下和左右各15px。
方法：画横线和竖线，使用坐标设置起始点，横线x轴都是从15 - 435，y轴是15+i30px，竖线同上方法，画出十五条。
4.加上重置按钮，并将鼠标cursor设置为移到棋盘上和按钮上自动变成小手。
整个棋盘的绘制代码如下：
五子棋.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五子棋</title>
<style>
.title{
text-align: center;
}
.chess{
/* canvas与image一样虽然可以设置高和宽，但是是行内块，所以把它变成块元素，方便用margin居中 */
display: block;
margin: 50px auto;
/* 阴影往下往右是正数，前两个值代表往下往右的偏移量，第三个代表阴影宽度，最后一个是阴影颜色 */
box-shadow: 5px 5px 5px #b9b9b9,-2px -2px 2px #efefef;
cursor: pointer;
}
div{
text-align: center;
}
.res{
padding: 10px 20px;
background-color: pink;
border-radius: 10px;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<h3 class="title">--五子棋--</h3>
<canvas class="chess" width="450px" height="450px"></canvas>
<div>
<a class="res">restart</a>
</div>
</body>
<script>
let chess = document.getElementsByClassName('chess')[0];
// 获取2d画布的上下文
let cxt = chess.getContext("2d");
// 线的颜色
cxt.strokeStyle = "#b9b9b9";
window.onload = function(){
drawChessBoard();
}
function drawChessBoard(){
for(let i=0;i<15;i++){
// 从canvas画布位置开始计算
// 每条横线起始点位置
cxt.moveTo(15,15+i*30);
// 每条横线终点位置
cxt.lineTo(435,15+i*30);
// 使用stroke方法连
cxt.stroke();
// 竖线同上
cxt.moveTo(15+i*30,15);
cxt.lineTo(15+i*30,435);
cxt.stroke();
}
}
</script>
</html>
五子棋赢法数组
把每一个赢法存下来，需要初始化一个三维数组，前两个位置是存棋子在棋盘的位置坐标，最后一个存的是赢法的编号，每一个赢法编号都唯一。
赢法分为横着连成5子，竖着连成5子，正斜线连成五子和反斜线连成五子。
例：
// [0,0,0]/[1,0,0]/[2,0,0]/[3,0,0]/[4,0,0] 从棋盘左上角开始横着往右五个棋子
// [1,0,1]/[2,0,1]/[2,0,1]/[3,0,1]/[5,0,1] 从棋盘左上角后面一个开始横着往右五个棋子
js代码如下：
// 初始化数组
let wins = [];
for(let i=0;i<15;i++){
wins[i] = [];
for(let j=0;j<15;j++){
wins[i][j] = [];
}
}
// 设置赢法编号
let id = 0;
// 统一横线赢法，即横着连成5个子
// 横坐标i的起始位置只能到11，再往后就没法赢了
for(let i = 0;i<11;i++){
for(let j=0;j<15;j++){
for(let k = 0;k<5;k++){
wins[i+k][j][id] = true
}
id++;
}
}
// 统计竖线赢法
for(let i = 0;i<11;i++){
for(let j=0;j<15;j++){
for(let k = 0;k<5;k++){
wins[j][i+k][id] = true
}
id++;
}
}
// 统计正斜线,从左上连到右下角
for(let i=0;i<11;i++){
for(let j=0;j<11;j++){
for(let k=0;k<5;k++){
wins[j+k][i+k][id] = true;
}
id++;
}
}
// 统计反斜线,从右上连到左下角
for(let i=0;i<11;i++){
for(let j=14;j>=4;j--){
for(let k=0;k<5;k++){
wins[i+k][j-k][id] = true;
}
id++;
}