Div Games Online

Documentation: Using Div GO with Web Components : Div Games Online v2.08.5

What is a web component? Web Components Examples Creating the web component Add the custom element in the html Methods for controlling execution

What is a web component?:

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.

A couple of links about web components:
MDN web docs : Web Components
Wikipedia : Web Components

Web Components Examples:

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:
DivGO.app.start({ DivGO }, { app }, program, element, debug);
  • DivGO: main class to encapsulate in execution
  • app: project class to encapsulate it in execution
  • 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
DivGO.app.pause();
DivGO.app.continue();
DivGO.app.stop();