百行HTML5代碼實現四種雙人對弈遊戲

本文是一個非常具有挑戰性的程式設計，因為 100 行代碼，約莫 10000 個字元左右，將實現圍棋、五子棋、四子棋和翻轉棋四種雙人對弈遊戲。 請注意，這四個對弈遊戲不是初級程式設計者的習作，而是有著棋盤、立體棋子、事件、走棋規則判斷、輸贏判斷的完整對弈遊戲，並且可以離線存儲到 iPad、Android 平板中，試想一下，把這種遊戲下載到平板中，就可以在火車，旅遊景區， 等沒有信號的地方進行對弈，是不是擴展了平板電腦的功能，是不是一種很愜意的事情。 而且，關鍵是，這個程式沒有圖片，不需要去應用商店HTTP://www.aliyun.com/zixun/aggregation/34594.html">付費下載，僅僅是用 HTML5 技術寫的 100 行代碼而已， 絕對是目前最迷您精悍的雙人對弈遊戲源碼。 （編者注：由於網頁代碼的寬度有限制，所以作者的原始程式碼經過了一些換行處理，特此說明。 ）

目標

要做一個完整的雙人對弈遊戲，至少要做如下事情，第一步：繪製棋盤。 不同的棋類遊戲棋盤不同，這一點需要進行動態處理；第二步：繪製棋子。 需要說明的是，圍棋，五子棋等這些棋子都是圓的啊，請不要為了圖片苦惱，在 HTML5 時代，我們用代碼就可以實現立體圓形棋子；第三步：判斷落子事件。 當然是要定位手指的點擊位置，這四種棋中，有的是落在框裡面的，有的卻是落在縱橫交錯的棋盤十字線上，需要動態處理；第四步：判斷落子規則。 下棋都有規則，不要因為代碼少，就將規則打折扣，否則程式不成熟，會變成小朋友的玩具了；第五步：判斷輸贏。 最後，我們要判斷輸贏。 也就是要數子，這個事情必須由程式來完成，因為下棋總得需要一個裁判嘛；第六步：就是平板電腦時代，我們得實現離線應用。 這個太重要了，否則，要是在臺式電腦上，接根網線玩的遊戲，已經遍地都是了，您寫得再牛，有什麼用？ 就是要移動，在沒有信號的地方，才有市場，現在平板，智慧手機這麼多，在沒有網路信號的地方，掏出行動裝置來下棋，才是一件很牛的事情。

繪製棋盤

前面說了圍棋、五子棋、四子棋和翻轉棋的棋盤並不相同，圍棋是縱橫 18 個格，其他三種棋則是 8 個格。 所以繪製棋盤是需要有參數。 這是個小問題，大問題是，選擇什麼方法來繪製棋盤？

HTML5 框架下，有至少 3 種方法：第一種，用 Canvas 畫線；第二種，用 DIV，CSS3 裡面增加了行列屬性；第三種，用 table 標籤。

用哪一種速度最快，代碼少呢？ 答案是：第三種。 多少有點失望啊，HTML5 不是萬能的。 詳細代碼如下：

this.board=function(name,width,height,rowBak,colBak){ /* 畫棋盤 */ nameBak=name; if("turnover"==name){row=8;col=8;} else if("gogame"==name){row=18;col=18;} var aW=Math.floor(width/(col+2)),aH=Math.floor(height/(row+2)); minL=(aW>aH?aH:aW)-4;// 這個減法很重要，否則填空時會把表格撐大 var array=new Array("<div style=\"margin:"+minL+"px;\"> "+ "< table border=1 cellspacing=0 width=\""+(aW*col)+"\" height=\""+(aH*row)+"\">"); for(var i=0;i<row;i++){ array.push("<tr>"); for(var j=0;j<col;j++){array.push("<td align=center>" + evt(i,j,minL,minL,aW*j+minL/2+8,aH*i+minL/2)+"</td>");} if(nameBak!="four"&&nameBak!="turnover")/* 將事件添加到表格中 */ array.push(evt(i,col,minL,minL,aW*col+minL/2+8,aH *i+minL/2)); array.push("</tr>"); } if(nameBak!="four"&&nameBak!="turnover"){ for(var j=0;j<=col;j++){ array.push(evt(row,j,minL,minL,aW* j+minL/2+8,aH*row+minL/2)); } } document.write(array.join("")+"</table></div>"); setClick(row,col,minL,minL);/* 初始化事件 */ start();/* 初始化棋子 */ }

上面代碼中，最重要的是標黑體的第 6 行代碼，這裡面有兩個訣竅，第一個就是 table 的定義，第二個就是使用了 Array 陣列。 為什麼要使用陣列，而不是定義一個字串呢？ 答案是優化，就是 Array 陣列的 push 方法的速度要遠遠快于 String 字串的加 + 運算。 共計 16 行代碼，一個棋盤就畫好了，當然這其中不僅僅是畫線，還有棋子處理，事件定義等方法的調用，後面將陸續談到。