-------------------------------------------

下棋，要有棋盘，棋子，和下棋事件。

chess.PNG

棋盘

棋盘简单说就是网格线，我用convas画布绘制。

html

<canvas id="chess" width="450px" height="450px"></canvas>

JS部分

//获取到canvas标签，getContext标签定义一个画布，2d代表二维
var chess= document.getElementById('chess');
var context = chess.getContext("2d");

然后画线

//设置线的颜色
context.strokeStyle="#bfbfbf";
var drawChess = function(){
for(var i=0;i<15;i++){
//竖线
context.moveTo(15+i*30,15)；
context.lineTo(15+i*30,435)；
context.stroke();
//横线
context.moveTo(15,15+i*30)；
context.lineTo(435,15+i*30)；
context.stroke();
}
}

moveT0( , ):开始坐标，lineTo( , ):终点坐标

添加背景图片

var logo = new Image();
logo.src="#图片地址"；
logo.onload=function(){
context.drawImage(logo,0,0,450,450);
drawChess();
}

onload()方法表示在图片加载完成后运行方法内内容，因为图片加载需要时间，如果不在它完成后执行绘制背景，和加载线格，背景图片会在上面显示，覆盖网格。(可以自己测试一下)。

制作棋子

var onestep = function(i,j,me){
context.beginPath();
context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI)
context.closePath();
//渐变
 var gradient = context.createRadialGradient(
    15 + i * 30 + 2,
    15 + j * 30 - 2,
    13,
    15 + i * 30,
    15 + j * 30,
    0
  );
  if (me) {
    gradient.addColorStop(0, "#0a0a0a");
    gradient.addColorStop(1, "#636766");
  } else {
    gradient.addColorStop(0, "#d1d1d1");
    gradient.addColorStop(1, "#f9f9f9");
  }

  context.fillStyle = gradient;
  context.fill();
}

分两部分，先画圆，beginPath()表示开始画，arc()方法里面值分别是，圆心坐标，半径，arc()是画弧线的，所以要得到圆，就是从0到 2 * Math.PI，表示360°。
接下来是给圆设置渐变，渐变就是从一种颜色到另一种颜色的过渡。所以用createRadialGradient()方法设置两个圆，参数就是两个圆的圆心和半径，然后判断是黑子还是白子分别设置不同的渐变颜色,addColorStop()方法：stop ：介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。 color：在结束位置显示的 CSS 颜色值。接着设置颜色填充和填充方式，方式就是上面定义的gradient渐变。

棋子落下事件

简单说就是在画布上点击，然后在相应位置生成棋子，难点在于黑白棋轮流落下，一个一次。且落下后的棋子不能改变。

var me = true;
chess.onclick=function(e){
var x = e.offsetX;
var y = e.offsetY;
var i = Math.floor(x/30);
var j = Math.floor(y/30);
onestep();
me=!me;
}

这里就对应了上面的制作棋子中的i,j.在相应的坐标添加棋子。me=!me;就规定了下一次点击改变颜色，这次是true,下次就是fales。
但是这个时候你在已经落下的棋子上面点击,会改变其原有的颜色，为解决这个BUG，我们添加一个二位数组用来存储已经落下棋子的位置。如果已经存在就不会触发事件。

var arr=[];
for(var i=0;i<15;i++){
arr[i]=[];
for(var j=0;j<15;j++){
arr[i][j]=0;
}
}
var me = true;
chess.onclick = function(e) {
  var x = e.offsetX;
  var y = e.offsetY;
  var i = Math.floor(x / 30);
  var j = Math.floor(y / 30);
  if (chessBoard[i][j] == 0) {
    oneStep(i, j, me);
    if (me) {
      chessBoard[i][j] = 1;
    } else {
      chessBoard[i][j] = 2;
    }
    me = !me;
  }
};

先让数组初始值为0，如果是0，执行onestep()方法，如果是true(黑色)就在数组里该位置存放为1，如果是false(白色)存放2，这样在点击空白位置时就会先判断数组里该位置的值，如果是0，则执行函数，其他则不执行。
之前写过一遍，现在方法全忘记了，写这篇文章还是对应着源码写的，还是要多练习，不难的东西，就是方法太多，很琐碎，学JS，HTML就这样，下期会添加判断输赢和重新开始游戏等功能。