ホームページ > 記事 > ウェブフロントエンド > 三目並べゲームの Web サイトを構築する

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

WBOYオリジナル: 2024-08-18 06:35:02966ブラウズ

Build a Tic Tac Toe Game Website

導入

開発者の皆さん、こんにちは！私の最新プロジェクト、古典的な三目並べゲームを共有できることを嬉しく思います。このプロジェクトは、特にゲームロジック、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: プレーヤーのターンや勝利条件などのゲームロジックを処理します。

インストール

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

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

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

プロジェクトディレクトリを開きます:
```
cd Tic-Tac-Toe
```
プロジェクトを実行します:
- Web ブラウザでindex.html ファイルを開いて、三目並べゲームのプレイを開始します。

使用法

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

コードの説明

HTML

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

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    26faf3d1af674280d03ba217d87e9421
    b2386ffb911b14667cb8f0f91ea547a7Tic-Tac-Toe Game6e916e0f7d1e588d4f442bf645aedb2f
    af75c476cdb7e6c074ca6da9b40841de
    90392ec4442ad9ff612213ec639da4832cacc6d41bbb37262a98f745aa00fbf0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    d39cfd0366094787321899c5020bc378
      6d4a5230d2661bb62bed1c8aaf8c64e0Winner94b3e26ee717c64999d7867364b1b4a3
      8e523cc4a74074b4a599f8aab4bcbad4New Game65281c5ac262bf6d81768915a4a77ac0
    16b28748ea4df4d9c2150843fecfba68
    61b85035edf2b42260fdb5632dc5728a
      4a249f0d628e2318394fd9b75b4636b1Tic Tac Toe473f0a7621bec819994bb5020d29372a
      4883ec0eb33c31828b7c767c806e14c7
        3a1385250c1ecad69875af6138783c80
          a008380eccad648f043a77a135bd17ac65281c5ac262bf6d81768915a4a77ac0
          a008380eccad648f043a77a135bd17ac65281c5ac262bf6d81768915a4a77ac0
          a008380eccad648f043a77a135bd17ac65281c5ac262bf6d81768915a4a77ac0
          a008380eccad648f043a77a135bd17ac65281c5ac262bf6d81768915a4a77ac0
          a008380eccad648f043a77a135bd17ac65281c5ac262bf6d81768915a4a77ac0
          a008380eccad648f043a77a135bd17ac65281c5ac262bf6d81768915a4a77ac0
          a008380eccad648f043a77a135bd17ac65281c5ac262bf6d81768915a4a77ac0
          a008380eccad648f043a77a135bd17ac65281c5ac262bf6d81768915a4a77ac0
          a008380eccad648f043a77a135bd17ac65281c5ac262bf6d81768915a4a77ac0
        16b28748ea4df4d9c2150843fecfba68
      16b28748ea4df4d9c2150843fecfba68
      ebf4b789043d9122effbf39b4551717cReset Game65281c5ac262bf6d81768915a4a77ac0
    07ebbc2b3735b6cb0330715d08d2749e
    ffd6ba4147bda351239915f463e46e38
      e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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 サイトの他の関連記事を参照してください。

JavaScript css html if for Directory Interface JS dom this github ui

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：体重換算ウェブサイトを構築する次の記事：体重換算ウェブサイトを構築する

続きを見る