es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

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>
        ;
    };
}
Tags:  , ,

Answer

  1. Avatar for 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’
    });


    Este código adjuntará el juego a un contenedor específico con un id de "game-container". Debes asegurarte de que este contenedor exista en tu componente GamePage. Por ejemplo:

    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.

Comments are closed.