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

Question

我希望我的游戏画面只显示在'/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>
        </>
    };
}

Answer 1

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

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

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

您也可以看看他们使用那种方法

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

How to display the Phaser Game Screen only in a Route React?

javascript

reactjs

phaser-framework