HTML--五子棋JS

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 ????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>