JS实现五子棋（二）外观分析及绘制

<canvas id="canvas"></canvas>

function Plate(){   // 这个名字起坏了，别在意
let cxt2d = canvas = null;  // canvas上下文对象
  let canvasSideLen = 780;  // px canvas画布大小
  let plateSideLen = 0;  // 棋盘边长 需要进行初始化计算
  let plateLineWidth = 1;  // px 棋盘线条宽度
  let cellNumOneSide = 15;  // 棋盘单边单元格数量
  let cellSideLen = 0;    // px 单元格边长 需要计算初始化
  let initCxt = function(){
    // 初始化棋盘画布
  }
  let initPlateAttr = function(){
    // 初始化并计算棋盘相关变量，棋盘边长、单元格边长
  }
  let renderPlate = function() {
    // 使用矩形绘制边框并填充颜色或图片 
    // 循环绘制出横纵格线   
  }
  // 分别按顺序进行调用
  initCxt();
  initPlateAttr();
  renderPlate();
}

<script>
var plate = new Plate();  // 初始化棋盘对象
</script>

<!--定义棋子层-->
<canvas id="chess"></canvas>

/* canvas使用定位，将各层叠加起来 */
canvas {
position: absolute;
top: 0;
left: 0;
margin: 0 auto;
cursor: pointer;
}

function Plate(){
  ... 
  let cxtChess2d = null;   //棋子画布
  let plateOriginPosX = 0;  //棋盘原点坐标X
  let plateOriginPosY = 0;  //棋盘远点坐标Y
  let drawChessBasePosX = 0;  //棋子坐标基准X
  let drawChessBasePosY = 0;  //棋子坐标基准Y
  let singleChessRadius = 0;  //棋子半径
  let initPlateAttr = function(){
    ...
    //初始化和计算棋盘原点和棋子坐标基准
  }
  //绘制一个棋子，传入绘制位置 v:垂直位置，h：横向位置 以及颜色
  let drawOneChess = function (y, x, color) {
    // 通过v和h，单元格边长，棋子坐标基准，计算当前棋子坐标，
    // currentX=drawChessBasePosX + x * cellSideLen
    // currentY=drawChessBasePosY + y * cellSideLen
    // 使用cxtChess2d绘制圆形，并填充color
  }
  
  //测试在[0,0]位置绘制一颗黑色棋子
  drawOneChess(0,0,'#000');
}

function Plate(){
  ...
  this.renderOneChess = function(v,h,color){
    drawOneChess(v,h,color);
  };
  
  let clearAllChessDraw = function () {
    //清除cxtChess2d整个画布矩形区域
  };
  this.clearAll = function(){
    clearAllChessDraw();
  };
}

<script>
var plate = new Plate();  // 初始化棋盘层和棋子层
plate.renderOneChess(0,0,'#000');  //在0，0绘制一个黑色棋子
plate.renderOneChess(1,1,'#fff');  //在1，1绘制一个白色棋子

//清除棋子
//plate.clearAll();
</script>