建立井字遊戲網站-css教學-PHP中文網

首頁

web前端

css教學

建立井字遊戲網站

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 18, 2024 am 06:35 AM

Build a Tic Tac Toe Game Website

介紹

各位開發者大家好！我很高興分享我的最新項目：經典的井字遊戲。這個專案是練習 JavaScript 技能的好方法，特別是在處理遊戲邏輯、DOM 操作和使用者互動方面。無論您是剛開始使用 JavaScript 還是正在尋找有趣的挑戰，這款 Tic-Tac-Toe 遊戲都是磨練您技能的完美選擇。

項目概況

Tic-Tac-Toe 遊戲 是流行的兩人遊戲的基於網路的實現。該專案展示瞭如何創建互動元素、管理遊戲狀態以及實現簡單的人工智慧邏輯。該遊戲被設計為完全響應式，使其可以在桌面和行動裝置上玩。

特徵

雙人遊戲模式：在同一裝置上與朋友一起玩。
遊戲邏輯：每次移動後自動檢查獲勝者或平局。
重置功能：隨時輕鬆重新啟動遊戲。
響應式設計：遊戲佈局適應不同的螢幕尺寸，在所有裝置上提供一致的體驗。

使用的技術

HTML：建構遊戲介面。
CSS：設定遊戲板、按鈕和其他 UI 元素的樣式。
JavaScript：管理遊戲邏輯，包括玩家回合、獲勝條件和重置遊戲。

專案結構

以下是專案結構的快速瀏覽：

Tic-Tac-Toe/
├── index.html
├── styles.css
└── script.js

index.html：包含 Tic-Tac-Toe 遊戲的 HTML 結構。
styles.css：包含遊戲板和響應式設計的 CSS 樣式。
script.js：處理遊戲邏輯，包括玩家回合和獲勝條件。

安裝

要開始該項目，請按照以下步驟操作：

複製儲存庫：

git clone https://github.com/abhishekgurjar-in/Tic-Tac-Toe.git

開啟專案目錄:
```
cd Tic-Tac-Toe
```
運行項目:
- 在網頁瀏覽器中開啟index.html 檔案即可開始玩井字遊戲。

用法

在網頁瀏覽器中開啟網站。
點選網格中的任一空白單元格開始遊戲。
輪流在單元格中放置你的標記（X 或 O）。
查看結果：如果出現獲勝組合，遊戲將宣布獲勝；如果所有單元格都填滿，則遊戲將宣布平局。
重置遊戲：點選「重置遊戲」按鈕開始新遊戲。

程式碼說明

超文本標記語言

index.html 檔案設定 Tic-Tac-Toe 遊戲的結構，包括遊戲板和控制按鈕。這是一個片段：


  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic-Tac-Toe Game</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  
  
    <div class="msg-container hide">
      <p id="msg">Winner</p>
      <button id="new-btn">New Game</button>
    </div>
    <main>
      <h1 id="Tic-Tac-Toe">Tic Tac Toe</h1>
      <div class="container">
        <div class="game">
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
        </div>
      </div>
      <button id="reset-btn">Reset Game</button>
    </main>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>

CSS

styles.css 檔案設計 Tic-Tac-Toe 遊戲的樣式，包括網格佈局、按鈕和響應式設計。以下是一些關鍵樣式：

* {
    margin: 0;
    padding: 0;
  }

  body {
    background-color: #548687;
    text-align: center;
  }

  .container {
    height: 70vh;
    display: flex;

    justify-content: center;
    align-items: center;
  }

  .game {
    height: 60vmin;
    width: 60vmin;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5vmin;
  }

  .box {
    height: 18vmin;
    width: 18vmin;
    border-radius: 1rem;
    border: none;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
    font-size: 8vmin;
    color: #b0413e;
    background-color: #ffffc7;
  }

  #reset-btn {
    padding: 1rem;
    font-size: 1.25rem;
    background-color: #191913;
    color: #fff;
    border-radius: 1rem;
    border: none;
  }

  #new-btn {
    padding: 1rem;
    font-size: 1.25rem;
    background-color: #191913;
    color: #fff;
    border-radius: 1rem;
    border: none;
  }

  #msg {
    color: #ffffc7;
    font-size: 5vmin;
  }

  .msg-container {
    height: 100vmin;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 4rem;
  }

  .hide {
    display: none;
  }
.footer {
  margin: 50px;
  text-align: center;
  color: white;
}

JavaScript

script.js 檔案管理遊戲邏輯，包括處理玩家回合、檢查獲勝者以及重置遊戲。這是一個片段：

let boxes = document.querySelectorAll(".box");
let resetBtn = document.querySelector("#reset-btn");
let newGameBtn = document.querySelector("#new-btn");
let msgContainer = document.querySelector(".msg-container");
let msg = document.querySelector("#msg");

let turnO = true; //playerX, playerO
let count = 0; //To Track Draw

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

const resetGame = () => {
  turnO = true;
  count = 0;
  enableBoxes();
  msgContainer.classList.add("hide");
};

boxes.forEach((box) => {
  box.addEventListener("click", () => {
    if (turnO) {
      //playerO
      box.innerText = "O";
      turnO = false;
    } else {
      //playerX
      box.innerText = "X";
      turnO = true;
    }
    box.disabled = true;
    count++;

    let isWinner = checkWinner();

    if (count === 9 && !isWinner) {
      gameDraw();
    }
  });
});

const gameDraw = () => {
  msg.innerText = `Game was a Draw.`;
  msgContainer.classList.remove("hide");
  disableBoxes();
};

const disableBoxes = () => {
  for (let box of boxes) {
    box.disabled = true;
  }
};

const enableBoxes = () => {
  for (let box of boxes) {
    box.disabled = false;
    box.innerText = "";
  }
};

const showWinner = (winner) => {
  msg.innerText = `Congratulations, Winner is ${winner}`;
  msgContainer.classList.remove("hide");
  disableBoxes();
};

const checkWinner = () => {
  for (let pattern of winPatterns) {
    let pos1Val = boxes[pattern[0]].innerText;
    let pos2Val = boxes[pattern[1]].innerText;
    let pos3Val = boxes[pattern[2]].innerText;

    if (pos1Val != "" && pos2Val != "" && pos3Val != "") {
      if (pos1Val === pos2Val && pos2Val === pos3Val) {
        showWinner(pos1Val);
        return true;
      }
    }
  }
};

newGameBtn.addEventListener("click", resetGame);
resetBtn.addEventListener("click", resetGame);