@guinetik/gcanvas 1.0.4 → 1.0.5

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.
Files changed (193) hide show
  1. package/dist/CNAME +1 -0
  2. package/dist/animations.html +31 -0
  3. package/dist/basic.html +38 -0
  4. package/dist/baskara.html +31 -0
  5. package/dist/bezier.html +35 -0
  6. package/dist/beziersignature.html +29 -0
  7. package/dist/blackhole.html +28 -0
  8. package/dist/blob.html +35 -0
  9. package/dist/coordinates.html +698 -0
  10. package/dist/cube3d.html +23 -0
  11. package/dist/demos.css +303 -0
  12. package/dist/dino.html +42 -0
  13. package/dist/easing.html +28 -0
  14. package/dist/events.html +195 -0
  15. package/dist/fluent.html +647 -0
  16. package/dist/fluid-simple.html +22 -0
  17. package/dist/fluid.html +37 -0
  18. package/dist/fractals.html +36 -0
  19. package/dist/gameobjects.html +626 -0
  20. package/dist/gcanvas.es.js +517 -0
  21. package/dist/gcanvas.es.min.js +1 -1
  22. package/dist/gcanvas.umd.js +1 -1
  23. package/dist/gcanvas.umd.min.js +1 -1
  24. package/dist/genart.html +26 -0
  25. package/dist/gendream.html +26 -0
  26. package/dist/group.html +36 -0
  27. package/dist/home.html +587 -0
  28. package/dist/hyperbolic001.html +23 -0
  29. package/dist/hyperbolic002.html +23 -0
  30. package/dist/hyperbolic003.html +23 -0
  31. package/dist/hyperbolic004.html +23 -0
  32. package/dist/hyperbolic005.html +22 -0
  33. package/dist/index.html +398 -0
  34. package/dist/isometric.html +34 -0
  35. package/dist/js/animations.js +452 -0
  36. package/dist/js/basic.js +204 -0
  37. package/dist/js/baskara.js +751 -0
  38. package/dist/js/bezier.js +692 -0
  39. package/dist/js/beziersignature.js +241 -0
  40. package/dist/js/blackhole/accretiondisk.obj.js +379 -0
  41. package/dist/js/blackhole/blackhole.obj.js +318 -0
  42. package/dist/js/blackhole/index.js +409 -0
  43. package/dist/js/blackhole/particle.js +56 -0
  44. package/dist/js/blackhole/starfield.obj.js +218 -0
  45. package/dist/js/blob.js +2276 -0
  46. package/dist/js/coordinates.js +840 -0
  47. package/dist/js/cube3d.js +789 -0
  48. package/dist/js/dino.js +1420 -0
  49. package/dist/js/easing.js +477 -0
  50. package/dist/js/fluent.js +183 -0
  51. package/dist/js/fluid-simple.js +253 -0
  52. package/dist/js/fluid.js +527 -0
  53. package/dist/js/fractals.js +932 -0
  54. package/dist/js/fractalworker.js +93 -0
  55. package/dist/js/gameobjects.js +176 -0
  56. package/dist/js/genart.js +268 -0
  57. package/dist/js/gendream.js +209 -0
  58. package/dist/js/group.js +140 -0
  59. package/dist/js/hyperbolic001.js +310 -0
  60. package/dist/js/hyperbolic002.js +388 -0
  61. package/dist/js/hyperbolic003.js +319 -0
  62. package/dist/js/hyperbolic004.js +345 -0
  63. package/dist/js/hyperbolic005.js +340 -0
  64. package/dist/js/info-toggle.js +25 -0
  65. package/dist/js/isometric.js +863 -0
  66. package/dist/js/kerr.js +1547 -0
  67. package/dist/js/lavalamp.js +590 -0
  68. package/dist/js/layout.js +354 -0
  69. package/dist/js/mondrian.js +285 -0
  70. package/dist/js/opacity.js +275 -0
  71. package/dist/js/painter.js +484 -0
  72. package/dist/js/particles-showcase.js +514 -0
  73. package/dist/js/particles.js +299 -0
  74. package/dist/js/patterns.js +397 -0
  75. package/dist/js/penrose/artifact.js +69 -0
  76. package/dist/js/penrose/blackhole.js +121 -0
  77. package/dist/js/penrose/constants.js +73 -0
  78. package/dist/js/penrose/game.js +943 -0
  79. package/dist/js/penrose/lore.js +278 -0
  80. package/dist/js/penrose/penrosescene.js +892 -0
  81. package/dist/js/penrose/ship.js +216 -0
  82. package/dist/js/penrose/sounds.js +211 -0
  83. package/dist/js/penrose/voidparticle.js +55 -0
  84. package/dist/js/penrose/voidscene.js +258 -0
  85. package/dist/js/penrose/voidship.js +144 -0
  86. package/dist/js/penrose/wormhole.js +46 -0
  87. package/dist/js/pipeline.js +555 -0
  88. package/dist/js/plane3d.js +256 -0
  89. package/dist/js/platformer.js +1579 -0
  90. package/dist/js/scene.js +304 -0
  91. package/dist/js/scenes.js +320 -0
  92. package/dist/js/schrodinger.js +410 -0
  93. package/dist/js/schwarzschild.js +1015 -0
  94. package/dist/js/shapes.js +628 -0
  95. package/dist/js/space/alien.js +171 -0
  96. package/dist/js/space/boom.js +98 -0
  97. package/dist/js/space/boss.js +353 -0
  98. package/dist/js/space/buff.js +73 -0
  99. package/dist/js/space/bullet.js +102 -0
  100. package/dist/js/space/constants.js +85 -0
  101. package/dist/js/space/game.js +1884 -0
  102. package/dist/js/space/hud.js +112 -0
  103. package/dist/js/space/laserbeam.js +179 -0
  104. package/dist/js/space/lightning.js +277 -0
  105. package/dist/js/space/minion.js +192 -0
  106. package/dist/js/space/missile.js +212 -0
  107. package/dist/js/space/player.js +430 -0
  108. package/dist/js/space/powerup.js +90 -0
  109. package/dist/js/space/starfield.js +58 -0
  110. package/dist/js/space/starpower.js +90 -0
  111. package/dist/js/spacetime.js +559 -0
  112. package/dist/js/sphere3d.js +229 -0
  113. package/dist/js/sprite.js +473 -0
  114. package/dist/js/starfaux/config.js +118 -0
  115. package/dist/js/starfaux/enemy.js +353 -0
  116. package/dist/js/starfaux/hud.js +78 -0
  117. package/dist/js/starfaux/index.js +482 -0
  118. package/dist/js/starfaux/laser.js +182 -0
  119. package/dist/js/starfaux/player.js +468 -0
  120. package/dist/js/starfaux/terrain.js +560 -0
  121. package/dist/js/study001.js +275 -0
  122. package/dist/js/study002.js +366 -0
  123. package/dist/js/study003.js +331 -0
  124. package/dist/js/study004.js +389 -0
  125. package/dist/js/study005.js +209 -0
  126. package/dist/js/study006.js +194 -0
  127. package/dist/js/study007.js +192 -0
  128. package/dist/js/study008.js +413 -0
  129. package/dist/js/svgtween.js +204 -0
  130. package/dist/js/tde/accretiondisk.js +471 -0
  131. package/dist/js/tde/blackhole.js +219 -0
  132. package/dist/js/tde/blackholescene.js +209 -0
  133. package/dist/js/tde/config.js +59 -0
  134. package/dist/js/tde/index.js +820 -0
  135. package/dist/js/tde/jets.js +290 -0
  136. package/dist/js/tde/lensedstarfield.js +154 -0
  137. package/dist/js/tde/tdestar.js +297 -0
  138. package/dist/js/tde/tidalstream.js +372 -0
  139. package/dist/js/tde_old/blackhole.obj.js +354 -0
  140. package/dist/js/tde_old/debris.obj.js +791 -0
  141. package/dist/js/tde_old/flare.obj.js +239 -0
  142. package/dist/js/tde_old/index.js +448 -0
  143. package/dist/js/tde_old/star.obj.js +812 -0
  144. package/dist/js/tetris/config.js +157 -0
  145. package/dist/js/tetris/grid.js +286 -0
  146. package/dist/js/tetris/index.js +1195 -0
  147. package/dist/js/tetris/renderer.js +634 -0
  148. package/dist/js/tetris/tetrominos.js +280 -0
  149. package/dist/js/tiles.js +312 -0
  150. package/dist/js/tweendemo.js +79 -0
  151. package/dist/js/visibility.js +102 -0
  152. package/dist/kerr.html +28 -0
  153. package/dist/lavalamp.html +27 -0
  154. package/dist/layouts.html +37 -0
  155. package/dist/logo.svg +4 -0
  156. package/dist/loop.html +84 -0
  157. package/dist/mondrian.html +32 -0
  158. package/dist/og_image.png +0 -0
  159. package/dist/opacity.html +36 -0
  160. package/dist/painter.html +39 -0
  161. package/dist/particles-showcase.html +28 -0
  162. package/dist/particles.html +24 -0
  163. package/dist/patterns.html +33 -0
  164. package/dist/penrose-game.html +31 -0
  165. package/dist/pipeline.html +737 -0
  166. package/dist/plane3d.html +24 -0
  167. package/dist/platformer.html +43 -0
  168. package/dist/scene.html +33 -0
  169. package/dist/scenes.html +96 -0
  170. package/dist/schrodinger.html +27 -0
  171. package/dist/schwarzschild.html +27 -0
  172. package/dist/shapes.html +16 -0
  173. package/dist/space.html +85 -0
  174. package/dist/spacetime.html +27 -0
  175. package/dist/sphere3d.html +24 -0
  176. package/dist/sprite.html +18 -0
  177. package/dist/starfaux.html +22 -0
  178. package/dist/study001.html +23 -0
  179. package/dist/study002.html +23 -0
  180. package/dist/study003.html +23 -0
  181. package/dist/study004.html +23 -0
  182. package/dist/study005.html +22 -0
  183. package/dist/study006.html +24 -0
  184. package/dist/study007.html +24 -0
  185. package/dist/study008.html +22 -0
  186. package/dist/svgtween.html +29 -0
  187. package/dist/tde.html +28 -0
  188. package/dist/tetris3d.html +25 -0
  189. package/dist/tiles.html +28 -0
  190. package/dist/transforms.html +400 -0
  191. package/dist/tween.html +45 -0
  192. package/dist/visibility.html +33 -0
  193. package/package.json +1 -1
package/dist/cube3d.html ADDED
@@ -0,0 +1,23 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Rubik's Cube - GCanvas</title>
7
+ <link rel="stylesheet" href="demos.css" />
8
+ <script src="./js/info-toggle.js"></script>
9
+ </head>
10
+ <body>
11
+ <div id="info">
12
+ <strong>Rubik's Cube</strong> — 3D Cube3D showcase<br/>
13
+ <span style="color:#CCC">
14
+ <li>27 cubelets arranged as 3x3x3</li>
15
+ <li>Standard Rubik's cube colors</li>
16
+ <li>Drag to rotate camera</li>
17
+ <li>Double-click to reset view</li>
18
+ </span>
19
+ </div>
20
+ <canvas id="game"></canvas>
21
+ <script type="module" src="./js/cube3d.js"></script>
22
+ </body>
23
+ </html>
package/dist/demos.css ADDED
@@ -0,0 +1,303 @@
1
+ /* General layout */
2
+ body {
3
+ margin: 0;
4
+ display: flex;
5
+ height: 100vh; /* 100% viewport height */
6
+ height: 100dvh; /* fallback for mobile browsers */
7
+ background: black; /* optional if you want a black background behind everything */
8
+ overflow: hidden;
9
+ }
10
+
11
+ /* Canvas should fill available space without causing scroll */
12
+ canvas#game {
13
+ display: block;
14
+ max-width: 100vw;
15
+ max-height: 100vh;
16
+ }
17
+
18
+ /* Side navigation */
19
+ nav {
20
+ width: 200px;
21
+ background: #0a0a0a;
22
+ color: white;
23
+ padding: 1rem;
24
+ box-sizing: border-box;
25
+ overflow-y: auto; /* enable scrolling inside nav if content is tall */
26
+ overflow-x: hidden; /* usually don't want horizontal scroll in nav */
27
+ font-family: monospace;
28
+ border-right: 1px solid #1a1a1a;
29
+ flex-shrink: 0; /* Prevent nav from shrinking on desktop */
30
+ }
31
+
32
+ /* Ensure bottom of nav is reachable by adding a spacer */
33
+ nav::after {
34
+ content: "";
35
+ display: block;
36
+ height: 6rem; /* Generous space to clear mobile UI bars */
37
+ width: 100%;
38
+ }
39
+
40
+ /* Links inside nav */
41
+ nav a {
42
+ display: block;
43
+ color: #ccc;
44
+ margin-bottom: 0.5rem;
45
+ text-decoration: none;
46
+ padding: 0.25rem;
47
+ transition: background 0.2s ease;
48
+ }
49
+
50
+ /* Hover effect for nav links */
51
+ nav a:hover {
52
+ background: #151515;
53
+ color: #0f0;
54
+ }
55
+
56
+ /* Active link highlight */
57
+ nav a.active {
58
+ background: #111;
59
+ color: #0f0;
60
+ border-left: 2px solid #0f0;
61
+ padding-left: 0.5rem;
62
+ }
63
+
64
+ /* The iframe takes up remaining space */
65
+ iframe {
66
+ flex: 1;
67
+ border: none;
68
+ /* we let the page inside handle its own scrolling if needed */
69
+ }
70
+
71
+ .light {
72
+ background: rgba(0, 0, 0, 0.5) !important;
73
+ color: #ffffff !important;
74
+ }
75
+
76
+ .light span {
77
+ background: black !important;
78
+ color: #0f0;
79
+ padding: 0;
80
+ margin: 0;
81
+ }
82
+
83
+ .light strong,
84
+ .light code {
85
+ background: #000;
86
+ color: #FFF;
87
+ padding: 0.2em 0.3em;
88
+ box-decoration-break: clone;
89
+ display: inline;
90
+ line-height: 1.8;
91
+ }
92
+
93
+ code {
94
+ color: black !important;
95
+ background: #0f0;
96
+ }
97
+
98
+ .light code {
99
+ color: black !important;
100
+ background: #0f0;
101
+ }
102
+
103
+ /* #info overlay (optional) */
104
+ #info {
105
+ position: absolute;
106
+ font-family: monospace;
107
+ top: 0;
108
+ left: 0;
109
+ right: 0;
110
+ background: rgba(0, 0, 0, 0.8);
111
+ color: #0f0;
112
+ padding: 12px 20px;
113
+ font-size: 14px;
114
+ line-height: 1.4;
115
+ border-bottom: 1px solid #333;
116
+ z-index: 10;
117
+ pointer-events: none;
118
+ }
119
+
120
+ /* Info toggle button for mobile */
121
+ #info-toggle {
122
+ display: none;
123
+ position: absolute;
124
+ top: 8px;
125
+ right: 8px;
126
+ width: 32px;
127
+ height: 32px;
128
+ background: rgba(0, 0, 0, 0.8);
129
+ border: 1px solid #333;
130
+ border-radius: 4px;
131
+ color: #0f0;
132
+ font-family: monospace;
133
+ font-size: 18px;
134
+ font-weight: bold;
135
+ cursor: pointer;
136
+ z-index: 11;
137
+ pointer-events: auto;
138
+ line-height: 1;
139
+ }
140
+
141
+ #info-toggle:hover {
142
+ background: rgba(0, 0, 0, 0.9);
143
+ }
144
+
145
+ /* Mobile info styles */
146
+ @media (max-width: 768px) {
147
+ #info-toggle {
148
+ display: block;
149
+ }
150
+
151
+ #info {
152
+ max-height: 0;
153
+ padding: 0 20px;
154
+ overflow: hidden;
155
+ transition: max-height 0.3s ease, padding 0.3s ease;
156
+ pointer-events: auto;
157
+ }
158
+
159
+ #info.open {
160
+ max-height: 300px;
161
+ padding: 12px 20px;
162
+ padding-right: 48px;
163
+ }
164
+ }
165
+
166
+ strong {
167
+ color: #fff;
168
+ }
169
+
170
+ path {
171
+ fill: #00FF00;
172
+ }
173
+
174
+ /* ========================================
175
+ Mobile Header (hidden on desktop)
176
+ ======================================== */
177
+ .mobile-header {
178
+ display: none;
179
+ position: fixed;
180
+ top: 0;
181
+ left: 0;
182
+ right: 0;
183
+ height: 56px;
184
+ background: #0a0a0a;
185
+ z-index: 1000;
186
+ align-items: center;
187
+ justify-content: space-between;
188
+ padding: 0 1rem;
189
+ box-sizing: border-box;
190
+ border-bottom: 1px solid #1a1a1a;
191
+ }
192
+
193
+ .mobile-logo {
194
+ width: 40px;
195
+ height: 36px;
196
+ }
197
+
198
+ .mobile-title {
199
+ font-family: monospace;
200
+ font-size: 1.4em;
201
+ color: #CCC;
202
+ letter-spacing: 2px;
203
+ font-weight: bold;
204
+ }
205
+
206
+ /* Hamburger Button */
207
+ .hamburger {
208
+ display: flex;
209
+ flex-direction: column;
210
+ justify-content: space-around;
211
+ width: 30px;
212
+ height: 24px;
213
+ background: transparent;
214
+ border: none;
215
+ cursor: pointer;
216
+ padding: 0;
217
+ z-index: 1001;
218
+ }
219
+
220
+ .hamburger span {
221
+ width: 100%;
222
+ height: 3px;
223
+ background: #ccc;
224
+ border-radius: 2px;
225
+ transition: all 0.3s ease;
226
+ transform-origin: center;
227
+ }
228
+
229
+ /* Hamburger animation when active */
230
+ .hamburger.active span:nth-child(1) {
231
+ transform: translateY(7.5px) rotate(45deg);
232
+ }
233
+
234
+ .hamburger.active span:nth-child(2) {
235
+ opacity: 0;
236
+ }
237
+
238
+ .hamburger.active span:nth-child(3) {
239
+ transform: translateY(-7.5px) rotate(-45deg);
240
+ }
241
+
242
+ /* Nav Overlay (for closing menu) */
243
+ .nav-overlay {
244
+ display: none;
245
+ position: fixed;
246
+ top: 0;
247
+ left: 0;
248
+ right: 0;
249
+ bottom: 0;
250
+ background: rgba(0, 0, 0, 0.5);
251
+ z-index: 99;
252
+ }
253
+
254
+ .nav-overlay.open {
255
+ display: block;
256
+ }
257
+
258
+ /* ========================================
259
+ Mobile Responsive Styles
260
+ ======================================== */
261
+ @media (max-width: 768px) {
262
+ /* Show mobile header */
263
+ .mobile-header {
264
+ display: flex;
265
+ position: relative; /* In flow so it pushes content down naturally */
266
+ }
267
+
268
+ /* Change body layout to column for mobile */
269
+ body {
270
+ flex-direction: column;
271
+ }
272
+
273
+ /* Transform nav into slide-out menu */
274
+ nav {
275
+ position: fixed;
276
+ top: 56px;
277
+ left: -280px;
278
+ width: 280px;
279
+ height: calc(100vh - 56px);
280
+ height: calc(100dvh - 56px);
281
+ z-index: 100;
282
+ transition: left 0.3s ease;
283
+ padding-top: 1rem;
284
+ padding-bottom: 0; /* Handled by ::after spacer */
285
+ }
286
+
287
+ /* Nav open state */
288
+ nav.open {
289
+ left: 0;
290
+ }
291
+
292
+ /* Hide nav branding on mobile (already shown in mobile header) */
293
+ .nav-branding {
294
+ display: none;
295
+ }
296
+
297
+ /* Adjust iframe to account for mobile header */
298
+ iframe {
299
+ margin-top: 0;
300
+ height: auto;
301
+ /* flex: 1 handles the remaining height */
302
+ }
303
+ }
package/dist/dino.html ADDED
@@ -0,0 +1,42 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Dino Run - GCanvas Demo</title>
7
+ <link rel="stylesheet" href="demos.css" />
8
+ <script src="./js/info-toggle.js"></script>
9
+ <style>
10
+ /* Override for full immersion */
11
+ body {
12
+ background: #000;
13
+ }
14
+
15
+ canvas#game {
16
+ width: 100vw;
17
+ height: 100vh;
18
+ }
19
+
20
+ #info {
21
+ background: rgba(0, 0, 0, 0.9);
22
+ border-bottom: 1px solid #00ff00;
23
+ }
24
+
25
+ #info strong {
26
+ color: #00ff00;
27
+ }
28
+ </style>
29
+ </head>
30
+ <body>
31
+ <div id="info">
32
+ <strong>DINO_RUN.exe</strong> — endless runner demo<br/>
33
+ <span style="color:#666">
34
+ <li>SPACE / UP / W: jump</li>
35
+ <li>avoid obstacles • speed increases</li>
36
+ <li>8-bit synth sounds • parallax layers</li>
37
+ </span>
38
+ </div>
39
+ <canvas id="game"></canvas>
40
+ <script type="module" src="./js/dino.js"></script>
41
+ </body>
42
+ </html>
package/dist/easing.html ADDED
@@ -0,0 +1,28 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Easing Functions</title>
8
+ <link rel="stylesheet" href="demos.css" />
9
+ <script src="./js/info-toggle.js"></script>
10
+ </head>
11
+
12
+ <body>
13
+ <div id="info">
14
+ <strong>Easing Functions Demo</strong> - Displays all 30 easing functions available in the library as bezier curve graphs. Functions are organized by type: Linear, Quadratic, Cubic, Quartic, Sine, Exponential, Circular, Elastic, Back, and Bounce. Each curve shows how the easing transforms input time (x-axis) to output value (y-axis).
15
+ </div>
16
+ <canvas id="game"></canvas>
17
+ <script type="module">
18
+ import { MyGame } from './js/easing.js';
19
+
20
+ window.addEventListener("load", () => {
21
+ const canvas = document.getElementById("game");
22
+ const game = new MyGame(canvas);
23
+ game.start();
24
+ });
25
+ </script>
26
+ </body>
27
+
28
+ </html>
package/dist/events.html ADDED
@@ -0,0 +1,195 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>EventEmitter Demo</title>
8
+ <link rel="stylesheet" href="demos.css" />
9
+ <script src="./js/info-toggle.js"></script>
10
+ </head>
11
+
12
+ <body>
13
+ <div id="info">
14
+ <strong>EventEmitter Demo</strong> — Shows how <code>Game.events</code> handles unified input events. <br>
15
+ Events from <strong>mouse</strong>, <strong>touch</strong>, <strong>keyboard</strong> and <strong>input</strong>
16
+ are emitted using a
17
+ single system. <br>
18
+ This demo logs the last event that happened inside a box on screen. Try clicking, moving, or touching!
19
+ </div>
20
+
21
+ <canvas id="game"></canvas>
22
+
23
+ <script type="module">
24
+ import { Game, Scene, GameObject, FPSCounter, Rectangle, TextShape, Group, Keys } from "/gcanvas.es.min.js";
25
+
26
+ class EventLogger extends GameObject {
27
+ constructor(game, options = {}) {
28
+ super(game, options);
29
+ this.interactive = true;
30
+ console.groupCollapsed("EventLoggerText");
31
+ this.label = new TextShape("Waiting for event...", {
32
+ font: "16px monospace",
33
+ color: "#0f0",
34
+ align: "center",
35
+ baseline: "middle",
36
+ debug: false,
37
+ name: "EventLoggerText"
38
+ });
39
+ console.groupEnd();
40
+ console.groupCollapsed("EventLoggerBox");
41
+
42
+ this.box = new Rectangle({
43
+ width: 280,
44
+ height: 80,
45
+ color: "#111",
46
+ debug: true
47
+ });
48
+ console.groupEnd();
49
+ console.groupCollapsed("EventLoggerGroup");
50
+
51
+ this.group = new Group({ width: 280, height: 80 });
52
+ this.group.add(this.box);
53
+ this.group.add(this.label);
54
+ console.groupEnd();
55
+ const events = ["wheel", "inputdown", "inputup", "inputmove", "click"];
56
+
57
+ const groupEvents = [
58
+ "mouseover", "mouseout", "click", "touchstart", "touchend", "touchmove",
59
+ "inputdown", "inputup", "inputmove"
60
+ ];
61
+
62
+ let lock = false;
63
+ var inside = false;
64
+
65
+ events.forEach(type => {
66
+ this.game.events.on(type, (e) => {
67
+ if (!lock && !inside) {
68
+ this.label.text = `Ouside the Box: ${type}`;
69
+ }
70
+ });
71
+ });
72
+
73
+ const unlockAfterTimeout = (time) => {
74
+ setTimeout(() => {
75
+ lock = false;
76
+ }, time);
77
+ };
78
+
79
+ groupEvents.forEach(type => {
80
+ this.on(type, (e) => {
81
+ if (!lock) {
82
+ this.label.text = `Inside the Box: ${type}`;
83
+ }
84
+ if (type == "mouseout" || type == "mouseover") {
85
+ lock = true;
86
+ unlockAfterTimeout(1000);
87
+ }
88
+ if (type == "mouseout") {
89
+ inside = false;
90
+ } else if (type == "mouseover") {
91
+ inside = true;
92
+ }
93
+ });
94
+ });
95
+ //
96
+ //
97
+ /**
98
+ * Log Keys. We'll listen for key down events on some set of logical keys
99
+ * and do exactly the same inside/outside labeling. We also handle “_up” suffix.
100
+ */
101
+ const keyList = [
102
+ Keys.W, Keys.A, Keys.S, Keys.D,
103
+ Keys.UP, Keys.DOWN, Keys.LEFT, Keys.RIGHT,
104
+ Keys.SPACE, Keys.SHIFT, Keys.ENTER, Keys.ESC,
105
+ "keyup", "keydown"
106
+ ];
107
+
108
+ keyList.forEach(logicalKey => {
109
+ // Key down event => just “logicalKey”
110
+ this.game.events.on(logicalKey, (e) => {
111
+ if (!lock) {
112
+ if (e.type == "keydown") {
113
+ // Only log if key is NOT one of the logical keys in keyList
114
+ if (keyList.indexOf(e.key) == -1) {
115
+ this.label.text = `KeyDown ${e.key}`;
116
+ }
117
+ } else {
118
+ this.label.text = `KeyDown ${logicalKey}`;
119
+ }
120
+ }
121
+ });
122
+ // Key up event => “logicalKey + "_up”
123
+ this.game.events.on(logicalKey + "_up", (e) => {
124
+ if (!lock) {
125
+ if (e.type == "keyup") {
126
+ // Only log if key is NOT one of the logical keys in keyList
127
+ if (keyList.indexOf(e.key) == -1) {
128
+ this.label.text = `KeyUp ${e.key}`;
129
+ return;
130
+ }
131
+ }
132
+ this.label.text = `KeyUp ${logicalKey}`;
133
+ }
134
+ });
135
+ });
136
+ }
137
+ draw() {
138
+ super.draw();
139
+ this.logger.log("draw", this.x, this.y, this.width, this.height);
140
+ this.group.render();
141
+ }
142
+ }
143
+
144
+ class EventDemoGame extends Game {
145
+ constructor(canvas) {
146
+ super(canvas);
147
+ this.enableFluidSize();
148
+ this.backgroundColor = "black";
149
+ }
150
+
151
+ init() {
152
+ super.init();
153
+ console.groupCollapsed("init");
154
+ this.scene = new Scene(this, { name: "EventDemoScene", width: 280, height: 80 });
155
+ this.ui = new Scene(this);
156
+ this.pipeline.add(this.scene);
157
+ this.pipeline.add(this.ui);
158
+ console.groupEnd();
159
+ console.groupCollapsed("add EventLogger");
160
+ this.scene.add(new EventLogger(this, { width: 280, height: 80 }));
161
+ console.groupEnd();
162
+ console.groupCollapsed("add FPSCounter");
163
+ this.ui.add(new FPSCounter(this, { anchor: "bottom-right" }));
164
+ console.groupEnd();
165
+ }
166
+
167
+ update(dt) {
168
+ this.scene.x = this.width / 2;
169
+ this.scene.y = this.height / 2;
170
+ this.ui.width = this.width;
171
+ this.ui.height = this.height;
172
+ super.update(dt);
173
+ }
174
+
175
+ clear() {
176
+ this.ctx.fillStyle = "black";
177
+ this.ctx.fillRect(0, 0, this.width, this.height);
178
+ }
179
+ }
180
+
181
+ window.addEventListener("load", () => {
182
+ const canvas = document.getElementById("game");
183
+ const game = new EventDemoGame(canvas);
184
+ // game.enableLogging();
185
+
186
+ game.setFPS(60);
187
+ game.start();
188
+ /* setTimeout(() => {
189
+ game.stop();
190
+ }, 10000); */
191
+ });
192
+ </script>
193
+ </body>
194
+
195
+ </html>