了解如何使用 React 建立多人國際象棋遊戲-js教程-PHP中文網

Learn how to build a multiplayer chess game with React

您好，歡迎光臨！ ??

今天我帶來了一個教程，指導您使用 SuperViz 建立多人國際象棋遊戲。多人遊戲需要玩家之間的即時同步和互動，這使其成為 SuperViz 功能的理想應用。

本教學將向您展示如何創建一個國際象棋遊戲，讓兩個玩家可以即時對戰，並看到對方的走法。

我們將示範如何使用react-chessboard庫設定棋盤，使用chess.js管理遊戲狀態，以及如何使用SuperViz同步玩家移動。這種設置允許多個參與者加入國際象棋遊戲、走棋並體驗無縫且互動的國際象棋遊戲環境。 讓我們開始吧！

先決條件

要學習本教學課程，您將需要一個 SuperViz 帳戶和一個開發者代幣。如果您已經擁有帳戶和開發者令牌，則可以繼續下一步。

建立一個帳戶

要建立帳戶，請前往 SuperViz 註冊並使用 Google 或電子郵件/密碼建立帳戶。請務必注意，使用電子郵件/密碼時，您將收到一個確認鏈接，您需要點擊該鏈接來驗證您的帳戶。

檢索開發者令牌

要使用 SDK，您需要提供開發者令牌，因為此令牌對於將 SDK 請求與您的帳戶關聯起來至關重要。您可以從儀表板檢索開發和生產 SuperViz 令牌。複製並保存開發者令牌，因為您在本教學的後續步驟中將需要它。

第 1 步：設定您的 React 應用程式

首先，您需要建立一個新的 React 項目，我們將在其中整合 SuperViz。

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. 實作App元件

開啟 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';

登入後複製

說明：

導入： 從 React、SuperViz SDK、react-chessboard、chess.js 和 UUID 導入必要的元件，用於管理狀態、初始化 SuperViz、渲染棋盤並產生唯一識別碼。

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. 建立應用程式元件

設定主 App 元件並初始化狀態變數。

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:

App.tsx
- Initializes the SuperViz environment.
- Sets up participant information and room details.
- Handles real-time synchronization for chess moves.
Chessboard
- Displays the chessboard and manages piece movements.
- Integrates real-time communication to synchronize moves between players.
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.