
- 前言 -
來到地下城第八關,嗯…井字遊戲,應該不太難吧,先來看看攻略規則吧:
- 先手為 O,後手為 X,某方獲勝時,上方會紀錄各方的獲勝戰績
- 每回合結束後,會判定結果頁(平手、O 獲勝、X 獲勝)
- 需符合 RWD,能在低螢幕解析度也能遊玩,介面不能超出 x 軸。
- 請使用瀏覽器離線儲存技術,將戰績保留起來,重新打開遊戲也仍可觀看到歷史戰績。技術請任選以下幾種
基本上都不是太複雜的條件,唯有判斷勝負可能需要花點時間來思考,另外這種遊戲互動跟之前第六層的算術遊戲一樣,應該要做成 SPA 單頁式網站吧,這時候 Vue 應該是大家的首選吧,不過頁面並不複雜,我就不殺雞焉用牛刀了(其實就是懶而已)。
- 重點技術 -
- CSS media query
- JavaScript / jQuery
- BOSS 攻略-
你這造型挺別緻啊!
正要開始對BOSS大開殺戒,馬上就遇到了一些難纏的小嘍囉!


好在身為勇者,沒有兩把刷子怎麼敢出來混,第一個叉叉直接送他一個偽元素蓋在中間,中空字我們就用text-shadow 或 -webkit-text-stroke 就搞定了!
text-shadow: 2px 2px white, -2px -2px white, 2px -2px white, -2px 2px white;-webkit-text-stroke: 2px white;
親愛的,我把孩子變小了!
畫面完成了,但是手機版通通跑到外面了啊!
要保持標題畫面以及遊戲個井字格永遠是正方形,以前達到等比例縮放的區塊我們都會用 padding-top 或 padding-bottom,但現在區塊裡是有內容的,不可能用 padding 啊 !
既然不能用百分比大法,那我們只能下斷點了,剛好井字格的寬高就是常見的變版尺寸540px 當視窗縮小到這個尺寸時就把井字格的寬高改為 300px 好了,這樣我們的井字遊戲也能用手機玩了!
進入正題
畫面搞定,接下來就是解決該如何辦定輸贏的程式部分了,第一個聯想到的就是用陣列,九個格子利用陣列把圈叉記錄下來,再用特定規則去判斷有無輸贏。
這樣的話我們先來讓格子與陣列有所關聯let gamePlay = []
let circleTurn = true$('main').on('click', '.box', function() { let index = $(this).data('num') if ( gamePlay[index] != undefined ) return else gamePlay[index] = circleTurn ? 1 : -1}
我們為每個格子加一個 data-num = “0” 的 HTML 屬性,屬性從0~8剛好九格,也對應陣列 gamePlay 的 index 。
然後我們需要一個變數 circleTurn 告訴我們現在是誰的回合,如果 true 就是圈圈的回合,我們填入 1,反之就是叉叉的會合,我們填入 -1。
陣列成功存進資料後,剩下就是判定啦!

我們為格子加上編號,然後看看成功連線有什麼規律:
- 首先先看橫排,012、345、678。
是不是可以歸類為 3n、3n+1、3n+2 呢? - 同樣邏輯,直排就等於 n、n+3、n+6。
- 兩個對角線就單純了,就是 048 和 246 。
現在我們知道規律了,所以…

我們按照找到的規律去把格子裡的正負一給相加,如果絕對值等於三,就代表分出勝負了,那我們就把連線格子的值 ( 也就是正負一 ) 給丟出來。
如果是 1 代表圈圈獲勝,如果是 -1 代表叉叉獲勝,既然知道誰獲勝,剩下的就是顯示畫面跟計分啦!
還沒結束
你說平手怎麼辦?很簡單,我們宣告一個 step 的變數,幫我們紀錄現在玩家下了幾次,如果下了九次 whoWin() 回傳的還是 null 就代表平手啦!
let step = 1let gameover = function(){ step++ if (whoWin() == null && step == 9){
// 平手要做的事情
} esle if (whoWin() == 1){
// 圈圈贏了要做的事
} esle if (whoWin() == 1){
// 叉叉贏了要做的事
} else{
// 還沒結束要做的事
}}
這樣就搞定啦!這次的 BOSS 還蠻有趣的,而且無聊的時候還可以拿手機出來跟朋友來一場,哈哈