看到一些曾經只會灌水的網友，在學習了前端之后，已經能寫出下載量幾千幾萬的腳本、樣式，幫助大眾，成為受歡迎的人，感覺滿羡慕的。我也想學會前端技術，變得受歡迎呀。於是心血來潮，開始學習前端知識，並寫下了這個小練習。
基本思路是這樣的：
- 使用Canvas繪制棋盤、棋子。
- 用二維數組保存棋盤狀態。
- 設置一個flag，用以標識落子順序。
- 點擊時，在數組中檢測當前點擊位置是否存在棋子，若存在，則不落子；如游戲已結束，亦不落子。
- 落子時，更新數組，並將當前落子所在的行、列、左上-右下列、左下-右上列四個方向的棋盤狀態寫入到一維數組中，用以判斷新落子是否形成了五子連珠。
- 若形成了五子連珠，提示勝利，並結束游戲；反之，則交換順序，繼續進行游戲。
效果圖：
代碼如下：
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <meta charset="utf-8"> 4 <head><title>五子棋</title></head> 5 <body> 6 <canvas id="myCanvas" width="560" height="560" style="border:3px solid black;"> 7 您的瀏覽器不支持 HTML5 canvas 標簽。</canvas> <br/> 8 <button id="reset" onclick="controller.init(ctx)">重置</button> 9 </body> 10 <script> 11 var controller = { 12 round:true, 13 color:"black", 14 whiteTable:new Array(), 15 blackTable:new Array(), 16 row:0, 17 col:0, 18 over:false, 19 trans:function() { 20 this.round = !this.round; 21 if (!this.round) { 22 this.blackTable[this.row][this.col] = 1; 23 this.ifWin(this.blackTable) 24 this.color = "white"; 25 } 26 else { 27 this.whiteTable[this.row][this.col] = 1; 28 this.ifWin(this.whiteTable) 29 this.color = "black"; 30 } 31 }, 32 ifWin:function(table) { 33 var arr1 = new Array(); 34 var arr2 = new Array(); 35 var arr3 = new Array(); 36 var arr4 = new Array(); 37 var n = 0; 38 for(x = 0; x<= lineNums; x++) { 39 for(y = 0; y <= lineNums; y++) 40 { 41 var x1 = this.row - n; 42 var x2 = this.row + n; 43 var y1 = this.col - n; 44 var y2 = this.col + n; 45 if(y == this.col) { 46 arr1[x] = table[x][y]; 47 } 48 if(x == this.row) { 49 arr2[y] = table[x][y]; 50 } 51 } 52 if(this.inBounds(x1) && this.inBounds(y2)) { 53 arr3[x1] = table[x1][y2]; 54 } 55 if(this.inBounds(x1) && this.inBounds(y1)) { 56 arr4[x1] = table[x1][y1]; 57 } 58 if(this.inBounds(x2) && this.inBounds(y1)) { 59 arr3[x2] = table[x2][y1]; 60 } 61 if(this.inBounds(x2) && this.inBounds(y2)) { 62 arr4[x2] = table[x2][y2]; 63 } 64 n = n + 1; 65 } 66 this.getSum(arr1, this.row); 67 this.getSum(arr2, this.col); 68 this.getSum(arr3, this.row); 69 this.getSum(arr4, this.row); 70 }, 71 inBounds:function(i) { 72 if(i>=0 && i<=15){ 73 return true; 74 } 75 else{ 76 return false; 77 } 78 }, 79 getSum:function(array, pos) { 80 num = 5; 81 posr = pos + 1; 82 while(num > 0){ 83 if(array[pos]>0 && this.inBounds(pos)) { 84 num = num - 1; 85 pos = pos - 1; 86 } 87 else{ 88 break; 89 } 90 } 91 while(num > 0){ 92 if(array[posr]>0 && this.inBounds(pos)) { 93 num = num - 1; 94 posr = posr + 1; 95 } 96 else { 97 break; 98 } 99 } 100 if(num == 0) { 101 this.over = true; 102 this.gameOver(); 103 } 104 }, 105 exist:function(x, y) { 106 this.row = x / ratio; 107 this.col = y / ratio; 108 var nums = this.whiteTable[this.row][this.col] + this.blackTable[this.row][this.col]; 109 if( nums > 0 { 110 return true; 111 } 112 else{ 113 return false; 114 } 115 }, 116 gameOver:function() { 117 ctx.font="30px Arial"; 118 ctx.fillStyle = "#FF0000"; 119 if(this.round) { 120 ctx.fillText("白棋勝利",240,240); 121 } 122 else { 123 ctx.fillText("黑棋勝利",240,240); 124 } 125 }, 126 init:function() { 127 this.round = true; 128 this.color = "black"; 129 this.over = false; 130 this.drawBoard(); 131 for(i = 0; i<= lineNums; i++) { 132 this.whiteTable[i]=new Array(); 133 this.blackTable[i]=new Array(); 134 for(n = 0; n <= lineNums; n++) { 135 this.whiteTable[i][n]=0; 136 this.blackTable[i][n]=0; 137 } 138 } 139 }, 140 drawBoard:function() { 141 ctx.beginPath(); 142 ctx.clearRect(0,0,width,width); 143 ctx.fillStyle = "#FFBB00"; 144 ctx.fillRect(0,0,width,width); 145 for(var i = 1; i < (lineNums - 1); i++) { 146 ctx.moveTo(i * ratio, 0); 147 ctx.lineTo(i * ratio, width); 148 ctx.stroke(); 149 ctx.moveTo(0, i * ratio); 150 ctx.lineTo(width, i * ratio); 151 ctx.stroke(); 152 } 153 }, 154 drawPiece:function(posX, posY) { 155 ctx.beginPath(); 156 ctx.arc(posX, posY, ratio/2, 0, 2*Math.PI); 157 ctx.fillStyle = this.color; 158 ctx.fill(); 159 ctx.stroke(); 160 } 161 }; 162 //獲取點擊位置 163 function getMousePos(canvas, evt) { 164 var rect = canvas.getBoundingClientRect(); 165 return { 166 x: evt.clientX - rect.left * (canvas.width / rect.width), 167 y: evt.clientY - rect.top * (canvas.height / rect.height) 168 } 169 } 170 171 function getNode(pos) { 172 return ((pos / ratio).toFixed()) * ratio; 173 } 174 175 var canvas = document.getElementById("myCanvas"); 176 var ctx = canvas.getContext("2d"); 177 var lineNums = 15; 178 var ratio = 40; 179 var width = (lineNums - 1) * ratio; 180 181 controller.init(); 182 183 canvas.addEventListener("click", function (evt) { 184 var mousePos = getMousePos(canvas, evt); 185 mousePos.x = getNode(mousePos.x); 186 mousePos.y = getNode(mousePos.y); 187 var exist = controller.exist(mousePos.x, mousePos.y); 188 if (!exist && !controller.over) { 189 controller.drawPiece(mousePos.x, mousePos.y); 190 controller.trans(); 191 } 192 }, false); 193 </script> 194 </html>
這算是自己學習Javascript的一個開端，未來的話，可能也要以這個例子為基礎，利用學到的知識，進一步增加其它功能，優化代碼。