表2 函数表：

函数名 函数功能论文网

Function killSelf(dot) 禁手功能（若落子之后自身气为0 ，禁下）

Function kill(dot) 判断棋盘是否可以杀子

Function getPos(x,y) 获取棋子的坐标

Funcion cha(bl,dot) 找到周围连成一片反色的区域

Function tightSame(dot) 查找棋子的紧气

document。onclick=function(){} 判断页面点击区域是否在有效区域

Back。onclick=function(){} 点击悔棋按钮，执行悔棋函数

Array。prototype。unique=function(){} 给数组封装一个去重方法

4。2页面布局代码

canvas标签，宽高设置都设置为800，id设置为canvas

（1）Canvas设置1像素实体线黑色的边框，设置灰色阴影，背景颜色设置为咖啡色，四周外边距设置50像素。

 < canvas id = "canvas" width = "800" height = "800"> < /canvas>

canvas{

            border: 1px solid #000; 

            box - shadow: 0 0 50px #ccc; 

            background:rgba( 200,156,92,1 ); 

            margin: 50px; 

        }

（2）获取canvas节点，将canvas设置成平面2d，并永久移动canvas画布，接下来开始绘制棋盘，画笔开始是在（30 * i，0）的位置，移动到( 30 * i,540 )的位置，这样画出19条经线，同理画出19条纬线，canvas中的arc方法是画圆，参数1记录圆心横坐标，参数2记录圆心纵坐标，第三个参数是圆的半径，第四个参数是起始角度，第五个参数是结束角度，都是弧度制，第6个参数是可选参数，表示是否逆时针绘画,双层循环，按照坐标绘制出9个实心点

var canvas  =  document。querySelector( "#canvas" ); 

var ctx  =  canvas。getContext( "2d" ); 

ctx。translate( 100,100 ); 

createChessBox(  );    文献综述

function createChessBox(  ){

        for ( var i  =  0; i  <  19; i  +  +  ){

            ctx。beginPath(  ); 

            ctx。moveTo( 30 * i,0 ); 

            ctx。lineTo( 30 * i,540 ); 

            ctx。stroke(  ); 

            ctx。save(  ); 

            ctx。beginPath(  ); 

            ctx。moveTo( 0,30 * i );   

            ctx。lineTo( 540,30 * i );   

            ctx。stroke(  ); 

            ctx。save(  ); 

        }

        for ( var i = 0; i < 19; i +  +  ){

            for ( var j = 0; j < 19; j +  +  ){

              if ( ( i  ==  3 && j  ==  3 )||( i  ==  3 && j  ==  9 )||( i  ==  3 &&   j == 15 )|| ( i  ==  9 && j  ==  3 )||( i  ==  9 && j  ==  9 )||( i  == 9 && j  ==  15 )||( i  ==  15 && j  ==  3 )||( i  ==  15 && j  ==  9 )||(   i == 15 && j  ==  15 ) ){