window.onload = function(){

var c = document.getElementById('mc');

    var myc = c.getContext('2d');

    var chB = [];

    var me = true;

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

    chB[i] = [];

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

    chB[i][j] = 0;

    }

    }

 /*棋盘*/    

   draw = function(){

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

    myc.moveTo(15+i*30,15);

        myc.lineTo(15+i*30,435);

        myc.stroke();

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

        myc.moveTo(15,15+i*30);

            myc.lineTo(435,15+i*30);

            myc.stroke();

        }

   }

  }

  draw();

  /*棋子*/

     var one = function (i,j,me) {

      myc.beginPath();

        myc.arc(15+i*30,15+i*30,13,0,2*Math.PI);

        myc.closePath();

        /*渐变*/

        var gra = myc.createRadialGradient(17+i*30,13+i*30,13,17+i*30,13+i*30,0);

        if(me) {

        gra.addColorStop(0,"#0a0a0a");

        gra.addColorStop(1,"#636766");

        }

        else {

        gra.addColorStop(0,"#d1d1d1");

        gra.addColorStop(1,"#f9f9f9");

        }

        myc.fillStyle = gra;

        myc.fill();

     }

   c.onclick = function (e) {

       var x = e.offsetX;

       var y = e.offsetY;

       var i =Math.floor(x/30);

       var j =Math.floor(y/30);

        if (chB[i][j]==0) {

        one(i,j,me);

        if (me) {

        chB[i][j]=1;

        }else {

        chB[i][j]=2;

        }

        }

       me = !me ;

   }

}