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;

??? }

}