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 ="\logobg.jpg";//載入圖片

logo.onload=function(){

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

drawChessBoard();

onStep(0,0,true);

onStep(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();

}

}

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//i,j指索引，me表示黑棋白棋

var oneStep=function(i,j,me){ ?//此處i,j 間多了逗號(hào)

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);//你這里漸變圓的半徑弄太大了，建議將第一個(gè)圓半徑設(shè)為8或9，第二個(gè)漸變圓半徑設(shè)為5或6，效果會(huì)更好

? ? ? ?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; //結(jié)束時(shí)交換落子顏色

}

}

// 鼠標(biāo)觸發(fā)事件你再仔細(xì)看看視頻吧