var chess = document.getElementById("chess");


var context = chess.getContext("2d");

var chessBoard = [];

var me = true;

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

    chessBoard[i] = [];

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

        chessBoard[i][j] = 0;

}


context.strokeStyle = "#BFBFBF";




var logo = new Image();


logo.src = "index.jpg";


logo.onload = function () {


    context.drawImage(logo, 0, 0, 450, 450);


    drawChessBoard();


    oneStep(0, 0, true);


    oneStep(1, 1, false);




}


var drawChessBoard = 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();


    }


}


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, 8, 15 + i * 30 + 2, 15 + j * 30 - 2, 5);


    if (me) {


        gradient.addColorStop(0, "#0A0A0A");


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


    } else {


        gradient.addColorStop(0, "#D1D1D1");


        gradient.addColorStop(1, "#F9F9F9");


    }


    context.fillStyle = gradient;


    context.fill(); //填充//context.stroke();描边


}


chess.onclick = function (e) {

    var x = Math.floor(e.offsetX / 30);

    var y = Math.floor(e.offsetY / 30);

    if (chessBoard[x][y] == 0) {

        oneStep(x, y, me);

        if (me)

            chessBoard[x][y] = 1;

        else

            chessBoard[x][y] = 2;

        me = !me;

    }

}