三目並べゲームの Web サイトを構築する

導入

開発者の皆さん、こんにちは！私の最新プロジェクト、古典的な三目並べゲームを共有できることを嬉しく思います。このプロジェクトは、特にゲーム ロジック、DOM 操作、ユーザー インタラクションの処理における JavaScript スキルを練習するのに最適な方法です。 JavaScript を始めたばかりの場合でも、楽しいチャレンジを探している場合でも、この三目並べゲームはスキルを磨くのに最適です。

プロジェクト概要

三目並べゲームは、人気の 2 人用ゲームを Web ベースで実装したものです。このプロジェクトでは、インタラクティブな要素を作成し、ゲームの状態を管理し、シンプルな AI ロジックを実装する方法を紹介します。このゲームは完全に応答するように設計されており、デスクトップとモバイル デバイスの両方でプレイ可能です。

特徴

• 2 プレイヤー モード: 同じデバイスで友達とプレイします。
• ゲーム ロジック: 各手の後に勝者か引き分けかを自動的にチェックします。
• リセット機能: いつでも簡単にゲームを再開できます。
• レスポンシブ デザイン: ゲームのレイアウトはさまざまな画面サイズに適応し、すべてのデバイスで一貫したエクスペリエンスを提供します。

使用されている技術

• HTML: ゲームのインターフェースを構造化します。
• CSS: ゲームボード、ボタン、その他の UI 要素のスタイルを設定します。
• JavaScript: プレーヤーのターン、勝利条件、ゲームのリセットなどのゲーム ロジックを管理します。

プロジェクトの構造

プロジェクトの構造を簡単に見てみましょう:

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

• index.html: 三目並べゲームの HTML 構造が含まれています。
• styles.css: ゲームボードとレスポンシブデザイン用の CSS スタイルが含まれています。
• script.js: プレーヤーのターンや勝利条件などのゲーム ロジックを処理します。

インストール

プロジェクトを開始するには、次の手順に従います:

1. リポジトリのクローンを作成します:
   

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

2. プロジェクト ディレクトリを開きます:
   

   cd Tic-Tac-Toe
   

3. プロジェクトを実行します:

   • Web ブラウザでindex.html ファイルを開いて、三目並べゲームのプレイを開始します。

使用法

1. Web ブラウザで Web サイトを開きます。
2. グリッド内の空のセルをクリックして、ゲームを開始します。
3. 順番に マーク (X または O) をセルに配置します。
4. 結果を確認します: 勝ちの組み合わせがある場合は勝者が宣言され、すべてのセルが埋まっている場合は引き分けとなります。
5. ゲームをリセットする: 新しいゲームを開始するには、[ゲームをリセット] ボタンをクリックします。

コードの説明

HTML

index.html ファイルは、ゲーム ボードやコントロール ボタンなど、三目並べゲームの構造を設定します。スニペットは次のとおりです:

  
    <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 ファイルは、グリッド レイアウト、ボタン、レスポンシブ デザインなど、三目並べゲームのスタイルを設定します。以下にいくつかの主要なスタイルを示します:

* {
    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);

ライブデモ

ここで三目並べゲームのライブデモをチェックできます。

結論

この三目並べゲームの構築は、特にインタラクティブな Web アプリケーションの作成において JavaScript を練習できる楽しい経験でした。このプロジェクトが、あなたが独自のゲームを構築し、JavaScript の可能性を探求するきっかけとなることを願っています。コーディングを楽しんでください!

クレジット

このプロジェクトは、JavaScript と DOM 操作に重点を置いて、Web 開発スキルを向上させるための私の継続的な取り組みの一環として開発されました。

著者

• アビシェク・グルジャル
  • GitHub プロフィール

以上が三目並べゲームの Web サイトを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。