HTML--五子棋JS

Posted 2021-01-14 bujianchangan

1.首先设置画布

html：
<div style="width: 600px;margin: 0 auto;border: 5px solid black;background: #e7e7e7;">
<canvas width="600px" height="600px" id="canvas" onclick="play()"></canvas>
</div>

JS：
var canvas=document.getElementById("canvas");
handl=canvas.getContext("2d");
handl.fillStyle="#e7e7e7";//背景色设置
handl.fillRect(0,0,600,600);//矩形填充，坐标，宽高；但是以HTML中设置的宽高为主，若超过则不显示。

2.划线

handl.moveTo(x1,y1);

handl.lineTo(x2,y2);

handl.stroke();//划线

handl.strokeStyle="######"

3.填充

handl.fillStyle="######‘

handl.fill()

PS：先后顺序不要忘记

4.画圆

handl.beginPath();
handl.arc(250,200,100,0,2*Math.PI);
handl.closePath();

 源代码JS：  1 <script type="text/javascript">

  2     var canvas=document.getElementById("canvas");
  3     handl=canvas.getContext("2d");
  4     handl.fillStyle="#e7e7e7";
  5     handl.fillRect(0,0,600,600);
  6 
        //划线，（棋盘）
  7     for(i=0;i<16;i++){
  8         handl.moveTo(20,20+i*40);
  9         handl.lineTo(580,20+i*40);
 10         handl.stroke();
 11 
 12         handl.moveTo(20+i*40,20);
 13         handl.lineTo(20+i*40,580);
 14         handl.stroke();
 15     }
 16     //记录棋盘上的哪些位置有棋子（黑棋还是白棋）
 17     player=1;
 18     var result=new Array();
 19     for(i=0;i<16;i++){
 20         result[i]=new Array();
 21         for(j=0;j<16;j++){
 22             result[i][j]=0;
 23         }
 24     }
 25     //记录落子位置（先判断在横竖着的第几条线，在确定具体坐标，）
 26     function play(e){
 27         if(player==3){return;}
 28         e=e||window.event;
 29         x=e.layerX-20;
 30         y=e.layerY-20;
 31 
 32         x=Math.floor(x/40)+(x%40>20?1:0);
 33         y=Math.floor(y/40)+(y%40>20?1:0);
 34 
 35         if(result[x][y]){
 36             alert("此处不能落子！");
 37             return;}
 38 
 39         handl.beginPath();
 40         handl.arc(x*40+20,y*40+20,15,0,2*Math.PI);
 41         //先fillStyle后fill()
 42         if(player==1){
 43             handl.fillStyle="#000";
 44             handl.fill();
 45             player=2;
 46         }else{
 47             handl.fillStyle="#fff";
 48             handl.fill();
 49             player=1;
 50         }
 51         handl.closePath();
 52 
 53         result[x][y]=player;
 54         result_check(x,y,play);
 55     }
 56    //判断（倒着的第一象限）
 57     function result_check(x,y){
 58         //横（从这个点开始往前数5个，往后数5个，看看有没有5子相连的，记得判断边界情况，不能溢出）
 59         startx=(x-4)>0?(x-4):0;
 60         for(i=startx;i<=x;i++){
 61             if(i+4>15){
 62                 break;
 63             }
 64             if(result[i][y]*result[i+1][y]*result[i+2][y]*result[i+3][y]*result[i+4][y]==32)
 65             {
 66                 alert("黑子获胜！");
 67                 player=3;
 68             }
 69             else if(result[i][y]*result[i+1][y]*result[i+2][y]*result[i+3][y]*result[i+4][y]==1)
 70             {
 71                 alert("白子获胜！");
 72                 player=3;
 73             }
 74         }
 75 
 76         //纵（同横）
 77         starty=y-4;
 78         for(i=starty;i<=y;i++){
 79             if(i+4>15){break;}
 80             if(result[x][i]*result[x][i+1]*result[x][i+2]*result[x][i+3]*result[x][i+4]==32){
 81                 alert("黑子获胜！");
 82                 player=3;
 83             }
 84             else if(result[x][i]*result[x][i+1]*result[x][i+2]*result[x][i+3]*result[x][i+4]==32){
 85                 alert("白子获胜！");
 86                 player=3;
 87             }
 88         }
 89 
 90         //正斜（x，y都在增加，判断边界情况，x大还是y大）
 91         if(x>y){
 92             starty=y-4>0?y-4:0;
 93             startx=y-4>0?(x-4):(x-(y-starty));
 94         }else{
 95             startx=x-4>0?x-4:0;
 96             starty=x-4>0?(y-4):(y-(x-starty));
 97         }
 98         for(i=startx;i<=x;i++){
 99             if(i+4>15||starty+4>15){break;}
100                 if(result[i][starty]*result[i+1][starty+1]*result[i+2][starty+2]*result[i+3][starty+3]*result[i+4][starty+4]==32){
101                     alert("黑子获胜！");
102                     player=3;
103                 }else if(result[i][starty]*result[i+1][starty+1]*result[i+2][starty+2]*result[i+3][starty+3]*result[i+4][starty+4]==1)
104                 {
105                 alert("白子获胜！");
106                 player=3;
107                 }
108                 starty++;
109         }
110 
111         //反斜（x在增加，y在减少，临界记得判断（0，15）-（15，0））
112         startx=x-4;
113         starty=y+4;
114         if(startx<0){startx=0;starty=y+(x-startx)}
115         if (starty>15) {starty=15;startx=x-(15-starty)}
116         for(i=startx;i<=x;i++){
117             if(i+4>15||starty-4<0){break}
118             if(result[i][starty]*result[i+1][starty-1]*result[i+2][starty-2]*result[i+3][starty-3]*result[i+4][starty-4]==32){
119                 alert("黑子获胜！");
120                 player=3;
121             }else if (result[i][starty]*result[i+1][starty-1]*result[i+2][starty-2]*result[i+3][starty-3]*result[i+4][starty-4]==1) {
122                 alert("白子获胜！");
123                 player=3;
124             }
125             starty--;
126         }
127     }
128 </script>

效果图：