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

Building a Real-Time Multiplayer Game with React and Firebase: Gladiator Taunt Wars

はじめに

この詳細なガイドでは、Gladiator Taunt Wars の詳細な例を使用して、Firebase と React を使用してリアルタイムマルチプレイヤーゲームを構築する手順を説明します。このゲームモードでは、プレイヤーは戦略的な挑発決闘に参加し、交代で挑発を選択してそれに応答し、相手のヘルスポイント (HP) を減らします。この記事では、Firebase のセットアップ、マッチメイキング、ゲーム状態管理、アニメーション、リアルタイム更新、ELO ベースのリーダーボード統合など、そのようなゲームの構築に関するあらゆる側面について説明します。最後には、応答性が高く魅力的なリアルタイムマルチプレイヤーエクスペリエンスを実装する方法をしっかりと理解できるようになります。

Firebase のセットアップとプロジェクトの初期化
Firebase のセットアップ
リアルタイムのデータ処理とプレーヤー検証のために、Firestore と認証を使用して Firebase を初期化します。これらは、試合データ、プレーヤー情報、リアルタイムのリーダーボード更新を保存および管理するためのバックボーンを提供します。 Firestore ルールを設定して試合データへのアクセスを制限し、認証されたプレーヤーのみが関連情報の表示と更新を許可できるようにしてください。

React プロジェクトの構造
React プロジェクトを、マッチメイキングシステム、ゲームボード、リーダーボード、チャットなどの各ゲーム要素を表す再利用可能なコンポーネントに編成します。コンポーネントを階層的に構造化して、明確で保守可能なアーキテクチャを実現します。

ゲームの主要コンポーネント

メインメニューとマッチメイキング 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 関数は、複数のタイムゾーンにわたって一貫したタイムスタンプを確保するために役立ちます。

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 を「応答」に切り替え、対戦相手に応答を選択するよう警告します。

プレイヤーのアクションと挑発の選択アクション選択コンポーネントこのコンポーネントは、利用可能な挑発を表示し、選択プロセスを処理します。プレイヤーは挑発または応答を選択します。これらは 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,
  });
};

ログイン後にコピー

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

ログイン後にコピー

このように攻撃をシミュレートすることで、各挑発や反応の威力と結果を視覚的に示し、より没入型のエクスペリエンスを作り出します。

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 に基づいて条件付きでレンダリングされ、送信メッセージと受信メッセージを個別のスタイルで区別します。

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 サイトの他の関連記事を参照してください。