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 is a lightweight, zero-dependency 2D game engine that runs entirely in the browser. It wraps the HTML5 Canvas API with a small set of focused classes — giving you physics-enabled figures, sprite animation, audio, and click events without reaching for any external library. Load a single module script, and every building block you need is available on the global $g object.

​
The $g Global Namespace

Engine.js exposes its entire surface area through one property on window: $g. When index.js is loaded as an ES module, an immediately-invoked function attaches every class and engine function to window.$g, so you never need to import individual modules yourself. 
// Everything lives on $g after index.js is loaded
$g.InitCanvas(canvas, container);   // set up the canvas
$g.AgregarFigura(figure);           // register a figure
$g.Animar();                        // start the loop
$g.DetenerAnimacion();              // stop the loop
The full set of properties attached to $g is:
PropertyTypeDescription
$g.FiguraClassA renderable game object
$g.TransformClassPosition, size, and colour data
$g.RigidoClassRigid-body physics component
$g.ImagenClassImage/sprite asset wrapper
$g.SpriteClassSprite-sheet animation descriptor
$g.SonidoClassAudio asset wrapper
$g.InitCanvasFunctionSize canvas to a container element
$g.InitCanvasStaticFunctionSize canvas to fixed dimensions
$g.AgregarFiguraFunctionAdd a figure to the scene
$g.AnimarFunctionStart the requestAnimationFrame loop
$g.DetenerAnimacionFunctionStop the loop and restore the scene
$g.DibujarFunctionDraw one frame manually
$g.DetectarClickFunctionBind or unbind the canvas click listener
The library’s class names are in Spanish — Figura (figure), Transform (transform), Rigido (rigid body), Imagen (image), Sonido (sound). Method names are mixed: InitCanvas and AgregarFigura follow English or hybrid conventions. This is an intentional design choice by the author.
Environment also exposes audioGeneral, a static property you can assign a global Audio element to if you need a background track managed outside of any individual figure’s Sonido component.

​
Figure Types

A Figura is the core renderable primitive. Three tipo values are supported:

circulo

A filled circle. Sized by radio (radius) in its Transform. The engine uses arc() with fill() under the hood.

cuadrado

A filled rectangle. Sized by anchura (width) and altura (height) in its Transform. Rendered with fillRect().

imagen

A bitmap drawn from an Imagen object attached to the Transform. Pass a Sprite to the Imagen constructor to enable sprite-sheet animation.

​
Physics System

Engine.js ships a simple but practical rigid-body system powered by the Rigido class. Attach a Rigido instance to any Figura and it immediately participates in gravity and collision detection.
  • Gravity — Each frame, afectarGravedad() increments the figure’s y position by rigido.valor and slightly increases that value, producing an accelerating fall. The default gravity value mirrors Environment.gravedad (9.8).
  • Floor detection — tocandoFondo() clamps a figure to the bottom edge of the canvas and sets rigido.colision = true, preventing it from falling further.
  • Rigid-body collisions — tocandoRigidos() detects overlap between figures that both have a Rigido component. When two figures collide, the upper figure stops and the lower figure inherits the incoming velocity.
  • Collision-free mode — Pass sinColision: true to Rigido to apply gravity without triggering collision checks — useful for projectiles or background particles.
Figures are sorted by their y position before each physics step. This ensures the engine resolves stacking correctly when multiple rigid bodies pile up.

​
Multimedia

​
Images & Sprites

The Imagen class wraps an HTML Image object and optionally pairs it with a Sprite descriptor for sprite-sheet animation. The Sprite constructor accepts the row, number of columns, frame height, frame width, and playback speed (in seconds). The engine advances frames automatically on each render tick.

​
Audio

The Sonido class wraps an HTML Audio element and controls when it plays via an activacion mode:
activacionBehaviour
'inicial'Plays immediately when the animation loop starts; pauses when DetenerAnimacion is called.
'colision'Plays while the figure’s rigido.colision is true; pauses otherwise.
'colisionInversa'Plays while the figure is not in collision; pauses on impact.

​
Animation Loop

The loop is driven by the browser’s native requestAnimationFrame. Calling $g.Animar() (which maps to IniciarAnimacion) does three things in order:
  1. Resolves any overlapping figures at startup.
  2. Takes a deep snapshot (backup) of every figure’s current state.
  3. Schedules the recursive Step function, which calls Dibujar(false) on every frame — clearing the canvas, redrawing all figures, and advancing physics.

​
Scene Backup & Restore

Because a snapshot is captured the moment $g.Animar() is called, stopping the loop with $g.DetenerAnimacion() automatically restores every figure to its original position and state. This makes it straightforward to implement a “restart level” feature — simply call DetenerAnimacion() and then Animar() again.
Always call $g.InitCanvas() or $g.InitCanvasStatic() before adding figures or starting the loop. The canvas context must be initialised before any drawing or physics can run.

​
Key Features at a Glance

Zero Dependencies

Engine.js is a single directory of vanilla ES modules. No bundler, no npm install — just a <script type="module"> tag.

Canvas-Native Rendering

Figures are drawn directly with the Canvas 2D API. You get arc, fillRect, and drawImage without any abstraction overhead.

Built-in Physics

Gravity, floor clamping, and rigid-body collision detection are included out of the box via the Rigido component.

Sprite Animation

Drive sprite-sheet animations at any playback speed with the Sprite class — no extra setup required.

Spatial Audio

Attach a Sonido to any figure and choose whether audio triggers at loop start, on collision, or on separation.

Click Events

Register a single clickListener on the Environment and DetectarClick() routes canvas clicks to whichever figure was hit.

​
Next Steps

Quickstart

Build and run your first Engine.js scene in under five minutes.

Environment

Learn how InitCanvas, AgregarFigura, gravity, and global state work together.

Build docs developers (and LLMs) love

Get started for freeTalk to us