| 簡介： 本文是一個非常具有挑戰性的編程，因爲 100 行代碼，約莫 10000 個字符左右，將實現圍棋、五子棋、四子棋和翻轉棋四種雙人對弈遊戲。請注意，這四個對弈遊戲不是初級編程者的習作，而是有着棋盤、立體棋子、事件、走棋規則判斷、輸贏判斷的完整對弈遊戲，並且可以離線存儲到 iPad、Android 平板中，試想一下，把這種遊戲下載到平板中，就可以在火車，旅遊景區，等沒有信號的地方進行對弈，是不是擴展了平板電腦的功能，是不是一種很愜意的事情。而且，關鍵是，這個程序沒有圖片，不需要去應用商店付費下載，僅僅是用 HTML5 技術寫的 100 行代碼而已，絕對是目前最迷您精悍的雙人對弈遊戲源碼。（編者注：由於網頁代碼的寬度有限制，所以作者的源代碼經過了一些換行處理，特此說明。） |
1. 目標
要做一個完整的雙人對弈遊戲，至少要做如下事情，第一步：繪製棋盤。不同的棋類遊戲棋盤不同，這一點需要進行動態處理；第二步：繪製棋子。需要說明的是，圍棋，五子棋等這些棋子都是圓的啊，請不要爲了圖片苦惱，在 HTML5 時代，我們用代碼就可以實現立體圓形棋子；第三步：判斷落子事件。當然是要定位手指的點擊位置，這四種棋中，有的是落在框裏面的，有的卻是落在縱橫交錯的棋盤十字線上，需要動態處理；第四步：判斷落子規則。下棋都有規則，不要因爲代碼少，就將規則打折扣，否則程序不成熟，會變成小朋友的玩具了；第五步：判斷輸贏。最後，我們要判斷輸贏。也就是要數子，這個事情必須由程序來完成，因爲下棋總得需要一個裁判嘛；第六步：就是平板電腦時代，我們得實現離線應用。這個太重要了，否則，要是在臺式電腦上，接根網線玩的遊戲，已經遍地都是了，您寫得再牛，有什麼用？就是要移動，在沒有信號的地方，纔有市場，現在平板，智能手機這麼多，在沒有網絡信號的地方，掏出移動設備來下棋，纔是一件很牛的事情。
2. 繪製棋盤
前面說了圍棋、五子棋、四子棋和翻轉棋的棋盤並不相同，圍棋是縱橫 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 行代碼，一個棋盤就畫好了，當然這其中不僅僅是畫線，還有棋子處理，事件定義等方法的調用，後面將陸續談到。
3. 繪製棋子
繪製完棋盤，我們來繪製棋子。我們挑選的這四種棋，雖然棋盤不同，但是棋子都是相同的，都是黑白棋子。這在以前，做在線對弈，除了 Flash 能實現美觀效果外，其他的必須先請美工做幾副小圖片，HTML5 時代，美工的人力和溝通成本就節省了。
我們至少有兩種方法繪製棋子，第一種是：canvas 類，第二種就是 css 的圓角屬性。用哪種速度又快代碼又少呢？答案是第二種，圓角。代碼如下：
| function man(width,height,id,colorBak){ /* 畫棋子 */ var color=colorBak==null?(order++%2==0?"000":"CCC"):colorBak; var r="border-radius:"+width/2+"px;"; var obj=id==null?event.srcElement:_$(id); obj.innerHTML="<div id=\"man_"+color+"_"+order+"\" style=\"display:block;-webkit-" +r+"-moz-"+r+""+r+"-moz-box-shadow:inset 0 -10px 40px rgba(0,0,0,1);"+ "box-shadow:inset 0 -10px 40px rgba(0,0,0,1);"+ "background:-webkit-gradient(radial, 50 40, 30, center center, 80, from(#"+color+"), to(rgba(255,255,255,1)));"+ "width:"+width+"px;height:"+height+"px;\"></div>"; } |
上面代碼中，我們看到，我們將每一個棋子定義了一個 DIV，使用了 CSS3 的 shadow，gradient 屬性，並且可以根據棋盤的大小自動計算棋子的大小，另外，如果用戶不喜歡黑白顏色，甚至可以定義成紅黃顏色，女生和小朋友估計會喜歡。這 5 行代碼是畫一個棋子的方法，做一個簡單的循環，就可以畫出多個棋子，方法如下。
| function moreMan(array){for(var i=0;i<array.length;i++) man(minL,minL,nameBak+"_"+array);}/* 繪製多個棋子 */ |
4. 處理事件
繪製完棋盤和棋子，我們來分析一下用戶的動作。用戶的動作無非就是兩種，一種是點擊棋盤 table，另外一種就是點擊棋子 DIV。難點在點擊 table 這裏，我們要獲知用戶點擊 table 的位置。
傳統思路可能是這樣，使用 event 方法，獲得 x,y 的座標，然後與 table 的左上角做減法，然後再跟單元格 cell 做除法。聽起來都麻煩。
如果您仔細閱讀了前面的代碼，就應該發現，其實在畫棋盤是，我們向 array 數組中 push 了一個 evt 方法，很明顯，這個 evt 方法要返回一個字符串變量的，那麼他的內容是什麼呢？答案揭曉：
| function evt(i,j,width,height,left,top){ /* 單一單元格事件 */ return "<div id=\""+nameBak+"_"+i+"_"+j+"\" style=\"position:"+ (nameBak=="four"||nameBak=="turnover"?"block":"absolute")+ ";border:0px solid #000;width:"+ width+"px;height:"+height+"px;top:"+top+"px;left:"+left+"px;\"></div>"; } |
原理是一個 DIV。對了，這個添加事件的方法非常特殊，實際上是在每個棋盤的交叉的地方畫了一個 DIV，然後給 DIV 添加事件。
| function setClick(row,col,width,height){ for(var i=0;i<=row;i++){ for(var j=0;j<=col;j++){ var els=_$(nameBak+"_"+i+"_"+j); if(els!=null)els. main(width,height);}; } } } |
需要說明的是，DIV 一定要先定義，即 document.write 輸出出來，然後才能執行 onclick 的定義，否則會返回 DIV 未定義的錯誤。寥寥 10 行代碼，把事件問題搞定了。
5. 落子規則
前面說了，用戶點擊事件有兩種，點擊棋盤 table 事件我們採用額外增加 DIV 的方法巧妙解決了，第二種點擊棋子的方法又該如何呢？
先要說明的是，點擊棋子其實是一種錯誤的事件，點擊棋盤可以落子，點擊棋子是什麼意思？黑白棋點擊棋子是無意義的，我們必須要進行判斷，不能在有子的地方落子，這是規則之一。所以必須要定義一個方法，判斷是不是點擊的地方是不是有棋子。代碼如下：
| function isMan(row,col){var obj=_$(nameBak+"_"+row+"_"+col,1);if(obj==null||obj.indexOf("man_")==-1)return null;else if(obj.indexOf("000")!=-1) return 0;else if(obj.indexOf("CCC")!=-1)return 1;} |
想不到吧，其實只要一行代碼就可以就可以做是否有子的判斷，怎麼判斷的，訣竅就在於判斷 DIV 的顏色，棋子要麼黑，返回 0，要麼白，返回 1，但是空白地方是沒有顏色的，返回 null。這裏要特別注意返回值，後面判斷輸贏的時候還要用，所以不能簡單通過 true 或者 false 的的返回值來判斷是否有子，而是要判斷出有什麼顏色的子。
對於五子棋和圍棋，這一條規則夠用了，但是對於翻轉棋和四子棋，還有第二條規則：不能在四周空白的地方落子，就是說必須是相連的。也就是說，不僅僅要判斷點擊的地方是不是有棋子，還要判斷其四周是不是有棋子，這個，不是可以有，而是，必須有。需要做一個小循環啊，代碼如下：
| function rule(){/* 走棋規則 */ var id=event.srcElement.id; if(id.indexOf("man_")==0){alert("不能在有子的地方落子");return false;}else{ var p=id.indexOf("_"),p1=id.lastIndexOf("_"); var row=id.substr(p+1,p1-p-1)*1,col=id.substr(p1+1)*1; if("gobang"==nameBak)return gobang(row,col); else if("four"==nameBak){ if(isMan(row,col+1)==null&&isMan(row,col-1)==null&& isMan(row+1,col)==null&& isMan(row-1,col)==null){ alert("四子棋不能在四周空白的地方落子！"); return false; } return gobang(row,col,3); }else if("turnover"==nameBak){ if(isMan(row,col+1)==null&&isMan(row,col-1)==null&& isMan(row+1,col)==null&&isMan(row-1,col)==null&& isMan(row-1,col-1)==null&& isMan(row+1,col+1)==null){ alert("翻轉棋不能在四周空白的地方落子！"); return false; } turnover(); }else if("gogame"==nameBak){ } } return true; } |
循環中，反覆調用 isMan 方法判斷是否有棋子，所以如果 isMan 寫得不夠簡練，快速，不知道要耗費多少時間啊。數一數，總共 19 行代碼就處理了落子規則。
到這裏，我們繪製了棋盤，棋子，獲得了點擊時間，判斷了落子規則，才用了 40 行左右的代碼，其實程序基本上可用了，但是我們不能滿足啊，還得讓他更加智能一些，我們還需要一個裁判斷輸贏。
6. 判斷輸贏
要判斷輸贏，我們必須要知道下棋的規則：
五子棋是各個方向的五子相連算贏，四子棋是各個方向四個子相連算贏，翻轉棋數棋子的個數，圍棋則要麻煩些，不僅僅數棋子個數，還要數圍住的區域。
邏輯上好像很複雜啊，似乎也是計算最多的地方，有點人工智能的意思。沒錯，如果前面的基礎打得不好，這裏的確要耗費很多代碼，但是因爲我們前面定義了 DIV 用顏色判斷是否存在棋子的 iaMan 方法，這裏再使用一個小技巧，就可以輕鬆搞定這個輸贏判斷。先看看五子棋和四子棋的輸贏判斷代碼，然後對照代碼來分析。
| function gobang(row,col,num){ num=num==null?4:num; var rs=[[],[],[],[]],b=[],w=[];/* 這裏採用四維數組來存儲棋子位置 */ for(var i=0,j=0;i<num*2+1;i++,j++){ rs[0].push(isMan(row-num+i,col)); rs[1].push(isMan(row,col-num+j)); rs[2].push(isMan(row-num+i,col-num+j)); rs[3].push(isMan(row-num+i,col-num+j)); if(i<num){b.push(0);w.push(1);} } if(rs.join("#").indexOf(b.join(","))!=-1){alert("黑棋勝");return false; }else if(rs.join("#").indexOf(w.join(","))!=-1){alert("白棋勝");return false;} return true; } |
共計 9 行代碼就搞定，看懂沒？首先定義了一個 Javascript 多維數組 rs=[[],[],[],[]]，這種定義多維數組的方法，挑出來重點說明一下，因爲搜索引擎上都是搜不到的，我講課時差不多遇到的學生也都不清楚，他們大多采用 new Array，然後加循環的蝸牛方法。
第二步：從落子的地方開始循環，注意，不是循環整個棋盤，爲的就是節省時間啊。循環設計縱橫交叉四個方向，有棋子的地方，就向這個四維數組 push 棋子的顏色。
第三步：把數組 join 起來就 ok 啦，如果有 4 個或 5 個 1 相連，自然就是白棋勝，否則就是黑棋勝。
寫道這裏，就有點意思啦，注意我們處理的數據的方法，我稱之爲“塊數據”的處理方法，就是充分利用 array 數組，保存一塊一塊的數據，無論寫入，讀取，還是統計分析，都是針對這一塊數據進行，這樣既可以提高內聚度，便於提煉出可以重用的方法，就可以大大的加快執行速度。
處理相連都不在話下，數子就更簡單了，使用塊數據處理方法，3 行搞定。
| function turnover(){ if(order<64)return; var num=0;var total=row*col;for(var i=0;i<row;i++){ for(var j=0;j<col;j++){num+=isMan(i+"_"+j);} } if(num<total/2)alert("黑棋勝"+(total-num*2)+"子"); else if(num>row*col/2)alert("白棋勝"+(num*2-total)+"子"); else alert("平局"); } |
7. 棋子初始化
環環相扣地寫到這裏，還有最後一個關於棋子的問題需要處理。那就是，下五子棋是從空白棋盤開始，其他三種棋卻一開始都是有子的。其實給一個空白棋盤也行，但是其他三種棋因爲一般的前幾步走法都是固定的，我們爲了提高智能化程度，不得不在浪費四行代碼，畢竟，我們的目標是一個市場化的產品，而不是一個初學者不考慮用戶體驗的程序。
| function start(){ if("turnover"==nameBak){moreMan([3+"_"+3,4+"_"+3,4+"_"+4,3+"_"+4]); }else if("four"==nameBak){man(minL,minL,nameBak+"_"+row/2+"_"+0); }else if("gogame"==nameBak){moreMan([3+"_"+3,15+"_"+3,15+"_"+15,3+"_"+15]); } } |
其實就是調用了一下 moreMan 方法，注意也是塊數據引用，傳輸了一個數組，用下劃線分割橫向和縱向座標。
8. 做成離線應用
本文開頭就說過，臺式電腦的雙人或多人對弈程序早已多如牛毛爛大街了，只有移動應用纔能有市場，我們的目標就是奔着這個來的，所以最後必須做成離線應用。
如何實現 HTML5 的離線應用，搜索引擎很快能找到結果，其實只要三個關鍵步驟。
第一步；在 Web 服務器的配置文件中聲明一下。Tomcat 和 Apache 的聲明方式不相同，需要注意；
第二步：定義 manifest 文件，文件格式需要注意；
第三步：在 HTML 的文件中調用一下 manifest 文件。
根據這三個步驟，讀者可以自行搜索細節，這裏就不贅述了，我只講搜索引擎搜不到的。
另外需要說明的是，iPad 和 Android 平板上瀏覽器實現全屏的方法也不一樣，針對 iPad 用戶，我們還必須定義一行能夠實現全屏的代碼。
9. 效果圖、在線演示、開放源代碼
本文的在線演示網址是：http://www.chofo.com/chess.htm，效果圖如下圖所示：
圖 1. 效果圖
圖中加了一個選擇棋類型和設置背景功能，如要獲得全部源代碼，只要使用瀏覽器的查看源代碼功能即可，限於篇幅，這裏就不貼了。
總結
作爲一個程序員，最高的境界不是寫得代碼越多越好，而是用最少的代碼實現最多的計算，解決最多的問題。回想當年，蓋茨在編寫 Basic 時，爲了節省幾個字符需要絞盡腦汁通宵達旦，以至於遺留了千年蟲世紀難題，反觀今日，在雲計算時代，隨着硬盤和內存的容量越來越大，CPU 的運算越來越快，很多大型項目的程序員似乎失去了精簡代碼的習慣。但是移動計算的硬件，目前還沒有那麼高的配置，本文通過 HTML5 對弈遊戲，使用“塊數據”計算方法，實現了用最少代碼實現最多計算的目標，特別適用移動計算，與大家共勉。
參考資料
學習
- 在線演示地址：http://www.chofo.com/chess.htm。
- “實現 HTML5 和 CSS3 的跨瀏覽器功能”（developerWorks，2012 年 2 月）：HTML5 和 CSS3 有許多傑出的新特性，比如能夠離線儲存數據和創建無圖像圓角效果。然而並不是所有這些新特性都能夠跨瀏覽器使用。通過本文學習一些能夠在所有主要瀏覽器的最新版本上使用的 HTML5 和 CSS3 技巧，這些瀏覽器包括 Safari、Internet Explorer、Firefox 和 Chrome。
- “拖拽：從 Dojo 到 HTML5”（developerWorks，2011 年 2 月）：拖拽是 Web 2.0 應用中最流行的技術之一。本文將介紹如何在網絡應用程序中使用 dojo 和 HTML5 這兩種技術的拖拽功能。並將通過示例詳細介紹 HTML5 的拖拽功能。
- “HTML5 基礎知識，第 1 部分”（developerWorks，2012 年 6 月）：HTML5 代表了 WebSphere Application Server 業務和雲業務在實現方式上的里程碑式改變。本文是 4 部分系列文章的第 1 部分，該系列旨在介紹 HTML5 的演變，文本首先介紹 HTML5 中新增加的標記和頁面結構，提供有關 WebSphere Application Server 頁面設計的高級信息、表單的創建、API 的使用和價值、以及 Canvas 提供的種種創新可能。
- “基於 HTML5 的 Dojo Widget 開發”（developerWorks，2011 年 7 月）：本文主要介紹基於 HTML5 來擴展 Dojo Widget，它不僅具有強大的 JavaScript 邏輯控制，而且具有豐富的頁面展現和良好的運行性能。
- developerWorks Web development 專區：通過專門關於 Web 技術的文章和教程，擴展您在網站開發方面的技能。
- developerWorks Ajax 資源中心：這是有關 Ajax 編程模型信息的一站式中心，包括很多文檔、教程、論壇、blog、wiki 和新聞。任何 Ajax 的新信息都能在這裏找到。
- developerWorks Web 2.0 資源中心，這是有關 Web 2.0 相關信息的一站式中心，包括大量 Web 2.0 技術文章、教程、下載和相關技術資源。您還可以通過 Web 2.0 新手入門欄目，迅速瞭解 Web 2.0 的相關概念。
- 查看 HTML5 專題，瞭解更多和 HTML5 相關的知識和動向。
| 以上內容轉自： IBM developerWorks 作者簡介： 於丙超，北京周服科技有限公司（http://www.chofo.com ）CEO，系統架構師，新浪文學簽約作者。曾出版過多部計算機書籍，在各種雜誌發表文章近百篇。 |