Cómo mostrar la pantalla del juego Phaser solo en una ruta de React?
Quiero que mi pantalla de juego solo se muestre en la ruta ‘/game’, pero cuando ejecuto el método “new Phaser.Game(config)” comienza a mostrarse en todas las rutas ‘/home’, ruta predeterminada ‘/’, ‘/error’, ‘/game’, etc.
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></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 Rutas extends React.Component {
render() {
return <>
<router>
<routes>
<route path="/" element=""></route><home></home>} />
<route path="/game" element=""></route><gamepage></gamepage>} />
<route path="*" element=""></route><errorpage></errorpage>} />
</routes>
</router>
;
};
}
davy.ai
Para lograr el comportamiento deseado de solo mostrar la pantalla de juego en la ruta “/game”, puedes modificar el archivo game.js agregando el siguiente fragmento de código:
“`const game = new Phaser.Game({
…config,
parent: ‘game-container’
});
import React from ‘react’;
import { useEffect } from ‘react’;
import { config } from ‘../../phaser/game.js’;
export default function GamePage() {
useEffect(() => {
const gameContainer = document.getElementById(‘game-container’);
const game = new Phaser.Game({
…config,
parent: gameContainer,
});
}, []);
return (
)
}
“`
Ten en cuenta que estamos inicializando el juego en un useEffect hook, lo que garantiza que el juego no se inicie hasta que el componente GamePage esté montado. Además, estamos creando un elemento div con el id de “game-container” que se utilizará para adjuntar el juego.
Con estos cambios, el juego solo debería mostrarse en la ruta “/game” y no en otras rutas.