Erfahren Sie, wie Sie mit React ein Multiplayer-Schachspiel erstellen

Hallo und herzlich willkommen! ??

Heute bringe ich ein Tutorial, das Sie durch die Erstellung eines Multiplayer-Schachspiels mit SuperViz führt. Multiplayer-Spiele erfordern Echtzeit-Synchronisation und Interaktion zwischen Spielern, was sie zu idealen Anwendungen für die Fähigkeiten von SuperViz macht.

Dieses Tutorial zeigt Ihnen, wie Sie ein Schachspiel erstellen, bei dem zwei Spieler in Echtzeit gegeneinander spielen und dabei die Bewegungen des anderen sehen können, während sie stattfinden.

Wir zeigen, wie man mithilfe der React-Chessboard-Bibliothek ein Schachbrett einrichtet, den Spielstatus mit chess.js verwaltet und Spielerbewegungen mit SuperViz synchronisiert. Dieses Setup ermöglicht es mehreren Teilnehmern, an einem Schachspiel teilzunehmen, Züge auszuführen und eine nahtlose und interaktive Schachspielumgebung zu erleben. Lasst uns anfangen!

---

Voraussetzung

Um diesem Tutorial folgen zu können, benötigen Sie ein SuperViz-Konto und ein Entwickler-Token. Wenn Sie bereits über ein Konto und ein Entwickler-Token verfügen, können Sie mit dem nächsten Schritt fortfahren.

Ein Konto erstellen

Um ein Konto zu erstellen, gehen Sie zur SuperViz-Registrierung und erstellen Sie ein Konto entweder mit Google oder einer E-Mail-Adresse/einem Passwort. Bitte beachten Sie, dass Sie bei Verwendung einer E-Mail-Adresse/eines Passworts einen Bestätigungslink erhalten, auf den Sie klicken müssen, um Ihr Konto zu bestätigen.

Abrufen eines Entwickler-Tokens

Um das SDK verwenden zu können, müssen Sie ein Entwickler-Token bereitstellen, da dieses Token für die Verknüpfung von SDK-Anfragen mit Ihrem Konto unerlässlich ist. Sie können sowohl Entwicklungs- als auch Produktions-SuperViz-Tokens über das Dashboard abrufen. Kopieren und speichern Sie das Entwickler-Token, da Sie es in den nächsten Schritten dieses Tutorials benötigen.

---

Schritt 1: Richten Sie Ihre React-Anwendung ein

Zu Beginn müssen Sie ein neues React-Projekt einrichten, in das wir SuperViz integrieren.

1. Erstellen Sie ein neues Reaktionsprojekt

Erstellen Sie zunächst eine neue React-Anwendung mit Create React App with TypeScript.

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

2. Installieren Sie die erforderlichen Bibliotheken

Als nächstes installieren Sie die notwendigen Bibliotheken für unser Projekt:

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

• @superviz/sdk: SDK zur Integration von Funktionen für die Zusammenarbeit in Echtzeit, einschließlich Synchronisierung.
• react-chessboard: Eine Bibliothek zum Rendern eines Schachbretts in React-Anwendungen.
• chess.js: Eine Bibliothek zur Verwaltung der Logik und Regeln von Schachspielen.
• uuid: Eine Bibliothek zum Generieren eindeutiger Identifikatoren, nützlich zum Erstellen eindeutiger Teilnehmer-IDs.

3. Rückenwind konfigurieren

In diesem Tutorial verwenden wir das CSS-Framework Tailwind. Installieren Sie zunächst das Rückenwindpaket.

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

Wir müssen dann den Vorlagenpfad konfigurieren. Öffnen Sie tailwind.config.js im Stammverzeichnis des Projekts und fügen Sie den folgenden Code ein.

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

}

Dann müssen wir die Tailwind-Anweisungen zur globalen CSS-Datei hinzufügen. (src/index.css)

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

4. Umgebungsvariablen einrichten

Erstellen Sie eine .env-Datei in Ihrem Projektstammverzeichnis und fügen Sie Ihren SuperViz-Entwicklerschlüssel hinzu. Dieser Schlüssel wird zur Authentifizierung Ihrer Anwendung bei SuperViz-Diensten verwendet.

VITE_SUPERVIZ_API_KEY=YOUR_SUPERVIZ_DEVELOPER_KEY

---

Schritt 2: Implementieren Sie die Hauptanwendung

In diesem Schritt implementieren wir die Hauptanwendungslogik, um SuperViz zu initialisieren und Schachzüge in Echtzeit zu verarbeiten.

1. Implementieren Sie die App-Komponente

Öffnen Sie src/App.tsx und richten Sie die Hauptanwendungskomponente mit SuperViz ein, um die kollaborative Umgebung zu verwalten.

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

Erklärung:

• Importe: Importieren Sie die erforderlichen Komponenten aus React, SuperViz SDK, React-Chessboard, chess.js und UUID, um den Status zu verwalten, SuperViz zu initialisieren, das Schachbrett zu rendern und eindeutige Bezeichner zu generieren.

2. Definieren Sie Konstanten

Konstanten für den API-Schlüssel, die Raum-ID und die Spieler-ID definieren.

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

Erklärung:

• apiKey: Ruft den SuperViz-API-Schlüssel aus Umgebungsvariablen ab.
• ROOM_ID: Definiert die Raum-ID für die SuperViz-Sitzung.
• PLAYER_ID: Erzeugt mithilfe der UUID-Bibliothek eine eindeutige Spieler-ID.

3. Definieren Sie den Schachnachrichtentyp

Erstellen Sie einen Typ für die Verarbeitung von Schachzugnachrichten.

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

Erklärung:

• ChessMessageUpdate: Erweitert die RealtimeMessage um die Quell- und Zielfelder für einen Schachzug.

4. Erstellen Sie die App-Komponente

Richten Sie die Haupt-App-Komponente ein und initialisieren Sie Statusvariablen.

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

Erklärung:

• 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. Testen Sie die Anwendung

• Schachzüge in Echtzeit: Öffnen Sie die Anwendung in mehreren Browserfenstern oder Tabs, um mehrere Teilnehmer zu simulieren und zu überprüfen, ob die Züge eines Spielers in Echtzeit für andere wiedergegeben werden.
• Kollaborative Interaktion: Testen Sie die Reaktionsfähigkeit der Anwendung, indem Sie Bewegungen ausführen und beobachten, wie sich der Spielstatus für alle Teilnehmer aktualisiert.

---

Zusammenfassung

In diesem Tutorial haben wir ein Multiplayer-Schachspiel mit SuperViz für die Echtzeitsynchronisierung erstellt. Wir haben eine React-Anwendung für die Handhabung von Schachzügen konfiguriert, sodass mehrere Spieler nahtlos auf einem gemeinsamen Schachbrett zusammenarbeiten können. Dieses Setup kann erweitert und angepasst werden, um es an verschiedene Szenarien anzupassen, in denen Spielinteraktion erforderlich ist.

Für weitere Details können Sie sich gerne den vollständigen Code und weitere Beispiele im GitHub-Repository ansehen.

Das obige ist der detaillierte Inhalt vonErfahren Sie, wie Sie mit React ein Multiplayer-Schachspiel erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!