了解如何使用 React 构建多人国际象棋游戏

Hello and welcome! ??

Today I bring a tutorial to guide you through building a multiplayer chess game using SuperViz. Multiplayer games require real-time synchronization and interaction between players, making them ideal applications for SuperViz's capabilities.

This tutorial will show you how to create a chess game where two players can play against each other in real-time, seeing each other's moves as they happen.

We'll demonstrate how to set up a chessboard using the react-chessboard library, manage the game state with chess.js, and synchronize player moves with SuperViz. This setup allows multiple participants to join a chess game, make moves, and experience a seamless and interactive chess game environment. Let's get started!

---

Prerequisite

To follow this tutorial, you will need a SuperViz account and a developer token. If you already have an account and a developer token, you can move on to the next step.

Create an Account

To create an account, go to SuperViz Registration and create an account using either Google or an email/password. It's important to note that when using an email/password, you will receive a confirmation link that you'll need to click to verify your account.

Retrieving a Developer Token

To use the SDK, you’ll need to provide a developer token, as this token is essential for associating SDK requests with your account. You can retrieve both development and production SuperViz tokens from the dashboard. Copy and save the developer token, as you will need it in the next steps of this tutorial.

---

Step 1: Set Up Your React Application

To begin, you'll need to set up a new React project where we will integrate SuperViz.

1. Create a New React Project

First, create a new React application using Create React App with TypeScript.

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

2. Install Required Libraries

Next, install the necessary libraries for our project:

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

• @superviz/sdk: SDK for integrating real-time collaboration features, including synchronization.
• react-chessboard: A library for rendering a chessboard in React applications.
• chess.js: A library for managing chess game logic and rules.
• uuid: A library for generating unique identifiers, useful for creating unique participant IDs.

3. Configure tailwind

In this tutorial, we'll use the Tailwind css framework. First, install the tailwind package.

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

We then need to configure the template path. Open tailwind.config.js in the root of the project and insert the following code.

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

}

Then we need to add the tailwind directives to the global CSS file. (src/index.css)

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

4. Set Up Environment Variables

Create a .env file in your project root and add your SuperViz developer key. This key will be used to authenticate your application with SuperViz services.

VITE_SUPERVIZ_API_KEY=YOUR_SUPERVIZ_DEVELOPER_KEY

---

Step 2: Implement the Main Application

In this step, we'll implement the main application logic to initialize SuperViz and handle real-time chess moves.

1. Implement the App Component

Open src/App.tsx and set up the main application component using SuperViz to manage the collaborative environment.

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

Explanation:

• Imports: Import necessary components from React, SuperViz SDK, react-chessboard, chess.js, and UUID for managing state, initializing SuperViz, rendering the chessboard, and generating unique identifiers.

2. Define Constants

Define constants for the API key, room ID, and player ID.

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

Explanation:

• apiKey: Retrieves the SuperViz API key from environment variables.
• ROOM_ID: Defines the room ID for the SuperViz session.
• PLAYER_ID: Generates a unique player ID using the uuid library.

3. Define Chess Message Type

Create a type for handling chess move messages.

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

Explanation:

• ChessMessageUpdate: Extends the RealtimeMessage to include the source and target squares for a chess move.

4. Create the App Component

Set up the main App component and initialize state variables.

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

Explanation:

• 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. 測試應用程式

• 即時國際象棋走棋： 在多個瀏覽器視窗或標籤中開啟應用程式以模擬多個參與者，並驗證一名玩家的走棋是否即時反映給其他玩家。
• 協作互動： 透過移動並觀察所有參與者的遊戲狀態如何更新來測試應用程式的回應能力。

---

概括

在本教程中，我們使用 SuperViz 建立了一個即時同步的多人國際象棋遊戲。我們配置了一個 React 應用程式來處理國際象棋的走棋，使多個玩家能夠在共享棋盤上無縫協作。此設置可以擴展和定制，以適應需要遊戲互動的各種場景。

請隨意探索 GitHub 儲存庫中的完整程式碼和更多範例以了解更多詳細資訊。

以上是了解如何使用 React 构建多人国际象棋游戏的详细内容。更多信息请关注PHP中文网其他相关文章！