井字連線遊戲

簡介：
井字連線遊戲我們在程式設計課程中使用VB(或C#)做過，此處則要用JavaScript將遊戲功能製作到網頁上。重要的技術意義是學會使用JS語言的陣列操作與滑鼠事件互動功能，有趣的是這個程式可以充分與客戶互動，過程中卻完全不需要伺服器幫忙，所以下載網頁之後其實就不需要網路了！這是理想的網頁遊戲設計方式，如果太依賴伺服端的程式，網路負荷也就會增加，要商業化運轉就比較困難(常常要加開伺服器囉)。

棋子圖案下載

請將以上三個圖案下載到你的網站，三者大小都是100X100點，代表遊戲中棋格的三種狀態。

網頁設計
請在網頁上加入一個3X3的表格，將 border 屬性設為 1，這樣可以就可以看到格線(預設是無格線的)。接著將上圖中的空白圖案依序填入九個格子中，表格下方加入一個 button 物件，文字改成'Replay'，就是重玩按鍵啦！再下方加入一個段落標籤<p>，通常在VS軟體的網頁設計頁面中按下換行的Enter鍵就會自動產生一個<p>標籤，不需要手動鍵入或到工具箱找。完成畫面如下：

接著切換到原始檔，表格物件中需要手動鍵入事件程序宣告如下：

就是說各個影像物件被點到時要執行一個 ch 的程式，且需要傳遞一個數字(0~8)告知程式棋格的位置，這個 ch 當然就是處理下棋動作的程式了！alt 原本是用來敘述圖案內容的文字，此地用來表示圖案的種類，E是空白，稍後的X或O填入時，它的內容就會變成X或O了。
前面提到的最後的<p>標籤是用來提示勝負訊息用的，當有人連線時要寫資料進來，所以應該替它取個名字(id)如下：

初始狀態設定的程式
接著請寫在 head 區塊內寫設定初始狀態的程式 init() ，當然也必須在 body標籤加上執行此程式的宣告：
<body onload="init()">
init()的程式碼如下：

先宣告公用變數 G與T，接著在 function 內定義兩者的初始值，意義如註解所示。

下棋回應的程式
接著就是處理下棋反應的 ch(位置)程式了，內容如下：

在此 i 就是棋格位置，0是左上角，8是右下角。G[i] 則是被點到的那個 img 物件，下不同的棋時G的src與alt內容都要改變。下完一步棋下棋序 T 要變成相反(T=!T)，檢查勝負的 chk()程式如下：

程式碼就是將代表各棋格的 alt 值相加，"OOO"代表O連線，"XXX"代表X連線，有連線時應該在M物件中顯示訊息。
重完按鍵其實最簡單，相當於我們常做的重新整理網頁，讓網頁重新載入就會回到原始的狀態了！有趣的是在此我們學到了如何用JS程式產生這個動作：

試試看！你可以在此頁面玩遊戲了！