litecanvas 0.57.0 → 0.58.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/dist.js +15 -2
- package/dist/dist.min.js +1 -1
- package/package.json +1 -1
- package/src/index.js +32 -2
- package/types/index.d.ts +10 -1
- package/types/types.d.ts +11 -1
package/dist/dist.js
CHANGED
|
@@ -54,8 +54,9 @@
|
|
|
54
54
|
canvas: null,
|
|
55
55
|
global: true,
|
|
56
56
|
loop: null,
|
|
57
|
+
pauseOnBlur: true,
|
|
57
58
|
tapEvents: true,
|
|
58
|
-
|
|
59
|
+
keyboardEvents: true
|
|
59
60
|
};
|
|
60
61
|
settings = Object.assign(defaults, settings);
|
|
61
62
|
let _initialized = false, _plugins = [], _canvas = settings.canvas || document.createElement("canvas"), _fullscreen = settings.fullscreen, _autoscale = settings.autoscale, _scale = 1, _mouseX, _mouseY, _ctx, _timeScale = 1, _lastFrame, _step = 1 / settings.fps, _stepMs = _step * 1e3, _accumulated = 0, _rafid, _drawCount = 0, _drawTime = 0, _fontFamily = "sans-serif", _fontStyle = "", _fontSize = 32, _rng_seed = Date.now(), _events = {
|
|
@@ -849,6 +850,18 @@
|
|
|
849
850
|
}
|
|
850
851
|
});
|
|
851
852
|
}
|
|
853
|
+
if (settings.keyboardEvents) {
|
|
854
|
+
const _keys = /* @__PURE__ */ new Set();
|
|
855
|
+
const iskeydown = (key) => "any" === key ? _keys.size > 0 : _keys.has(key.toLowerCase());
|
|
856
|
+
instance.setvar("iskeydown", iskeydown);
|
|
857
|
+
on(root, "keydown", (event) => {
|
|
858
|
+
_keys.add(event.key.toLowerCase());
|
|
859
|
+
});
|
|
860
|
+
on(root, "keyup", (event) => {
|
|
861
|
+
_keys.delete(event.key.toLowerCase());
|
|
862
|
+
});
|
|
863
|
+
on(root, "blur", () => _keys.clear());
|
|
864
|
+
}
|
|
852
865
|
if (settings.pauseOnBlur) {
|
|
853
866
|
on(root, "blur", () => {
|
|
854
867
|
_rafid = null;
|
|
@@ -941,7 +954,7 @@
|
|
|
941
954
|
}
|
|
942
955
|
if (settings.global) {
|
|
943
956
|
if (root.__litecanvas) {
|
|
944
|
-
throw "
|
|
957
|
+
throw "global litecanvas already instantiated";
|
|
945
958
|
}
|
|
946
959
|
Object.assign(root, instance);
|
|
947
960
|
root.__litecanvas = instance;
|
package/dist/dist.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(()=>{var e=/* @__PURE__ */new AudioContext;globalThis.zzfxV=1;var t=(t=1,a=.05,l=220,n=0,
|
|
1
|
+
(()=>{var e=/* @__PURE__ */new AudioContext;globalThis.zzfxV=1;var t=(t=1,a=.05,l=220,n=0,r=0,i=.1,o=0,s=1,c=0,f=0,p=0,u=0,d=0,g=0,h=0,m=0,v=0,b=1,T=0,x=0,y=0)=>{let E=Math,w=2*E.PI,H=c*=500*w/44100/44100,D=l*=(1-a+2*a*E.random(a=[]))*w/44100,I=0,A=0,P=0,S=1,C=0,k=0,z=0,L=y<0?-1:1,W=w*L*y*2/44100,X=E.cos(W),O=E.sin,_=O(W)/4,B=1+_,F=-2*X/B,Y=(1-_)/B,G=(1+L*X)/2/B,M=-(L+X)/B,R=0,N=0,j=0,V=0;for(n=44100*n+9,T*=44100,r*=44100,i*=44100,v*=44100,f*=500*w/85766121e6,h*=w/44100,p*=w/44100,u*=44100,d=44100*d|0,t*=.3*globalThis.zzfxV,L=n+T+r+i+v|0;P<L;a[P++]=z*t)++k%(100*m|0)||(z=o?1<o?2<o?3<o?O(I*I):E.max(E.min(E.tan(I),1),-1):1-(2*I/w%2+2)%2:1-4*E.abs(E.round(I/w)-I/w):O(I),z=(d?1-x+x*O(w*P/d):1)*(z<0?-1:1)*E.abs(z)**s*(P<n?P/n:P<n+T?1-(P-n)/T*(1-b):P<n+T+r?b:P<L-v?(L-P-v)/i*b:0),z=v?z/2+(v>P?0:(P<L-v?1:(L-P)/v)*a[P-v|0]/2/t):z,y&&(z=V=G*R+M*(R=N)+G*(N=z)-Y*j-F*(j=V))),I+=(W=(l+=c+=f)*E.cos(h*A++))+W*g*O(P**5),S&&++S>u&&(l+=p,D+=p,S=0),!d||++C%d||(l=D,c=H,S=S||1);(t=e.createBuffer(1,L,44100)).getChannelData(0).set(a),(l=e.createBufferSource()).buffer=t,l.connect(e.destination),l.start()},a=["#18161c","#6a7799","#aec2c2","#f3eade","#f04f78","#fcf660","#2f328f","#4b80ca","#327345","#63c64d","#703075","#a56243"];globalThis.litecanvas=function(e={}){let l=globalThis,n=Math.PI,r=2*n,i=(e,t,a)=>e.addEventListener(t,a);e=Object.assign({fps:60,fullscreen:!0,width:null,height:null,autoscale:!0,pixelart:!1,antialias:!1,canvas:null,global:!0,loop:null,pauseOnBlur:!0,tapEvents:!0,keyboardEvents:!0},e);let o=!1,s=[],c=e.canvas||document.createElement("canvas"),f=e.fullscreen,p=e.autoscale,u=1,d,g,h,m=1,v,b=1/e.fps,T=1e3*b,x=0,y,E=0,w=0,H="sans-serif",D="",I=32,A=Date.now(),P={init:!1,update:!1,draw:!1,resized:!1,tap:!1,untap:!1,tapping:!1,tapped:!1},S={settings:Object.assign({},e),colors:a},C={WIDTH:e.width,HEIGHT:e.height||e.width,CANVAS:null,ELAPSED:0,FPS:e.fps,CENTERX:null,CENTERY:null,DEFAULT_SFX:[.5,,1675,,.06,.2,1,1.8,,,637,.06],PI:n,TWO_PI:r,HALF_PI:.5*n,lerp:(e,t,a)=>e+a*(t-e),deg2rad:e=>n/180*e,rad2deg:e=>180/n*e,clamp:(e,t,a)=>e<t?t:e>a?a:e,wrap:(e,t,a)=>e-(a-t)*Math.floor((e-t)/(a-t)),map(e,t,a,l,n,r=!1){let i=(e-t)/(a-t)*(n-l)+l;return r?C.clamp(i,l,n):i},norm:(e,t,a)=>C.map(e,t,a,0,1),rand:(e=0,t=1)=>(A=(1664525*A+0x3c6ef35f)%0x100000000)/0x100000000*(t-e)+e,randi:(e=0,t=1)=>C.floor(C.rand()*(t-e+1)+e),seed:e=>null==e?A:A=~~e,cls(e){null==e?h.clearRect(0,0,C.WIDTH,C.HEIGHT):C.rectfill(0,0,C.WIDTH,C.HEIGHT,e)},rect(e,t,a,l,n=0,r=null){h.beginPath(),h[r?"roundRect":"rect"](~~e,~~t,a,l,r),C.stroke(n)},rectfill(e,t,a,l,n=0,r=null){h.beginPath(),h[r?"roundRect":"rect"](~~e,~~t,a,l,r),C.fill(n)},circ(e,t,a,l){h.beginPath(),h.arc(~~e,~~t,a,0,r),h.closePath(),C.stroke(l)},circfill(e,t,a,l){h.beginPath(),h.arc(~~e,~~t,a,0,r),h.closePath(),C.fill(l)},line(e,t,a,l,n){h.beginPath(),h.moveTo(~~e,~~t),h.lineTo(~~a,~~l),C.stroke(n)},linewidth(e){h.lineWidth=e},linedash(e,t=0){h.setLineDash(Array.isArray(e)?e:[e]),h.lineDashOffset=t},text(e,t,a,l=3){h.font=`${D||""} ${I}px ${H}`,h.fillStyle=C.getcolor(l),h.fillText(a,~~e,~~t)},textfont(e){H=e},textsize(e){I=e},textstyle(e){D=e},textalign(e,t){e&&(h.textAlign=e),t&&(h.textBaseline=t)},textmetrics(e,t){h.font=`${D||""} ${t||I}px ${H}`;let a=h.measureText(e);return a.height=a.actualBoundingBoxAscent+a.actualBoundingBoxDescent,a},image(e,t,a){h.drawImage(a,~~e,~~t)},paint(e,t,a,l={}){let n=l.canvas||new OffscreenCanvas(0,0),r=l.scale||1,i=h;if(n.width=e*r,n.height=t*r,(h=n.getContext("2d")).scale(r,r),Array.isArray(a)){let e=0,t=0;for(let l of(h.imageSmoothingEnabled=!1,a)){for(let a of l)" "!==a&&"."!==a&&C.rectfill(e,t,1,1,parseInt(a,16)),e++;t++,e=0}}else a(n,h);return h=i,n},ctx:e=>(e&&(h=e),h),push:()=>h.save(),pop:()=>h.restore(),translate:(e,t)=>h.translate(~~e,~~t),scale:(e,t)=>h.scale(e,t||e),rotate:e=>h.rotate(e),transform:(e,t,a,l,n,r,i=!0)=>h[i?"setTransform":"transform"](e,t,a,l,n,r),alpha(e){h.globalAlpha=C.clamp(e,0,1)},path:e=>new Path2D(e),fill(e,t){h.fillStyle=C.getcolor(e),h.fill(t)},stroke(e,t){h.strokeStyle=C.getcolor(e),t?h.stroke(t):h.stroke()},cliprect(e,t,a,l){h.beginPath(),h.rect(e,t,a,l),h.clip()},clipcirc(e,t,a){h.beginPath(),h.arc(e,t,a,0,r),h.clip()},blendmode(e){h.globalCompositeOperation=e},sfx:(e,a=0,n=1)=>!(l.zzfxV<=0)&&(!navigator.userActivation||!!navigator.userActivation.hasBeenActive)&&(e=e||C.DEFAULT_SFX,(a>0||1!==n)&&((e=e.slice())[0]=n*(e[0]||1),e[10]=~~e[10]+a),t.apply(0,e),e),volume(e){l.zzfxV=+e},colrect:(e,t,a,l,n,r,i,o)=>e<n+i&&e+a>n&&t<r+o&&t+l>r,colcirc:(e,t,a,l,n,r)=>(l-e)**2+(n-t)**2<=(a+r)**2,mousepos:()=>[d,g],timescale(e){m=e},use(e,t={}){e.__conf=t,o?X(e):s.push(e)},listen:(e,t)=>(P[e]=P[e]||[],P[e].push(t),()=>{P[e]=P[e].filter(e=>t!==e)}),emit(e,t,a,l,n){W("before:"+e,t,a,l,n),W(e,t,a,l,n),W("after:"+e,t,a,l,n)},getcolor:e=>a[~~e%a.length],setvar(t,a){C[t]=a,e.global&&(l[t]=a)},resize(e,t){C.setvar("WIDTH",c.width=e),C.setvar("HEIGHT",c.height=t||e),L()}};for(let e of["sin","cos","atan2","hypot","tan","abs","ceil","round","floor","trunc","min","max","pow","sqrt","sign","exp"])C[e]=Math[e];function k(){o=!0,c="string"==typeof c?document.querySelector(c):c,C.setvar("CANVAS",c),h=c.getContext("2d"),C.WIDTH>0&&(f=!1),c.width=C.WIDTH,c.height=C.HEIGHT||C.WIDTH,c.parentNode||document.body.appendChild(c),c.style.display="block",f?(c.style.position="absolute",c.style.inset=0):p&&(c.style.margin="auto");let t=e.loop?e.loop:l;for(let e of Object.keys(P))t[e]&&C.listen(e,t[e]);for(let e of s)X(e);if(i(l,"resize",L),L(),e.tapEvents){let e=(e,t)=>[(e-c.offsetLeft)/u,(t-c.offsetTop)/u],t=/* @__PURE__ */new Map,a=(e,a,l)=>{let n={x:a,y:l,startX:a,startY:l,ts:performance.now()};return t.set(e,n),n},n=(e,l,n)=>{let r=t.get(e)||a(e);r.x=l,r.y=n},r=e=>e&&performance.now()-e.ts<=200,o=!1;i(c,"mousedown",t=>{t.preventDefault();let[l,n]=e(t.pageX,t.pageY);C.emit("tap",l,n,0),a(0,l,n),o=!0}),i(c,"mousemove",t=>{t.preventDefault();let[a,l]=[d,g]=e(t.pageX,t.pageY);o&&(C.emit("tapping",a,l,0),n(0,a,l))}),i(c,"mouseup",a=>{a.preventDefault();let l=t.get(0),[n,i]=e(a.pageX,a.pageY);r(l)&&C.emit("tapped",l.startX,l.startY,0),C.emit("untap",n,i,0),t.delete(0),o=!1}),i(c,"touchstart",t=>{for(let l of(t.preventDefault(),t.changedTouches)){let[t,n]=e(l.pageX,l.pageY);C.emit("tap",t,n,l.identifier+1),a(l.identifier+1,t,n)}}),i(c,"touchmove",t=>{for(let a of(t.preventDefault(),t.changedTouches)){let[t,l]=e(a.pageX,a.pageY);C.emit("tapping",t,l,a.identifier+1),n(a.identifier+1,t,l)}});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)||(r(l)&&C.emit("tapped",l.startX,l.startY,e),C.emit("untap",l.x,l.y,e),t.delete(e))};i(c,"touchend",s),i(c,"touchcancel",s),i(l,"blur",()=>{if(o=!1,0!==t.size)for(let[e,a]of t)C.emit("untap",a.x,a.y,e),t.delete(e)})}if(e.keyboardEvents){let e=/* @__PURE__ */new Set;C.setvar("iskeydown",t=>"any"===t?e.size>0:e.has(t.toLowerCase())),i(l,"keydown",t=>{e.add(t.key.toLowerCase())}),i(l,"keyup",t=>{e.delete(t.key.toLowerCase())}),i(l,"blur",()=>e.clear())}e.pauseOnBlur&&(i(l,"blur",()=>{y=null}),i(l,"focus",()=>{y||(v=performance.now(),y=requestAnimationFrame(z))})),C.emit("init",C),v=performance.now(),y=requestAnimationFrame(z)}function z(e){let t=0,a=e-v;for(v=e,x+=a;x>=T;)C.emit("update",b*m),C.setvar("ELAPSED",C.ELAPSED+b*m),x-=T,t++;t&&(C.textalign("start","top"),C.emit("draw"),E++,(w+=T*t)+x>=1e3&&(C.setvar("FPS",E),E=0,w-=1e3)),y&&(y=requestAnimationFrame(z))}function L(){let t=l.innerWidth,a=l.innerHeight;f?(C.setvar("WIDTH",c.width=t),C.setvar("HEIGHT",c.height=a)):p&&(u=Math.min(t/C.WIDTH,a/C.HEIGHT),u=e.pixelart?Math.floor(u):u,c.style.width=C.WIDTH*u+"px",c.style.height=C.HEIGHT*u+"px"),C.setvar("CENTERX",C.WIDTH/2),C.setvar("CENTERY",C.HEIGHT/2),(!e.antialias||e.pixelart)&&(h.imageSmoothingEnabled=!1,c.style.imageRendering="pixelated"),C.emit("resized",u)}function W(e,t,a,l,n){if(P[e])for(let r of P[e])r(t,a,l,n)}function X(e){let t=e(C,S,e.__conf);if("object"==typeof t)for(let[e,a]of Object.entries(t))C.setvar(e,a)}if(e.global){if(l.__litecanvas)throw"global litecanvas already instantiated";Object.assign(l,C),l.__litecanvas=C}return"loading"===document.readyState?i(l,"DOMContentLoaded",k):k(),C}})();
|
package/package.json
CHANGED
package/src/index.js
CHANGED
|
@@ -26,8 +26,9 @@ export default function litecanvas(settings = {}) {
|
|
|
26
26
|
canvas: null,
|
|
27
27
|
global: true,
|
|
28
28
|
loop: null,
|
|
29
|
-
tapEvents: true,
|
|
30
29
|
pauseOnBlur: true,
|
|
30
|
+
tapEvents: true,
|
|
31
|
+
keyboardEvents: true,
|
|
31
32
|
}
|
|
32
33
|
|
|
33
34
|
// setup the settings default values
|
|
@@ -1005,6 +1006,35 @@ export default function litecanvas(settings = {}) {
|
|
|
1005
1006
|
})
|
|
1006
1007
|
}
|
|
1007
1008
|
|
|
1009
|
+
if (settings.keyboardEvents) {
|
|
1010
|
+
/** @type {Set<string>} */
|
|
1011
|
+
const _keys = new Set()
|
|
1012
|
+
|
|
1013
|
+
/**
|
|
1014
|
+
* Checks if a key is currently pressed in your keyboard.
|
|
1015
|
+
* Notes:
|
|
1016
|
+
* - to check the space key use `iskeydown(" ")`.
|
|
1017
|
+
* - you can check if any key is pressed using `iskeydown("any")`.
|
|
1018
|
+
*
|
|
1019
|
+
* @param {string} key
|
|
1020
|
+
* @returns {boolean}
|
|
1021
|
+
*/
|
|
1022
|
+
const iskeydown = (key) =>
|
|
1023
|
+
'any' === key ? _keys.size > 0 : _keys.has(key.toLowerCase())
|
|
1024
|
+
|
|
1025
|
+
instance.setvar('iskeydown', iskeydown)
|
|
1026
|
+
|
|
1027
|
+
on(root, 'keydown', (/** @type {KeyboardEvent} */ event) => {
|
|
1028
|
+
_keys.add(event.key.toLowerCase())
|
|
1029
|
+
})
|
|
1030
|
+
|
|
1031
|
+
on(root, 'keyup', (/** @type {KeyboardEvent} */ event) => {
|
|
1032
|
+
_keys.delete(event.key.toLowerCase())
|
|
1033
|
+
})
|
|
1034
|
+
|
|
1035
|
+
on(root, 'blur', () => _keys.clear())
|
|
1036
|
+
}
|
|
1037
|
+
|
|
1008
1038
|
// listen browser focus/blur events and pause the update/draw loop
|
|
1009
1039
|
if (settings.pauseOnBlur) {
|
|
1010
1040
|
on(root, 'blur', () => {
|
|
@@ -1136,7 +1166,7 @@ export default function litecanvas(settings = {}) {
|
|
|
1136
1166
|
|
|
1137
1167
|
if (settings.global) {
|
|
1138
1168
|
if (root.__litecanvas) {
|
|
1139
|
-
throw '
|
|
1169
|
+
throw 'global litecanvas already instantiated'
|
|
1140
1170
|
}
|
|
1141
1171
|
Object.assign(root, instance)
|
|
1142
1172
|
root.__litecanvas = instance
|
package/types/index.d.ts
CHANGED
|
@@ -531,6 +531,16 @@ declare global {
|
|
|
531
531
|
function volume(value: number): void
|
|
532
532
|
|
|
533
533
|
/** UTILS API */
|
|
534
|
+
/**
|
|
535
|
+
* Checks if a key is currently pressed in your keyboard.
|
|
536
|
+
* Notes:
|
|
537
|
+
* - to check the space key use `iskeydown(" ")`.
|
|
538
|
+
* - you can check if any key is pressed using `iskeydown("any")`.
|
|
539
|
+
*
|
|
540
|
+
* @param key
|
|
541
|
+
* @returns `true` if the which key is down
|
|
542
|
+
*/
|
|
543
|
+
function iskeydown(key: string): boolean
|
|
534
544
|
/**
|
|
535
545
|
* Check a collision between two rectangles
|
|
536
546
|
*
|
|
@@ -600,7 +610,6 @@ declare global {
|
|
|
600
610
|
*
|
|
601
611
|
* @param {string} event The game event type
|
|
602
612
|
* @param {function} callback the function that is called when the event occurs
|
|
603
|
-
* @param {boolean} [highPriority=false] determines whether the callback will be called before or after the others
|
|
604
613
|
* @returns {function?} a function to remove the listener
|
|
605
614
|
*/
|
|
606
615
|
function listen(event: string, callback: Function): Function | null
|
package/types/types.d.ts
CHANGED
|
@@ -514,6 +514,17 @@ type LitecanvasInstance = {
|
|
|
514
514
|
volume(value: number): void
|
|
515
515
|
|
|
516
516
|
/** UTILS API */
|
|
517
|
+
/**
|
|
518
|
+
* Checks if a key is currently pressed in your keyboard.
|
|
519
|
+
*
|
|
520
|
+
* Notes:
|
|
521
|
+
* - to check the space key use `iskeydown(" ")`.
|
|
522
|
+
* - you can check if any key is pressed using `iskeydown("any")`.
|
|
523
|
+
*
|
|
524
|
+
* @param key
|
|
525
|
+
* @returns `true` if the which key is down
|
|
526
|
+
*/
|
|
527
|
+
iskeydown(key: string): boolean
|
|
517
528
|
/**
|
|
518
529
|
* Check a collision between two rectangles
|
|
519
530
|
*
|
|
@@ -583,7 +594,6 @@ type LitecanvasInstance = {
|
|
|
583
594
|
*
|
|
584
595
|
* @param {string} event The game event type
|
|
585
596
|
* @param {function} callback the function that is called when the event occurs
|
|
586
|
-
* @param {boolean} [highPriority=false] determines whether the callback will be called before or after the others
|
|
587
597
|
* @returns {function?} a function to remove the listener
|
|
588
598
|
*/
|
|
589
599
|
listen(event: string, callback: Function): Function | null
|