废话少人，直接贴代码了，在线浏览地址
http://i.irenren.net/wuziqi.html
转载请注明原文地址
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>双人五子棋游戏</title> 6 <style> 7 *{ 8 padding:0; 9 margin:0 10 } 11 body { 12 background: #dddddd; 13 } 14 15 16 17 18 </style> 19 </head> 20 <body> 21 22 <div style="background:url(bg.jpg); 650px;"> 23 <div style="line-height:46px;font-size:26px;margin-left:25px;"> 24 <span>双人五子棋游戏</span> 25 <button style="120px;margin-left:10px;" onclick="initGame()">重新开始</button> 26 <button style="120px;" onclick="undo()">悔棋</button> 27 </div> 28 29 <canvas id="canvas" style="cursor: pointer;" onclick="play(event)" onmousemove="mouse(event)" width="640" height="640"></canvas> 30 </div> 31 32 33 34 <script> 35 var canvas = document.getElementById('canvas'), 36 context = canvas.getContext('2d'),gridWidth,img_b,img_a,isWhite, isWell, gameDatas, gameQueue, 37 limit = 15, 38 length = 600, 39 margin = 16; 40 41 init(); 42 43 44 function init(){ 45 img_a = new Image(); 46 img_a.src = 'white.png'; 47 img_b = new Image(); 48 img_b.src = "black.png"; 49 initGame(); 50 } 51 52 function initGame(){ 53 isWhite = false; 54 isWell = false; 55 gameDatas = []; 56 gameQueue = []; 57 gridWidth = parseInt(length / limit) ; 58 drawRect(); 59 for(var i=0; i< limit; i++){ 60 gameDatas[i] = []; 61 for(var j=0; j< limit; j++){ 62 gameDatas[i][j] = 0; 63 } 64 } 65 } 66 67 function getOffset(event){ 68 var evt =event||window.event; 69 var srcObj = evt.target || evt.srcElement; 70 if (evt.offsetX){ 71 return {x:evt.offsetX,y: evt.offsetY}; 72 }else{ 73 var rect = srcObj.getBoundingClientRect(); 74 var clientx = evt.clientX; 75 var clienty = evt.clientY; 76 return {x: clientx - rect.left, y: clienty - rect.top}; 77 } 78 } 79 80 function mouse(e){ 81 var xy = getOffset(e); 82 var x = getLocation(xy.x - margin); 83 var y = getLocation(xy.y - margin); 84 if(x === false || y === false){ 85 canvas.style.cursor = "auto"; 86 }else{ 87 canvas.style.cursor = 'pointer'; 88 } 89 } 90 91 function play(e) { 92 93 if(isWell){ 94 alert('游戏已结束'); 95 return; 96 } 97 98 if ( e && e.preventDefault ) 99 e.preventDefault(); 100 else 101 window.event.returnValue = false; 102 103 var xy = getOffset(e); 104 105 var x = getLocation(xy.x - margin); 106 var y = getLocation(xy.y - margin); 107 if( x === false || y === false){ 108 return; 109 } 110 if (isWhite) { 111 isWhite = false; 112 drawChess(1, x, y); 113 } 114 else { 115 isWhite = true; 116 drawChess(2, x, y); 117 } 118 119 } 120 121 function getLocation(x){ 122 var num,index; 123 x = num = (x-margin)/gridWidth + ""; 124 index = x.indexOf("."); 125 if(index === -1){ 126 return false; 127 } 128 x = x.substr(index+1, 1); 129 if(x < 4){ 130 return false; 131 } 132 133 return parseInt(num); 134 } 135 136 //获得五子棋坐标值 137 function getCoor(x){ 138 var width = 22; 139 return x * gridWidth + margin + width; 140 } 141 142 143 144 function drawChess(chess, x, y) { 145 if(gameDatas[x][y] != 0){ 146 return; 147 }else if (x >= 0 && x < limit && y >= 0 && y < limit){ 148 gameQueue.push([x, y, chess]); 149 gameDatas[x][y] = chess; 150 refresh(); 151 } 152 judge(x, y , chess); 153 } 154 155 function refresh(){ 156 drawRect(); 157 for(var i=0; i< limit; i++){ 158 for(var j=0; j<limit; j++){ 159 if(gameDatas[i][j] == 1){ 160 context.drawImage(img_a, getCoor(i), getCoor(j)); 161 }else if(gameDatas[i][j] == 2){ 162 context.drawImage(img_b, getCoor(i), getCoor(j)); 163 } 164 } 165 } 166 167 } 168 169 function judge(x, y, chess) {//判断该局棋盘是否赢了 170 var count1 = 0; 171 var count2 = 0; 172 var count3 = 0; 173 var count4 = 0; 174 175 //左右判断 176 for (var i = x; i >= 0; i--) { 177 if (gameDatas[i][y] != chess) { 178 break; 179 } 180 count1++; 181 } 182 for (var i = x + 1; i < 15; i++) { 183 if (gameDatas[i][y] != chess) { 184 break; 185 } 186 count1++; 187 } 188 //上下判断 189 for (var i = y; i >= 0; i--) { 190 if (gameDatas[x][i] != chess) { 191 break; 192 } 193 count2++; 194 } 195 for (var i = y + 1; i < 15; i++) { 196 if (gameDatas[x][i] != chess) { 197 break; 198 } 199 count2++; 200 } 201 //左上右下判断 202 for (var i = x, j = y; i >= 0, j >= 0; i--, j--) { 203 if (gameDatas[i][j] != chess) { 204 break; 205 } 206 count3++; 207 } 208 for (var i = x + 1, j = y + 1; i < 15, j < 15; i++, j++) { 209 if (gameDatas[i][j] != chess) { 210 break; 211 } 212 count3++; 213 } 214 //右上左下判断 215 for (var i = x, j = y; i >= 0, j < 15; i--, j++) { 216 if (gameDatas[i][j] != chess) { 217 break; 218 } 219 count4++; 220 } 221 for (var i = x + 1, j = y - 1; i < 15, j >= 0; i++, j--) { 222 if (gameDatas[i][j] != chess) { 223 break; 224 } 225 count4++; 226 } 227 228 if (count1 >= 5 || count2 >= 5 || count3 >= 5 || count4 >= 5) { 229 if (chess == 1) { 230 alert("白棋赢了"); 231 } 232 else { 233 alert("黑棋赢了"); 234 } 235 isWell = true;//设置该局棋盘已经赢了，不可以再走了 236 } 237 } 238 239 function undo(){ 240 if(gameQueue.length > 0){ 241 isWhite = !isWhite; 242 var obj = gameQueue.pop(); 243 gameDatas[obj[0]][obj[1]] = 0; 244 refresh(); 245 } 246 } 247 248 function drawRect() { 249 var width = limit * gridWidth + margin; 250 var q = 0; 251 context.clearRect(0,0, width, width); 252 for (var i = margin; i <=width; i += gridWidth) { 253 if(q > limit){ 254 break; 255 } 256 257 q++; 258 context.strokeStyle = '#eee'; 259 context.beginPath(); 260 context.moveTo(margin, i); 261 context.lineTo(width, i); 262 context.closePath(); 263 context.stroke(); 264 265 context.beginPath(); 266 context.moveTo(i, margin); 267 context.lineTo(i, width); 268 context.closePath(); 269 context.stroke(); 270 } 271 272 273 274 } 275 276 277 278 </script> 279 </body> 280 </html>