html+css+javascript 完成一个简单五子棋游戏
一、HTML/CSS代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <!-- Head --> 4 <head> 5 <meta charset="UTF-8"> 6 <title>五子棋</title> 7 <!-- css --> 8 <style type="text/css"> 9 #container { 10 width: 531px; 11 height: 645px; 12 margin: 0 auto; 13 border: 1px solid blue; 14 background:url(qipan.jpg) no-repeat; 15 padding-top: 0px; 16 padding-left: 5px; 17 } 18 td{ 19 width: 40px; 20 height:33px; 21 } 22 table{ 23 border-collapse: collapse; 24 width: 525px; 25 height: 465px; 26 } 27 </style> 28 <!-- css ends --> 29 <!-- script --> 30 <script src="wuzi.js"></script> 31 <!-- script ends --> 32 </head> 33 <!-- Head Ends --> 34 <!-- Body --> 35 <body> 36 <!-- Container --> 37 <div id="container"> 38 <!-- table model --> 39 <table> 40 <tr> 41 <td> </td> 42 <td> </td> 43 <td> </td> 44 <td> </td> 45 <td> </td> 46 <td> </td> 47 <td> </td> 48 <td> </td> 49 <td> </td> 50 <td> </td> 51 <td> </td> 52 <td> </td> 53 <td> </td> 54 <td> </td> 55 <td> </td> 56 </tr> 57 <tr> 58 <td> </td> 59 <td> </td> 60 <td> </td> 61 <td> </td> 62 <td> </td> 63 <td> </td> 64 <td> </td> 65 <td> </td> 66 <td> </td> 67 <td> </td> 68 <td> </td> 69 <td> </td> 70 <td> </td> 71 <td> </td> 72 <td> </td> 73 </tr> 74 <tr> 75 <td> </td> 76 <td> </td> 77 <td> </td> 78 <td> </td> 79 <td> </td> 80 <td> </td> 81 <td> </td> 82 <td> </td> 83 <td> </td> 84 <td> </td> 85 <td> </td> 86 <td> </td> 87 <td> </td> 88 <td> </td> 89 <td> </td> 90 </tr> 91 <tr> 92 <td> </td> 93 <td> </td> 94 <td> </td> 95 <td> </td> 96 <td> </td> 97 <td> </td> 98 <td> </td> 99 <td> </td> 100 <td> </td> 101 <td> </td> 102 <td> </td> 103 <td> </td> 104 <td> </td> 105 <td> </td> 106 <td> </td> 107 </tr> 108 <tr> 109 <td> </td> 110 <td> </td> 111 <td> </td> 112 <td> </td> 113 <td> </td> 114 <td> </td> 115 <td> </td> 116 <td> </td> 117 <td> </td> 118 <td> </td> 119 <td> </td> 120 <td> </td> 121 <td> </td> 122 <td> </td> 123 <td> </td> 124 </tr> 125 <tr> 126 <td> </td> 127 <td> </td> 128 <td> </td> 129 <td> </td> 130 <td> </td> 131 <td> </td> 132 <td> </td> 133 <td> </td> 134 <td> </td> 135 <td> </td> 136 <td> </td> 137 <td> </td> 138 <td> </td> 139 <td> </td> 140 <td> </td> 141 </tr> 142 <tr> 143 <td> </td> 144 <td> </td> 145 <td> </td> 146 <td> </td> 147 <td> </td> 148 <td> </td> 149 <td> </td> 150 <td> </td> 151 <td> </td> 152 <td> </td> 153 <td> </td> 154 <td> </td> 155 <td> </td> 156 <td> </td> 157 <td> </td> 158 </tr> 159 <tr> 160 <td> </td> 161 <td> </td> 162 <td> </td> 163 <td> </td> 164 <td> </td> 165 <td> </td> 166 <td> </td> 167 <td> </td> 168 <td> </td> 169 <td> </td> 170 <td> </td> 171 <td> </td> 172 <td> </td> 173 <td> </td> 174 <td> </td> 175 </tr> 176 <tr> 177 <td> </td> 178 <td> </td> 179 <td> </td> 180 <td> </td> 181 <td> </td> 182 <td> </td> 183 <td> </td> 184 <td> </td> 185 <td> </td> 186 <td> </td> 187 <td> </td> 188 <td> </td> 189 <td> </td> 190 <td> </td> 191 <td> </td> 192 </tr> 193 <tr> 194 <td> </td> 195 <td> </td> 196 <td> </td> 197 <td> </td> 198 <td> </td> 199 <td> </td> 200 <td> </td> 201 <td> </td> 202 <td> </td> 203 <td> </td> 204 <td> </td> 205 <td> </td> 206 <td> </td> 207 <td> </td> 208 <td> </td> 209 </tr> 210 <tr> 211 <td> </td> 212 <td> </td> 213 <td> </td> 214 <td> </td> 215 <td> </td> 216 <td> </td> 217 <td> </td> 218 <td> </td> 219 <td> </td> 220 <td> </td> 221 <td> </td> 222 <td> </td> 223 <td> </td> 224 <td> </td> 225 <td> </td> 226 </tr> 227 <tr> 228 <td> </td> 229 <td> </td> 230 <td> </td> 231 <td> </td> 232 <td> </td> 233 <td> </td> 234 <td> </td> 235 <td> </td> 236 <td> </td> 237 <td> </td> 238 <td> </td> 239 <td> </td> 240 <td> </td> 241 <td> </td> 242 <td> </td> 243 </tr> 244 <tr> 245 <td> </td> 246 <td> </td> 247 <td> </td> 248 <td> </td> 249 <td> </td> 250 <td> </td> 251 <td> </td> 252 <td> </td> 253 <td> </td> 254 <td> </td> 255 <td> </td> 256 <td> </td> 257 <td> </td> 258 <td> </td> 259 <td> </td> 260 </tr> 261 <tr> 262 <td> </td> 263 <td> </td> 264 <td> </td> 265 <td> </td> 266 <td> </td> 267 <td> </td> 268 <td> </td> 269 <td> </td> 270 <td> </td> 271 <td> </td> 272 <td> </td> 273 <td> </td> 274 <td> </td> 275 <td> </td> 276 <td> </td> 277 </tr> 278 <tr> 279 <td> </td> 280 <td> </td> 281 <td> </td> 282 <td> </td> 283 <td> </td> 284 <td> </td> 285 <td> </td> 286 <td> </td> 287 <td> </td> 288 <td> </td> 289 <td> </td> 290 <td> </td> 291 <td> </td> 292 <td> </td> 293 <td> </td> 294 </tr> 295 </table> 296 297 <!-- 控件模块 --> 298 <br> 299 <div> 300 <p> 当前棋手： 301 <img id="qizi" src=""> 302 <input type="button" value="黑棋先行" onclick="status1()"> 303 <input type="button" value="白棋先行" onclick="status2()"> 304 <input type="button" value="再来一局" onclick="window.location.href=window.location"> 305 <input type="button" value="退出游戏" onclick="closeFunction()"> 306 </p> 307 </div> 308 </div> 309 <!-- Container Ends --> 310 </body> 311 <!-- Body Ends --> 312 </html>
二、JavaScript 代码
1 /*状态事件*/ 2 3 function status1(){ 4 document.getElementById('qizi').src="black.png"; 5 } 6 function status2(){ 7 document.getElementById('qizi').src="white.png"; 8 } 9 10 /* 控件事件 */ 11 function closeFunction() { 12 if (confirm("是否退出游戏？")) { 13 window.close(); 14 } else { 15 history.back(); 16 } 17 } 18 19 /* 判断输赢 */ 20 var cnt = (function() { 21 var curr ='black'; 22 return function() { 23 var tmp = curr; 24 if (curr == 'black') { 25 curr = 'white'; 26 } else { 27 curr = 'black'; 28 } 29 return tmp; 30 } 31 })(); 32 33 var tds = document.getElementsByTagName('td'); 34 var iswin = false; // 有没有分出胜负 35 36 // 负责下棋，即改变单元格的背景 37 var xia = function() { 38 // 判断是否已分出胜负 39 var color = cnt(); 40 if (iswin) { 41 alert('游戏结束!'); 42 return; 43 } 44 if (this.style.background.indexOf('.png') >= 0) { 45 alert('不能重复放置棋子！'); 46 return; 47 } 48 this.style.background = 'url(' + color + '.png)'; 49 judge.call(this, color); // 下完棋后判断胜负 50 } 51 52 // 判断胜负的函数 53 var judge = function(color) { 54 // 找当前这颗棋的坐标 55 // td在tr中索引，即是横坐标 56 // tr是table的索引，即是纵坐标 57 var curr = { 58 x: this.cellIndex,y: this.parentElement.rowIndex,color: color}; 59 var line = ['', '', '', '']; //分别放置横，竖，左右下斜上棋 60 // 循环225单元格 61 for (var i = 0, tmp = {}; i < 225; i++) { 62 // 取当前循环到的这颗棋的坐标 63 tmp = { 64 x: tds[i].cellIndex, 65 y: tds[i].parentElement.rowIndex, 66 color: '0' 67 }; 68 69 // 取当前循环到的这颗棋的颜色，分别b,w 0（空）来表示 70 if (tds[i].style.background.indexOf('black') >= 0) { 71 tmp.color = 'b'; 72 } else if (tds[i].style.background.indexOf('white') >= 0) { 73 tmp.color = 'w'; 74 } 75 76 if (curr.y == tmp.y) { 77 // 在一个横线上 78 line[0] += tmp.color; 79 } 80 if (curr.x == tmp.x) { 81 // 在一个竖线上 82 line[1] += tmp.color; 83 } 84 if ((curr.x + curr.y) == (tmp.x + tmp.y)) { 85 //在左斜线上 86 line[2] += tmp.color; 87 } 88 if ((curr.x - tmp.x) == (curr.y - tmp.y)) { 89 //在右斜线上 90 line[3] += tmp.color; 91 } 92 } 93 // 判断4条线上，有没有连续的4个w,或4个b 94 color = color == 'black' ? 'bbbbb' : 'wwwww'; //赢家的颜色 95 96 for (var i = 0; i < 4; i++) { 97 if (line[i].indexOf(color) >= 0) { 98 alert(color + '胜了！(b表示黑方胜，w表示白方胜)'); 99 iswin = true; // 标志已经分出胜负 100 break; 101 } 102 } 103 } 104 window.onload = function() { 105 document.getElementsByTagName('table')[0].onclick = function(ev) { 106 // 1. 下棋 107 // 2. 判断胜负 108 xia.call(ev.srcElement); 109 }; 110 }
三、效果截图
四、配套资料