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.
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: 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