LabEx
ログイン登録

Tic-Tac-Toe Web アプリの構築

CSSBeginner
オンラインで実践に進む

はじめに

このプロジェクトでは、HTML、CSS、JavaScript を使用して Tic-Tac-Toe（三目並べ）ゲームを作成する方法を学びます。Tic-Tac-Toe は、3x3 のグリッド上で 2 人のプレイヤーが交互に X または O を配置するゲームです。目的は、水平、垂直、または対角線上に自分のマークを 3 つ並べることです。必要な HTML、CSS、JavaScript ファイルを作成し、ステップバイステップでゲームロジックを実装していきます。

👀 プレビュー

Tic Tac Toe game preview

🎯 タスク

このプロジェクトでは、以下の内容を学びます：

  • HTML を使用して Tic-Tac-Toe ゲームの基本構造を構築する方法。
  • CSS スタイルを追加してゲーム要素の外観を定義する方法。
  • JavaScript を使用してゲームロジックを実装する方法。
  • ユーザーインタラクションの処理、勝利や引き分けの判定、スコアの更新を行う方法。
  • ゲームボードのレンダリングとターン表示の更新を行う方法。
  • プレイヤーがゲームをリセットして新しいラウンドを開始できるようにする方法。

🏆 達成目標

このプロジェクトを完了すると、以下のことができるようになります：

  • Web アプリケーション用の HTML ファイルの構造化。
  • CSS クラスを使用した要素のスタイリング。
  • JavaScript を使用したゲームロジックの実装。
  • ユーザーインタラクションの処理と UI の適切な更新。
  • ゲームボードのレンダリングとターン表示の更新。
  • イベントリスナーの作成と JavaScript でのイベント処理。

HTML ファイルの作成

index.html という名前の新しいファイルを作成し、以下のコードを追加します。

cd ~/project
touch index.html

このコードは、Tic-Tac-Toe ゲームの基本構造を設定します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tic-Tac-Toe</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <style>
      /* CSS styles for the game */
    </style>
  </head>

  <body>
    <div id="app">
      <h1 class="text-3xl font-bold mb-4 text-gray-900">Tic-Tac-Toe</h1>
      <div id="board" class="grid grid-cols-3 gap-4 mb-4">
        <!-- Game board cells -->
      </div>
      <div id="scoreboard" class="flex justify-between items-center mb-4">
        <!-- Player scores -->
      </div>
      <div
        id="turn-indicator"
        class="text-2xl font-bold mb-4 text-gray-900"
      ></div>
      <button
        id="reset-button"
        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
      >
        Reset Game
      </button>
    </div>

    <script>
      // JavaScript code for the game logic
    </script>
  </body>
</html>
✨ 解答を確認して練習

CSS スタイルの追加

HTML ファイルの <head> セクションにある <style> タグ内に、ゲームに必要な CSS スタイルを追加します。これらのスタイルは、ゲームボード、セル、スコア、ボタンなどのゲーム要素の外観を定義します。

<style>
  .board-cell {
    width: 100px;
    height: 100px;
  }

  body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #222;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }

  #app {
    text-align: center;
    background-color: #f5f5f5;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  h1 {
    font-size: 32px;
    color: #333;
  }

  .text-gray-900 {
    color: #333 !important;
  }

  .text-2xl {
    font-size: 24px;
  }

  .bg-blue-500 {
    background-color: #4267b2;
  }

  .bg-blue-500:hover {
    background-color: #3b5ca0;
  }

  .bg-blue-700 {
    background-color: #385898;
  }

  .text-white {
    color: #fff !important;
  }

  .rounded {
    border-radius: 4px;
  }

  .highlight {
    background-color: #ffed4a;
  }
</style>

また、style.css をプロジェクトに追加し、<link> タグを使用して HTML ファイルにリンクすることもできます。

<link rel="stylesheet" href="style.css" />

お好みの方法を選択してください。

✨ 解答を確認して練習

ゲームロジックの JavaScript コードを追加

HTML ファイルの最後にある <script> タグ内に、ゲームロジックを処理する JavaScript コードを追加します。このコードは、ゲームの状態を追跡し、ユーザーインタラクションを処理し、勝利や引き分けを判定し、スコアを更新し、ゲームボードをレンダリングします。

<script>
  // Game logic code
</script>
✨ 解答を確認して練習

ゲーム変数の初期化

JavaScript コードの冒頭で必要な変数を宣言します。これらの変数は、ゲームの状態、プレイヤーのスコア、およびその他の関連情報を保持します。

// Game logic
const board = ["", "", "", "", "", "", "", "", ""];
let currentPlayer = "X";
let gameEnded = false;
let playerXScore = 0;
let playerOScore = 0;
let winningCells = [];
✨ 解答を確認して練習

セルクリックの処理

ゲームボードのセルがクリックされたときに呼び出される handleCellClick 関数を作成します。この関数は、ボードの更新、勝利判定、スコア更新、現在のプレイヤーの切り替えなど、主要なゲームロジックを処理します。

function handleCellClick(index) {
  if (gameEnded || board[index] !== "") return;
  board[index] = currentPlayer;
  renderBoard();

  if (checkWin()) {
    updateScore();
    highlightWinningCells();
    alert(`Player ${currentPlayer} wins!`);
    gameEnded = true;
  } else if (board.every((cell) => cell !== "")) {
    alert("It's a tie!");
    gameEnded = true;
  } else {
    currentPlayer = currentPlayer === "X" ? "O" : "X";
    updateTurnIndicator();
  }
}
✨ 解答を確認して練習

勝利判定

ゲームボード上に勝利条件が満たされているかを確認する checkWin 関数を作成します。この関数は、ボード配列の値と勝利の組み合わせを比較して、プレイヤーがゲームに勝利したかどうかを判断します。

function checkWin() {
  const winningCombinations = [
    [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 (let i = 0; i < winningCombinations.length; i++) {
    const [a, b, c] = winningCombinations[i];
    if (board[a] !== "" && board[a] === board[b] && board[a] === board[c]) {
      winningCells = [a, b, c];
      return true;
    }
  }
  return false;
}
✨ 解答を確認して練習

ゲームのリセット

ゲームの状態を初期値にリセットする resetGame 関数を作成します。この関数はリセットボタンがクリックされたときに呼び出され、ボードをクリアし、現在のプレイヤーをリセットし、勝利セルをクリアし、ターン表示を更新して、ボードを再レンダリングします。

function resetGame() {
  board.fill("");
  currentPlayer = "X";
  gameEnded = false;
  winningCells = [];
  updateTurnIndicator();
  renderBoard();
}
✨ 解答を確認して練習

プレイヤーのスコア更新

プレイヤーのスコアを更新する updateScore 関数を作成します。この関数は、プレイヤーがゲームに勝利したときに呼び出されます。対応するプレイヤーのスコアをインクリメントし、ページ上のスコア表示を更新します。

function updateScore() {
  if (currentPlayer === "X") {
    playerXScore++;
    document.getElementById("player-x-score").textContent = playerXScore;
  } else {
    playerOScore++;
    document.getElementById("player-o-score").textContent = playerOScore;
  }
}
✨ 解答を確認して練習

ターン表示の更新

現在のプレイヤーのターンを示すために、ページ上のターン表示を更新する updateTurnIndicator 関数を作成します。

function updateTurnIndicator() {
  const turnIndicator = document.getElementById("turn-indicator");
  turnIndicator.textContent = `Current Turn: Player ${currentPlayer}`;
}
✨ 解答を確認して練習

勝利セルのハイライト

ゲームボード上の勝利セルにハイライトクラスを追加する highlightWinningCells 関数を作成します。この関数は、プレイヤーがゲームに勝利したときに呼び出されます。

function highlightWinningCells() {
  const cells = document.querySelectorAll(".board-cell");
  cells.forEach((cell, index) => {
    if (winningCells.includes(index)) {
      cell.classList.add("highlight");
    }
  });
}
✨ 解答を確認して練習

ゲームボードのレンダリング

board 配列の現在の状態に従って、ページ上のゲームボードを更新する renderBoard 関数を作成します。この関数は、各プレイヤーの移動後に視覚情報を更新するために呼び出されます。

function renderBoard() {
  const cells = document.querySelectorAll(".board-cell");
  cells.forEach((cell, index) => {
    cell.textContent = board[index];
    cell.classList.remove("highlight");
  });
}
✨ 解答を確認して練習

イベントリスナーの追加

ゲームボードのセルとリセットボタンにイベントリスナーを追加します。これらのイベントリスナーは、イベントが発生したときに対応する関数を呼び出します。

// Event listeners
const cells = document.querySelectorAll(".board-cell");
cells.forEach((cell, index) => {
  cell.addEventListener("click", () => handleCellClick(index));
});

const resetButton = document.getElementById("reset-button");
resetButton.addEventListener("click", resetGame);
✨ 解答を確認して練習

初期レンダリング

JavaScript コードの最後に、初期レンダリング用のコードを追加します。このコードは、ゲームの初期状態を設定し、ターン表示を更新し、ゲームボードをレンダリングします。

// Initial render
updateTurnIndicator();
renderBoard();
✨ 解答を確認して練習

プロジェクトの実行

これでプロジェクトを実行し、Tic-Tac-Toe をプレイできます！

WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

WebIDE Go Live button

これにより、Web 8080 タブでプロジェクトが開きます。

Web 8080 Tab interface

セルをクリックして移動し、リセットボタンをクリックして新しいゲームを開始してください。

✨ 解答を確認して練習

まとめ

おめでとうございます！HTML、CSS、JavaScript を使用して Tic-Tac-Toe ゲームを無事に作成できました。このプロジェクトでは、HTML ファイルの作成、CSS スタイルの追加、ゲームロジックの実装、ユーザーインタラクションの処理を網羅しました。このゲームでは、2 人のプレイヤーが交互にプレイし、勝利や引き分けの判定、スコアの更新、勝利セルのハイライトが行われます。これでプロジェクトを実行して、Tic-Tac-Toe を楽しんでください！

関連 CSS コース
初心者向け CSS

初心者向け CSS

cssweb-development
三目並べウェブアプリを作成する

三目並べウェブアプリを作成する

javascriptweb-development
モグラたたき Web ゲームの作成

モグラたたき Web ゲームの作成

javascriptweb-development