Javascript is required

Jun 17, 2019

【JavaScript】JS地下城-8F-井字遊戲

【JavaScript】JS地下城-8F-井字遊戲

8F-井字遊戲

wp-image-414

連結

Demo

Code

使用語言＆框架

HTML、CSS、Bootstrap、JavaScript（ES6）

BOSS 弱點

  1. 【特定技術】先手為 O，後手為 X，某方獲勝時，上方會紀錄各方的獲勝戰績
  2. 【特定技術】每回合結束後，會判定結果頁(平手、Ｏ 獲勝、X 獲勝)
  3. 【特定技術】需符合 RWD，能在低螢幕解析度也能遊玩，介面不能超出 x 軸，至少在以下解析度能夠遊玩。
    1. iPhone SE 320px
    2. iPhone 8 375px
    3. iPhone PLUS 414px
  4. 【特定技術】請使用瀏覽器離線儲存技術，將戰績保留起來，重新打開遊戲也仍可觀看到歷史戰績。技術請任選以下幾種
    1. Cookie
    2. localStorage
  5. 【書寫能力】請寫 BLOG，描述你在開發「滿足獲勝條件」解題思維來進行加強描述
    1. 上面三個 O 符合獲勝條件
    2. 斜線三個 X 符合獲勝條件
      請先不要參考網路上的寫法，試著用自身開發能力來解題，進以提升開發思維。但這段並非強制，真的卡關到爆炸，就還是試圖尋找攻略吧，但我相信想立志成為前端之碑的樓主，一定辦得到的！（崇拜眼神

心得

滿足勝利條件

因為最近看到很多這種類型選取的都是用 dataset 將參數直接帶進 JavaStript 做判斷，因此一開始就先以這個為方向。

知道確切按的區域以後，下一步是儲存當前狀態。將要填入的內容，依照「○」或「X」紀錄下來存到一個變數內，比如說arr3存的就是第四格的狀態，所以在
dataset 的時後我是從 0 開始寫，省去轉換的麻煩。

status[e.target.dataset.index] = isX ? -1 : 1

這樣子基本的判斷資料就完成了。

之後要想辦法在每次點擊後判斷是否勝利。

在這裏先把所有組合列出來：

const type = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [2, 4, 6],
]

我自己原本想好邏輯寫了很長一段，但是中間卡住…後來看到有其他學員寫了一個很簡單的…因此就抄來改了一下。

參考資料：連結

邏輯是這樣的：

用 for 迴圈將所有勝利組合跑過一遍

在 status 狀態中「○」是 1 ，「X」是 -1

所以如果勝利組合的三個位置都是「○」，「○」就贏了

相反來說三個位置都是「X」的話，「X」就贏了

因為我每次都會檢查是否勝利，所以我加了一個判斷是否平手

status 的預設狀態是 0 ，所以要是 status 中沒有 0 了，代表棋盤都下完了還是沒有勝負，因此平手。

function checkWin() {
  for (let i = 0; i < 8; i += 1) {
    const [a, b, c] = type[i]
    const sum = status[a] + status[b] + status[c]
    if (sum === 3) {
      winO += 1
      updateScore()
      gaming = false
      return 1
    }
    if (sum === -3) {
      winX += 1
      updateScore()
      gaming = false
      return -1
    }
  }
  if (!status.includes(0)) {
    gaming = false
    return 3
  }
}

手機版版型

我做了一個 600px 的分割點跟電腦還有平板做區隔。

只有手機版的部分要適應不同大小，因此把部分CSS改用 vw 。

@media screen and (max-width : 600px) {
    /* Main Size */
    .start-ox, .game, .x-win, .o-win, .draw, .x-win .cross{
        width: 90vw;
        height: 90vw;
    }
    /* ...... */
}

參考資料

Bootstrap – Document

[筆記] 好用的css 3新單位vh vw ─ 讓你的圖片可以隨著螢幕大小而不同

這次的參考資料…好少歐

Tags
cd ..