window.onload=function(){
?? ?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;
?? ??? ?}
?? ?}
?? ?
?? ?var chess=document.getElementById('chess');
?? ?var context=chess.getContext('2d');
?? ?
?? ?
?? ?context.strokeStyle='#D6D6D6'
?? ?var logo=new Image();
?? ?logo.src="images/zz.jpeg";? /*拿到圖片*/
?? ?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,13,15+i*30+2,15+j*30-2,0);//漸變
?? ??? ?if(me){
?? ??? ??? ?gradient.addColorStop(0,"#0A0A0A");//第一個0對應200,200,50?? 第二個1對應200,200,20
?? ??? ??? ?gradient.addColorStop(1,"#636866");
?? ??? ?}else{
?? ??? ??? ?gradient.addColorStop(0,"#D1D1D1");//第一個0對應200,200,50?? 第二個1對應200,200,20
?? ??? ??? ?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;
?? ?}
}