React を使用してマルチプレイヤー チェス ゲームを構築する方法を学ぶ

こんにちは、ようこそ! ??

今日は、SuperViz を使用してマルチプレイヤー チェス ゲームを構築する方法を説明するチュートリアルをお届けします。マルチプレイヤー ゲームはリアルタイムの同期とプレイヤー間の対話を必要とします。そのため、SuperViz の機能にとって理想的なアプリケーションとなります。

このチュートリアルでは、2 人のプレーヤーがリアルタイムで対戦し、互いの動きをリアルタイムで確認できるチェス ゲームの作成方法を説明します。

react-chessboard ライブラリを使用してチェス盤をセットアップし、chess.js でゲーム状態を管理し、SuperViz でプレイヤーの動きを同期する方法を示します。この設定により、複数の参加者がチェス ゲームに参加し、手を動かし、シームレスでインタラクティブなチェス ゲーム環境を体験できるようになります。 始めましょう!

---

前提条件

このチュートリアルに従うには、SuperViz アカウントと開発者トークンが必要です。すでにアカウントと開発者トークンをお持ちの場合は、次のステップに進むことができます。

アカウントを作成する

アカウントを作成するには、SuperViz 登録に移動し、Google または電子メール/パスワードを使用してアカウントを作成します。メール/パスワードを使用する場合は、アカウントを確認するためにクリックする必要がある確認リンクを受け取ることに注意することが重要です。

開発者トークンの取得

SDK を使用するには、開発者トークンを提供する必要があります。このトークンは、SDK リクエストをアカウントに関連付けるために不可欠です。開発用と運用用の両方の SuperViz トークンをダッシュ​​ボードから取得できます。このチュートリアルの次のステップで必要になるため、開発者トークンをコピーして保存します。

---

ステップ 1: React アプリケーションをセットアップする

まず、SuperViz を統合する新しい React プロジェクトをセットアップする必要があります。

1. 新しい React プロジェクトを作成する

まず、Create React App with TypeScript を使用して新しい React アプリケーションを作成します。

npm create vite@latest chess-game -- --template react-ts
cd chess-game

2. 必要なライブラリをインストールする

次に、プロジェクトに必要なライブラリをインストールします。

npm install @superviz/sdk react-chessboard chess.js uuid

• @superviz/sdk: 同期を含むリアルタイム コラボレーション機能を統合するための SDK。
• react-chessboard: React アプリケーションでチェス盤をレンダリングするためのライブラリ。
• chess.js: チェスのゲームのロジックとルールを管理するためのライブラリです。
• uuid: 一意の参加者 ID の作成に役立つ一意の識別子を生成するライブラリ。

3.追い風の設定

このチュートリアルでは、Tailwind CSS フレームワークを使用します。まず、tailwind パッケージをインストールします。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

次に、テンプレートのパスを構成する必要があります。プロジェクトのルートにある tailwind.config.js を開き、次のコードを挿入します。

/** @type  {import('tailwindcss').Config} */
export  default  {
content:  [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme:  {
extend:  {},
},
plugins:  [],

}

次に、tailwind ディレクティブをグローバル CSS ファイルに追加する必要があります。 (src/index.css)

@tailwind base;
@tailwind components;
@tailwind utilities;

4. 環境変数の設定

プロジェクト ルートに .env ファイルを作成し、SuperViz 開発者キーを追加します。このキーは、SuperViz サービスでアプリケーションを認証するために使用されます。

VITE_SUPERVIZ_API_KEY=YOUR_SUPERVIZ_DEVELOPER_KEY

---

ステップ 2: メイン アプリケーションを実装する

このステップでは、SuperViz を初期化し、リアルタイムのチェスの手を処理するためのメイン アプリケーション ロジックを実装します。

1. アプリコンポーネントを実装する

src/App.tsx を開き、SuperViz を使用してメイン アプリケーション コンポーネントをセットアップし、共同作業環境を管理します。

import  { v4 as generateId }  from  'uuid';
import  { useCallback, useEffect, useRef, useState }  from  "react";
import SuperVizRoom,  { Realtime, RealtimeComponentEvent, RealtimeMessage, WhoIsOnline }  from  '@superviz/sdk';
import  { Chessboard }  from  "react-chessboard";
import  { Chess, Square }  from  'chess.js';

説明:

• インポート: 状態の管理、SuperViz の初期化、チェス盤のレンダリング、一意の識別子の生成に必要なコンポーネントを React、SuperViz SDK、react-chessboard、chess.js、および UUID からインポートします。

2. 定数の定義

API キー、ルーム ID、およびプレーヤー ID の定数を定義します。

const apiKey =  import.meta.env.VITE_SUPERVIZ_API_KEY  as  string;
const  ROOM_ID  =  'chess-game';
const  PLAYER_ID  =  generateId();

説明:

• apiKey: 環境変数から SuperViz API キーを取得します。
• ROOM_ID: SuperViz セッションのルーム ID を定義します。
• PLAYER_ID: uuid ライブラリを使用して一意のプレーヤー ID を生成します。

3. チェスのメッセージ タイプを定義する

チェスの移動メッセージを処理するためのタイプを作成します。

type  ChessMessageUpdate  = RealtimeMessage &  {
 data:  {
     sourceSquare: Square;
     targetSquare: Square;
  };
};

説明:

• ChessMessageUpdate: RealtimeMessage を拡張して、チェスの動きのソース マスとターゲット マスを含めます。

4. アプリコンポーネントを作成する

メインのアプリコンポーネントを設定し、状態変数を初期化します。

export  default  function  App()  {
    const  [initialized, setInitialized]  =  useState(false);
    const  [gameState, setGameState]  =  useState<Chess>(new  Chess());
    const  [gameFen, setGameFen]  =  useState<string>(gameState.fen());

    const channel =  useRef<any  |  null>(null);

説明:

• initialized: A state variable to track whether the SuperViz environment has been set up.
• gameState: A state variable to manage the chess game state using the chess.js library.
• gameFen: A state variable to store the FEN (Forsyth-Edwards Notation) string representing the current game position.
• channel: A ref to store the real-time communication channel.

5. Initialize SuperViz and Real-Time Components

Create an initialize function to set up the SuperViz environment and configure real-time synchronization.

const initialize = useCallback(async () => {
    if (initialized) return; 
    const superviz = await SuperVizRoom(apiKey, { 
    roomId: ROOM_ID, 
    participant: { 
        id: PLAYER_ID, 
        name: 'player-name', 
    }, 
    group: { 
        id: 'chess-game', 
        name: 'chess-game', 
    } 
}); 

const realtime = new Realtime(); 
const whoIsOnline = new WhoIsOnline(); 

superviz.addComponent(realtime); 
superviz.addComponent(whoIsOnline); 

setInitialized(true); 

realtime.subscribe(RealtimeComponentEvent.REALTIME_STATE_CHANGED, () => { 
    channel.current = realtime.connect('move-topic'); 
    channel.current.subscribe('new-move', handleRealtimeMessage); 
    }); 
}, [handleRealtimeMessage, initialized]);

Explanation:

• initialize: An asynchronous function that initializes the SuperViz room and checks if it's already initialized to prevent duplicate setups.
• SuperVizRoom: Configures the room, participant, and group details for the session.
• Realtime Subscription: Connects to the move-topic channel and listens for new moves, updating the local state accordingly.

6. Handle Chess Moves

Create a function to handle chess moves and update the game state.

const makeMove = useCallback((sourceSquare: Square, targetSquare: Square) => { 
    try { 
        const gameCopy = gameState; 
        gameCopy.move({ from: sourceSquare, to: targetSquare, promotion: 'q' }); 

        setGameState(gameCopy); 
        setGameFen(gameCopy.fen()); 

        return true; 
    } catch (error) { 
        console.log('Invalid Move', error); 
        return false; 
    }
}, [gameState]);

Explanation:

• makeMove: Attempts to make a move on the chessboard, updating the game state and FEN string if the move is valid.
• Promotion: Automatically promotes a pawn to a queen if it reaches the last rank.

7. Handle Piece Drop

Create a function to handle piece drop events on the chessboard.

const onPieceDrop = (sourceSquare: Square, targetSquare: Square) => { 
    const result = makeMove(sourceSquare, targetSquare); 

    if (result) { 
        channel.current.publish('new-move', { 
            sourceSquare, 
            targetSquare, 
        });
    } 
     return result; 
};

Explanation:

• onPieceDrop: Handles the logic for when a piece is dropped on a new square, making the move and publishing it to the SuperViz channel if valid.

8. Handle Real-Time Messages

Create a function to handle incoming real-time messages for moves made by other players.

const handleRealtimeMessage =  useCallback((message: ChessMessageUpdate)  =>  {
  if  (message.participantId ===  PLAYER_ID)  return;

  const  { sourceSquare, targetSquare }  = message.data;
  makeMove(sourceSquare, targetSquare);
},  [makeMove]);

Explanation:

• handleRealtimeMessage: Listens for incoming move messages and updates the game state if the move was made by another participant.

9. Use Effect Hook for Initialization

Use the useEffect hook to trigger the initialize function on component mount.

useEffect(()  =>  {
  initialize();
},  [initialize]);

Explanation:

• useEffect: Calls the initialize function once when the component mounts, setting up the SuperViz environment and real-time synchronization.

10. Render the Application

Return the JSX structure for rendering the application, including the chessboard and collaboration features.

return ( 
    <div className='w-full h-full bg-gray-200 flex items-center justify-center flex-col'>
        <header className='w-full p-5 bg-purple-400 flex items-center justify-between'> 
            <h1 className='text-white text-2xl font-bold'>SuperViz Chess Game</h1> 
        </header> 
        <main className='w-full h-full flex items-center justify-center'> 
            <div className='w-[500px] h-[500px] shadow-sm border-2 border-gray-300 rounded-md'>
                <Chessboard position={gameFen} onPieceDrop={onPieceDrop} /> 
                <div className='w-[500px] h-[50px] bg-gray-300 flex items-center justify-center'> 
                    <p className='text-gray-800 text-2xl font-bold'>Turn: {gameState.turn() === 'b' ? 'Black' : 'White'}</p> 
                </div> 
            </div> 
        </main> 
    </div>
);

Explanation:

• Header: Displays the title of the application.
• Chessboard: Renders the chessboard using the Chessboard component, with gameFen as the position and onPieceDrop as the event handler for piece drops.
• Turn Indicator: Displays the current player's turn (Black or White).

---

Step 3: Understanding the Project Structure

Here's a quick overview of how the project structure supports a multiplayer chess game:

1. App.tsx
   • Initializes the SuperViz environment.
   • Sets up participant information and room details.
   • Handles real-time synchronization for chess moves.
2. Chessboard
   • Displays the chessboard and manages piece movements.
   • Integrates real-time communication to synchronize moves between players.
3. Chess Logic
   • Uses chess.js to manage game rules and validate moves.
   • Updates the game state and FEN string to reflect the current board position.

---

Step 4: Running the Application

1. Start the React Application

To run your application, use the following command in your project directory:

npm run dev

This command will start the development server and open your application in the default web browser. You can interact with the chessboard and see moves in real-time as other participants join the session.

2. アプリケーションをテストする

• リアルタイムのチェスの動き: 複数のブラウザ ウィンドウまたはタブでアプリケーションを開き、複数の参加者をシミュレートし、1 人のプレイヤーが行った手がリアルタイムで他のプレイヤーに反映されることを確認します。
• 共同インタラクション: 動きを出し、すべての参加者に対してゲームの状態がどのように更新されるかを観察することで、アプリケーションの応答性をテストします。

---

まとめ

このチュートリアルでは、リアルタイム同期に SuperViz を使用してマルチプレイヤー チェス ゲームを構築しました。チェスの手を処理するように React アプリケーションを構成し、複数のプレーヤーが共有チェス盤上でシームレスに共同作業できるようにしました。このセットアップは、ゲーム インタラクションが必要なさまざまなシナリオに合わせて拡張およびカスタマイズできます。

詳細については、GitHub リポジトリにある完全なコードとその他の例を自由に調べてください。

以上がReact を使用してマルチプレイヤー チェス ゲームを構築する方法を学ぶの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。