React と Firebase を使用したリアルタイム マルチプレイヤー ゲームの構築: Gladiator Taunt Wars

簡介

在本深入指南中，我們將逐步使用 Firebase 和 React 建立即時多人遊戲，並使用 Gladiator Taunt Wars 中的詳細範例。在這種遊戲模式中，玩家進行策略性的嘲諷決鬥，輪流選擇和回應嘲諷，以減少對手的生命值（HP）。本文將涵蓋建立此類遊戲的各個方面，包括 Firebase 設定、匹配、遊戲狀態管理、動畫、即時更新和基於 ELO 的排行榜整合。最後，您將深入了解如何實現響應靈敏、引人入勝的即時多人遊戲體驗。

設定 Firebase 和專案初始化
Firebase 設定
使用 Firestore 和身份驗證初始化 Firebase，以進行即時資料處理和玩家驗證。這些將為儲存和管理比賽數據、玩家資訊和即時排行榜更新提供基礎。確保您設定 Firestore 規則來限制對比賽資料的訪問​​，僅允許經過身份驗證的玩家查看和更新​​相關資訊。

React 專案結構
將您的 React 專案組織成可重複使用的元件，這些元件將代表每個遊戲元素，例如配對系統、遊戲板、排行榜和聊天。依層次結構建構元件，以獲得清晰且可維護的架構。

遊戲的關鍵組件

1. 主選單和配對 MainMenu 元件向玩家提供選項，讓他們可以加入配對、查看統計資料或存取排行榜。配對元件有助於即時配對玩家，利用 Firestore 交易來保持一致性。

匹配邏輯
startSearching 函數透過將玩家新增至 Firestore 中的佇列來啟動配對過程。如果找到對手，則會建立新的比賽文檔，儲存雙方玩家的 ID 並初始化遊戲參數。

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

此功能使用 Firestore 交易來確保玩家不會出現雙重匹配，否則會破壞匹配系統。 Firebase 的 serverTimestamp 函數在這裡很有用，可以確保跨多個時區的時間戳一致。

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.

キャンバスを使用したレスポンシブ デザイン
CanvasComponent はビューポートに基づいてサイズを調整し、デバイス間でゲームの応答性を高めます。 React-konva ライブラリを使用すると、インタラクティブな要素の堅牢なレンダリングが可能になり、アニメーションを通じてプレーヤーに視覚的なフィードバックを提供できます。

エッジケースの処理
プレイヤーがゲーム中に接続を切断するシナリオを考えてみましょう。このために、マッチ データが更新され、放棄されたマッチ インスタンスが閉じられるようにするクリーンアップ関数を実装します。

まとめ
Firebase と React を使用すると、リアルタイムのユーザー アクションに適応する、ペースの速いマルチプレイヤー エクスペリエンスを作成できます。 Gladiator Taunt Wars の例では、リアルタイムの更新、安全なトランザクション、動的なアニメーションを統合して、魅力的で視覚的に魅力的なゲームを作成する方法を示しています。

結論

Gladiators Battle 用の Gladiator Taunt Wars の構築は、React、Firebase、没入型ゲーム メカニクスを組み合わせて Web ベースのゲームでローマのアリーナ戦闘の激しさを表現する、やりがいのある旅でした。 Firebase のリアルタイム Firestore データベース、安全な認証、堅牢なホスティング機能を活用することで、プレーヤーが戦略的な戦いで対決できる、シームレスでコミュニティ主導のエクスペリエンスを作成することができました。継続的なデプロイのために GitHub Actions を統合することで開発も合理化され、ゲームプレイとユーザー インタラクションの強化に集中できるようになりました。

Gladiator Taunt Wars の拡張を続ける中で、AI 主導の対戦相手や強化された試合戦略などの新機能の可能性に興奮しています。これにより、ゲームプレイ エクスペリエンスが深まり、それぞれの戦闘がさらに没入できるようになります。歴史的な戦略と現代のテクノロジーの組み合わせにより、プレイヤーは剣闘士の世界に参加するためのダイナミックな方法を提供します。

このシリーズの今後の記事では、リアルタイム データ フローの最適化、複雑なゲーム状態の管理、プレイヤー エンゲージメントを強化するための AI の活用など、Firebase を使用したインタラクティブなウェブ アプリケーションの作成に関する技術的な詳細について詳しく説明します。フロントエンド サービスとバックエンド サービスを橋渡しして応答性の高いリアルタイム マルチプレーヤー環境を作成するためのベスト プラクティスを検討します。

独自のインタラクティブ ゲームを開発している場合でも、Gladiators Battle の背後にある技術に興味がある場合でも、このシリーズは Firebase を使用した最新の Web アプリケーションの構築に関する貴重な洞察を提供します。私たちは古代の歴史と最先端のテクノロジーを融合し続け、今日のデジタル世界で剣闘士の戦いの興奮を再考します。

?さらに発見:

剣闘士の戦いを探索する: https://gladiatorsbattle.com でローマの世界に飛び込み、戦略と戦闘を体験してください
GitHub をチェックしてください: https://github.com/HanGPIErr/Gladiators-Battle-Documentation でコードベースと貢献をご覧ください。
LinkedIn でつながる: 私のプロジェクトの最新情報については、LinkedIn をフォローしてください https://www.linkedin.com/in/pierre-romain-lopez/
また、私の X アカウント: https://x.com/GladiatorsBT

以上がReact と Firebase を使用したリアルタイム マルチプレイヤー ゲームの構築: Gladiator Taunt Warsの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。