一、js运用
示例：用js代码来进行页面的描绘，画图，判断，以及循环判断
二、使用步骤
1.引入库
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{ margin: 0;
padding: 0;
}
canvas{
margin: 0 auto; /*居中*/
display: block;
background-color: bisque;
}
</style>
</head>
<body>
//设置画布大小
<canvas id="cvs" width="640" height="640"></canvas>
//设置按钮
<button id="btnsave">保存棋局</button>
<script>
let cvs = document.getElementById("cvs");
//获取cvs画布的上下问对象
let ctx = cvs.getContext("2d");
//定义棋盘
let qp;
//图片引入
let hei = new Image();
hei.src="img/tb_bai.png";
let bai = new Image();
bai.src="./img/tb_hei.png";
//如果isWho=true表示黑棋 反之表示白棋
let isWho = true;
(function inputQP(){
for (let i = 0; i<= cvs.width / 40;i++){
ctx.moveTo(i*40,0);
ctx.lineTo(i*40,cvs.width)
ctx.moveTo(0,i*40);
ctx.lineTo(cvs.width,i*40)
ctx.stroke();
}
//初始化棋盘数据
qp = new Array(15);
for(let i = 0;i<qp.length;i++){
qp[i]= new Array(15);
for(let j = 0; j< qp[i].length;j++){
qp[i][j] = 0;
}
}
})()
cvs.addEventListener("click",_click)
function _click(e){
let x = e.offsetX,y = e.offsetY;
let indexX = Math.round(x / 40),indexY = Math.round(y / 40);
//如果出了棋盘不能继续
if(indexX <= 0 || indexX > 15 || indexY <= 0 || indexY > 15) return;
//如果该位置有不能继续
if(qp[indexY-1][indexX - 1]!=0) return;
ctx.drawImage(isWho? hei : bai,indexX * 40-15,indexY * 40 - 15)
qp[indexY-1][indexX - 1] = isWho ? 1:2;
ying(indexY-1,indexX-1);
isWho = !isWho
}
function ying(x,y){
let heng = shu = zuoxie = youxie = 0;
let flag = isWho ? 1 : 2;
//左边
for (let i = y; i>=0; i--) {
if(qp[x][i] == flag){
heng++;
}else break;
}
//右边
for(let i = y+1;i<15;i++){
if(qp[x][i]==flag){
heng++;
}else break;
}
//上面
for(let i = x; i>= 0;i--){
if(qp[i][y] == flag){
shu++;
}else break;
}
//下面
for(let i= x + 1;i<15;i++){
if(qp[i][y]==flag){
shu++;
}else break;
}
//左下
for(let i = x,j=y;i<15&&j>=0;i++,j--){
if(qp[i][j]==flag){
zuoxie++;
}else break;
}
//右上
for(let i = x - 1,j=y + 1;i>=0&&j<15;i--,j++){
if(qp[i][j]==flag){
zuoxie++;
}else break;
}
//左上
for(let i = x,j=y;i>=0&&j>=0;i--,j--){
if(qp[i][j]==flag){
youxie++;
}else break;
}
//右下
for(let i = x+1,j=y+1;i<15&&j<15;i++,j++){
if(qp[i][j]==flag){
youxie++;
}else break;
}
console.log(heng,shu,zuoxie,youxie);
if(heng>4||shu>4||zuoxie>4||youxie>4){
cvs.removeEventListener("click",_click,false)
alert("赢了");
}
}
document.getElementById("btnsave").onclick = function(){
//通过动态创建一个a标签
let a = document.createElement("a");
//设置图片的名字
a.download = "星辰";
//设置图片格式
a.href = cvs.toDataURL("image/png");
//将a标签放入页面
document.body.append(a);
//模拟点击a标签
a.click();
//点击完成后移除a标签
a.remove();
}
</script>
</body>
</html>
需要注意循环，此代码中方向是相反的 ，除了上下左右，当然这个也可以自己去调，总共一共八个方向，一个方向的错误不会影响其他代码运行，但会出现下棋不会判断输赢，或者赢了之后依然可以下棋，就需要去调整代码
运行效果：
总结
`提示：canvas 此方法是页面的画布，整个棋盘就是一个画布，而canvas就是这个画布
下棋的圆点建议用ps来剪裁，图中我用的是10.58毫米
版权声明：本文为weixin_64948861原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。