js小游戏：五子棋
Posted 溪山晴雪
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js小游戏：五子棋相关的知识，希望对你有一定的参考价值。
使用纯js的小游戏，五子棋
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>五子棋</title> 6 <style type="text/css"> 7 *{ 8 padding:0; 9 margin:0; 10 } 11 canvas{ 12 margin:10px; 13 border:2px solid #CCCCCC; 14 15 } 16 #box{ 17 display:inline-block; 18 position:absolute; 19 margin-top: 200px; 20 margin-left: 100px; 21 } 22 span{ 23 font :24px "微软雅黑"; 24 display: inline-block; 25 height:50px; 26 } 27 input{ 28 margin-top:30px; 29 display:block; 30 width:100px; 31 height: 50px; 32 font:16px "微软雅黑"; 33 color:#fff; 34 background-color: #0099cc; 35 } 36 37 </style> 38 39 </head> 40 <body> 41 <canvas width="640" height="640" id="cas"></canvas> 42 <div id = "box"> 43 <span id= "txt"></span> 44 <input type = "button" id = "btn" value="重新开始" /> 45 </div> 46 47 48 <script type="text/javascript"> 49 50 var flag = true;//true代表白棋下的棋子，false 代表黑棋子 51 var isWin = false; 52 var step = 40; //设置每个棋子的高度是40 53 var txt = document.getElementById("txt"); 54 55 var btn = document.getElementById("btn"); 56 57 var cas = document.getElementById("cas");//画布 58 59 var ctx = cas.getContext("2d"); 60 cas.style.backgroundImage = "url(img/an.jpg)"; 61 var img_b = new Image(); 62 img_b.src = "img/red.png"; 63 var img_w = new Image(); 64 img_w.src = "img/bg.png"; 65 //用二维数组来保存棋盘，0代表没有走过，1代表白棋走过。2代表黑气走过 66 var arr = new Array(16);//声明一个一维数组； 67 for(var i= 0;i<=15;i++){ 68 arr[i] = new Array(16); 69 for(var j= 0;j<=15;j++){ 70 arr[i][j] = 0; 71 72 } 73 } 74 75 76 //绘制棋盘 77 function drawLine(){ 78 79 for(var i= 0;i<cas.width/step;i++){ 80 //画竖线 81 ctx.moveTo((i+1)*step,0); 82 ctx.lineTo((i+1)*step,cas.height); 83 //画横线 84 ctx.moveTo(0,(i+1)*step); 85 ctx.lineTo(cas.width,(i+1)*step); 86 ctx.stroke(); 87 88 } 89 } 90 //获取鼠标点击的位置。 91 cas.onclick = function(e){ 92 //先判断游戏是否结束 93 if(isWin){ 94 alert("游戏已经结束，请重新开始"); 95 return 0; 96 } 97 //判断棋子显示的地方，四条边上不显示棋子。 98 //鼠标点击的位置减去边框距离页面的上和左的距离（10），减去一个格子宽高的一半（20） 99 // var x = (e.clientX-10-20)/40 +1; 100 // var y = (e.clientY-10-20)/40 +1; 101 var x = (e.pageX-10-20)/40 +1; 102 var y = (e.pageY-10-20)/40 +1; 103 104 //进行取整来确定棋子最终显示的位置。 105 x = parseInt(x); 106 107 y = parseInt(y); 108 //如果超出棋盘或者在棋盘的边界直接返回，边界上不能画棋子。 109 if(x<=0||x>15||y<=0||y>15){ 110 alert("不可以在边界下棋子！"); 111 return; 112 } 113 114 //判断这个位置是否已经显示过棋子 115 if(arr[x][y]!=0){ 116 alert("这个地方已经有棋子了，不可以重复棋子"); 117 return; 118 } 119 //判断显示黑棋还是白棋 120 if(flag){ 121 flag= false;//将标志设置为false,表示下次为黑子。 122 drawChess(1,x,y);//调用函数画棋子 123 }else{ 124 flag = true;//将标志改为true,表示下次为白棋。 125 drawChess(2,x,y); 126 } 127 } 128 129 //画棋子 130 function drawChess(num,x,y){ 131 //根据x和y确定图片显示的位置，让图片显示在十字线的中间。 132 //一个格子为40，图片大小为30，所以40-30/2等于25，所以加上25 133 var x0 = x*step ; 134 var y0 = y*step ; 135 if(num ==1 ){ 136 137 ctx.beginPath(); 138 ctx.arc(x0,y0,15,0,2*Math.PI); 139 ctx.fillStyle ="#ff2233"; 140 //ctx.fillStyle.backgroundImage = "url(img/red.png)"; 141 ctx.fill(); 142 ctx.closePath(); 143 ctx.stroke(); 144 145 //ctx.drawImage(img_w,x0,y0); 146 arr[x][y] = 1;//白子 147 }else if(num==2){ 148 ctx.beginPath(); 149 ctx.arc(x0,y0,15,0,2*Math.PI); 150 ctx.fillStyle ="#008000"; 151 //ctx.fillStyle.backgroundImage ="url(img/f.png)"; 152 ctx.fill(); 153 ctx.closePath(); 154 ctx.stroke(); 155 //ctx.drawImage(img_b,x0,y0); 156 arr[x][y] = 2;//黑子 157 } 158 159 //调用函数判断输赢 160 judge(num,x,y); 161 } 162 163 function judge(num,x,y){ 164 //左右方向，上下方向，左上右下，左下右上 165 var n1=0 , n2 = 0, n3= 0, n4 = 0; 166 //左右方向 167 for(var i=x ;i>0;i--){ 168 if(arr[i][y]!=num){ 169 break; 170 } 171 n1++; 172 } 173 for(var i= x+1;i<=15;i++){ 174 if(arr[i][y]!=num){ 175 break; 176 } 177 n1++; 178 } 179 //上下方向。 180 for(var j=y ;j>0;j--){ 181 if(arr[x][j]==num){ 182 n2++; 183 }else{ 184 break; 185 } 186 } 187 for(var j= y+1;j<=15;j++){ 188 189 if(arr[x][j]==num){ 190 n2++; 191 }else{ 192 break; 193 } 194 } 195 //左上到右下 196 for(var i= x,j= y;i>=0,j>=0;i--,j--){ 197 if(i<0||j<0||arr[i][j]!=num){ 198 break; 199 } 200 n3++; 201 } 202 for(var i= x+1,j=y+1;i<=15,j<=15;i++,j++){ 203 if(i>15||j>15||arr[i][j]!=num){ 204 break; 205 } 206 n3++; 207 } 208 //左下到右上 209 for(var i= x,j= y;i>0,j<=15;i--,j++){ 210 if(i<0||j>=15||arr[i][j]!=num){ 211 break; 212 } 213 n4++; 214 } 215 for(var i= x+1,j=y-1;i<=15,j>=0;i++,j--){ 216 if(i>=15||j<0||arr[i][j]!=num){ 217 break; 218 } 219 n4++; 220 } 221 //用一个定时器来延时，否则会显示对话框，然后才显示棋子。 222 //alert(n1+"--"+n2+"--"+n3+"--"+n4); 223 var str ; 224 if(n1>=5||n2>=5||n3>=5||n4>=5){ 225 if(num==1){ 226 alert("恭喜白棋夺冠！"); 227 str = "白棋赢了，游戏结束"; 228 }else if(num ==2){ 229 alert("恭喜黑棋夺冠！"); 230 str = "黑棋赢了，游戏结束"; 231 } 232 txt.innerHTML = str; 233 isWin = true; 234 } 235 } 236 237 //重新开始 238 btn.onclick = function(){ 239 falg = true; 240 isWin = false; 241 242 for(var i= 0 ;i<=15;i++){ 243 for(var j= 0;j<=15;j++){ 244 arr[i][j] =0; 245 } 246 } 247 ctx.clearRect(0,0,640,640); 248 txt.innerHTML = ""; 249 drawLine(); 250 } 251 drawLine(); 252 </script> 253 </body> 254 </html>
现在可以开始玩喽！
以上是关于js小游戏：五子棋的主要内容，如果未能解决你的问题，请参考以下文章