結對-結對編項目作業名稱-最終程序
阿新 • • 發佈：2017-10-26
ret gin -c 點擊 hide onload 需要 結束 運行 
碼雲地址：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 <View Codetitle>五子棋遊戲</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 27var 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>
其他附加內容:無
結對-結對編項目作業名稱-最終程序