Div Games Online

Documentación: Uso de Div GO con componentes web : Div Games Online v2.08.5

¿Qué es un componente web? Ejemplos de componentes web Creación del componente web Añadir el elemento personalizado en el html Métodos para controlar la ejecución

¿Qué es un componente web?:

Es un elemento html personalizado que puede encapsular estilos y funcionalidades, y que puede ser reutilizado.

En esta documentación nos vamos a enfocar únicamente en cómo realizar web components para los proyectos creados con Div GO, hay mucha información por internet que lo explica con más detalle.

Un par de enlaces sobre web components:
MDN web docs : Web Components
Wikipedia : Componentes web

Ejemplos de componentes web:

Haz click sobre las distintas pantallas para obtener el foco y poder obtener control del teclado.
Aparte de estos ejemplos, el logotipo de Div GO de arriba también es un web component, puedes inspeccionar el código de esta página para ver como se han añadido.

Creación del componente web:

Una vez creas el empaquetado, descomprime el zip y mira el código del index.html que ha generado. Este archivo no lo vamos a necesitar, solo vamos a copiar la línea donde se llama al método DivGO.app.start();.

Crea un archivo js con el nombre que le pondrás al elemento personalizado, por ejemplo: divgo-mijuego.js, y copia el siguiente código, personalizando las partes indicadas:

Añadir el elemento personalizado en el html:

En el html ya solo necesitas añadir el elemento personalizado, en este ejemplo hemos usado divgo-mijuego, pues sería tan solo incluir <divgo-mijuego></divgo-mijuego> en el html y el siguiente script para importar:

Aviso: comprueba que las rutas para la carga de recursos sean correctas, las rutas que devuelve al empaquetar funcionan para el proyecto que se ha empaquetado, pero al añadir el componente web lo más probable es que se vean afectadas y debas cambiarlas para que no de error de carga, recuerda modificarlas en los fpg.dat y en el script del juego en los load_fpg(), load_sound(), load_image()... y en los valores de loading.

Métodos para controlar la ejecución:

Estos son los métodos para inicializar, pausar, reanudar y parar la ejecución del proyecto:
DivGO.app.start({ DivGO }, { app }, program, element, debug);
  • DivGO: clase principal de DivGO para encapsularlo en la ejecución
  • app: clase del proyecto para encapsularlo en la ejecución
  • program: nombre del programa inicial, tiene que ser un texto
  • element: donde se va a visualizar la ejecución del proyecto dentro de Shadow DOM
  • debug: el valor por defecto es false y sirve para enviar información al ide, pero también controla las entradas de teclado; con valor true no bloquea el foco del resto de elementos de la web
DivGO.app.pause();
DivGO.app.continue();
DivGO.app.stop();