@litecanvas/utils 0.24.1 → 0.24.2

package/dist/actor.js

@@ -33,8 +33,8 @@
     /** @type {number} */
     y;
     /**
-     * @param {number} x
-     * @param {number} y
+     * @param {number} [x=0]
+     * @param {number} [y]
      */
     constructor(x = 0, y = x) {
       this.x = x;
@@ -56,6 +56,972 @@
     return new Vector(x, y);
   };
 
+  // node_modules/litecanvas/src/zzfx.js
+  var zzfxX = /* @__PURE__ */ new AudioContext();
+  var zzfx = (p = 1, k = 0.05, b = 220, e = 0, r = 0, t = 0.1, q = 0, D = 1, u = 0, y = 0, v = 0, z = 0, l = 0, E = 0, A = 0, F = 0, c = 0, w = 1, m = 0, B = 0, N = 0) => {
+    let M = Math, d = 2 * M.PI, R = 44100, G = u *= 500 * d / R / R, C = b *= (1 - k + 2 * k * M.random(k = [])) * d / R, g = 0, H = 0, a = 0, n = 1, I = 0, J = 0, f = 0, h = N < 0 ? -1 : 1, x = d * h * N * 2 / R, L = M.cos(x), Z = M.sin, K = Z(x) / 4, O = 1 + K, X = -2 * L / O, Y = (1 - K) / O, P = (1 + h * L) / 2 / O, Q = -(h + L) / O, S = P, T = 0, U = 0, V = 0, W = 0;
+    e = R * e + 9;
+    m *= R;
+    r *= R;
+    t *= R;
+    c *= R;
+    y *= 500 * d / R ** 3;
+    A *= d / R;
+    v *= d / R;
+    z *= R;
+    l = R * l | 0;
+    p *= 0.3 * (globalThis.zzfxV || 1);
+    for (h = e + m + r + t + c | 0; a < h; k[a++] = f * p)
+      ++J % (100 * F | 0) || (f = q ? 1 < q ? 2 < q ? 3 < q ? Z(g * g) : M.max(M.min(M.tan(g), 1), -1) : 1 - (2 * g / d % 2 + 2) % 2 : 1 - 4 * M.abs(M.round(g / d) - g / d) : Z(g), f = (l ? 1 - B + B * Z(d * a / l) : 1) * (f < 0 ? -1 : 1) * M.abs(f) ** D * (a < e ? a / e : a < e + m ? 1 - (a - e) / m * (1 - w) : a < e + m + r ? w : a < h - c ? (h - a - c) / t * w : 0), f = c ? f / 2 + (c > a ? 0 : (a < h - c ? 1 : (h - a) / c) * k[a - c | 0] / 2 / p) : f, N ? f = W = S * T + Q * (T = U) + P * (U = f) - Y * V - X * (V = W) : 0), x = (b += u += y) * M.cos(A * H++), g += x + x * E * Z(a ** 5), n && ++n > z && (b += v, C += v, n = 0), !l || ++I % l || (b = C, u = G, n = n || 1);
+    p = zzfxX.createBuffer(1, h, R);
+    p.getChannelData(0).set(k);
+    b = zzfxX.createBufferSource();
+    b.buffer = p;
+    b.connect(zzfxX.destination);
+    b.start();
+  };
+
+  // node_modules/litecanvas/src/palette.js
+  var colors = [
+    "#111",
+    "#6a7799",
+    "#aec2c2",
+    "#FFF1E8",
+    "#e83b3b",
+    "#fabc20",
+    "#155fd9",
+    "#3cbcfc",
+    "#327345",
+    "#63c64d",
+    "#6c2c1f",
+    "#ac7c00"
+  ];
+
+  // node_modules/litecanvas/src/index.js
+  globalThis.litecanvas = litecanvas;
+  function litecanvas(settings = {}) {
+    const root = globalThis, PI = Math.PI, TWO_PI = PI * 2, raf = requestAnimationFrame, _browserEventListeners = [], on = (elem, evt, callback) => {
+      elem.addEventListener(evt, callback, false);
+      _browserEventListeners.push(
+        () => elem.removeEventListener(evt, callback, false)
+      );
+    }, defaults = {
+      fps: 60,
+      fullscreen: true,
+      width: null,
+      height: null,
+      autoscale: true,
+      pixelart: false,
+      antialias: false,
+      canvas: null,
+      global: true,
+      loop: null,
+      pauseOnBlur: true,
+      tapEvents: true,
+      keyboardEvents: true,
+      animate: true
+    };
+    settings = Object.assign(defaults, settings);
+    let _initialized = false, _plugins = [], _canvas = settings.canvas || document.createElement("canvas"), _fullscreen = settings.fullscreen, _autoscale = settings.autoscale, _animated = settings.animate, _scale = 1, _ctx, _timeScale = 1, _lastFrame, _step, _stepMs, _accumulated = 0, _focused = true, _fontFamily = "sans-serif", _fontStyle = "", _fontSize = 32, _rng_seed = Date.now(), _global = settings.global, _events = {
+      init: null,
+      update: null,
+      draw: null,
+      resized: null,
+      tap: null,
+      untap: null,
+      tapping: null,
+      tapped: null
+    }, _helpers = {
+      settings: Object.assign({}, settings),
+      colors
+    };
+    const instance = {
+      /** @type {number} */
+      WIDTH: settings.width,
+      /** @type {number} */
+      HEIGHT: settings.height || settings.width,
+      /** @type {HTMLCanvasElement} */
+      CANVAS: null,
+      /** @type {number} */
+      ELAPSED: 0,
+      /** @type {number} */
+      CENTERX: 0,
+      /** @type {number} */
+      CENTERY: 0,
+      /** @type {number} */
+      MOUSEX: -1,
+      /** @type {number} */
+      MOUSEY: -1,
+      /** @type {number[]} */
+      DEFAULT_SFX: [0.5, , 1675, , 0.06, 0.2, 1, 1.8, , , 637, 0.06],
+      /** MATH API */
+      /**
+       * The value of the mathematical constant PI (π).
+       * Approximately 3.14159
+       *
+       * @type {number}
+       */
+      PI,
+      /**
+       * Twice the value of the mathematical constant PI (π).
+       * Approximately 6.28318
+       *
+       * Note: TWO_PI radians equals 360°, PI radians equals 180°,
+       * HALF_PI radians equals 90°, and HALF_PI/2 radians equals 45°.
+       *
+       * @type {number}
+       */
+      TWO_PI,
+      /**
+       * Half the value of the mathematical constant PI (π).
+       * Approximately 1.57079
+       *
+       * @type {number}
+       */
+      HALF_PI: PI * 0.5,
+      /**
+       * Calculates a linear (interpolation) value over t%.
+       *
+       * @param {number} start
+       * @param {number} end
+       * @param {number} t The progress in percentage, where 0 = 0% and 1 = 100%.
+       * @returns {number} The unterpolated value
+       * @tutorial https://gamedev.net/tutorials/programming/general-and-gameplay-programming/a-brief-introduction-to-lerp-r4954/
+       */
+      lerp: (start, end, t) => start + t * (end - start),
+      /**
+       * Convert degrees to radians
+       *
+       * @param {number} degs
+       * @returns {number} the value in radians
+       */
+      deg2rad: (degs) => PI / 180 * degs,
+      /**
+       * Convert radians to degrees
+       *
+       * @param {number} rads
+       * @returns {number} the value in degrees
+       */
+      rad2deg: (rads) => 180 / PI * rads,
+      /**
+       * Constrains a number between `min` and `max`.
+       *
+       * @param {number} value
+       * @param {number} min
+       * @param {number} max
+       * @returns {number}
+       */
+      clamp: (value, min, max) => {
+        if (value < min) return min;
+        if (value > max) return max;
+        return value;
+      },
+      /**
+       * Wraps a number between `min` (inclusive) and `max` (exclusive).
+       *
+       * @param {number} value
+       * @param {number} min
+       * @param {number} max
+       * @returns {number}
+       */
+      wrap: (value, min, max) => value - (max - min) * Math.floor((value - min) / (max - min)),
+      /**
+       * Re-maps a number from one range to another.
+       *
+       * @param {number} value  the value to be remapped.
+       * @param {number} min1 lower bound of the value's current range.
+       * @param {number} max1  upper bound of the value's current range.
+       * @param {number} min2 lower bound of the value's target range.
+       * @param {number} max2  upper bound of the value's target range.
+       * @param {boolean} [withinBounds=false] constrain the value to the newly mapped range
+       * @returns {number} the remapped number
+       */
+      map(value, min1, max1, min2, max2, withinBounds) {
+        const result = (value - min1) / (max1 - min1) * (max2 - min2) + min2;
+        return withinBounds ? instance.clamp(result, min2, max2) : result;
+      },
+      /**
+       * Maps a number from one range to a value between 0 and 1.
+       * Identical to `map(value, min, max, 0, 1)`.
+       * Note: Numbers outside the range are not clamped to 0 and 1.
+       *
+       * @param {number} value
+       * @param {number} min
+       * @param {number} min
+       * @returns {number} the normalized number.
+       */
+      norm: (value, min, max) => instance.map(value, min, max, 0, 1),
+      /** RNG API */
+      /**
+       * Generates a pseudorandom float between min (inclusive) and max (exclusive)
+       * using the  Linear Congruential Generator (LCG) algorithm.
+       *
+       * @param {number} [min=0.0]
+       * @param {number} [max=1.0]
+       * @returns {number} the random number
+       */
+      rand: (min = 0, max = 1) => {
+        const a = 1664525;
+        const c = 1013904223;
+        const m = 4294967296;
+        _rng_seed = (a * _rng_seed + c) % m;
+        return _rng_seed / m * (max - min) + min;
+      },
+      /**
+       * Generates a pseudorandom integer between min (inclusive) and max (inclusive)
+       *
+       * @param {number} [min=0]
+       * @param {number} [max=1]
+       * @returns {number} the random number
+       */
+      randi: (min = 0, max = 1) => Math.floor(instance.rand(min, max + 1)),
+      /**
+       * If a value is passed, initializes the random number generator with an explicit seed value.
+       * Otherwise, returns the current seed state.
+       *
+       * @param {number} value
+       * @returns {number} the seed state
+       */
+      seed: (value) => {
+        return null == value ? _rng_seed : _rng_seed = ~~value;
+      },
+      /** BASIC GRAPHICS API */
+      /**
+       * Clear the game screen
+       *
+       * @param {number|null} color The background color (from 0 to 7) or null (for transparent)
+       */
+      cls(color) {
+        if (null == color) {
+          _ctx.clearRect(0, 0, instance.WIDTH, instance.HEIGHT);
+        } else {
+          instance.rectfill(0, 0, instance.WIDTH, instance.HEIGHT, color);
+        }
+      },
+      /**
+       * Draw a rectangle outline
+       *
+       * @param {number} x
+       * @param {number} y
+       * @param {number} width
+       * @param {number} height
+       * @param {number} [color=0] the color index (generally from 0 to 7)
+       * @param {number|number[]} [radii] A number or list specifying the radii used to draw a rounded-borders rectangle
+       */
+      rect(x, y, width, height, color = 0, radii = null) {
+        _ctx.beginPath();
+        _ctx[radii ? "roundRect" : "rect"](~~x, ~~y, width, height, radii);
+        instance.stroke(color);
+      },
+      /**
+       * Draw a color-filled rectangle
+       *
+       * @param {number} x
+       * @param {number} y
+       * @param {number} width
+       * @param {number} height
+       * @param {number} [color=0] the color index (generally from 0 to 7)
+       * @param {number|number[]} [radii] A number or list specifying the radii used to draw a rounded-borders rectangle
+       */
+      rectfill(x, y, width, height, color = 0, radii = null) {
+        _ctx.beginPath();
+        _ctx[radii ? "roundRect" : "rect"](~~x, ~~y, width, height, radii);
+        instance.fill(color);
+      },
+      /**
+       * Draw a circle outline
+       *
+       * @param {number} x
+       * @param {number} y
+       * @param {number} radius
+       * @param {number} [color=0] the color index (generally from 0 to 7)
+       */
+      circ(x, y, radius, color) {
+        _ctx.beginPath();
+        _ctx.arc(~~x, ~~y, radius, 0, TWO_PI);
+        instance.stroke(color);
+      },
+      /**
+       * Draw a color-filled circle
+       *
+       * @param {number} x
+       * @param {number} y
+       * @param {number} radius
+       * @param {number} [color=0] the color index (generally from 0 to 7)
+       */
+      circfill(x, y, radius, color) {
+        _ctx.beginPath();
+        _ctx.arc(~~x, ~~y, radius, 0, TWO_PI);
+        instance.fill(color);
+      },
+      /**
+       * Draw a line
+       *
+       * @param {number} x1
+       * @param {number} y1
+       * @param {number} x2
+       * @param {number} y2
+       * @param {number} [color=0] the color index (generally from 0 to 7)
+       */
+      line(x1, y1, x2, y2, color) {
+        _ctx.beginPath();
+        _ctx.moveTo(~~x1, ~~y1);
+        _ctx.lineTo(~~x2, ~~y2);
+        instance.stroke(color);
+      },
+      /**
+       * Sets the thickness of lines
+       *
+       * @param {number} value
+       * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineWidth
+       */
+      linewidth(value) {
+        _ctx.lineWidth = value;
+      },
+      /**
+       * Sets the line dash pattern used when drawing lines
+       *
+       * @param {number[]} segments the line dash pattern
+       * @param {number} [offset=0] the line dash offset, or "phase".
+       * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
+       * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
+       */
+      linedash(segments, offset = 0) {
+        _ctx.setLineDash(segments);
+        _ctx.lineDashOffset = offset;
+      },
+      /** TEXT RENDERING API */
+      /**
+       * Draw text
+       *
+       * @param {number} x
+       * @param {number} y
+       * @param {string} text the text message
+       * @param {number} [color=3] the color index (generally from 0 to 7)
+       */
+      text(x, y, text, color = 3) {
+        _ctx.font = `${_fontStyle} ${_fontSize}px ${_fontFamily}`;
+        _ctx.fillStyle = instance.getcolor(color);
+        _ctx.fillText(text, ~~x, ~~y);
+      },
+      /**
+       * Set the font family
+       *
+       * @param {string} fontFamily
+       */
+      textfont(fontFamily) {
+        _fontFamily = fontFamily;
+      },
+      /**
+       * Set the font size
+       *
+       * @param {string} size
+       */
+      textsize(size) {
+        _fontSize = size;
+      },
+      /**
+       * Sets whether a font should be styled with a "normal", "italic", or "bold".
+       *
+       * @param {string} style
+       */
+      textstyle(style) {
+        _fontStyle = style || "";
+      },
+      /**
+       * Sets the alignment used when drawing texts
+       *
+       * @param {string} align the horizontal alignment. Possible values: "left", "right", "center", "start" or "end"
+       * @param {string} baseline the vertical alignment. Possible values: "top", "bottom", "middle", "hanging" or "ideographic"
+       * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline
+       * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign
+       */
+      textalign(align, baseline) {
+        if (align) _ctx.textAlign = align;
+        if (baseline) _ctx.textBaseline = baseline;
+      },
+      /**
+       * Returns a TextMetrics object that contains information about the measured text (such as its width, for example)
+       *
+       * @param {string} text
+       * @param {number} [size]
+       * @returns {TextMetrics}
+       * @see https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics
+       */
+      textmetrics(text, size = _fontSize) {
+        _ctx.font = `${_fontStyle} ${size}px ${_fontFamily}`;
+        const metrics = _ctx.measureText(text);
+        metrics.height = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
+        return metrics;
+      },
+      /** IMAGE GRAPHICS API */
+      /**
+       * Draw an image
+       *
+       * @param {number} x
+       * @param {number} y
+       * @param {OffscreenCanvas|HTMLImageElement|HTMLCanvasElement} image
+       */
+      image(x, y, image) {
+        _ctx.drawImage(image, ~~x, ~~y);
+      },
+      /**
+       * Creates a offscreen canvas to draw on it
+       *
+       * @param {number} width
+       * @param {number} height
+       * @param {string[]|drawCallback} draw
+       * @param {object} [options]
+       * @param {number} [options.scale=1]
+       * @param {OffscreenCanvas | HTMLCanvasElement} [options.canvas]
+       * @returns {OffscreenCanvas}
+       * @see https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
+       */
+      paint(width, height, draw, options = {}) {
+        const canvas = options.canvas || new OffscreenCanvas(1, 1), scale = options.scale || 1, contextOriginal = _ctx;
+        canvas.width = width * scale;
+        canvas.height = height * scale;
+        _ctx = canvas.getContext("2d");
+        _ctx.scale(scale, scale);
+        if (draw.push) {
+          let x = 0, y = 0;
+          _ctx.imageSmoothingEnabled = false;
+          for (const str of draw) {
+            for (const color of str) {
+              if (" " !== color && "." !== color) {
+                instance.rectfill(x, y, 1, 1, parseInt(color, 16));
+              }
+              x++;
+            }
+            y++;
+            x = 0;
+          }
+        } else {
+          draw(_ctx);
+        }
+        _ctx = contextOriginal;
+        return canvas;
+      },
+      /** ADVANCED GRAPHICS API */
+      /**
+       * Get or set the canvas context 2D
+       *
+       * @param {CanvasRenderingContext2D} [context]
+       * @returns {CanvasRenderingContext2D}
+       * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
+       */
+      ctx(context) {
+        if (context) {
+          _ctx = context;
+        }
+        return _ctx;
+      },
+      /**
+       * saves the current drawing style settings and transformations
+       *
+       * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save
+       */
+      push: () => _ctx.save(),
+      /**
+       * restores the drawing style settings and transformations
+       *
+       * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/restore
+       */
+      pop: () => _ctx.restore(),
+      /**
+       * Adds a translation to the transformation matrix.
+       *
+       * @param {number} x
+       * @param {number} y
+       */
+      translate: (x, y) => _ctx.translate(~~x, ~~y),
+      /**
+       * Adds a scaling transformation to the canvas units horizontally and/or vertically.
+       *
+       * @param {number} x
+       * @param {number} [y]
+       */
+      scale: (x, y) => _ctx.scale(x, y || x),
+      /**
+       * Adds a rotation to the transformation matrix.
+       *
+       * @param {number} radians
+       */
+      rotate: (radians) => _ctx.rotate(radians),
+      /**
+       * @param {number} a
+       * @param {number} b
+       * @param {number} c
+       * @param {number} d
+       * @param {number} e
+       * @param {number} f
+       * @param {boolean} [resetFirst=true] `false` to use _ctx.transform(); by default use _ctx.setTransform()
+       *
+       * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setTransform
+       * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform
+       */
+      transform: (a, b, c, d, e, f, resetFirst = true) => _ctx[resetFirst ? "setTransform" : "transform"](a, b, c, d, e, f),
+      /**
+       * Sets the alpha (opacity) value to apply when drawing new shapes and images
+       *
+       * @param {number} alpha float from 0 to 1 (e.g: 0.5 = 50% transparent)
+       * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalAlpha
+       */
+      alpha(value) {
+        _ctx.globalAlpha = instance.clamp(value, 0, 1);
+      },
+      /**
+       * Returns a newly instantiated Path2D object, optionally with another
+       * path as an argument (creates a copy), or optionally with a string
+       * consisting of SVG path data.
+       *
+       * @param {Path2D|string} [arg]
+       * @returns Path2D
+       * @see https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D
+       */
+      path: (arg) => new Path2D(arg),
+      /**
+       * Fills the current or given path with a given color.
+       *
+       * @param {number} [color=0]
+       * @param {Path2D} [path]
+       */
+      fill(color, path) {
+        _ctx.fillStyle = instance.getcolor(color);
+        if (path) {
+          _ctx.fill(path);
+        } else {
+          _ctx.fill();
+        }
+      },
+      /**
+       * Outlines the current or given path with a given color.
+       *
+       * @param {number} [color=0]
+       * @param {Path2D} [path]
+       */
+      stroke(color, path) {
+        _ctx.strokeStyle = instance.getcolor(color);
+        if (path) {
+          _ctx.stroke(path);
+        } else {
+          _ctx.stroke();
+        }
+      },
+      /**
+       * Turn given path into a clipping region.
+       *
+       * @param {Path2D} path
+       * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip
+       */
+      clip(path) {
+        _ctx.clip(path);
+      },
+      /** SOUND API */
+      /**
+       * Play a sound effects using ZzFX library.
+       * If the first argument is omitted, plays an default sound.
+       *
+       * @param {number[]} [zzfxParams] a ZzFX array of params
+       * @param {number} [pitchSlide] a value to increment/decrement the pitch
+       * @param {number} [volumeFactor] the volume factor
+       * @returns {number[] | boolean} The sound that was played or `false`
+       *
+       * @see https://github.com/KilledByAPixel/ZzFX
+       */
+      sfx(zzfxParams, pitchSlide = 0, volumeFactor = 1) {
+        if (root.zzfxV <= 0 || navigator.userActivation && !navigator.userActivation.hasBeenActive) {
+          return false;
+        }
+        zzfxParams = zzfxParams || instance.DEFAULT_SFX;
+        if (pitchSlide > 0 || volumeFactor !== 1) {
+          zzfxParams = zzfxParams.slice();
+          zzfxParams[0] = volumeFactor * (zzfxParams[0] || 1);
+          zzfxParams[10] = ~~zzfxParams[10] + pitchSlide;
+        }
+        zzfx.apply(0, zzfxParams);
+        return zzfxParams;
+      },
+      /**
+       * Set the ZzFX's global volume factor.
+       * Note: use 0 to mute all sound effects.
+       *
+       * @param {number} value
+       */
+      volume(value) {
+        root.zzfxV = +value;
+      },
+      /** UTILS API */
+      /**
+       * Check a collision between two rectangles
+       *
+       * @param {number} x1 first rectangle position X
+       * @param {number} y1 first rectangle position Y
+       * @param {number} w1 first rectangle width
+       * @param {number} h1 first rectangle height
+       * @param {number} x2 second rectangle position X
+       * @param {number} y2 second rectangle position Y
+       * @param {number} w2 second rectangle width
+       * @param {number} h2 second rectangle height
+       * @returns {boolean}
+       */
+      colrect: (x1, y1, w1, h1, x2, y2, w2, h2) => x1 < x2 + w2 && x1 + w1 > x2 && y1 < y2 + h2 && y1 + h1 > y2,
+      /**
+       * Check a collision between two circles
+       *
+       * @param {number} x1 first circle position X
+       * @param {number} y1 first circle position Y
+       * @param {number} r1 first circle position radius
+       * @param {number} x2 second circle position X
+       * @param {number} y2 second circle position Y
+       * @param {number} r2 second circle position radius
+       * @returns {boolean}
+       */
+      colcirc: (x1, y1, r1, x2, y2, r2) => (x2 - x1) ** 2 + (y2 - y1) ** 2 <= (r1 + r2) ** 2,
+      /** PLUGINS API */
+      /**
+       * Prepares a plugin to be loaded
+       *
+       * @param {pluginCallback} callback
+       */
+      use(callback, config = {}) {
+        _initialized ? loadPlugin(callback, config) : _plugins.push([callback, config]);
+      },
+      /**
+       * Add a game event listener
+       *
+       * @param {string} eventName the event type name
+       * @param {Function} callback the function that is called when the event occurs
+       * @returns {Function} a function to remove the listener
+       */
+      listen(eventName, callback) {
+        _events[eventName] = _events[eventName] || /* @__PURE__ */ new Set();
+        _events[eventName].add(callback);
+        return () => _events[eventName].delete(callback);
+      },
+      /**
+       * Call all listeners attached to a game event
+       *
+       * @param {string} eventName The event type name
+       * @param {*} [arg1] any data to be passed over the listeners
+       * @param {*} [arg2] any data to be passed over the listeners
+       * @param {*} [arg3] any data to be passed over the listeners
+       * @param {*} [arg4] any data to be passed over the listeners
+       */
+      emit(eventName, arg1, arg2, arg3, arg4) {
+        triggerEvent("before:" + eventName, arg1, arg2, arg3, arg4);
+        triggerEvent(eventName, arg1, arg2, arg3, arg4);
+        triggerEvent("after:" + eventName, arg1, arg2, arg3, arg4);
+      },
+      /**
+       * Get a color by index
+       *
+       * @param {number} [index=0] The color number
+       * @returns {string} the color code
+       */
+      getcolor: (index) => colors[~~index % colors.length],
+      /**
+       * Create or update a instance variable
+       *
+       * @param {string} key
+       * @param {*} value
+       */
+      setvar(key, value) {
+        instance[key] = value;
+        if (_global) {
+          root[key] = value;
+        }
+      },
+      /**
+       * Resizes the game canvas and emit the "resized" event
+       *
+       * @param {number} width
+       * @param {number} height
+       */
+      resize(width, height) {
+        instance.setvar("WIDTH", _canvas.width = width);
+        instance.setvar("HEIGHT", _canvas.height = height || width);
+        pageResized();
+      },
+      /**
+       * The scale of the game's delta time (dt).
+       * Values higher than 1 increase the speed of time, while values smaller than 1 decrease it.
+       * A value of 0 freezes time and is effectively equivalent to pausing.
+       *
+       * @param {number} value
+       */
+      timescale(value) {
+        _timeScale = value;
+      },
+      /**
+       * Set the target FPS at runtime.
+       *
+       * @param {number} fps
+       */
+      setfps(fps) {
+        _step = 1 / fps;
+        _stepMs = _step * 1e3;
+        _accumulated = 0;
+      },
+      /**
+       * Stops the litecanvas instance and remove all event listeners.
+       */
+      quit() {
+        instance.emit("quit");
+        for (const removeListener of _browserEventListeners) {
+          removeListener();
+        }
+        _focused = _events = false;
+        if (_global) {
+          for (const key in instance) {
+            delete root[key];
+          }
+          delete root.__litecanvas;
+        }
+      }
+    };
+    for (const k of [
+      "sin",
+      "cos",
+      "atan2",
+      "hypot",
+      "tan",
+      "abs",
+      "ceil",
+      "round",
+      "floor",
+      "trunc",
+      "min",
+      "max",
+      "pow",
+      "sqrt",
+      "sign",
+      "exp"
+    ]) {
+      instance[k] = Math[k];
+    }
+    function init() {
+      _initialized = true;
+      const source = settings.loop ? settings.loop : root;
+      for (const event in _events) {
+        if (source[event]) instance.listen(event, source[event]);
+      }
+      for (const [callback, config] of _plugins) {
+        loadPlugin(callback, config);
+      }
+      if (_fullscreen || _autoscale) {
+        on(root, "resize", pageResized);
+      }
+      pageResized();
+      if (settings.tapEvents) {
+        const _getXY = (pageX, pageY) => [
+          (pageX - _canvas.offsetLeft) / _scale,
+          (pageY - _canvas.offsetTop) / _scale
+        ], _taps = /* @__PURE__ */ new Map(), _registerTap = (id, x, y) => {
+          const tap = {
+            x,
+            y,
+            startX: x,
+            startY: y,
+            // timestamp
+            ts: performance.now()
+          };
+          _taps.set(id, tap);
+          return tap;
+        }, _updateTap = (id, x, y) => {
+          const tap = _taps.get(id) || _registerTap(id);
+          tap.x = x;
+          tap.y = y;
+        }, _checkTapped = (tap) => tap && performance.now() - tap.ts <= 200;
+        let _pressingMouse = false;
+        on(_canvas, "mousedown", (ev) => {
+          ev.preventDefault();
+          const [x, y] = _getXY(ev.pageX, ev.pageY);
+          instance.emit("tap", x, y, 0);
+          _registerTap(0, x, y);
+          _pressingMouse = true;
+        });
+        on(_canvas, "mousemove", (ev) => {
+          ev.preventDefault();
+          const [x, y] = _getXY(ev.pageX, ev.pageY);
+          instance.setvar("MOUSEX", x);
+          instance.setvar("MOUSEY", y);
+          if (!_pressingMouse) return;
+          instance.emit("tapping", x, y, 0);
+          _updateTap(0, x, y);
+        });
+        on(_canvas, "mouseup", (ev) => {
+          ev.preventDefault();
+          const tap = _taps.get(0);
+          const [x, y] = _getXY(ev.pageX, ev.pageY);
+          if (_checkTapped(tap)) {
+            instance.emit("tapped", tap.startX, tap.startY, 0);
+          }
+          instance.emit("untap", x, y, 0);
+          _taps.delete(0);
+          _pressingMouse = false;
+        });
+        on(_canvas, "touchstart", (ev) => {
+          ev.preventDefault();
+          const touches = ev.changedTouches;
+          for (const touch of touches) {
+            const [x, y] = _getXY(touch.pageX, touch.pageY);
+            instance.emit("tap", x, y, touch.identifier + 1);
+            _registerTap(touch.identifier + 1, x, y);
+          }
+        });
+        on(_canvas, "touchmove", (ev) => {
+          ev.preventDefault();
+          const touches = ev.changedTouches;
+          for (const touch of touches) {
+            const [x, y] = _getXY(touch.pageX, touch.pageY);
+            instance.emit("tapping", x, y, touch.identifier + 1);
+            _updateTap(touch.identifier + 1, x, y);
+          }
+        });
+        const _touchEndHandler = (ev) => {
+          ev.preventDefault();
+          const existing = [];
+          if (ev.targetTouches.length > 0) {
+            for (const touch of ev.targetTouches) {
+              existing.push(touch.identifier + 1);
+            }
+          }
+          for (const [id, tap] of _taps) {
+            if (existing.includes(id)) continue;
+            if (_checkTapped(tap)) {
+              instance.emit("tapped", tap.startX, tap.startY, id);
+            }
+            instance.emit("untap", tap.x, tap.y, id);
+            _taps.delete(id);
+          }
+        };
+        on(_canvas, "touchend", _touchEndHandler);
+        on(_canvas, "touchcancel", _touchEndHandler);
+        on(root, "blur", () => {
+          _pressingMouse = false;
+          for (const [id, tap] of _taps) {
+            instance.emit("untap", tap.x, tap.y, id);
+            _taps.delete(id);
+          }
+        });
+      }
+      if (settings.keyboardEvents) {
+        const _keys = /* @__PURE__ */ new Set();
+        const iskeydown = (key) => "any" === key ? _keys.size > 0 : _keys.has(key.toLowerCase());
+        instance.setvar("iskeydown", iskeydown);
+        on(root, "keydown", (event) => {
+          _keys.add(event.key.toLowerCase());
+        });
+        on(root, "keyup", (event) => {
+          _keys.delete(event.key.toLowerCase());
+        });
+        on(root, "blur", () => _keys.clear());
+      }
+      if (settings.pauseOnBlur) {
+        on(root, "blur", () => {
+          _focused = false;
+        });
+        on(root, "focus", () => {
+          _focused = true;
+          raf(drawFrame);
+        });
+      }
+      instance.setfps(settings.fps);
+      instance.emit("init", instance);
+      _lastFrame = performance.now();
+      raf(drawFrame);
+    }
+    function drawFrame(now) {
+      let shouldRender = !_animated, delta = now - _lastFrame;
+      _accumulated += delta > 100 ? _stepMs : delta;
+      _lastFrame = now;
+      while (_accumulated >= _stepMs) {
+        instance.emit("update", _step * _timeScale);
+        instance.setvar("ELAPSED", instance.ELAPSED + _step * _timeScale);
+        _accumulated -= _stepMs;
+        shouldRender = true;
+      }
+      if (shouldRender) {
+        instance.textalign("start", "top");
+        instance.emit("draw");
+      }
+      if (_focused && _animated) {
+        raf(drawFrame);
+      }
+    }
+    function setupCanvas() {
+      _canvas = "string" === typeof _canvas ? document.querySelector(_canvas) : _canvas;
+      instance.setvar("CANVAS", _canvas);
+      _ctx = _canvas.getContext("2d");
+      on(_canvas, "click", () => root.focus());
+      if (instance.WIDTH > 0) {
+        _fullscreen = false;
+      }
+      _canvas.style = "";
+      _canvas.width = instance.WIDTH;
+      _canvas.height = instance.HEIGHT || instance.WIDTH;
+      if (!_canvas.parentNode) document.body.appendChild(_canvas);
+    }
+    function pageResized() {
+      const pageWidth = root.innerWidth, pageHeight = root.innerHeight, styles = _canvas.style;
+      styles.display = "block";
+      if (_fullscreen) {
+        styles.position = "absolute";
+        styles.inset = 0;
+        instance.setvar("WIDTH", _canvas.width = pageWidth);
+        instance.setvar("HEIGHT", _canvas.height = pageHeight);
+      } else if (_autoscale) {
+        styles.margin = "auto";
+        _scale = Math.min(
+          pageWidth / instance.WIDTH,
+          pageHeight / instance.HEIGHT
+        );
+        _scale = (settings.pixelart ? ~~_scale : _scale) || 1;
+        styles.width = instance.WIDTH * _scale + "px";
+        styles.height = instance.HEIGHT * _scale + "px";
+      }
+      instance.setvar("CENTERX", instance.WIDTH / 2);
+      instance.setvar("CENTERY", instance.HEIGHT / 2);
+      if (!settings.antialias || settings.pixelart) {
+        _ctx.imageSmoothingEnabled = false;
+        _canvas.style.imageRendering = "pixelated";
+      }
+      instance.emit("resized", _scale);
+      if (!_animated) {
+        raf(drawFrame);
+      }
+    }
+    function triggerEvent(eventName, arg1, arg2, arg3, arg4) {
+      if (!_events[eventName]) return;
+      for (const callback of _events[eventName]) {
+        callback(arg1, arg2, arg3, arg4);
+      }
+    }
+    function loadPlugin(callback, config) {
+      const pluginData = callback(instance, _helpers, config);
+      if ("object" === typeof pluginData) {
+        for (const key of Object.keys(pluginData)) {
+          instance.setvar(key, pluginData[key]);
+        }
+      }
+    }
+    if (_global) {
+      if (root.__litecanvas) {
+        throw "global litecanvas already instantiated";
+      }
+      Object.assign(root, instance);
+      root.__litecanvas = instance;
+    }
+    setupCanvas();
+    if ("loading" === document.readyState) {
+      on(root, "DOMContentLoaded", () => raf(init));
+    } else {
+      raf(init);
+    }
+    return instance;
+  }
+
   // src/actor/index.js
   var ANCHOR_CENTER = /* @__PURE__ */ vec(0.5, 0.5);
   var ANCHOR_TOP_LEFT = /* @__PURE__ */ vec(0, 0);
@@ -182,20 +1148,20 @@
      *
      * @param {LitecanvasInstance} [litecanvas]
      */
-    draw(litecanvas = globalThis, saveContext = true) {
+    draw(litecanvas2 = globalThis, saveContext = true) {
       if (this.hidden || this.opacity <= 0) return;
-      if (saveContext) litecanvas.push();
-      this.transform(litecanvas);
-      this.drawImage(litecanvas);
-      if (saveContext) litecanvas.pop();
+      if (saveContext) litecanvas2.push();
+      this.transform(litecanvas2);
+      this.drawImage(litecanvas2);
+      if (saveContext) litecanvas2.pop();
     }
     /**
      * @param {LitecanvasInstance} litecanvas
      */
-    transform(litecanvas) {
-      litecanvas.translate(this.pos.x, this.pos.y);
-      litecanvas.rotate(litecanvas.deg2rad(this.angle));
-      litecanvas.scale(
+    transform(litecanvas2) {
+      litecanvas2.translate(this.pos.x, this.pos.y);
+      litecanvas2.rotate(litecanvas2.deg2rad(this.angle));
+      litecanvas2.scale(
         (this.flipX ? -1 : 1) * this._s.x,
         (this.flipY ? -1 : 1) * this._s.y
       );
@@ -203,12 +1169,12 @@
     /**
      * @param {LitecanvasInstance} litecanvas
      */
-    drawImage(litecanvas, alpha = true) {
+    drawImage(litecanvas2, alpha = true) {
       const anchor = this.anchor;
       const x = -this.sprite.width * (this.flipX ? 1 - anchor.x : anchor.x);
       const y = -this.sprite.height * (this.flipY ? 1 - anchor.y : anchor.y);
-      if (alpha) litecanvas.alpha(this.opacity);
-      litecanvas.image(x, y, this.sprite);
+      if (alpha) litecanvas2.alpha(this.opacity);
+      litecanvas2.image(x, y, this.sprite);
     }
   };