如何仅在 Route React 中显示 Phaser 游戏屏幕？

Posted 2023-03-15

【中文标题】如何仅在 Route React 中显示 Phaser 游戏屏幕？

【英文标题】：How to display the Phaser Game Screen only in a Route React?

【发布时间】：2021-12-30 12:55:04

【问题描述】：

我希望我的游戏屏幕只显示在“/game”路线中，但是当我使用“new Phaser.Game(config)”方法启动时，他开始在每条路线“/home”中显示，默认死记硬背“ /'、'/error'、'/game'等

game.js

import Phaser from 'phaser';
import LoadScene from './scenes/LoadScene.js';
import MenuScene from './scenes/MenuScene.js';

export const config = 
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: [ MenuScene, LoadScene]
;

const game = new Phaser.Game(config);

gamepage.js

import config from '../../phaser/game.js';
import React from 'react';

export default class GamePage extends React.Component 
    render() 
        return <>
            <Game />
        </>;
    

routes.js

import React from 'react';
import  BrowserRouter as Router, Route, Routes  from "react-router-dom";
import ErrorPage from '../pages/error/index.js';
import Home from '../pages/home/index.js';
import GamePage from '../pages/game/index.js';

export default class Rotas extends React.Component 
    render() 
        return <>
            <Router>
                <Routes>
                    <Route path="/" element=<Home /> />
                    <Route path="/game" elememnt=<GamePage /> />
                    <Route path="*" element=<ErrorPage /> />
                </Routes>
            </Router>
        </>
    ;

【参考方案1】：

new Phaser.Game(config); 中的config 对象接受parent 选项，该选项指定将包含游戏画布的元素。如果是undefined，那么它将包含在文档正文中（您的案例）。

您可以指定null，使其不包含在任何地方，并且您负责将其添加到 DOM。

有关可用选项，请参阅 https://newdocs.phaser.io/docs/3.55.2/Phaser.Types.Core.GameConfig#GameConfig。

你也可以看看How to integrate Phaser into React，因为他们使用了这种方法

【讨论】：

谢谢，另外，我必须将我的配置游戏变量添加到 Class GamePage，在那里我的配置可以找到父路径，我在我的 Routes 文件上写了“elememnt”而不是“element”。