HTML--五子棋JS
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>
效果图：
