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 requires no build tools and no package manager. All you need is a browser that supports ES modules and a copy of the enginejs-module directory. The steps below walk you through creating an HTML page, sizing a canvas, adding a physics-enabled square, and running the animation loop — from zero to a falling box in about five minutes.
1

Include Engine.js

Load index.js as an ES module script in your HTML page. The moment the module executes, it attaches every Engine.js class and function to window.$g, making the global available to any other script on the page.
<script type="module" src="./index.js"></script>
The type="module" attribute is required. ES module scripts are deferred by default, so Engine.js will finish loading before any subsequent type="module" scripts run — you can safely reference $g in a module script that appears after this tag.
2

Set Up the HTML

Create a container element that defines the play area dimensions, then place a <canvas> element inside it. Engine.js reads the container’s offsetWidth and offsetHeight to size the canvas automatically when you call InitCanvas.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>My Game</title></head>
<body>
  <div id="container" style="width:800px;height:600px;">
    <canvas id="canvas"></canvas>
  </div>
  <script type="module" src="./index.js"></script>
  <script type="module">
    // game code here
  </script>
</body>
</html>
The container can be any block element. Its CSS width and height values (resolved as offsetWidth / offsetHeight) become Environment.anchura and Environment.altura respectively, which the physics system uses as the floor boundary.
3

Initialise the Canvas

Call $g.InitCanvas(canvas, container) with references to the two DOM elements. This stores the 2D rendering context in Environment.canvas, records the canvas HTML element in Environment.canvasHTML, and sets the canvas width and height attributes to match the container.
const canvas    = document.getElementById('canvas');
const container = document.getElementById('container');
$g.InitCanvas(canvas, container);
If you need a fixed-size canvas that is independent of its container’s layout, use $g.InitCanvasStatic(canvas, anchura, altura) instead. Pass the canvas element, then the width and height as numbers.
4

Create a Figure

Figures are the core objects that Engine.js renders and simulates. Construct a $g.Figura with a tipo string, a $g.Transform that describes its position and appearance, and an optional $g.Rigido to opt into gravity and collisions. Finish by registering it with $g.AgregarFigura.
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);
PropertyDescription
tipoShape type: 'cuadrado' (rectangle), 'circulo' (circle), or 'imagen' (bitmap).
transform.x / transform.yTop-left origin of the figure in canvas pixels.
transform.anchura / transform.alturaWidth and height of the rectangle. For circles, use radio (radius) instead.
transform.rellenoFill colour as any CSS colour string.
rigidoA Rigido() instance enables gravity (default valor: 9.8) and collision detection.
You can give a figure an optional nombre (name) and id for later lookup. If omitted, Engine.js auto-generates both. Figures are stored in Environment.figuras in insertion order.
5

Start the Animation Loop

Call $g.Animar() to begin the requestAnimationFrame loop. Before the first frame is drawn, Engine.js resolves any overlapping figures and takes a deep snapshot of every figure’s state. That snapshot is restored the moment you call $g.DetenerAnimacion(), so the scene resets exactly to how it looked when Animar() was called.
$g.Animar();
// later...
$g.DetenerAnimacion(); // stops loop and restores original positions
Use DetenerAnimacion() followed by Animar() to implement a “restart” button. Because the snapshot is retaken on each call to Animar(), make sure you stop the loop before adding or removing figures if you want those changes reflected in future restarts.

​
Full Working Example

The listing below combines all five steps into a single self-contained HTML file. Drop it next to your enginejs-module directory, open it in a browser, and you will see a purple square fall under gravity and come to rest on the canvas floor. 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Engine.js — Quickstart</title>
  <style>
    body { margin: 0; background: #0f172a; display: flex; justify-content: center; align-items: center; height: 100vh; }
    #container { background: #1e293b; }
  </style>
</head>
<body>
  <div id="container" style="width:800px;height:600px;">
    <canvas id="canvas"></canvas>
  </div>

  <script type="module" src="./enginejs-module/index.js"></script>

  <script type="module">
    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);

    const platform = new $g.Figura({
      tipo: 'cuadrado',
      transform: new $g.Transform({
        x: 0,
        y: 400,
        anchura: 800,
        altura: 20,
        relleno: '#64748b'
      }),
      rigido: new $g.Rigido(0)
    });
    $g.AgregarFigura(platform);

    $g.Animar();

    document.addEventListener('keydown', (e) => {
      if (e.key === 'r' || e.key === 'R') {
        $g.DetenerAnimacion();
        $g.Animar();
      }
    });
  </script>
</body>
</html>
Press R at any time to call DetenerAnimacion() followed by Animar(), resetting the scene. This demonstrates the built-in snapshot/restore mechanism at work.

​
What to Explore Next

Environment

Explore InitCanvas, AgregarFigura, gravity settings, the frame counter, and the click listener API.

Figures

Learn all three figure types in depth — circles, rectangles, and image/sprite figures.

Animation Loop

Understand the Animar / DetenerAnimacion lifecycle, manual Dibujar calls, and the frame backup system.

Build docs developers (and LLMs) love

Get started for freeTalk to us