Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/OmarMtya/enginejs-module/llms.txt

Use this file to discover all available pages before exploring further.

Environment is the backbone of every Engine.js application. It is a fully static class — there is no instance to create — which means every property and method lives directly on the class itself. The canvas context, the list of active figures, the gravity constant, the frame counter, and the scene backup are all stored here, giving every part of your game a single, predictable place to read or write shared state.

​
Static Properties

​
canvas
CanvasRenderingContext2D
The 2D rendering context obtained from the HTML <canvas> element. Engine.js uses this reference internally to draw every figure each frame. Set automatically by InitCanvas or InitCanvasStatic.
​
canvasHTML
HTMLCanvasElement
The raw DOM <canvas> element. Engine.js attaches click listeners here when you call $g.DetectarClick().
​
container
HTMLElement
The parent DOM element passed to InitCanvas. Engine.js reads its offsetWidth and offsetHeight to size the canvas dynamically.
​
FPS
number
default:"60"
Target frames per second. This value influences how quickly gravity accelerates each figure — the physics formula divides by FPS * 100 to normalise the per-frame increment.
​
anchura
number
default:"800"
Canvas width in pixels. Updated automatically by InitCanvas from the container’s offsetWidth.
​
altura
number
default:"800"
Canvas height in pixels. Updated automatically by InitCanvas from the container’s offsetHeight - 4.
​
gravedad
number
default:"9.8"
The initial gravity value applied to every new Rigido component. Change this before calling $g.Animar() to adjust the strength of gravity across the whole scene.
​
figuras
Figura[]
default:"[]"
The master array of all figures registered in the scene. Engine.js iterates this array every frame to draw and advance physics. Add figures with AgregarFigura() rather than pushing directly.
​
contador
number
default:"0"
A frame counter incremented by one on every call to Dibujar. Useful for time-based logic in your game loop.
​
backup
Figura[]
default:"[]"
A deep-cloned snapshot of figuras taken at the moment Animar() is called. When DetenerAnimacion() is invoked the engine restores this snapshot, rewinding the scene to its original state.
​
audioGeneral
any
Declared as a static property but never assigned by the engine. Reserved for potential future use; you can ignore it in normal usage.
​
clickListener
function
default:"function(){}"
A no-op function by default. Replace it with your own handler to receive click events on figures. The handler is called with the clicked Figura instance whenever a registered click event fires. See the Click Events guide for full setup instructions.

​
Static Methods

​
InitCanvas(canvas, container)

Binds the engine to a canvas element and sizes it dynamically based on its container. 
const canvas    = document.getElementById('game-canvas');
const container = document.getElementById('game-container');

$g.InitCanvas(canvas, container);
InitCanvas reads container.offsetHeight (minus 4 px) and container.offsetWidth and writes those values back to the canvas’s height and width attributes as well as to Environment.altura and Environment.anchura. Use this variant whenever you want the game to fill a responsive layout element.

​
InitCanvasStatic(canvas, anchura, altura)

Initialises the canvas with a fixed pixel size. No container reference is stored. 
const canvas = document.getElementById('game-canvas');

$g.InitCanvasStatic(canvas, 800, 600);
// Environment.anchura === 800
// Environment.altura  === 600
InitCanvasStatic does not set Environment.canvasHTML or Environment.container. If you intend to use $g.DetectarClick(), use InitCanvas instead so that the DOM element reference is stored correctly.

​
AgregarFigura(figura)

Pushes a Figura into the figuras registry so the engine draws and simulates it. 
const box = new $g.Figura({
  tipo: 'cuadrado',
  transform: new $g.Transform({ x: 100, y: 100, anchura: 60, altura: 60 }),
});

$g.AgregarFigura(box);

​
Copy(obj)

Performs a structural deep-clone of a Figura, reconstructing a brand-new Figura with a fresh Transform and (if present) a fresh Rigido. Image and sound references on the original transform are re-attached by reference after cloning so that media objects are shared rather than duplicated. 
const original = new $g.Figura({
  tipo: 'cuadrado',
  transform: new $g.Transform({ x: 50, y: 50, anchura: 40, altura: 40 }),
  rigido: new $g.Rigido(9.8),
});

const clone = $g.Copy(original);
// clone is an independent Figura — moving it does not move original
Copy is called internally by Animar to create backup and by DetenerAnimacion to restore it.

​
GenerarId()

Returns a random 9-character alphanumeric string prefixed with _, suitable for use as a unique figure identifier. 
const id = $g.GenerarId();
// e.g. "_k7x2mq9az"
Figura calls this automatically when no id is provided to its constructor.

​
The $g Global

Engine.js exposes the entire Environment class as a browser global named $g. The entry point (index.js) runs an IIFE that assigns constructor references onto Environment and then does: 
let $g = Environment;
window.$g = $g;
This means $g is the Environment class — not a separate object. All static properties and methods of Environment are available directly on $g. In addition, index.js attaches the following constructors and engine functions as extra static properties so they are reachable via $g:
$g propertySource
$g.FiguraFigura class
$g.TransformTransform class
$g.RigidoRigido class
$g.ImagenImagen class
$g.SpriteSprite class
$g.SonidoSonido class
$g.AnimarIniciarAnimacion function
$g.DetenerAnimacionDetenerAnimacion function
$g.DibujarDibujar function
$g.DetectarClickdetectarClick function
This is why all examples in the documentation use $g.Figura, $g.Transform, etc. — they are all properties on the same Environment class object.

​
Adjusting Global Gravity

Set Environment.gravedad before starting the animation loop. All Rigido components use this value as their initial valor. 
// Lunar gravity — roughly one-sixth of Earth's
Environment.gravedad = 1.6;

$g.AgregarFigura(ball);
$g.Animar();
You can also change Environment.gravedad mid-game to simulate entering a different gravity zone, but only newly-reset Rigido components (e.g. after DetenerAnimacion reloads the backup) will use the updated value. Figures already in motion keep their current rigido.valor.

​
Handling Click Events

Assign a function to Environment.clickListener and then activate hit-detection with $g.DetectarClick(): 
Environment.clickListener = function(figura) {
  console.log('Clicked:', figura.nombre);
};

$g.DetectarClick(); // binds the onclick handler to canvasHTML
For the full guide on hit areas and disabling click detection, see Click Events.

Figures

Learn how to create and register game objects.

Animation Loop

Start, pause, and reset the engine’s frame loop.

Environment API Reference

Complete API reference for the Environment class.

Click Events

Respond to player clicks on canvas figures.

Build docs developers (and LLMs) love

Get started for freeTalk to us