JavaScript實現五子棋的界面設計

 

   五子棋的界面設計包括繪製棋盤、繪製棋子及黑白棋輪流落子。

   涉及的知識點主要有canvas繪製直線、設置畫筆顏色；canvas畫圓、填充漸變色

1.繪製棋盤

   先設定棋盤的寬、高；而後利用for循環，根據座標使用context的一些方法來繪製

 var drawChessBoard=function(){

     for(var i=0;i<15;i++){ //棋盤寬高450，旁白15，間距30

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

} }

 

2.繪製棋子

  這裏牽涉到canvas繪製圓的狀況，用畫弧形的方法來畫圓，同時設置黑棋白琪兩種顏色，用到了漸變對象，fill（）函數用來填充的。

//繪畫棋子須要首先會畫圓 ，先開始一個路徑，而後記得關閉該路徑 
context.beginPath (); 
context.arc(200,200,100,0,2*Math.PI ); 
//arc用來畫扇形，此處用來畫圓，前面兩個參數爲圓心座標，接着爲半徑，起始弧度，種植弧度
 context.closePath (); 
 var gradient=context.createRadialGradient (200,200,50,200,200,20); 
//返回一個漸變的對象，前面三個參數爲外圓心座標和半徑，後面三個爲內圓心座標和半徑
 gradient.addColorStop (0,"#0A0A0A");//外圓的顏色 
gradient.addColorStop (1,"#636766");//內圓的顏色 
context.fillStyle =gradient ; 
context.fill();//fill是用來填充的*/

 3.落子設置

   咱們須要在點擊棋盤某個位置時候落子，則須要給canvas綁定一個onclick事件，根據座標索引來肯定落子的位置，同時爲了防止一個位置能夠同時落黑白兩種棋咱們須要先定義並初始化一個二維數組來存儲棋盤上的位置及落子狀況，而後將棋盤位置沒有棋子設置爲0，黑棋設置爲1，白棋設置爲2.點擊一次以後改變對象的值便可實現輪流落子的動做。

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;//黑棋下完以後換白琪  }
}

 源碼：https://github.com/sunshineqt/webxt/tree/master/game-five-in-a-row