码云地址：https://gitee.com/zixiao520/h5WuZiQi/blob/master/wuziqi_GAME.zip

结对成员:高承志     郭依程
学号:2015035107023
学号:2015035107027
结对成员合照:


程序运行方法:解压缩，双击index.html
程序运行示例及运行结果:

  1 <!DOCTYPE html> 
  2 <html> 
  3 <head> 
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5     <title>五子棋游戏</title> 
  6     <style>
  7         canvas{
  8             background-color: lightskyblue;
  9         }
 10         
 11     </style>
 12     <style type="text/css"> 
 13         body { 
 14             margin: 10px; 
 15         } 
 16     </style> 
 17     <script type="text/javascript"> 
 18         var canvas; 
 19         var context; 
 20         var isWhite = true;
 21         var isWell = false;
 22         var img_b = new Image(); 
 23         img_b.src = "b.png";
 24         var img_w = new Image(); 
 25         img_w.src = "w.png";
 26   
 27         var chessData = new Array(15);//这个为棋盘的二维数组用来保存棋盘信息，初始化0为没有走过的，1为白棋走的，2为黑棋走的 
 28         for (var x = 0; x < 15; x++) { 
 29             chessData[x] = new Array(15); 
 30             for (var y = 0; y < 15; y++) { 
 31                 chessData[x][y] = 0; 
 32             } 
 33         } 
 34   
 35         function drawRect() {//页面加载完毕调用函数，初始化棋盘 
 36             canvas = document.getElementById("canvas"); 
 37             context = canvas.getContext("2d"); 
 38   
 39             for (var i = 0; i <= 640; i += 40) {//绘制棋盘的线 
 40                 context.beginPath(); 
 41                 context.moveTo(0, i); 
 42                 context.lineTo(640, i); 
 43                 context.closePath(); 
 44                 context.stroke(); 
 45   
 46                 context.beginPath(); 
 47                 context.moveTo(i, 0); 
 48                 context.lineTo(i, 640); 
 49                 context.closePath(); 
 50                 context.stroke(); 
 51             } 
 52         } 
 53         function play(e) {//鼠标点击时发生 
 54             var x = parseInt((e.clientX - 20) / 40);
 55             var y = parseInt((e.clientY - 20) / 40); 
 56   
 57             if (chessData[x][y] != 0) {//判断该位置是否被下过了 
 58                 alert("你不能在这个位置下棋"); 
 59                 return; 
 60             } 
 61   
 62             if (isWhite) { 
 63                 isWhite = false; 
 64                 drawChess(1, x, y); 
 65             } 
 66             else { 
 67                 isWhite = true; 
 68                 drawChess(2, x, y); 
 69             } 
 70   
 71         } 
 72         function drawChess(chess, x, y) {//参数为，棋（1为白棋，2为黑棋），数组位置 
 73             if (isWell == true) { 
 74                 alert("已经结束了，如果需要重新玩，请刷新"); 
 75                 return; 
 76             } 
 77             if (x >= 0 && x < 15 && y >= 0 && y < 15) { 
 78                 if (chess == 1) { 
 79                     context.drawImage(img_w, x * 40 + 20, y * 40 + 20);
 80                     chessData[x][y] = 1; 
 81                 } 
 82                 else { 
 83                     context.drawImage(img_b, x * 40 + 20, y * 40 + 20); 
 84                     chessData[x][y] = 2; 
 85                 } 
 86                 judge(x, y, chess); 
 87             } 
 88         } 
 89         function judge(x, y, chess) {//判断该局棋盘是否赢了 
 90             var count1 = 0; 
 91             var count2 = 0; 
 92             var count3 = 0; 
 93             var count4 = 0; 
 94   
 95             //左右判断 
 96             for (var i = x; i >= 0; i--) { 
 97                 if (chessData[i][y] != chess) { 
 98                     break; 
 99                 } 
100                 count1++; 
101             } 
102             for (var i = x + 1; i < 15; i++) { 
103                 if (chessData[i][y] != chess) { 
104                     break; 
105                 } 
106                 count1++; 
107             } 
108             //上下判断 
109             for (var i = y; i >= 0; i--) { 
110                 if (chessData[x][i] != chess) { 
111                     break; 
112                 } 
113                 count2++; 
114             } 
115             for (var i = y + 1; i < 15; i++) { 
116                 if (chessData[x][i] != chess) { 
117                     break; 
118                 } 
119                 count2++; 
120             } 
121             //左上右下判断 
122             for (var i = x, j = y; i >= 0, j >= 0; i--, j--) { 
123                 if (chessData[i][j] != chess) { 
124                     break; 
125                 } 
126                 count3++; 
127             } 
128             for (var i = x + 1, j = y + 1; i < 15, j < 15; i++, j++) { 
129                 if (chessData[i][j] != chess) { 
130                     break; 
131                 } 
132                 count3++; 
133             } 
134             //右上左下判断 
135             for (var i = x, j = y; i >= 0, j < 15; i--, j++) { 
136                 if (chessData[i][j] != chess) { 
137                     break; 
138                 } 
139                 count4++; 
140             } 
141             for (var i = x + 1, j = y - 1; i < 15, j >= 0; i++, j--) { 
142                 if (chessData[i][j] != chess) { 
143                     break; 
144                 } 
145                 count4++; 
146             } 
147   
148             if (count1 >= 5 || count2 >= 5 || count3 >= 5 || count4 >= 5) { 
149                 if (chess == 1) { 
150                     alert("白棋赢了"); 
151                 } 
152                 else { 
153                     alert("黑棋赢了"); 
154                 } 
155                 isWell = true;//设置该局棋盘已经赢了，不可以再走了 
156             } 
157         } 
158     </script> 
159 </head> 
160 <body onload="drawRect()"> 
161     <div> 
162         <canvas width="640" id="canvas" onmousedown="play(event)" height="640">
163         </canvas> 
164     </div> 
165   
166 </body> 
167 </html>
View Code

 


其他附加内容:无