JS地下城ー井字遊戲

成果展示

作品連結｜程式碼

注意項目：

1. 需設計響應式介面。

2. 井字遊戲功能邏輯撰寫。

3. 分數存在localStorage內，關閉視窗後也能讀取累積的分數。

0. 寫在前面：

井字遊戲可視為奪取陣地遊戲，在有限的空間內（九格），取得能贏得勝利的陣地（直線、橫線、斜線）。在遊戲的邏輯上需先設定圈陣列及叉陣列為空白陣列，接著在每個回合，點按方格後，標記上同陣營的符號。讀取陣地數字，push進對應陣列，最後判定是否達成獲勝條件。陣列編號可參考下圖：

九宮格內陣列編號

獲勝條件：

當擁有的陣列與以下任一組相符時（即橫、直、斜連線），則觸發獲勝畫面；反之，則在第九手觸發平手畫面。檢查陣列為由小到大的「升序排列」。

//橫連線：[0,1,2],[3,4,5],[6,7,8]
//直連線：[0,3,6],[1,4,7],[2,5,8]
//斜連線：[0,4,8],[2,4,6]

下一手的圈點按格內即取得獲勝

1. 響應式介面設計

這次的關鍵在於利用flex作垂直對齊，利用外元素主軸置中對齊即可。

遊戲畫面

2. 井字遊戲功能撰寫

一、陣列編號排序：

每一手結束前，需檢查陣營內的編號是否觸發獲勝條件。但取得的編號皆不被排列整齊，因此需依上一段所述，為取得的編號作「升序排列」。

//升序排列函式
var ascending = checkArray.map(val => parseInt(val)).sort();

二、對照獲勝條件，檢查是否觸發勝利條件：

利用迴圈逐筆比對玩家陣列內的字符是否完全等於獲勝條件陣列，當比對的字符完全相等時（布林值為true），則引發獲勝畫面；反之，則在第九手後，引發平手畫面。

此時的check為布林值，判定為true時即引發獲勝畫面

三、勝負判斷

設OXStatus為圈、叉對應回合，若OXStatus為true時為圈回合；反之，OXStatus為false時為叉回合，判斷哪一手回合先取得獲勝條件即為該手方獲勝。判斷第九手無勝負產生，可利用圈陣列加叉陣列長度等於9時觸發。終局發生時，所要作的事有以下三點：

1. 更換畫面（圈贏、叉贏或平手）。

2. 視勝負情況加分或不加分。

3. 將分數結果上傳至localStorage。

終局發生，利用if敍述句判斷

3. 將分數保存至localStroage

一、localStorage為瀏覽器提供本地儲存功能，提供約 5MB的容量，惟這個容量的值只限定利用string型別。可以從console畫面鍵入localStorage，即可得知目前瀏覽器已儲存了哪些資料。

筆者瀏覽器的localStorage儲存狀況

二、若需刪除時，則在瀏覽器console畫面鍵入以下指令即可：

localStorage.clear()

三、由localStorage讀取資料(getItem)時，可用字串(string)乘1的方式，將資料型別轉成數字(number)。取資料為：

localStorage.getItem('key')*1;

四、儲存資料(setItem)時，則利用以下指令，進行儲存：

localStorage.setItem('key', 資料);

參考資料：

Ching-Hsien Yeh 超入門 JavaScript 教學

六角講師-卡斯柏的flex介紹