Apprenez à créer un jeu d'échecs multijoueur avec React

Bonjour et bienvenue ! ??

Aujourd'hui, j'apporte un tutoriel pour vous guider dans la création d'un jeu d'échecs multijoueur à l'aide de SuperViz. Les jeux multijoueurs nécessitent une synchronisation et une interaction en temps réel entre les joueurs, ce qui en fait des applications idéales pour les capacités de SuperViz.

Ce didacticiel vous montrera comment créer un jeu d'échecs dans lequel deux joueurs peuvent jouer l'un contre l'autre en temps réel, en voyant les mouvements de chacun au fur et à mesure qu'ils se produisent.

Nous montrerons comment configurer un échiquier à l'aide de la bibliothèque React-Chessboard, gérer l'état du jeu avec chess.js et synchroniser les mouvements des joueurs avec SuperViz. Cette configuration permet à plusieurs participants de rejoindre une partie d'échecs, d'effectuer des mouvements et de découvrir un environnement de jeu d'échecs transparent et interactif. Commençons !

---

Condition préalable

Pour suivre ce tutoriel, vous aurez besoin d'un compte SuperViz et d'un token de développeur. Si vous disposez déjà d'un compte et d'un token de développeur, vous pouvez passer à l'étape suivante.

Créer un compte

Pour créer un compte, accédez à l'inscription SuperViz et créez un compte en utilisant Google ou un e-mail/mot de passe. Il est important de noter que lorsque vous utilisez un e-mail/un mot de passe, vous recevrez un lien de confirmation sur lequel vous devrez cliquer pour vérifier votre compte.

Récupérer un jeton de développeur

Pour utiliser le SDK, vous devrez fournir un jeton de développeur, car ce jeton est essentiel pour associer les requêtes du SDK à votre compte. Vous pouvez récupérer les jetons SuperViz de développement et de production à partir du tableau de bord. Copiez et enregistrez le jeton de développeur, car vous en aurez besoin dans les prochaines étapes de ce didacticiel.

---

Étape 1 : Configurez votre application React

Pour commencer, vous devrez mettre en place un nouveau projet React dans lequel nous intégrerons SuperViz.

1. Créez un nouveau projet React

Tout d'abord, créez une nouvelle application React à l'aide de Create React App with TypeScript.

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

2. Installer les bibliothèques requises

Ensuite, installez les bibliothèques nécessaires à notre projet :

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

• @superviz/sdk : SDK pour intégrer des fonctionnalités de collaboration en temps réel, y compris la synchronisation.
• react-chessboard : Une bibliothèque pour le rendu d'un échiquier dans les applications React.
• chess.js : Une bibliothèque pour gérer la logique et les règles du jeu d'échecs.
• uuid : Une bibliothèque pour générer des identifiants uniques, utile pour créer des identifiants de participant uniques.

3. Configurez le vent arrière

Dans ce tutoriel, nous utiliserons le framework CSS Tailwind. Tout d’abord, installez le package tailwind.

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

Nous devons ensuite configurer le chemin du modèle. Ouvrez tailwind.config.js à la racine du projet et insérez le code suivant.

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

}

Ensuite, nous devons ajouter les directives tailwind au fichier CSS global. (src/index.css)

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

4. Configurer les variables d'environnement

Créez un fichier .env à la racine de votre projet et ajoutez votre clé de développeur SuperViz. Cette clé sera utilisée pour authentifier votre application auprès des services SuperViz.

VITE_SUPERVIZ_API_KEY=YOUR_SUPERVIZ_DEVELOPER_KEY

---

Étape 2 : implémenter l'application principale

Dans cette étape, nous implémenterons la logique principale de l'application pour initialiser SuperViz et gérer les mouvements d'échecs en temps réel.

1. Implémentez le composant d'application

Ouvrez src/App.tsx et configurez le composant principal de l'application à l'aide de SuperViz pour gérer l'environnement collaboratif.

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

Explication :

• Importations : Importez les composants nécessaires depuis React, SuperViz SDK, React-chessboard, chess.js et UUID pour gérer l'état, initialiser SuperViz, rendre l'échiquier et générer des identifiants uniques.

2. Définir les constantes

Définissez des constantes pour la clé API, l'ID de la salle et l'ID du joueur.

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

Explication :

• apiKey : Récupère la clé API SuperViz à partir des variables d'environnement.
• ROOM_ID : Définit l'ID de la salle pour la session SuperViz.
• PLAYER_ID : Génère un identifiant de joueur unique à l'aide de la bibliothèque uuid.

3. Définir le type de message d'échecs

Créez un type pour gérer les messages de mouvements d'échecs.

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

Explication :

• ChessMessageUpdate : Étend le RealtimeMessage pour inclure les cases source et cible pour un coup d'échecs.

4. Créez le composant d'application

Configurez le composant principal de l'application et initialisez les variables d'état.

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

Explication :

• 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. Uji Aplikasi

• Pergerakan Catur Masa Nyata: Buka aplikasi dalam berbilang tetingkap atau tab penyemak imbas untuk mensimulasikan berbilang peserta dan sahkan bahawa gerakan yang dibuat oleh seorang pemain ditunjukkan dalam masa nyata untuk orang lain.
• Interaksi Kolaboratif: Uji responsif aplikasi dengan membuat pergerakan dan memerhatikan bagaimana keadaan permainan dikemas kini untuk semua peserta.

---

Ringkasan

Dalam tutorial ini, kami membina permainan catur berbilang pemain menggunakan SuperViz untuk penyegerakan masa nyata. Kami mengkonfigurasi aplikasi React untuk mengendalikan pergerakan catur, membolehkan berbilang pemain bekerjasama dengan lancar pada papan catur yang dikongsi. Persediaan ini boleh dilanjutkan dan disesuaikan agar sesuai dengan pelbagai senario yang memerlukan interaksi permainan.

Jangan ragu untuk menerokai kod penuh dan contoh lanjut dalam repositori GitHub untuk mendapatkan butiran lanjut.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!