码迷,mamicode.com
首页 > Web开发 > 详细

HTML--五子棋JS

时间:2018-10-23 00:15:55      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:不能   canvas   can   技术   ||   border   check   位置   array   

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>

效果图:技术分享图片

HTML--五子棋JS

标签:不能   canvas   can   技术   ||   border   check   位置   array   

原文地址:https://www.cnblogs.com/bujianchangan/p/9833441.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!