Créer un jeu multijoueur en temps réel avec React et Firebase : Gladiator Taunt Wars

Présentation

Dans ce guide détaillé, nous expliquerons la création d'un jeu multijoueur en temps réel à l'aide de Firebase et React, avec un exemple détaillé de Gladiator Taunt Wars. Dans ce mode de jeu, les joueurs s’engagent dans des duels de provocations stratégiques, sélectionnant et répondant à tour de rôle aux provocations pour réduire les points de vie (HP) de leur adversaire. Cet article couvrira tous les aspects de la création d'un tel jeu, y compris la configuration de Firebase, le matchmaking, la gestion de l'état du jeu, les animations, les mises à jour en temps réel et l'intégration du classement basé sur ELO. À la fin, vous acquerrez une solide compréhension de la façon de mettre en œuvre une expérience multijoueur en temps réel réactive, engageante.

Configuration de Firebase et initialisation du projet
Configuration de Firebase
Initialisez Firebase avec Firestore et l'authentification pour le traitement des données en temps réel et la vérification des joueurs. Ceux-ci constitueront l’épine dorsale du stockage et de la gestion des données de match, des informations sur les joueurs et des mises à jour du classement en temps réel. Assurez-vous de configurer des règles Firestore pour restreindre l'accès aux données de match, permettant uniquement aux joueurs authentifiés d'afficher et de mettre à jour les informations pertinentes.

Structure du projet React
Organisez votre projet React en composants réutilisables qui représenteront chaque élément du jeu, tels que le système de mise en relation, le plateau de jeu, le classement et le chat. Structurez les composants de manière hiérarchique pour une architecture claire et maintenable.

Composants clés du jeu

1. Menu principal et matchmaking Le composant MainMenu présente des options aux joueurs, leur permettant de rejoindre le matchmaking, d'afficher les statistiques ou d'accéder au classement. Le composant Matchmaking facilite le jumelage des joueurs en temps réel, en tirant parti des transactions Firestore pour plus de cohérence.

Logique de mise en relation
La fonction startSearching lance le processus de mise en relation en ajoutant le joueur à une file d'attente dans Firestore. Si un adversaire est trouvé, un nouveau document de match est créé, stockant les identifiants des deux joueurs et initialisant les paramètres de jeu.

const startSearching = async () => {
  const user = auth.currentUser;
  if (user && db) {
    try {
      const matchmakingRef = collection(db, 'tauntWars_matchmaking');
      const userDocRef = doc(matchmakingRef, user.uid);
      await runTransaction(db, async (transaction) => {
        const userDoc = await transaction.get(userDocRef);
        if (!userDoc.exists()) {
          transaction.set(userDocRef, { userId: user.uid, status: 'waiting', timestamp: serverTimestamp() });
        } else {
          transaction.update(userDocRef, { status: 'waiting', timestamp: serverTimestamp() });
        }

        const q = query(matchmakingRef, where('status', '==', 'waiting'));
        const waitingPlayers = await getDocs(q);
        if (waitingPlayers.size > 1) {
          // Pairing logic
        }
      });
    } catch (error) {
      setIsSearching(false);
    }
  }
};

La fonction utilise les transactions Firestore pour garantir qu'un joueur ne soit pas en double correspondance, ce qui perturberait le système de matchmaking. La fonction serverTimestamp de Firebase est utile ici pour garantir des horodatages cohérents sur plusieurs fuseaux horaires.

1. Real-Time Game State on the GameBoard Component Listening to Game State Changes The GameBoard component listens for changes in the tauntWars_matches collection. When a player selects a taunt or responds, the change is immediately reflected in Firestore, triggering a re-render for both players.

useEffect(() => {
  const matchRef = doc(db, 'tauntWars_matches', matchId);
  const unsubscribe = onSnapshot(matchRef, (docSnapshot) => {
    if (docSnapshot.exists()) {
      setMatchData(docSnapshot.data());
      if (docSnapshot.data().currentTurn === 'response') {
        setResponses(getAvailableResponses(docSnapshot.data().selectedTaunt));
      }
    }
  });
  return () => unsubscribe();
}, [matchId]);

Handling Game Phases
Players alternate turns, each choosing a taunt or response. The currentTurn attribute indicates which action phase the game is in. Each action is updated in Firestore, triggering real-time synchronization across both clients. For instance, a player selecting a taunt switches currentTurn to “response,” alerting the opponent to choose a response.

1. Player Actions and Taunt Selection ActionSelection Component This component displays available taunts and handles the selection process. Players select a taunt or response, which is stored in Firestore and triggers the next phase.

const handleTauntSelection = async (taunt) => {
  const otherPlayer = currentPlayer === matchData.player1 ? matchData.player2 : matchData.player1;
  await updateDoc(doc(db, 'tauntWars_matches', matchId), {
    currentTurn: 'response',
    turn: otherPlayer,
    selectedTaunt: taunt.id,
  });
};

The Timer component restricts the duration of each turn. This timeout function maintains a steady game flow and penalizes players who fail to act in time, reducing their HP.

const Timer = ({ isPlayerTurn, onTimeUp }) => {
  const [timeLeft, setTimeLeft] = useState(30);
  useEffect(() => {
    if (isPlayerTurn) {
      const interval = setInterval(() => {
        setTimeLeft(prev => {
          if (prev <= 1) {
            clearInterval(interval);
            onTimeUp();
            return 0;
          }
          return prev - 1;
        });
      }, 1000);
      return () => clearInterval(interval);
    }
  }, [isPlayerTurn, onTimeUp]);
};

1. Animations with Konva for Health and Attacks CanvasComponent: Uses react-konva to animate health changes and attacks. The health bars visually represent the damage taken or inflicted based on taunts, enhancing engagement.

const animateAttack = useCallback((attacker, defender) => {
  const targetX = attacker === 'player1' ? player1Pos.x + 50 : player2Pos.x - 50;
  const attackerRef = attacker === 'player1' ? player1Ref : player2Ref;
  attackerRef.current.to({
    x: targetX,
    duration: 0.2,
    onFinish: () => attackerRef.current.to({ x: player1Pos.x, duration: 0.2 })
  });
});

By simulating attacks in this way, we visually indicate the power and result of each taunt or response, creating a more immersive experience.

1. Real-Time Chat with ChatBox The ChatBox component is a real-time chat that displays taunt and response messages. This chat interface gives players feedback and context, creating an interactive experience.

const ChatBox = ({ matchId }) => {
  const [messages, setMessages] = useState([]);
  useEffect(() => {
    const chatRef = collection(db, 'tauntWars_matches', matchId, 'chat');
    const unsubscribe = onSnapshot(chatRef, (snapshot) => {
      setMessages(snapshot.docs.map((doc) => doc.data()));
    });
    return () => unsubscribe();
  }, [matchId]);
};

Each message is rendered conditionally based on the user’s ID, differentiating sent and received messages with distinct styling.

1. Leaderboard with ELO Rankings The EloLeaderboard component sorts players based on their ELO rating. Each match updates player ratings in Firestore, which is fetched and displayed in real-time.

const EloLeaderboard = () => {
  const [players, setPlayers] = useState([]);
  useEffect(() => {
    const q = query(collection(db, 'users'), orderBy('tauntWars.elo', 'desc'), limit(100));
    const unsubscribe = onSnapshot(q, (querySnapshot) => {
      setPlayers(querySnapshot.docs.map((doc, index) => ({
        rank: index + 1,
        username: doc.data().username,
        elo: doc.data().tauntWars.elo,
      })));
    });
    return () => unsubscribe();
  }, []);
};

The leaderboard ranks players based on their ELO, providing competitive motivation and a way for players to track their progress.

Technical Challenges and Best Practices
Consistency with Firestore Transactions
Using transactions ensures that simultaneous reads/writes to Firestore maintain data integrity, especially during matchmaking and scoring updates.

Optimizing Real-Time Listeners
Employ listener cleanup using unsubscribe() to prevent memory leaks. Also, limiting queries can help reduce the number of Firestore reads, optimizing costs and performance.

Conception adaptative avec Canvas
Le CanvasComponent ajuste sa taille en fonction de la fenêtre d'affichage, ce qui rend le jeu réactif sur tous les appareils. L'utilisation de la bibliothèque React-Konva permet un rendu robuste des éléments interactifs, donnant aux joueurs un retour visuel via des animations.

Gestion des cas extrêmes
Considérez des scénarios dans lesquels un joueur se déconnecte en cours de partie. Pour cela, implémentez une fonction de nettoyage qui garantit que les données de correspondance sont mises à jour et que toutes les instances de correspondance abandonnées sont fermées.

Conclusion
Avec Firebase et React, vous pouvez créer une expérience multijoueur rapide qui s'adapte aux actions des utilisateurs en temps réel. Les exemples de Gladiator Taunt Wars montrent comment intégrer des mises à jour en temps réel, des transactions sécurisées et des animations dynamiques pour produire un jeu engageant et visuellement attrayant.

Conclusion

Construire Gladiator Taunt Wars pour Gladiators Battle a été un voyage enrichissant, réunissant React, Firebase et des mécanismes de jeu immersifs pour capturer l'intensité des combats dans l'arène romaine dans un jeu en ligne. L'exploitation de la base de données Firestore en temps réel de Firebase, de l'authentification sécurisée et des capacités d'hébergement robustes nous a permis de créer une expérience transparente et communautaire où les joueurs peuvent s'affronter dans des batailles stratégiques. L'intégration de GitHub Actions pour un déploiement continu a également rationalisé le développement, nous permettant de nous concentrer sur l'amélioration du gameplay et de l'interaction utilisateur.

Alors que nous continuons à développer Gladiator Taunt Wars, nous sommes enthousiasmés par le potentiel de nouvelles fonctionnalités, notamment des adversaires pilotés par l'IA et des stratégies de match améliorées, qui approfondiront l'expérience de jeu et rendront chaque bataille encore plus immersive. La combinaison de la stratégie historique et de la technologie moderne offre aux joueurs un moyen dynamique de s'engager dans le monde des gladiateurs.

Les prochains articles de cette série aborderont les détails techniques de la création d'applications Web interactives avec Firebase, notamment l'optimisation des flux de données en temps réel, la gestion d'états de jeu complexes et l'exploitation de l'IA pour améliorer l'engagement des joueurs. Nous explorerons les meilleures pratiques pour relier les services front-end et back-end afin de créer un environnement multijoueur réactif et en temps réel.

Que vous développiez votre propre jeu interactif ou que vous soyez curieux de connaître la technologie derrière Gladiators Battle, cette série offre des informations précieuses sur la création d'applications Web modernes avec Firebase. Rejoignez-nous alors que nous continuons à fusionner l’histoire ancienne avec la technologie de pointe, réinventant l’excitation du combat de gladiateurs pour le monde numérique d’aujourd’hui.

? Découvrez-en davantage :

Explorez Gladiators Battle : plongez dans le monde romain et découvrez la stratégie et le combat sur https://gladiatorsbattle.com
Consultez notre GitHub : consultez notre base de code et nos contributions sur https://github.com/HanGPIErr/Gladiators-Battle-Documentation.
Connectez-vous sur LinkedIn : suivez sur LinkedIn pour les mises à jour sur mes projets https://www.linkedin.com/in/pierre-romain-lopez/
Aussi mon compte X : https://x.com/GladiatorsBT

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!