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, dependency-free 2D game engine for JavaScript. It gives you a structured set of classes for creating game objects, running a physics-enabled animation loop, handling collisions, playing audio, and rendering sprites — all on the native HTML5 <canvas> element.

Introduction

Learn what Engine.js is, what it supports, and how its global $g namespace works.

Quickstart

Set up a canvas, create your first figure, and run the animation loop in minutes.

Core Concepts

Understand the Environment, Figura, Transform, and Rigido building blocks.

API Reference

Full method and class reference extracted directly from the source code.

​
What Engine.js provides

Canvas Rendering

Draw circles, rectangles, images, and sprite sheets on a 2D canvas with per-frame clearing and redraw.

Physics & Gravity

Built-in gravity simulation and rigid-body collision detection between any combination of shapes.

Sprite Animation

Animate sprite sheets by row and column with configurable playback speed.

Spatial Audio

Attach sounds to figures and trigger them on scene start, collision, or inverse-collision events.

Click Detection

Hit-test canvas figures on click using the DetectarClick helper, with full callback support.

Scene Management

Snapshot the scene state at animation start and restore it exactly when the loop is stopped.

​
Quick look

index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Engine.js Demo</title></head>
<body>
  <div id="container" style="width:800px;height:600px;">
    <canvas id="canvas"></canvas>
  </div>
  <script type="module">
    import '/index.js';

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

    $g.InitCanvas(canvas, container);

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

    $g.AgregarFigura(box);
    $g.Animar();
  </script>
</body>
</html>
1

Include the module

Add index.js as a type="module" script so the $g global is available on window.
2

Initialise the canvas

Call $g.InitCanvas(canvas, container) to bind the 2D context and size the canvas to its container.
3

Create figures

Instantiate Figura, Transform, and optionally Rigido, then register them with $g.AgregarFigura().
4

Start the loop

Call $g.Animar() to start the requestAnimationFrame loop. Call $g.DetenerAnimacion() to stop and restore the initial scene state.

Build docs developers (and LLMs) love

Get started for freeTalk to us