litecanvas 0.205.0 → 0.206.1

package/dist/dist.dev.js

@@ -115,7 +115,7 @@
   var assert = (condition, message = "Assertion failed") => {
     if (!condition) throw new Error("[litecanvas] " + message);
   };
-  var version = "0.205.0";
+  var version = "0.206.1";
   function litecanvas(settings = {}) {
     const root = window,
       math = Math,
@@ -146,8 +146,9 @@
         keyboardEvents: true,
       };
     settings = Object.assign(defaults, settings);
-    let _initialized = false,
-      _paused = true,
+    let _loop = settings.loop,
+      _initialized = false,
+      _paused,
       _canvas,
       _canvasScale = 1,
       _ctx,
@@ -156,7 +157,7 @@
       _lastFrameTime,
       _fpsInterval = 1e3 / 60,
       _accumulated,
-      _rafid,
+      _rafid = 0,
       _defaultTextColor = 3,
       _fontFamily = "sans-serif",
       _fontSize = 20,
@@ -165,8 +166,6 @@
       _colorPalette = defaultPalette,
       _colorPaletteState = [],
       _defaultSound = [0.5, 0, 1750, , , 0.3, 1, , , , 600, 0.1],
-      _mathFunctions =
-        "PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp",
       _eventListeners = {};
     const instance = {
       W: 0,
@@ -846,17 +845,17 @@
         callback(_ctx);
         _ctx.clip();
       },
-      sfx(zzfxParams, pitchSlide = 0, volumeFactor = 1) {
+      sfx(zzfxParams, pitchSlide, volumeFactor) {
         DEV: assert(
           null == zzfxParams || Array.isArray(zzfxParams),
           loggerPrefix + "sfx() 1st param must be an array",
         );
         DEV: assert(
-          isNumber(pitchSlide),
+          null == pitchSlide || isNumber(pitchSlide),
           loggerPrefix + "sfx() 2nd param must be a number",
         );
         DEV: assert(
-          isNumber(volumeFactor),
+          null == volumeFactor || isNumber(volumeFactor),
           loggerPrefix + "sfx() 3rd param must be a number",
         );
         if (
@@ -865,10 +864,10 @@
         ) {
           return false;
         }
-        zzfxParams = zzfxParams || _defaultSound;
-        if (pitchSlide !== 0 || volumeFactor !== 1) {
+        zzfxParams ||= _defaultSound;
+        if (pitchSlide || volumeFactor) {
           zzfxParams = zzfxParams.slice();
-          zzfxParams[0] = volumeFactor * (zzfxParams[0] || 1);
+          zzfxParams[0] = (volumeFactor || 1) * (zzfxParams[0] || 1);
           zzfxParams[10] = ~~zzfxParams[10] + pitchSlide;
         }
         zzfx.apply(0, zzfxParams);
@@ -930,7 +929,7 @@
           eventName = lowerCase(eventName);
           triggerEvent("before:" + eventName, arg1, arg2, arg3, arg4);
           if (
-            !settings.loop &&
+            !_loop &&
             root[eventName] !== instance[eventName] &&
             "function" === typeof root[eventName]
           ) {
@@ -1033,7 +1032,7 @@
       pause() {
         if (!_paused) {
           _paused = true;
-          cancelAnimationFrame(_rafid);
+          _rafid = ~~cancelAnimationFrame(_rafid);
           instance.emit("paused");
         }
       },
@@ -1044,10 +1043,8 @@
             'resume() cannot be called before the "init" event and neither after the quit() function',
         );
         if (_initialized && _paused) {
+          startGameLoop();
           _paused = false;
-          _accumulated = _fpsInterval;
-          _lastFrameTime = perf.now();
-          _rafid = raf(drawFrame);
           instance.emit("resumed");
         }
       },
@@ -1073,9 +1070,18 @@
         );
       },
     };
-    for (const k of _mathFunctions.split(",")) {
+    const mathProps =
+      "PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp";
+    for (const k of mathProps.split(",")) {
       instance[k] = math[k];
     }
+    function startGameLoop() {
+      if (!_rafid) {
+        _accumulated = 0;
+        _lastFrameTime = perf.now();
+        _rafid = raf(drawFrame);
+      }
+    }
     function init() {
       if (settings.autoscale) {
         on(root, "resize", resizeCanvas);
@@ -1216,8 +1222,10 @@
         instance.def("lastkey", () => _lastKey);
       }
       _initialized = true;
-      instance.resume();
       instance.emit("init", instance);
+      if (!_paused) {
+        startGameLoop();
+      }
     }
     function drawFrame() {
       _rafid = raf(drawFrame);
@@ -1237,18 +1245,13 @@
         instance.emit("draw", _ctx);
         if (updated > 1) {
           _accumulated = 0;
-          DEV: console.warn(
-            loggerPrefix +
-              "the last frame updated " +
-              updated +
-              " times. This can drop the FPS if it keeps happening.",
-          );
         }
       }
     }
     function setupCanvas() {
+      const d = document;
       if ("string" === typeof settings.canvas) {
-        _canvas = document.querySelector(settings.canvas);
+        _canvas = d.querySelector(settings.canvas);
         DEV: assert(
           null != _canvas,
           loggerPrefix +
@@ -1257,7 +1260,7 @@
       } else {
         _canvas = settings.canvas;
       }
-      _canvas = _canvas || document.createElement("canvas");
+      _canvas = _canvas || d.createElement("canvas");
       DEV: assert(
         _canvas instanceof HTMLElement && "CANVAS" === _canvas.tagName,
         loggerPrefix +
@@ -1267,7 +1270,7 @@
       on(_canvas, "click", () => focus());
       resizeCanvas();
       if (!_canvas.parentNode) {
-        document.body.appendChild(_canvas);
+        d.body.appendChild(_canvas);
       }
       _canvas.style.imageRendering = "pixelated";
       _canvas.oncontextmenu = () => false;
@@ -1345,13 +1348,12 @@
     DEV: console.info(loggerPrefix + `version ${version} started`);
     DEV: console.debug(loggerPrefix + `litecanvas() options =`, settings);
     setupCanvas();
-    if (settings.loop) {
-      for (const eventName in settings.loop) {
-        if (settings.loop[eventName])
-          instance.listen(eventName, settings.loop[eventName]);
+    if (_loop) {
+      for (const eventName in _loop) {
+        if (_loop[eventName]) instance.listen(eventName, _loop[eventName]);
       }
     }
-    _rafid = raf(init);
+    raf(init);
     return instance;
   }
   window.litecanvas = litecanvas;

package/dist/dist.js

@@ -142,8 +142,9 @@
         keyboardEvents: true,
       };
     settings = Object.assign(defaults, settings);
-    let _initialized = false,
-      _paused = true,
+    let _loop = settings.loop,
+      _initialized = false,
+      _paused,
       _canvas,
       _canvasScale = 1,
       _ctx,
@@ -152,7 +153,7 @@
       _lastFrameTime,
       _fpsInterval = 1e3 / 60,
       _accumulated,
-      _rafid,
+      _rafid = 0,
       _defaultTextColor = 3,
       _fontFamily = "sans-serif",
       _fontSize = 20,
@@ -161,8 +162,6 @@
       _colorPalette = defaultPalette,
       _colorPaletteState = [],
       _defaultSound = [0.5, 0, 1750, , , 0.3, 1, , , , 600, 0.1],
-      _mathFunctions =
-        "PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp",
       _eventListeners = {};
     const instance = {
       W: 0,
@@ -385,17 +384,17 @@
         callback(_ctx);
         _ctx.clip();
       },
-      sfx(zzfxParams, pitchSlide = 0, volumeFactor = 1) {
+      sfx(zzfxParams, pitchSlide, volumeFactor) {
         if (
           !root.zzfxV ||
           (navigator.userActivation && !navigator.userActivation.hasBeenActive)
         ) {
           return false;
         }
-        zzfxParams = zzfxParams || _defaultSound;
-        if (pitchSlide !== 0 || volumeFactor !== 1) {
+        zzfxParams ||= _defaultSound;
+        if (pitchSlide || volumeFactor) {
           zzfxParams = zzfxParams.slice();
-          zzfxParams[0] = volumeFactor * (zzfxParams[0] || 1);
+          zzfxParams[0] = (volumeFactor || 1) * (zzfxParams[0] || 1);
           zzfxParams[10] = ~~zzfxParams[10] + pitchSlide;
         }
         zzfx.apply(0, zzfxParams);
@@ -424,7 +423,7 @@
           eventName = lowerCase(eventName);
           triggerEvent("before:" + eventName, arg1, arg2, arg3, arg4);
           if (
-            !settings.loop &&
+            !_loop &&
             root[eventName] !== instance[eventName] &&
             "function" === typeof root[eventName]
           ) {
@@ -482,16 +481,14 @@
       pause() {
         if (!_paused) {
           _paused = true;
-          cancelAnimationFrame(_rafid);
+          _rafid = ~~cancelAnimationFrame(_rafid);
           instance.emit("paused");
         }
       },
       resume() {
         if (_initialized && _paused) {
+          startGameLoop();
           _paused = false;
-          _accumulated = _fpsInterval;
-          _lastFrameTime = perf.now();
-          _rafid = raf(drawFrame);
           instance.emit("resumed");
         }
       },
@@ -514,9 +511,18 @@
         }
       },
     };
-    for (const k of _mathFunctions.split(",")) {
+    const mathProps =
+      "PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp";
+    for (const k of mathProps.split(",")) {
       instance[k] = math[k];
     }
+    function startGameLoop() {
+      if (!_rafid) {
+        _accumulated = 0;
+        _lastFrameTime = perf.now();
+        _rafid = raf(drawFrame);
+      }
+    }
     function init() {
       if (settings.autoscale) {
         on(root, "resize", resizeCanvas);
@@ -647,8 +653,10 @@
         instance.def("lastkey", () => _lastKey);
       }
       _initialized = true;
-      instance.resume();
       instance.emit("init", instance);
+      if (!_paused) {
+        startGameLoop();
+      }
     }
     function drawFrame() {
       _rafid = raf(drawFrame);
@@ -672,17 +680,18 @@
       }
     }
     function setupCanvas() {
+      const d = document;
       if ("string" === typeof settings.canvas) {
-        _canvas = document.querySelector(settings.canvas);
+        _canvas = d.querySelector(settings.canvas);
       } else {
         _canvas = settings.canvas;
       }
-      _canvas = _canvas || document.createElement("canvas");
+      _canvas = _canvas || d.createElement("canvas");
       _ctx = _canvas.getContext("2d");
       on(_canvas, "click", () => focus());
       resizeCanvas();
       if (!_canvas.parentNode) {
-        document.body.appendChild(_canvas);
+        d.body.appendChild(_canvas);
       }
       _canvas.style.imageRendering = "pixelated";
       _canvas.oncontextmenu = () => false;
@@ -736,13 +745,12 @@
       root.ENGINE = instance;
     }
     setupCanvas();
-    if (settings.loop) {
-      for (const eventName in settings.loop) {
-        if (settings.loop[eventName])
-          instance.listen(eventName, settings.loop[eventName]);
+    if (_loop) {
+      for (const eventName in _loop) {
+        if (_loop[eventName]) instance.listen(eventName, _loop[eventName]);
       }
     }
-    _rafid = raf(init);
+    raf(init);
     return instance;
   }
   window.litecanvas = litecanvas;

package/dist/dist.min.js

@@ -1 +1 @@
-(()=>{var e=["#211e20","#555568","#a0a08b","#e9efec"];window.litecanvas=function(t={}){let l,a=window,n=Math,i=performance,o=2*n.PI,r=requestAnimationFrame,s=[],f=(e,t,l)=>{e.addEventListener(t,l,!1),s.push(()=>e.removeEventListener(t,l,!1))},c=(l=new AudioContext,a.zzfxV=1,(e=1,t=.05,n=220,i=0,o=0,r=.1,s=0,f=1,c=0,d=0,p=0,u=0,h=0,m=0,g=0,w=0,v=0,x=1,y=0,b=0,k=0)=>{let E=Math,P=2*E.PI,T=c*=500*P/44100/44100,z=n*=(1-t+2*t*E.random(t=[]))*P/44100,C=0,I=0,L=0,D=1,A=0,S=0,H=0,M=k<0?-1:1,N=P*M*k*2/44100,W=E.cos(N),q=E.sin,B=q(N)/4,V=1+B,O=-2*W/V,R=(1-B)/V,F=(1+M*W)/2/V,G=-(M+W)/V,X=0,Y=0,$=0,j=0;for(i=44100*i+9,y*=44100,o*=44100,r*=44100,v*=44100,d*=500*P/85766121e6,g*=P/44100,p*=P/44100,u*=44100,h=44100*h|0,e*=.3*a.zzfxV,M=i+y+o+r+v|0;L<M;t[L++]=H*e)++S%(100*w|0)||(H=s?1<s?2<s?3<s?q(C*C):E.max(E.min(E.tan(C),1),-1):1-(2*C/P%2+2)%2:1-4*E.abs(E.round(C/P)-C/P):q(C),H=(h?1-b+b*q(P*L/h):1)*(H<0?-1:1)*E.abs(H)**f*(L<i?L/i:L<i+y?1-(L-i)/y*(1-x):L<i+y+o?x:L<M-v?(M-L-v)/r*x:0),H=v?H/2+(v>L?0:(L<M-v?1:(M-L)/v)*t[L-v|0]/2/e):H,k&&(H=j=F*X+G*(X=Y)+F*(Y=H)-R*$-O*($=j))),C+=(N=(n+=c+=d)*E.cos(g*I++))+N*m*q(L**5),D&&++D>u&&(n+=p,z+=p,D=0),!h||++A%h||(n=z,c=T,D=D||1);(e=l.createBuffer(1,M,44100)).getChannelData(0).set(t),(n=l.createBufferSource()).buffer=e,n.connect(l.destination),n.start()});t=Object.assign({width:null,height:null,autoscale:!0,canvas:null,global:!0,loop:null,tapEvents:!0,keyboardEvents:!0},t);let d=!1,p=!0,u,h=1,m,g=.5,w=1,v,x=1e3/60,y,b,k=3,E="sans-serif",P=20,T=1.2,z=Date.now(),C=e,I=[],L=[.5,0,1750,,,.3,1,,,,600,.1],D={},A={W:0,H:0,T:0,MX:-1,MY:-1,TWO_PI:o,HALF_PI:o/4,lerp:(e,t,l)=>e+l*(t-e),deg2rad:e=>n.PI/180*e,rad2deg:e=>180/n.PI*e,round:(e,t=0)=>{if(!t)return n.round(e);let l=10**t;return n.round(e*l)/l},clamp:(e,t,l)=>e<t?t:e>l?l:e,dist:(e,t,l,a)=>n.hypot(l-e,a-t),wrap:(e,t,l)=>e-(l-t)*n.floor((e-t)/(l-t)),map(e,t,l,a,n,i){let o=(e-t)/(l-t)*(n-a)+a;return i?A.clamp(o,a,n):o},norm:(e,t,l)=>A.map(e,t,l,0,1),rand:(e=0,t=1)=>(z=(1664525*z+0x3c6ef35f)%0x100000000)/0x100000000*(t-e)+e,randi:(e=0,t=1)=>~~A.rand(e,t+1),rseed(e){z=~~e},cls(e){null==e?m.clearRect(0,0,A.W,A.H):A.rectfill(0,0,A.W,A.H,e)},rect(e,t,l,a,n,i){m.beginPath(),m[i?"roundRect":"rect"](~~e-g,~~t-g,~~l+2*g,~~a+2*g,i),A.stroke(n)},rectfill(e,t,l,a,n,i){m.beginPath(),m[i?"roundRect":"rect"](~~e,~~t,~~l,~~a,i),A.fill(n)},circ(e,t,l,a){m.beginPath(),m.arc(~~e,~~t,~~l,0,o),A.stroke(a)},circfill(e,t,l,a){m.beginPath(),m.arc(~~e,~~t,~~l,0,o),A.fill(a)},oval(e,t,l,a,n){m.beginPath(),m.ellipse(~~e,~~t,~~l,~~a,0,0,o),A.stroke(n)},ovalfill(e,t,l,a,n){m.beginPath(),m.ellipse(~~e,~~t,~~l,~~a,0,0,o),A.fill(n)},shape(e){m.beginPath();for(let t=0;t<e.length;t+=2)0===t?m.moveTo(~~e[t],~~e[t+1]):m.lineTo(~~e[t],~~e[t+1]);m.lineTo(~~e[0],~~e[1])},line(e,t,l,a,n){m.beginPath();let i=.5*(0!==g&&~~e==~~l),o=.5*(0!==g&&~~t==~~a);m.moveTo(~~e+i,~~t+o),m.lineTo(~~l+i,~~a+o),A.stroke(n)},linewidth(e){m.lineWidth=~~e,g=.5*(0!=~~e%2)},linedash(e,t=0){m.setLineDash(e),m.lineDashOffset=t},text(e,t,l,a=k,n="normal"){m.font=`${n} ${P}px ${E}`,m.fillStyle=N(a);let i=(""+l).split("\n");for(let l=0;l<i.length;l++)m.fillText(i[l],~~e,~~t+P*T*l)},textgap(e){T=e},textfont(e){E=e},textsize(e){P=e},textalign(e,t){e&&(m.textAlign=e),t&&(m.textBaseline=t)},image(e,t,l){m.drawImage(l,~~e,~~t)},spr(e,t,l){let a=l.trim().split("\n");for(let l=0;l<a.length;l++){let n=a[l].trim();for(let a=0;a<n.length;a++){let i=n[a];"."!==i&&" "!==i&&A.rectfill(e+a,t+l,1,1,parseInt(i,36)||0)}}},paint(e,t,l,a={}){let n=a.canvas||new OffscreenCanvas(1,1),i=a.scale||1,o=m;return n.width=e*i,n.height=t*i,(m=n.getContext("2d")).scale(i,i),l(m),m=o,n.transferToImageBitmap()},ctx:e=>(e&&(m=e),m),push(){m.save()},pop(){m.restore()},translate(e,t){m.translate(~~e,~~t)},scale(e,t=e){m.scale(e,t)},rotate(e){m.rotate(e)},alpha(e){m.globalAlpha=A.clamp(e,0,1)},fill(e){m.fillStyle=N(e),m.fill()},stroke(e){m.strokeStyle=N(e),m.stroke()},clip(e){m.beginPath(),e(m),m.clip()},sfx:(e,t=0,l=1)=>!!a.zzfxV&&(!navigator.userActivation||!!navigator.userActivation.hasBeenActive)&&(e=e||L,(0!==t||1!==l)&&((e=e.slice())[0]=l*(e[0]||1),e[10]=~~e[10]+t),c.apply(0,e),e),volume(e){a.zzfxV=e},canvas:()=>u,use(e,t={}){var l=e,a=t;let n=l(A,a);for(let e in n)A.def(e,n[e])},listen:(e,t)=>{D[e=e.toLowerCase()]=D[e]||new Set,D[e].add(t)},unlisten:(e,t)=>{D[e=e.toLowerCase()]&&D[e].delete(t)},emit:(e,l,n,i,o)=>(d&&(M("before:"+(e=e.toLowerCase()),l,n,i,o),t.loop||a[e]===A[e]||"function"!=typeof a[e]||a[e](l,n,i,o),M(e,l,n,i,o),M("after:"+e,l,n,i,o)),l),pal(t,l=3){C=t||e,I=[],k=l,A.emit("pal",C,k)},palc(e,t){null==e?I=[]:I[e]=t},def(e,l){A[e]=l,t.global&&(a[e]=l)},timescale(e){w=e},framerate(e){x=1e3/~~e},stat:e=>[t,d,x/1e3,h,D,C,L,w,a.zzfxV,z,P,E,I,T][e],pause(){p||(p=!0,cancelAnimationFrame(b),A.emit("paused"))},resume(){d&&p&&(p=!1,y=x,v=i.now(),b=r(S),A.emit("resumed"))},ispaused:()=>p,quit(){for(let e of(A.emit("quit"),A.pause(),d=!1,D={},s))e();if(t.global){for(let e in A)delete a[e];delete a.ENGINE}}};for(let e of"PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp".split(","))A[e]=n[e];function S(){b=r(S);let e=i.now(),t=0,l=e-v;for(v=e,y+=l<100?l:x;y>=x;){t++,y-=x;let e=x/1e3*w;A.emit("update",e,t),A.def("T",A.T+e)}t&&(A.emit("draw",m),t>1&&(y=0))}function H(){let e=t.width>0?t.width:innerWidth,l=t.width>0?t.height||t.width:innerHeight;if(A.def("W",e),A.def("H",l),u.width=e,u.height=l,t.autoscale){let a=+t.autoscale;u.style.display||(u.style.display="block",u.style.margin="auto"),h=n.min(innerWidth/e,innerHeight/l),h=a>1&&h>a?a:h,u.style.width=e*h+"px",u.style.height=l*h+"px"}m.imageSmoothingEnabled=!1,A.textalign("start","top"),A.emit("resized",h)}function M(e,t,l,a,n){if(D[e])for(let i of D[e])i(t,l,a,n)}function N(e){return C[~~(I[e]??e)%C.length]}if(t.global){if(a.ENGINE)throw Error("only one global litecanvas is allowed");Object.assign(a,A),a.ENGINE=A}if(m=(u=(u="string"==typeof t.canvas?document.querySelector(t.canvas):t.canvas)||document.createElement("canvas")).getContext("2d"),f(u,"click",()=>focus()),H(),u.parentNode||document.body.appendChild(u),u.style.imageRendering="pixelated",u.oncontextmenu=()=>!1,t.loop)for(let e in t.loop)t.loop[e]&&A.listen(e,t.loop[e]);return b=r(function(){if(t.autoscale&&f(a,"resize",H),t.tapEvents){let e=e=>[(e.pageX-u.offsetLeft)/h,(e.pageY-u.offsetTop)/h],t=new Map,l=(e,l,a)=>{let n={x:l,y:a,xi:l,yi:a,t:i.now()};return t.set(e,n),n},n=(e,a,n)=>{let i=t.get(e)||l(e);i.x=a,i.y=n},o=e=>e&&i.now()-e.t<=300,r=!1;f(u,"mousedown",t=>{if(0===t.button){t.preventDefault();let[a,n]=e(t);A.emit("tap",a,n,0),l(0,a,n),r=!0}}),f(u,"mouseup",l=>{if(0===l.button){l.preventDefault();let a=t.get(0),[n,i]=e(l);o(a)&&A.emit("tapped",a.xi,a.yi,0),A.emit("untap",n,i,0),t.delete(0),r=!1}}),f(a,"mousemove",t=>{t.preventDefault();let[l,a]=e(t);A.def("MX",l),A.def("MY",a),r&&(A.emit("tapping",l,a,0),n(0,l,a))}),f(u,"touchstart",t=>{for(let a of(t.preventDefault(),t.changedTouches)){let[t,n]=e(a);A.emit("tap",t,n,a.identifier+1),l(a.identifier+1,t,n)}}),f(u,"touchmove",t=>{for(let l of(t.preventDefault(),t.changedTouches)){let[t,a]=e(l);A.emit("tapping",t,a,l.identifier+1),n(l.identifier+1,t,a)}});let s=e=>{e.preventDefault();let l=[];if(e.targetTouches.length>0)for(let t of e.targetTouches)l.push(t.identifier+1);for(let[e,a]of t)l.includes(e)||(o(a)&&A.emit("tapped",a.xi,a.yi,e),A.emit("untap",a.x,a.y,e),t.delete(e))};f(u,"touchend",s),f(u,"touchcancel",s),f(a,"blur",()=>{for(let[e,l]of(r=!1,t))A.emit("untap",l.x,l.y,e),t.delete(e)})}if(t.keyboardEvents){let e=new Set,t=new Set,l=(e,t="")=>(t=t.toLowerCase())?e.has("space"===t?" ":t):e.size>0,n="";f(a,"keydown",l=>{let a=l.key.toLowerCase();e.has(a)||(e.add(a),t.add(a),n=" "===a?"space":a)}),f(a,"keyup",t=>{e.delete(t.key.toLowerCase())}),f(a,"blur",()=>e.clear()),A.listen("after:update",()=>t.clear()),A.def("iskeydown",t=>l(e,t)),A.def("iskeypressed",e=>l(t,e)),A.def("lastkey",()=>n)}d=!0,A.resume(),A.emit("init",A)}),A}})();
+(()=>{var e=["#211e20","#555568","#a0a08b","#e9efec"];window.litecanvas=function(t={}){let a,l,n=window,i=Math,o=performance,r=2*i.PI,s=requestAnimationFrame,f=[],c=(e,t,a)=>{e.addEventListener(t,a,!1),f.push(()=>e.removeEventListener(t,a,!1))},d=(a=new AudioContext,n.zzfxV=1,(e=1,t=.05,l=220,i=0,o=0,r=.1,s=0,f=1,c=0,d=0,u=0,p=0,h=0,m=0,g=0,w=0,v=0,x=1,y=0,b=0,k=0)=>{let E=Math,P=2*E.PI,T=c*=500*P/44100/44100,z=l*=(1-t+2*t*E.random(t=[]))*P/44100,C=0,I=0,L=0,D=1,A=0,S=0,H=0,M=k<0?-1:1,N=P*M*k*2/44100,W=E.cos(N),q=E.sin,B=q(N)/4,V=1+B,O=-2*W/V,R=(1-B)/V,F=(1+M*W)/2/V,G=-(M+W)/V,X=0,Y=0,$=0,j=0;for(i=44100*i+9,y*=44100,o*=44100,r*=44100,v*=44100,d*=500*P/85766121e6,g*=P/44100,u*=P/44100,p*=44100,h=44100*h|0,e*=.3*n.zzfxV,M=i+y+o+r+v|0;L<M;t[L++]=H*e)++S%(100*w|0)||(H=s?1<s?2<s?3<s?q(C*C):E.max(E.min(E.tan(C),1),-1):1-(2*C/P%2+2)%2:1-4*E.abs(E.round(C/P)-C/P):q(C),H=(h?1-b+b*q(P*L/h):1)*(H<0?-1:1)*E.abs(H)**f*(L<i?L/i:L<i+y?1-(L-i)/y*(1-x):L<i+y+o?x:L<M-v?(M-L-v)/r*x:0),H=v?H/2+(v>L?0:(L<M-v?1:(M-L)/v)*t[L-v|0]/2/e):H,k&&(H=j=F*X+G*(X=Y)+F*(Y=H)-R*$-O*($=j))),C+=(N=(l+=c+=d)*E.cos(g*I++))+N*m*q(L**5),D&&++D>p&&(l+=u,z+=u,D=0),!h||++A%h||(l=z,c=T,D=D||1);(e=a.createBuffer(1,M,44100)).getChannelData(0).set(t),(l=a.createBufferSource()).buffer=e,l.connect(a.destination),l.start()}),u=(t=Object.assign({width:null,height:null,autoscale:!0,canvas:null,global:!0,loop:null,tapEvents:!0,keyboardEvents:!0},t)).loop,p=!1,h,m,g=1,w,v=.5,x=1,y,b=1e3/60,k,E=0,P=3,T="sans-serif",z=20,C=1.2,I=Date.now(),L=e,D=[],A=[.5,0,1750,,,.3,1,,,,600,.1],S={},H={W:0,H:0,T:0,MX:-1,MY:-1,TWO_PI:r,HALF_PI:r/4,lerp:(e,t,a)=>e+a*(t-e),deg2rad:e=>i.PI/180*e,rad2deg:e=>180/i.PI*e,round:(e,t=0)=>{if(!t)return i.round(e);let a=10**t;return i.round(e*a)/a},clamp:(e,t,a)=>e<t?t:e>a?a:e,dist:(e,t,a,l)=>i.hypot(a-e,l-t),wrap:(e,t,a)=>e-(a-t)*i.floor((e-t)/(a-t)),map(e,t,a,l,n,i){let o=(e-t)/(a-t)*(n-l)+l;return i?H.clamp(o,l,n):o},norm:(e,t,a)=>H.map(e,t,a,0,1),rand:(e=0,t=1)=>(I=(1664525*I+0x3c6ef35f)%0x100000000)/0x100000000*(t-e)+e,randi:(e=0,t=1)=>~~H.rand(e,t+1),rseed(e){I=~~e},cls(e){null==e?w.clearRect(0,0,H.W,H.H):H.rectfill(0,0,H.W,H.H,e)},rect(e,t,a,l,n,i){w.beginPath(),w[i?"roundRect":"rect"](~~e-v,~~t-v,~~a+2*v,~~l+2*v,i),H.stroke(n)},rectfill(e,t,a,l,n,i){w.beginPath(),w[i?"roundRect":"rect"](~~e,~~t,~~a,~~l,i),H.fill(n)},circ(e,t,a,l){w.beginPath(),w.arc(~~e,~~t,~~a,0,r),H.stroke(l)},circfill(e,t,a,l){w.beginPath(),w.arc(~~e,~~t,~~a,0,r),H.fill(l)},oval(e,t,a,l,n){w.beginPath(),w.ellipse(~~e,~~t,~~a,~~l,0,0,r),H.stroke(n)},ovalfill(e,t,a,l,n){w.beginPath(),w.ellipse(~~e,~~t,~~a,~~l,0,0,r),H.fill(n)},shape(e){w.beginPath();for(let t=0;t<e.length;t+=2)0===t?w.moveTo(~~e[t],~~e[t+1]):w.lineTo(~~e[t],~~e[t+1]);w.lineTo(~~e[0],~~e[1])},line(e,t,a,l,n){w.beginPath();let i=.5*(0!==v&&~~e==~~a),o=.5*(0!==v&&~~t==~~l);w.moveTo(~~e+i,~~t+o),w.lineTo(~~a+i,~~l+o),H.stroke(n)},linewidth(e){w.lineWidth=~~e,v=.5*(0!=~~e%2)},linedash(e,t=0){w.setLineDash(e),w.lineDashOffset=t},text(e,t,a,l=P,n="normal"){w.font=`${n} ${z}px ${T}`,w.fillStyle=B(l);let i=(""+a).split("\n");for(let a=0;a<i.length;a++)w.fillText(i[a],~~e,~~t+z*C*a)},textgap(e){C=e},textfont(e){T=e},textsize(e){z=e},textalign(e,t){e&&(w.textAlign=e),t&&(w.textBaseline=t)},image(e,t,a){w.drawImage(a,~~e,~~t)},spr(e,t,a){let l=a.trim().split("\n");for(let a=0;a<l.length;a++){let n=l[a].trim();for(let l=0;l<n.length;l++){let i=n[l];"."!==i&&" "!==i&&H.rectfill(e+l,t+a,1,1,parseInt(i,36)||0)}}},paint(e,t,a,l={}){let n=l.canvas||new OffscreenCanvas(1,1),i=l.scale||1,o=w;return n.width=e*i,n.height=t*i,(w=n.getContext("2d")).scale(i,i),a(w),w=o,n.transferToImageBitmap()},ctx:e=>(e&&(w=e),w),push(){w.save()},pop(){w.restore()},translate(e,t){w.translate(~~e,~~t)},scale(e,t=e){w.scale(e,t)},rotate(e){w.rotate(e)},alpha(e){w.globalAlpha=H.clamp(e,0,1)},fill(e){w.fillStyle=B(e),w.fill()},stroke(e){w.strokeStyle=B(e),w.stroke()},clip(e){w.beginPath(),e(w),w.clip()},sfx:(e,t,a)=>!!n.zzfxV&&(!navigator.userActivation||!!navigator.userActivation.hasBeenActive)&&(e||=A,(t||a)&&((e=e.slice())[0]=(a||1)*(e[0]||1),e[10]=~~e[10]+t),d.apply(0,e),e),volume(e){n.zzfxV=e},canvas:()=>m,use(e,t={}){var a=e,l=t;let n=a(H,l);for(let e in n)H.def(e,n[e])},listen:(e,t)=>{S[e=e.toLowerCase()]=S[e]||new Set,S[e].add(t)},unlisten:(e,t)=>{S[e=e.toLowerCase()]&&S[e].delete(t)},emit:(e,t,a,l,i)=>(p&&(q("before:"+(e=e.toLowerCase()),t,a,l,i),u||n[e]===H[e]||"function"!=typeof n[e]||n[e](t,a,l,i),q(e,t,a,l,i),q("after:"+e,t,a,l,i)),t),pal(t,a=3){L=t||e,D=[],P=a,H.emit("pal",L,P)},palc(e,t){null==e?D=[]:D[e]=t},def(e,a){H[e]=a,t.global&&(n[e]=a)},timescale(e){x=e},framerate(e){b=1e3/~~e},stat:e=>[t,p,b/1e3,g,S,L,A,x,n.zzfxV,I,z,T,D,C][e],pause(){h||(h=!0,E=~~cancelAnimationFrame(E),H.emit("paused"))},resume(){p&&h&&(M(),h=!1,H.emit("resumed"))},ispaused:()=>h,quit(){for(let e of(H.emit("quit"),H.pause(),p=!1,S={},f))e();if(t.global){for(let e in H)delete n[e];delete n.ENGINE}}};for(let e of"PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp".split(","))H[e]=i[e];function M(){E||(k=0,y=o.now(),E=s(N))}function N(){E=s(N);let e=o.now(),t=0,a=e-y;for(y=e,k+=a<100?a:b;k>=b;){t++,k-=b;let e=b/1e3*x;H.emit("update",e,t),H.def("T",H.T+e)}t&&(H.emit("draw",w),t>1&&(k=0))}function W(){let e=t.width>0?t.width:innerWidth,a=t.width>0?t.height||t.width:innerHeight;if(H.def("W",e),H.def("H",a),m.width=e,m.height=a,t.autoscale){let l=+t.autoscale;m.style.display||(m.style.display="block",m.style.margin="auto"),g=i.min(innerWidth/e,innerHeight/a),g=l>1&&g>l?l:g,m.style.width=e*g+"px",m.style.height=a*g+"px"}w.imageSmoothingEnabled=!1,H.textalign("start","top"),H.emit("resized",g)}function q(e,t,a,l,n){if(S[e])for(let i of S[e])i(t,a,l,n)}function B(e){return L[~~(D[e]??e)%L.length]}if(t.global){if(n.ENGINE)throw Error("only one global litecanvas is allowed");Object.assign(n,H),n.ENGINE=H}if(l=document,w=(m=(m="string"==typeof t.canvas?l.querySelector(t.canvas):t.canvas)||l.createElement("canvas")).getContext("2d"),c(m,"click",()=>focus()),W(),m.parentNode||l.body.appendChild(m),m.style.imageRendering="pixelated",m.oncontextmenu=()=>!1,u)for(let e in u)u[e]&&H.listen(e,u[e]);return s(function(){if(t.autoscale&&c(n,"resize",W),t.tapEvents){let e=e=>[(e.pageX-m.offsetLeft)/g,(e.pageY-m.offsetTop)/g],t=new Map,a=(e,a,l)=>{let n={x:a,y:l,xi:a,yi:l,t:o.now()};return t.set(e,n),n},l=(e,l,n)=>{let i=t.get(e)||a(e);i.x=l,i.y=n},i=e=>e&&o.now()-e.t<=300,r=!1;c(m,"mousedown",t=>{if(0===t.button){t.preventDefault();let[l,n]=e(t);H.emit("tap",l,n,0),a(0,l,n),r=!0}}),c(m,"mouseup",a=>{if(0===a.button){a.preventDefault();let l=t.get(0),[n,o]=e(a);i(l)&&H.emit("tapped",l.xi,l.yi,0),H.emit("untap",n,o,0),t.delete(0),r=!1}}),c(n,"mousemove",t=>{t.preventDefault();let[a,n]=e(t);H.def("MX",a),H.def("MY",n),r&&(H.emit("tapping",a,n,0),l(0,a,n))}),c(m,"touchstart",t=>{for(let l of(t.preventDefault(),t.changedTouches)){let[t,n]=e(l);H.emit("tap",t,n,l.identifier+1),a(l.identifier+1,t,n)}}),c(m,"touchmove",t=>{for(let a of(t.preventDefault(),t.changedTouches)){let[t,n]=e(a);H.emit("tapping",t,n,a.identifier+1),l(a.identifier+1,t,n)}});let s=e=>{e.preventDefault();let a=[];if(e.targetTouches.length>0)for(let t of e.targetTouches)a.push(t.identifier+1);for(let[e,l]of t)a.includes(e)||(i(l)&&H.emit("tapped",l.xi,l.yi,e),H.emit("untap",l.x,l.y,e),t.delete(e))};c(m,"touchend",s),c(m,"touchcancel",s),c(n,"blur",()=>{for(let[e,a]of(r=!1,t))H.emit("untap",a.x,a.y,e),t.delete(e)})}if(t.keyboardEvents){let e=new Set,t=new Set,a=(e,t="")=>(t=t.toLowerCase())?e.has("space"===t?" ":t):e.size>0,l="";c(n,"keydown",a=>{let n=a.key.toLowerCase();e.has(n)||(e.add(n),t.add(n),l=" "===n?"space":n)}),c(n,"keyup",t=>{e.delete(t.key.toLowerCase())}),c(n,"blur",()=>e.clear()),H.listen("after:update",()=>t.clear()),H.def("iskeydown",t=>a(e,t)),H.def("iskeypressed",e=>a(t,e)),H.def("lastkey",()=>l)}p=!0,H.emit("init",H),h||M()}),H}})();

package/package.json

@@ -1,11 +1,11 @@
 {
     "name": "litecanvas",
-    "version": "0.205.0",
+    "version": "0.206.1",
     "description": "Lightweight HTML5 canvas 2D game engine suitable for small projects and creative coding. Inspired by PICO-8 and p5.js/Processing.",
     "license": "MIT",
     "author": "Luiz Bills <luizbills@pm.me>",
     "contributors": [],
-    "homepage": "https://litecanvas.github.io",
+    "homepage": "https://litecanvas.js.org",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/litecanvas/game-engine.git"
@@ -34,9 +34,9 @@
     "devDependencies": {
         "@happy-dom/global-registrator": "^20.9.0",
         "@size-limit/preset-small-lib": "^12.1.0",
-        "@swc/core": "^1.15.30",
+        "@swc/core": "^1.15.33",
         "ava": "^7.0.0",
-        "esbuild": "^0.27.7",
+        "esbuild": "^0.28.0",
         "genversion": "^3.2.0",
         "gzip-size": "^7.0.0",
         "prettier": "^3.8.3",

package/src/index.js

@@ -11,8 +11,7 @@ import { version } from './version.js'
  * @returns {LitecanvasInstance}
  */
 export default function litecanvas(settings = {}) {
-    const /** @type {Window} */
-        root = window,
+    const root = window,
         math = Math,
         perf = performance,
         TWO_PI = math.PI * 2,
@@ -48,10 +47,11 @@ export default function litecanvas(settings = {}) {
     // setup the settings default values
     settings = Object.assign(defaults, settings)
 
-    let /** @type {boolean} */
+    let _loop = settings.loop,
+        /** @type {boolean} */
         _initialized = false,
         /** @type {boolean} */
-        _paused = true,
+        _paused,
         /** @type {HTMLCanvasElement} _canvas */
         _canvas,
         /** @type {number} */
@@ -68,8 +68,8 @@ export default function litecanvas(settings = {}) {
         _fpsInterval = 1000 / 60,
         /** @type {number} */
         _accumulated,
-        /** @type {number?} */
-        _rafid,
+        /** @type {number} */
+        _rafid = 0,
         /** @type {number} */
         _defaultTextColor = 3,
         /** @type {string} */
@@ -86,9 +86,6 @@ export default function litecanvas(settings = {}) {
         _colorPaletteState = [],
         /** @type {number[]} */
         _defaultSound = [0.5, 0, 1750, , , 0.3, 1, , , , 600, 0.1],
-        /** @type {string} list of functions copied from `Math` module */
-        _mathFunctions =
-            'PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp',
         /**
          * @type {Object<string,Set<Function>>} game event listeners
          */
@@ -1008,13 +1005,19 @@ export default function litecanvas(settings = {}) {
          *
          * @see https://github.com/KilledByAPixel/ZzFX
          */
-        sfx(zzfxParams, pitchSlide = 0, volumeFactor = 1) {
+        sfx(zzfxParams, pitchSlide, volumeFactor) {
             DEV: assert(
                 null == zzfxParams || Array.isArray(zzfxParams),
                 loggerPrefix + 'sfx() 1st param must be an array'
             )
-            DEV: assert(isNumber(pitchSlide), loggerPrefix + 'sfx() 2nd param must be a number')
-            DEV: assert(isNumber(volumeFactor), loggerPrefix + 'sfx() 3rd param must be a number')
+            DEV: assert(
+                null == pitchSlide || isNumber(pitchSlide),
+                loggerPrefix + 'sfx() 2nd param must be a number'
+            )
+            DEV: assert(
+                null == volumeFactor || isNumber(volumeFactor),
+                loggerPrefix + 'sfx() 3rd param must be a number'
+            )
 
             if (
                 !root.zzfxV ||
@@ -1023,12 +1026,12 @@ export default function litecanvas(settings = {}) {
                 return false
             }
 
-            zzfxParams = zzfxParams || _defaultSound
+            zzfxParams ||= _defaultSound
 
             // if has other arguments, copy the sound to not change the original
-            if (pitchSlide !== 0 || volumeFactor !== 1) {
+            if (pitchSlide || volumeFactor) {
                 zzfxParams = zzfxParams.slice()
-                zzfxParams[0] = volumeFactor * (zzfxParams[0] || 1)
+                zzfxParams[0] = (volumeFactor || 1) * (zzfxParams[0] || 1)
                 zzfxParams[10] = ~~zzfxParams[10] + pitchSlide
             }
 
@@ -1153,7 +1156,7 @@ export default function litecanvas(settings = {}) {
                 // calls a global function with the same name as the event,
                 // as long as it's not a global litecanvas function (to avoid infinite loops)
                 if (
-                    !settings.loop &&
+                    !_loop &&
                     root[eventName] !== instance[eventName] &&
                     'function' === typeof root[eventName] /* if is a function */
                 ) {
@@ -1343,7 +1346,7 @@ export default function litecanvas(settings = {}) {
         pause() {
             if (!_paused) {
                 _paused = true
-                cancelAnimationFrame(_rafid)
+                _rafid = ~~cancelAnimationFrame(_rafid)
                 instance.emit('paused')
             }
         },
@@ -1358,10 +1361,8 @@ export default function litecanvas(settings = {}) {
                     'resume() cannot be called before the "init" event and neither after the quit() function'
             )
             if (_initialized && _paused) {
+                startGameLoop()
                 _paused = false
-                _accumulated = _fpsInterval
-                _lastFrameTime = perf.now()
-                _rafid = raf(drawFrame)
                 instance.emit('resumed')
             }
         },
@@ -1409,11 +1410,20 @@ export default function litecanvas(settings = {}) {
     }
 
     // prettier-ignore
-    for (const k of _mathFunctions.split(',')) {
+    const mathProps = 'PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp'
+    for (const k of mathProps.split(',')) {
         // import native Math functions
         instance[k] = math[k]
     }
 
+    function startGameLoop() {
+        if (!_rafid) {
+            _accumulated = 0
+            _lastFrameTime = perf.now()
+            _rafid = raf(drawFrame)
+        }
+    }
+
     function init() {
         // listen window resize event when "autoscale" is enabled
         if (settings.autoscale) {
@@ -1600,6 +1610,7 @@ export default function litecanvas(settings = {}) {
             })
         }
 
+        // default keyboard handler
         if (settings.keyboardEvents) {
             /** @type {Set<string>} */
             const _keysDown = new Set()
@@ -1677,8 +1688,10 @@ export default function litecanvas(settings = {}) {
 
         // start the engine
         _initialized = true
-        instance.resume()
         instance.emit('init', instance)
+        if (!_paused) {
+            startGameLoop()
+        }
     }
 
     function drawFrame() {
@@ -1703,22 +1716,24 @@ export default function litecanvas(settings = {}) {
         }
 
         if (updated) {
+            // draws only when an update happens.
             instance.emit('draw', _ctx)
+
+            // sometimes the FPS locks at a value below 60
+            // and does not go back up, even with a very simple logic.
+            // One solution I found was to reset the variable that
+            // accumulates time between frames, when multiple updates occur.
             if (updated > 1) {
                 _accumulated = 0
-                DEV: console.warn(
-                    loggerPrefix +
-                        'the last frame updated ' +
-                        updated +
-                        ' times. This can drop the FPS if it keeps happening.'
-                )
             }
         }
     }
 
     function setupCanvas() {
+        const d = document
+
         if ('string' === typeof settings.canvas) {
-            _canvas = document.querySelector(settings.canvas)
+            _canvas = d.querySelector(settings.canvas)
             DEV: assert(
                 null != _canvas,
                 loggerPrefix + 'litecanvas() option "canvas" is an invalid CSS selector'
@@ -1727,7 +1742,7 @@ export default function litecanvas(settings = {}) {
             _canvas = settings.canvas
         }
 
-        _canvas = _canvas || document.createElement('canvas')
+        _canvas = _canvas || d.createElement('canvas')
 
         DEV: assert(
             _canvas instanceof HTMLElement && 'CANVAS' === _canvas.tagName,
@@ -1742,7 +1757,7 @@ export default function litecanvas(settings = {}) {
         resizeCanvas()
 
         if (!_canvas.parentNode) {
-            document.body.appendChild(_canvas)
+            d.body.appendChild(_canvas)
         }
 
         _canvas.style.imageRendering = 'pixelated'
@@ -1856,14 +1871,14 @@ export default function litecanvas(settings = {}) {
     setupCanvas()
 
     // setup default event listeners
-    if (settings.loop) {
-        for (const eventName in settings.loop) {
-            if (settings.loop[eventName]) instance.listen(eventName, settings.loop[eventName])
+    if (_loop) {
+        for (const eventName in _loop) {
+            if (_loop[eventName]) instance.listen(eventName, _loop[eventName])
         }
     }
 
     // init the engine (async)
-    _rafid = raf(init)
+    raf(init)
 
     return instance
 }

package/src/version.js

@@ -1,2 +1,2 @@
 // Generated by genversion.
-export const version = '0.205.0'
+export const version = '0.206.1'