Reactを使用してTic Tac Toeゲームを構築する

チュートリアル
JavaScript

私のバージョンのクラシックな三目並べゲームへようこそ！私は、ReactとSCSSを使用して三目並べのゲームを作成し、約6時間で完成させました。このゲームには、コンピューターと対戦するシングルプレイヤーモード、勝者発表のポップアップ、両プレイヤーの勝利カウンターがあります。グリッドはn x nにカスタマイズ可能ですが、現在の勝利ロジックは3 x 3のみをサポートしています。将来的な改善には、より賢いコンピュータの手やリアルタイムのマルチプレイヤー機能が含まれます。

概要

  • 必要な総開発時間： 約6時間
  • 使用技術： JavaScript (React) + SCSS

ゲームルール

1. 目的

ゲームの目的は、3 x 3のグリッド上で自分のシンボル（XまたはO）を水平、垂直、または対角線に3つ揃えることです。

2. ターン順

  • プレイヤーAが常に最初にプレイし、Xとしてプレイします。
  • コンピューター対戦相手はOとしてプレイし、プレイヤーAの直後に自分の手を打ちます。

3. ゲームプレイ

  • プレイヤーは交互にグリッドの空のセルにマークを付けます。
  • 最初に3つのシンボルを揃えたプレイヤーがゲームに勝ちます。

4. 勝利条件

プレイヤーは次の条件を達成した場合に勝利します：

  • 横一列に3つのシンボルを揃えること水平行
  • 三つの記号が 縦の列に並ぶ、または
  • 三つの記号が 対角線

5. 描画

すべてのセルが埋まっており、どのプレイヤーも勝利条件を満たさない場合、ゲームは引き分けで終了します。

6. スコアの追跡

勝利カウンターは、プレイヤーAとコンピューターの両方の総勝利数を追跡します。

実装された機能 (MVP)

このバージョンのゲームに含まれているものは次のとおりです：

  1. コンピューターと対戦：コンピューターに挑戦する楽しいシングルプレイヤーモード
  2. 勝者発表ポップアップ：各ゲームの終了時に、ポップアップで勝者が表示されます。
  3. 勝利カウンター：プレイヤーとコンピューターの総勝利数を追跡します。
  4. カスタマイズ可能なグリッド： n x n グリッドを作成（ただし、勝利ロジックは現在 3 x 3 のみをサポートしています）。

考えられる改善点

今後の展望として、改善の余地があるいくつかの分野は次のとおりです：

  1. [UX] スコアのローカルストレージ：ゲームのスコアをローカルに保存し、ブラウザをリフレッシュした後も持続させます。
  2. [UX/Tech] より賢いコンピューターの動き：ランダムな動きをアルゴリズムに置き換え、より競争力のあるゲームプレイを実現します。
  3. [UX] リアルタイムマルチプレイヤー: Socket.ioのような技術を使用して、2人のプレイヤーがリアルタイムで競い合えるようにします。
  4. [Tech] 高度なSCSSの整理: mixins、変数、およびより良い構造化技術を使用してSCSSをリファクタリングします。
  5. [UX/Tech] 優雅な劣化: より広範なサポートのために、非最新ブラウザとの互換性を確保します。

セットアップと開発

前提条件

始める前に、Node.jsがインストールされていることを確認してください（推奨バージョン：6.4.1）。

始め方

  1. リポジトリを

    GitHub

    からクローンします。

2. 依存関係をインストールします:

npm install

3. 開発サーバーを起動します:

npm start

  • アプリを見るために、ブラウザでhttp://localhost:3000を開きます。

4. （オプション）プロダクション用にプロジェクトをビルドします:

npm run build

これにより、デプロイメントの準備が整った最適化されたbuildフォルダーが作成されます。

テスト

インタラクティブなウォッチモードでテストを実行します:

npm test

技術的詳細

ファイル構造

このプロジェクトは標準の Create React App 構造に従い、モジュラーコンポーネントベースのアプローチを採用しています。

  

src
├── index.js
├── App.css
├── App.js
├── Components
│   └── Board
│       ├── Board.scss
│       ├── Cross.jsx
│       ├── ScoreBoard.jsx
│       ├── index.jsx
│       ├── Round.jsx
│   └── Footer
│       ├── Footer.scss
│       ├── index.jsx
│   └── Header
│       ├── Header.scss
│       ├── index.jsx
├── utils
│   └── lib.js
public
├── index.html

説明とアプローチ

  • このアプリは迅速なMVPセットアップのために Create React App でブートストラップされました。
  • ゲームはプレイ用に n x n グリッドを初期化します。
  • 各セルにはクリックイベントリスナーがあり、プレイヤーA（X）が最初の手を打つことができます。
  • コンピューターのターンはランダムなセル選択ロジックでシミュレートされ、カスタムグリッドサイズ用に強化が必要です。
  • スタイリングには SCSS を使用し、開発中は複雑さよりも速度に重点を置きました。

テストアプローチ

手動テスト

  • プレイヤーAが手を終えた後にコンピューターが手を打つことを確認します。
  • ゲームが勝者発表バナーで終了することを検証します。
  • コンピューターによる自動的な手をテストします。

潜在的な単体テスト

  • プレイヤーAの後にコンピューターが手を打つか確認します。
  • ゲームが正しい勝者を表示することを検証します。
  • グリッドの初期化とユーザーインタラクションに関するエッジケースをテストします。

結論

私のプロジェクトを探検していただきありがとうございます！

このプロジェクトの完全なソースコードは GitHub で見つけることができ、貢献することもできます。一緒にクールなものを作りましょう！

Source:
https://dzone.com/articles/building-a-tic-tac-toe-game-using-react