JavaScript实现五子棋的界面设计

时间：2022-06-07 16:45:15

五子棋的界面设计包括绘制棋盘、绘制棋子及黑白棋轮流落子。

涉及的知识点主要有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

相关文章