var me = true;

var chessBoard = [];

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

? ? chessBoard[i] = [];

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

? ? ? ? chessBoard[i][j] = 0;

? ? }

}

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

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

context.strokeStyle= "#eee";

var logo = new Image();

logo.src = "logo.png";

logo.onload = function(){

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

? ? drawChessBoard();

? ? oneStep(1,1,true);

? ? oneStep(0,0,false);

}

var drawChessBoard = function(){

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

? ? context.moveTo( 15+30*i, 15);

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

? ? context.stroke();

? ? context.moveTo(15, 15+30*i);

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

? ? 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, 13, 15 + i*30 + 2, 15 + j*30 - 2,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();

}

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;

? ? }

}