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="#bfbfbf";var logo=new Image();logo.src="nv.jpg";logo.onload=function() { context.drawImage(logo,0,0,450,450); drawChessBoard(); oneStep(0,0,me); 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,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.noclick=function(e){ var x=e.offsetX; var y=e.offsetY; var i=Math.floor(x/30); var j=Math.floor(y/30); oneStep(i,j,true); if (chessBoard[i][j]==0) { oneStep(i,j,me); if (me) {chessBoard[i][j]=1; }else{ chessBoard[i][j]=2; } me=!me; }}