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.

Engine.js provides a built-in click detection system that maps raw canvas onclick events to individual figures. You provide a single callback — Environment.clickListener — and the engine calls it with whichever figure was under the cursor, handling all coordinate translation and shape-specific hit testing for you.

​
How click detection works

$g.DetectarClick(bindear) attaches (or removes) an onclick handler on Environment.canvasHTML — the raw <canvas> DOM element. When a click fires, the handler iterates every figure in Environment.figuras and calls detectarClickFigura({ x: event.offsetX, y: event.offsetY }, figura) from utilidades.class.js. The first figure that passes the hit test triggers Environment.clickListener(figura). 
User clicks canvas
  └─ onclick handler (attached by DetectarClick)
       └─ for each figura in Environment.figuras:
            └─ detectarClickFigura({ x: offsetX, y: offsetY }, figura)
                 ├─ circle? → radio-extended bounding box test
                 └─ rectangle? → standard AABB test
                      └─ hit → Environment.clickListener(figura)

​
Hit testing: detectarClickFigura

The hit-testing logic differs by figure type:
ShapeTest used
'circulo'The click point’s distance is tested against a bounding box extended by transform.radio in all directions.
'cuadrado' / 'imagen'Standard AABB: the click point must fall within [transform.x, transform.x + transform.altura] × [transform.y, transform.y + transform.anchura].

​
Setting the click listener

Assign your handler to Environment.clickListener before binding, then call $g.DetectarClick(true) to attach the onclick. 
$g.clickListener = function(figura) {
  console.log('Clicked figure:', figura.nombre);
};

$g.DetectarClick(true);  // true = bind the handler
$g is Environment. index.js sets window.$g = Environment directly, so $g is not a wrapper object — it is the Environment class itself. There is no $g.Environment property. All static properties — including clickListener, figuras, contador, and FPS — are readable and writable directly as $g.clickListener, $g.figuras, etc.

​
Unbinding clicks

Pass false to DetectarClick to replace the onclick with an empty no-op function, effectively removing click handling without modifying the DOM element. 
$g.DetectarClick(false); // onclick is now function() {}

​
Using click events without the animation loop

Click detection is completely independent of the animation loop. You can bind the handler and render a single static frame with $g.Dibujar(true) — figures are visible and clickable without any physics running. 
$g.Dibujar(true);         // paint the scene once, no physics
$g.DetectarClick(true);   // start listening for clicks
This pattern is ideal for menu screens, level-select screens, or any interactive scene that does not need per-frame updates.

​
Full working example

The snippet below creates a clickable circle on a static canvas. No animation loop is needed. 
import '/path/to/enginejs-module/index.js';

const canvas    = document.getElementById('gameCanvas');
const container = document.getElementById('gameContainer');

$g.InitCanvas(canvas, container);

const circle = new $g.Figura({
  nombre: 'myCircle',
  tipo: 'circulo',
  transform: new $g.Transform({ x: 200, y: 200, radio: 40, relleno: '#818CF8' })
});

$g.AgregarFigura(circle);

// Set up the click listener before binding
$g.clickListener = (figura) => {
  alert(`You clicked: ${figura.nombre}`);
};

$g.DetectarClick(true);
$g.Dibujar(true); // draw without physics
When the user clicks inside the circle, the browser alert will display You clicked: myCircle.
Always call $g.DetectarClick(true) after adding your figures with $g.AgregarFigura(). The onclick handler reads Environment.figuras at the moment of each click — figures added after DetectarClick(true) are still detected — but establishing the listener early ensures no click can slip through between setup and binding.

​
Listening for clicks during the animation loop

DetectarClick works equally well when $g.Animar() is running. The onclick handler operates outside the requestAnimationFrame cycle, so clicks are processed independently of frame timing. 
$g.InitCanvas(canvas, container);

const box = new $g.Figura({
  nombre: 'fallingBox',
  tipo: 'cuadrado',
  transform: new $g.Transform({ x: 100, y: 50, anchura: 60, altura: 60, relleno: '#F59E0B' }),
  rigido: new $g.Rigido(9.8)
});

$g.AgregarFigura(box);

$g.clickListener = (figura) => {
  console.log(`Hit ${figura.nombre} at frame ${$g.contador}`);
};

$g.DetectarClick(true);
$g.Animar(); // physics loop starts; clicks are still detected

Build docs developers (and LLMs) love

Get started for freeTalk to us