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

はじめに

この詳細なガイドでは、Gladiator Taunt Wars の詳細な例を使用して、Firebase と React を使用してリアルタイム マルチプレイヤー ゲームを構築する手順を説明します。このゲーム モードでは、プレイヤーは戦略的な挑発決闘に参加し、交代で挑発を選択してそれに応答し、相手のヘルス ポイント (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. GameBoard コンポーネント上のリアルタイムのゲーム状態 ゲーム状態の変化を聞く GameBoard コンポーネントは、tauntWars_matches コレクション内の変更をリッスンします。プレイヤーが挑発を選択するか応答すると、その変更はただちに Firestore に反映され、両方のプレイヤーに対して再レンダリングがトリガーされます。

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

ゲームフェーズの処理
プレイヤーは交互にターンを行い、それぞれが挑発または応答を選択します。 currentTurn 属性は、ゲームがどのアクション フェーズにあるかを示します。各アクションは Firestore で更新され、両方のクライアント間のリアルタイム同期がトリガーされます。たとえば、挑発を選択したプレイヤーは currentTurn を「応答」に切り替え、対戦相手に応答を選択するよう警告します。

1. プレイヤーのアクションと挑発の選択 アクション選択コンポーネント このコンポーネントは、利用可能な挑発を表示し、選択プロセスを処理します。プレイヤーは挑発または応答を選択します。これらは Firestore に保存され、次のフェーズをトリガーします。

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

タイマー コンポーネントは、各ターンの持続時間を制限します。このタイムアウト機能は安定したゲーム フローを維持し、時間内に行動しなかったプレイヤーにペナルティを与え、HP を減らします。

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

1. Konva による健康と攻撃のアニメーション CanvasComponent: ヘルスの変化と攻撃をアニメーション化するために、react-konva を使用します。体力バーは挑発に基づいて受けたダメージまたは与えられたダメージを視覚的に表し、エンゲージメントを強化します。

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. ChatBox を使用したリアルタイム チャット ChatBox コンポーネントは、挑発メッセージと応答メッセージを表示するリアルタイム チャットです。このチャット インターフェイスはプレーヤーにフィードバックとコンテキストを提供し、インタラクティブなエクスペリエンスを作成します。

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

各メッセージはユーザーの ID に基づいて条件付きでレンダリングされ、送信メッセージと受信メッセージを個別のスタイルで区別します。

1. ELO ランキング付きのリーダーボード EloLeaderboard コンポーネントは、ELO レーティングに基づいてプレーヤーを並べ替えます。試合ごとに Firestore のプレーヤーの評価が更新され、リアルタイムで取得されて表示されます。

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

リーダーボードは ELO に基づいてプレイヤーをランク付けし、競争のモチベーションを提供し、プレイヤーが自分の進捗状況を追跡する方法を提供します。

技術的な課題とベストプラクティス
Firestore トランザクションとの整合性
トランザクションを使用すると、特にマッチメイキングやスコアの更新中に、Firestore への同時読み取り/書き込みによってデータの整合性が維持されます。

リアルタイム リスナーの最適化
メモリ リークを防ぐために、unsubscribe() を使用してリスナーのクリーンアップを採用します。また、クエリを制限すると、Firestore の読み取り数が減り、コストとパフォーマンスが最適化されます。

キャンバスを使用したレスポンシブ デザイン
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 サイトの他の関連記事を参照してください。