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="#0A0A0A";//棋盤畫線的顏色

//畫出圖片

var logo = new Image();

logo.src="img/timg.jpg";

logo.onload=function(){//繪制背景圖片

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

drawChessBoard();//調(diào)用畫棋盤的函數(shù)

?// ? oneStep(0,0,true);//0的位置放置黑棋

? ?// oneStep(1,1,false);//1的位置放置白棋

}

var ?drawChessBoard= function(){//畫出棋盤的函數(shù)

//用循環(huán)畫出棋盤

? ?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){//i，j代表棋子在棋盤上的索引 ，me代表黑棋還是白棋

//棋子的繪制

context.beginPath();

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

context.closePath();

//實(shí)現(xiàn)棋子的漸變效果

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;

}

}

?