JS地下城[8F] - 井字遊戲

李炳寬
李炳寬
Nov 2 · 5 min read

- 前言 -

來到地下城第八關,嗯…井字遊戲,應該不太難吧,先來看看攻略規則吧:

  1. 先手為 O,後手為 X,某方獲勝時,上方會紀錄各方的獲勝戰績
  2. 每回合結束後,會判定結果頁(平手、O 獲勝、X 獲勝)
  3. 需符合 RWD,能在低螢幕解析度也能遊玩,介面不能超出 x 軸。
  4. 請使用瀏覽器離線儲存技術,將戰績保留起來,重新打開遊戲也仍可觀看到歷史戰績。技術請任選以下幾種

基本上都不是太複雜的條件,唯有判斷勝負可能需要花點時間來思考,另外這種遊戲互動跟之前第六層的算術遊戲一樣,應該要做成 SPA 單頁式網站吧,這時候 Vue 應該是大家的首選吧,不過頁面並不複雜,我就不殺雞焉用牛刀了(其實就是懶而已)。


- 重點技術 -

  1. CSS media query
  2. JavaScript / jQuery

- BOSS 攻略-

你這造型挺別緻啊!

正要開始對BOSS大開殺戒,馬上就遇到了一些難纏的小嘍囉!

好在身為勇者,沒有兩把刷子怎麼敢出來混,第一個叉叉直接送他一個偽元素蓋在中間,中空字我們就用 就搞定了!

text-shadow: 2px 2px white, -2px -2px white, 2px -2px white, -2px 2px white;-webkit-text-stroke: 2px white;

親愛的,我把孩子變小了!

畫面完成了,但是手機版通通跑到外面了啊!

要保持標題畫面以及遊戲個井字格永遠是正方形,以前達到等比例縮放的區塊我們都會用 ,但現在區塊裡是有內容的,不可能用 啊 !

既然不能用百分比大法,那我們只能下斷點了,剛好井字格的寬高就是常見的變版尺寸 當視窗縮小到這個尺寸時就把井字格的寬高改為 好了,這樣我們的井字遊戲也能用手機玩了!


進入正題

畫面搞定,接下來就是解決該如何辦定輸贏的程式部分了,第一個聯想到的就是用陣列,九個格子利用陣列把圈叉記錄下來,再用特定規則去判斷有無輸贏。

這樣的話我們先來讓格子與陣列有所關聯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}

我們為每個格子加一個 的 HTML 屬性,屬性從0~8剛好九格,也對應陣列

然後我們需要一個變數 告訴我們現在是誰的回合,如果 就是圈圈的回合,我們填入 1,反之就是叉叉的會合,我們填入 -1。

陣列成功存進資料後,剩下就是判定啦!

我們為格子加上編號,然後看看成功連線有什麼規律:

  1. 首先先看橫排,012、345、678。
    是不是可以歸類為 3n、3n+1、3n+2 呢?
  2. 同樣邏輯,直排就等於 n、n+3、n+6。
  3. 兩個對角線就單純了,就是 048 和 246 。

現在我們知道規律了,所以…

我們按照找到的規律去把格子裡的正負一給相加,如果絕對值等於三,就代表分出勝負了,那我們就把連線格子的值 ( 也就是正負一 ) 給丟出來。

如果是 1 代表圈圈獲勝,如果是 -1 代表叉叉獲勝,既然知道誰獲勝,剩下的就是顯示畫面跟計分啦!


還沒結束

你說平手怎麼辦?很簡單,我們宣告一個 的變數,幫我們紀錄現在玩家下了幾次,如果下了九次 回傳的還是 就代表平手啦!

let step = 1let gameover = function(){  step++  if (whoWin() == null && step == 9){
// 平手要做的事情
}
esle if (whoWin() == 1){
// 圈圈贏了要做的事
}
esle if (whoWin() == 1){
// 叉叉贏了要做的事
}
else{
// 還沒結束要做的事
}
}

這樣就搞定啦!這次的 BOSS 還蠻有趣的,而且無聊的時候還可以拿手機出來跟朋友來一場,哈哈

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade