通訊機制與流程圖
 
有了上一單元的網頁即時通為基礎,要建立兩人對玩的網頁遊戲就只需要設計遊戲介面了!本單元以一個最簡單的棋類遊戲為例就是井字圈叉連線,玩家一樣必須先設好遊戲的對象,接著下棋的動作除了在自己的棋盤顯示,也寄出訊息給對方;收到對手下棋的訊息之後就用程式來繪製下棋的位置。
當然下棋有一定的規則,必須控制兩人輪流,一人下一次,也必須能判斷勝負以結束棋賽,及重設棋盤等等,比前一單元當然複雜一點,不過許多程式碼可以參考之前用UDP製作的井字連線遊戲。

頁面設計

1.有關AJAX元件的設定與網頁即時通相同
2.UpdatePanel內部先用一個Label物件顯示下棋輪到誰或誰贏了等等訊息之用。
3.同樣在UpdatePanel內部就是必須時時更新的棋盤,在此以一個3X3的表格內藏九個Button按鍵設計。請注意將按鍵的長框設為一樣,文字部分刪除,最重要的是名稱ID改為自左上到右下的C0~C8,這是讓程式碼簡短也方便判斷連線與否。
4.UpdatePanel外面的物件也與網頁即時通相似,不過沒有發言框也沒有看板,此地請將第一個TextBox命名為Local代表自己的身分,後一個TextBox命名為Remote(遠端)就是對手了!按鍵部分是用於清除棋盤之用。
請注意:下棋的方式是直接點擊表格內的按鍵,點下 後程式就會自動改變圖案,也會告知對手,最下方的按鍵是清除棋盤重玩之用,不要隨便亂按!

下棋的程式(原始階段)

下棋就是點擊九個表格中的按鍵,所以九個按鍵(C0~C8)必須共用一個事件副程式,上面的用法我們大一的打地鼠等等程式就教過應該不陌生。內部首先宣告一個Button物件B代表被按得按個按鍵(sender),接著看這個按鍵上有沒有字?有字當然就下過棋子不能重複下;如果沒有就可以畫個圈(寫個大O),同時送個訊息給遠端玩家(Remote.Text),訊息內容是被點的按鍵ID譬如C3或C5這樣的東西,表示我點了那個位置。
本範例一個簡化的設計是自己下的都是"O",遠端的人下的都是"X",所以你不能選用"O"或"X",而且兩邊的棋盤看起來圈叉是相反的!不過其實沒關係,誰先連線結果還是很清楚,這樣程式反而會更簡單,等等就知道了!
你可以試試看此時執行程式,此時應該可以點任一空格就出現"O"了!

清除棋盤的程式
這部分程式比較獨立且單純先將它完成如下:

1.按鍵之後先會呼叫一個ClearAll副程式,功能是將所有按鍵的"O"或"X"都擦掉,因為這個清除動作有可能來自遠端重玩的要求,所以不一定是自己執行的,所以要分開寫。
2.清除後為了與對方同步,也必須發一個訊息"Go"對手,讓他知道我要重玩了!對方棋盤也因此會被清乾淨。
3.接著兩行就是重要的輪替控制機制了!Session("T)是使用者個人的變數,如果是True表示輪到自己下,False表示要等對方下棋,但是頁面上看不到這個變數,所以就用Label1顯示該誰下棋,這是一定與Session("T")的值呼應的。輪到對手當然頁面的Label1就要提醒自己『請稍等』!在此範例的控制原則是你主動清棋盤就得讓對方先下

檢查連線成功與否的程式
這部分程式也是比較獨立的先做好再說!

應該光看註解就夠清楚了,之前也做過類似的程式,這是一個必須有回傳值的Function副程式,先傳入一個要檢查的值W,當然這個值不是"O"就是"X",檢查後發現任何連線狀況就回傳True,否則回傳False。

檢查對手下棋資訊的程式
自己下棋之後當然就要等對方下哪裡的資訊,這就是Timer定時更新的工作了,如同前一單元,我們可以將程式寫在Page_Load事件之中,程式碼如下:

1.首先檢查有沒有訊息?如果沒有就對手還沒下棋,應該離開副程式。
2.如有訊息就先抓到字串A中以方便處理
3.訊息可能是表示重玩或開始玩的"Go"或者任一個棋格位置C0~C8,所以分開案例處理。
4.如果是"Go"就呼叫ClearAll清棋盤
5.其他狀況就看對方下哪裡就在那一格畫個"X"
6.畫完"X"當然就是要檢查對手是不是完成"XXX"連線了?如果是顯示自己輸了,否則就是輪到你繼續下!

下棋的程式(完成版)
前面下棋的程式沒有檢查輸贏,所以自己贏了也不會有反應;而且沒有控制誰下的機制,你其實可以搶先下好幾次,那也就不必玩了!所以必須加入控制能否下棋以及判斷輸贏的程式碼如下:

1.上方紅線就是看Session("T")的值決定你能不能下棋,必須是True才行!
2.下方紅色框框當然就是判斷勝負了,因為剛剛是你自己下的當然只需要檢查"OOO","X"不可能在此時連線成功的。
3.如果"O"連線就是你贏了,否則就是輪到對方下,你可以下棋的Session("T")權限當然就必須暫時關閉了!

測試
可以玩了!還是開兩個瀏覽器視窗測試畫面如下: