It is a custom HTML element that can encapsulate styles and functionality, and can be reused.
In this documentation we are going to focus solely on how to make web components for projects created with Div GO,
there is a lot of information on the Internet that explains it in more detail.
Click on the different screens to get focus and gain keyboard control.
Aside from these examples, the Div GO logo at the top is also a web component, you can inspect the code on this
page to see how they were added.
Creating the web component:
Once you create the package, unzip the file and look at the index.html code that it generated. We won't need
this file, we'll just copy the line where the DivGO.app.start(); method is called.
Create a js file with the name you will give to the custom element, for example: divgo-mygame.js, and copy the
following code, customizing the indicated parts:
Add the custom element in the html:
In the html you only need to add the custom element, in this example we have used divgo-mygame, so it would be just
including <divgo-mygame></divgo-mygame> in the html and the following
script to import:
Notice: check that the routes for loading resources are correct, the routes returned when packaging work for
the project that has been packaged, but when adding the web component they will most likely be affected and
you should change them so that it does not give a loading error, remember to modify them in the fpg.dat and
in the game script in the load_fpg(), load_sound(), load_image()... and in the loading values.
Methods for controlling execution:
These are the methods to initialize, pause, resume and stop the execution of the project:
program: name of the initial program, it must be a string
element: where the project execution will be displayed within Shadow DOM
debug: the default value is false and is used to send information to the IDE, but it also
controls keyboard input; with a value of true it does not block the focus of the rest of the
elements of the web