nova64 0.2.5 → 0.2.7

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 (185) hide show
  1. package/README.md +25 -8
  2. package/bin/nova64.js +165 -0
  3. package/dist/assets/console-CY_kygm3.js +14 -0
  4. package/dist/assets/console-CY_kygm3.js.map +1 -0
  5. package/dist/assets/main-l0sNRNKZ.js.map +1 -0
  6. package/dist/assets/sky/studio/nx.png +0 -0
  7. package/dist/assets/sky/studio/ny.png +0 -0
  8. package/dist/assets/sky/studio/nz.png +0 -0
  9. package/dist/assets/sky/studio/px.png +0 -0
  10. package/dist/assets/sky/studio/py.png +0 -0
  11. package/dist/assets/sky/studio/pz.png +0 -0
  12. package/dist/assets/vanilla-Dcuy32gi.js +2 -0
  13. package/dist/assets/vanilla-Dcuy32gi.js.map +1 -0
  14. package/dist/console.html +899 -0
  15. package/dist/docs/BENCHMARK.md +77 -0
  16. package/dist/docs/CHEATSHEET.md +255 -0
  17. package/dist/docs/EFFECTS_API_GUIDE.md +577 -0
  18. package/dist/docs/EFFECTS_QUICK_REFERENCE.md +331 -0
  19. package/dist/docs/FONT_CHARACTER_REFERENCE.md +219 -0
  20. package/dist/docs/FREE_GLB_ASSETS.md +330 -0
  21. package/dist/docs/FULLSCREEN_BUTTON_FEATURE.md +296 -0
  22. package/dist/docs/GAMEPAD_SUPPORT.md +348 -0
  23. package/dist/docs/GAME_IMPROVEMENTS.md +278 -0
  24. package/dist/docs/GAME_QUALITY_STATUS.md +300 -0
  25. package/dist/docs/MIGRATION_GUIDE.md +553 -0
  26. package/dist/docs/NOVA64_3D_API.md +356 -0
  27. package/dist/docs/NOVA64_API_REFERENCE.md +1406 -0
  28. package/dist/docs/NOVA64_UI_API.md +503 -0
  29. package/dist/docs/UI_SYSTEM_SUMMARY.md +445 -0
  30. package/dist/docs/VOXEL_ENGINE_GUIDE.md +662 -0
  31. package/dist/docs/VOXEL_QUICK_REFERENCE.md +386 -0
  32. package/dist/docs/api-3d.html +750 -0
  33. package/dist/docs/api-effects.html +385 -0
  34. package/dist/docs/api-improvements.md +121 -0
  35. package/dist/docs/api-skybox.html +407 -0
  36. package/dist/docs/api-sprites.html +321 -0
  37. package/dist/docs/api-voxel.html +337 -0
  38. package/dist/docs/api.html +543 -0
  39. package/dist/docs/assets.html +306 -0
  40. package/dist/docs/audio.html +340 -0
  41. package/dist/docs/blogs.html +286 -0
  42. package/dist/docs/collision.html +316 -0
  43. package/dist/docs/console.html +247 -0
  44. package/dist/docs/editor.html +297 -0
  45. package/dist/docs/font.html +247 -0
  46. package/dist/docs/framebuffer.html +247 -0
  47. package/dist/docs/fullscreen-button.html +297 -0
  48. package/dist/docs/gpu-systems.html +247 -0
  49. package/dist/docs/index.html +580 -0
  50. package/dist/docs/input.html +491 -0
  51. package/dist/docs/physics.html +311 -0
  52. package/dist/docs/screens.html +311 -0
  53. package/dist/docs/storage.html +311 -0
  54. package/dist/docs/textinput.html +332 -0
  55. package/dist/docs/ui.html +488 -0
  56. package/dist/examples/3d-advanced/code.js +695 -0
  57. package/dist/examples/adventure-comic-3d/code.js +342 -0
  58. package/dist/examples/audio-lab/code.js +150 -0
  59. package/dist/examples/boids-flocking/code.js +270 -0
  60. package/dist/examples/crystal-cathedral-3d/code.js +706 -0
  61. package/dist/examples/cyberpunk-city-3d/code.js +1383 -0
  62. package/dist/examples/demoscene/README.md +192 -0
  63. package/dist/examples/demoscene/code.js +1081 -0
  64. package/dist/examples/demoscene/meta.json +21 -0
  65. package/dist/examples/dungeon-crawler-3d/code.js +1117 -0
  66. package/dist/examples/f-zero-nova-3d/code.js +865 -0
  67. package/dist/examples/f-zero-nova-3d/code_old.js +1555 -0
  68. package/dist/examples/fps-demo-3d/code.js +744 -0
  69. package/dist/examples/game-of-life-3d/code.js +338 -0
  70. package/dist/examples/generative-art/code.js +632 -0
  71. package/dist/examples/hello-3d/code.js +325 -0
  72. package/dist/examples/hello-skybox/code.js +183 -0
  73. package/dist/examples/hello-world/code.js +19 -0
  74. package/dist/examples/input-showcase/code.js +109 -0
  75. package/dist/examples/instancing-demo/code.js +315 -0
  76. package/dist/examples/minecraft-demo/code.js +387 -0
  77. package/dist/examples/model-viewer-3d/code.js +114 -0
  78. package/dist/examples/mystical-realm-3d/code.js +1203 -0
  79. package/dist/examples/nature-explorer-3d/code.js +1318 -0
  80. package/dist/examples/particles-demo/code.js +522 -0
  81. package/dist/examples/pbr-showcase/code.js +140 -0
  82. package/dist/examples/physics-demo-3d/code.js +948 -0
  83. package/dist/examples/screen-demo/code.js +267 -0
  84. package/dist/examples/shooter-demo-3d/code.js +1286 -0
  85. package/dist/examples/space-combat-3d/IMPLEMENTATION_SUMMARY.md +109 -0
  86. package/dist/examples/space-combat-3d/README.md +135 -0
  87. package/dist/examples/space-combat-3d/code.js +1332 -0
  88. package/dist/examples/space-harrier-3d/code.js +923 -0
  89. package/dist/examples/star-fox-nova-3d/code.js +1116 -0
  90. package/dist/examples/star-fox-nova-3d/code_backup.js +410 -0
  91. package/dist/examples/star-fox-nova-3d/code_broken.js +1821 -0
  92. package/dist/examples/storage-quest/code.js +209 -0
  93. package/dist/examples/strider-demo-3d/IMPROVEMENT_OPTIONS.md +285 -0
  94. package/dist/examples/strider-demo-3d/cache-test.html +132 -0
  95. package/dist/examples/strider-demo-3d/code-fixed.js +582 -0
  96. package/dist/examples/strider-demo-3d/code-old.js +1537 -0
  97. package/dist/examples/strider-demo-3d/code.js +1462 -0
  98. package/dist/examples/strider-demo-3d/code.js.bak2 +1169 -0
  99. package/dist/examples/strider-demo-3d/fix-game.sh +53 -0
  100. package/dist/examples/super-plumber-64/README.md +128 -0
  101. package/dist/examples/super-plumber-64/code.js +1185 -0
  102. package/dist/examples/super-plumber-64/index.html +88 -0
  103. package/dist/examples/test-2d-overlay/code.js +32 -0
  104. package/dist/examples/test-font/code.js +51 -0
  105. package/dist/examples/test-minimal/code.js +21 -0
  106. package/dist/examples/ui-demo/code.js +306 -0
  107. package/dist/examples/wing-commander-space/README.md +180 -0
  108. package/dist/examples/wing-commander-space/code.js +1285 -0
  109. package/dist/examples/wizardry-3d/CHANGELOG.md +366 -0
  110. package/dist/examples/wizardry-3d/code.js +3928 -0
  111. package/dist/index.html +666 -0
  112. package/dist/os9-shell/assets/index-DIHfrTaW.css +1 -0
  113. package/dist/os9-shell/assets/index-KchE_ngx.js +483 -0
  114. package/dist/os9-shell/assets/index-KchE_ngx.js.map +1 -0
  115. package/dist/os9-shell/index.html +23 -0
  116. package/dist/os9-shell/nova-icon.svg +12 -0
  117. package/dist/runtime/api-2d.js +1158 -0
  118. package/dist/runtime/api-3d/camera.js +73 -0
  119. package/dist/runtime/api-3d/instancing.js +180 -0
  120. package/dist/runtime/api-3d/lights.js +51 -0
  121. package/dist/runtime/api-3d/materials.js +47 -0
  122. package/dist/runtime/api-3d/models.js +84 -0
  123. package/dist/runtime/api-3d/particles.js +296 -0
  124. package/dist/runtime/api-3d/pbr.js +113 -0
  125. package/dist/runtime/api-3d/primitives.js +304 -0
  126. package/dist/runtime/api-3d/scene.js +169 -0
  127. package/dist/runtime/api-3d/transforms.js +161 -0
  128. package/dist/runtime/api-3d.js +166 -0
  129. package/dist/runtime/api-effects.js +840 -0
  130. package/dist/runtime/api-gameutils.js +476 -0
  131. package/dist/runtime/api-generative.js +610 -0
  132. package/dist/runtime/api-presets.js +85 -0
  133. package/dist/runtime/api-skybox.js +232 -0
  134. package/dist/runtime/api-sprites.js +100 -0
  135. package/dist/runtime/api-voxel.js +712 -0
  136. package/dist/runtime/api.js +201 -0
  137. package/dist/runtime/assets.js +27 -0
  138. package/dist/runtime/audio.js +114 -0
  139. package/dist/runtime/collision.js +47 -0
  140. package/dist/runtime/console.js +101 -0
  141. package/dist/runtime/editor.js +233 -0
  142. package/dist/runtime/font.js +233 -0
  143. package/dist/runtime/framebuffer.js +28 -0
  144. package/dist/runtime/fullscreen-button.js +185 -0
  145. package/dist/runtime/gpu-canvas2d.js +47 -0
  146. package/dist/runtime/gpu-threejs.js +643 -0
  147. package/dist/runtime/gpu-webgl2.js +310 -0
  148. package/dist/runtime/index.d.ts +682 -0
  149. package/dist/runtime/index.js +22 -0
  150. package/dist/runtime/input.js +225 -0
  151. package/dist/runtime/logger.js +60 -0
  152. package/dist/runtime/physics.js +101 -0
  153. package/dist/runtime/screens.js +213 -0
  154. package/dist/runtime/storage.js +38 -0
  155. package/dist/runtime/store.js +151 -0
  156. package/dist/runtime/textinput.js +68 -0
  157. package/dist/runtime/ui/buttons.js +124 -0
  158. package/dist/runtime/ui/panels.js +105 -0
  159. package/dist/runtime/ui/text.js +86 -0
  160. package/dist/runtime/ui/widgets.js +141 -0
  161. package/dist/runtime/ui.js +111 -0
  162. package/index.html +6 -1
  163. package/package.json +9 -2
  164. package/public/assets/sky/studio/nx.png +0 -0
  165. package/public/assets/sky/studio/ny.png +0 -0
  166. package/public/assets/sky/studio/nz.png +0 -0
  167. package/public/assets/sky/studio/px.png +0 -0
  168. package/public/assets/sky/studio/py.png +0 -0
  169. package/public/assets/sky/studio/pz.png +0 -0
  170. package/public/os9-shell/assets/index-KchE_ngx.js +483 -0
  171. package/public/os9-shell/assets/index-KchE_ngx.js.map +1 -0
  172. package/public/os9-shell/index.html +10 -1
  173. package/runtime/api-2d.js +301 -21
  174. package/runtime/api-3d/pbr.js +45 -1
  175. package/runtime/api-3d.js +1 -0
  176. package/runtime/api-effects.js +90 -3
  177. package/runtime/api-gameutils.js +476 -0
  178. package/runtime/api-generative.js +610 -0
  179. package/runtime/api-skybox.js +54 -0
  180. package/runtime/api-voxel.js +139 -28
  181. package/runtime/gpu-threejs.js +13 -9
  182. package/runtime/ui.js +2 -2
  183. package/src/main.js +20 -0
  184. package/public/os9-shell/assets/index-B1Uvacma.js +0 -32825
  185. package/public/os9-shell/assets/index-B1Uvacma.js.map +0 -1
package/dist/docs/assets.html ADDED
@@ -0,0 +1,306 @@
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>Asset Loader - Nova64 Documentation</title>
7
+ <style>
8
+ :root {
9
+ --bg-primary: #0f1115;
10
+ --bg-secondary: #151822;
11
+ --bg-tertiary: #1a1d2e;
12
+ --text-primary: #dcdfe4;
13
+ --text-secondary: #99a1b3;
14
+ --accent-cyan: #00ffff;
15
+ --accent-magenta: #ff0080;
16
+ --accent-yellow: #ffff00;
17
+ --border: #2a324a;
18
+ --code-bg: #1a1d2e;
19
+ }
20
+
21
+ * {
22
+ margin: 0;
23
+ padding: 0;
24
+ box-sizing: border-box;
25
+ }
26
+
27
+ body {
28
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
29
+ background: linear-gradient(135deg, var(--bg-primary) 0%, #1a1625 50%, var(--bg-primary) 100%);
30
+ background-attachment: fixed;
31
+ color: var(--text-primary);
32
+ line-height: 1.6;
33
+ }
34
+
35
+ .container {
36
+ max-width: 1200px;
37
+ margin: 0 auto;
38
+ padding: 20px;
39
+ }
40
+
41
+ header {
42
+ background: var(--bg-secondary);
43
+ border: 2px solid var(--accent-cyan);
44
+ border-radius: 12px;
45
+ padding: 30px;
46
+ margin-bottom: 30px;
47
+ box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
48
+ }
49
+
50
+ h1 {
51
+ color: var(--accent-cyan);
52
+ font-size: 2.5em;
53
+ text-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
54
+ margin-bottom: 10px;
55
+ }
56
+
57
+ .back-link {
58
+ display: inline-block;
59
+ color: var(--accent-cyan);
60
+ text-decoration: none;
61
+ margin-bottom: 15px;
62
+ transition: color 0.3s ease;
63
+ }
64
+
65
+ .back-link:hover {
66
+ color: #33ffff;
67
+ text-decoration: underline;
68
+ }
69
+
70
+ .subtitle {
71
+ color: var(--text-secondary);
72
+ font-size: 1.1em;
73
+ }
74
+
75
+ section {
76
+ background: var(--bg-secondary);
77
+ border-left: 4px solid var(--accent-cyan);
78
+ padding: 25px;
79
+ margin-bottom: 30px;
80
+ border-radius: 8px;
81
+ }
82
+
83
+ h2 {
84
+ color: var(--accent-magenta);
85
+ font-size: 2em;
86
+ margin-bottom: 15px;
87
+ text-shadow: 0 0 10px rgba(255, 0, 128, 0.5);
88
+ }
89
+
90
+ h3 {
91
+ color: var(--accent-cyan);
92
+ font-size: 1.4em;
93
+ margin: 25px 0 15px 0;
94
+ }
95
+
96
+ .function {
97
+ background: var(--bg-tertiary);
98
+ border: 1px solid var(--border);
99
+ border-radius: 8px;
100
+ padding: 20px;
101
+ margin-bottom: 25px;
102
+ }
103
+
104
+ .function-sig {
105
+ font-family: 'Courier New', Courier, monospace;
106
+ font-size: 1.2em;
107
+ color: var(--accent-yellow);
108
+ margin-bottom: 15px;
109
+ padding: 10px;
110
+ background: var(--code-bg);
111
+ border-radius: 4px;
112
+ border-left: 3px solid var(--accent-yellow);
113
+ }
114
+
115
+ .param-list, .return-info {
116
+ margin: 15px 0;
117
+ }
118
+
119
+ .param {
120
+ padding: 8px 0;
121
+ border-bottom: 1px solid var(--border);
122
+ }
123
+
124
+ .param:last-child {
125
+ border-bottom: none;
126
+ }
127
+
128
+ .param-name {
129
+ color: var(--accent-cyan);
130
+ font-weight: bold;
131
+ font-family: 'Courier New', Courier, monospace;
132
+ }
133
+
134
+ .param-type {
135
+ color: var(--accent-magenta);
136
+ font-style: italic;
137
+ font-size: 0.9em;
138
+ }
139
+
140
+ .example {
141
+ background: var(--code-bg);
142
+ border: 1px solid var(--border);
143
+ border-radius: 8px;
144
+ padding: 20px;
145
+ margin: 15px 0;
146
+ overflow-x: auto;
147
+ }
148
+
149
+ .example-title {
150
+ color: var(--accent-yellow);
151
+ font-weight: bold;
152
+ margin-bottom: 10px;
153
+ }
154
+
155
+ pre {
156
+ margin: 0;
157
+ font-family: 'Courier New', Courier, monospace;
158
+ line-height: 1.5;
159
+ }
160
+
161
+ code {
162
+ color: var(--text-primary);
163
+ }
164
+
165
+ .note {
166
+ background: var(--bg-tertiary);
167
+ border-left: 4px solid var(--accent-yellow);
168
+ padding: 15px;
169
+ margin: 15px 0;
170
+ border-radius: 4px;
171
+ }
172
+
173
+ .note-title {
174
+ color: var(--accent-yellow);
175
+ font-weight: bold;
176
+ margin-bottom: 10px;
177
+ }
178
+
179
+ table {
180
+ width: 100%;
181
+ border-collapse: collapse;
182
+ margin: 15px 0;
183
+ }
184
+
185
+ th, td {
186
+ padding: 12px;
187
+ text-align: left;
188
+ border: 1px solid var(--border);
189
+ }
190
+
191
+ th {
192
+ background: var(--bg-tertiary);
193
+ color: var(--accent-cyan);
194
+ font-weight: bold;
195
+ }
196
+
197
+ tr:nth-child(even) {
198
+ background: var(--bg-tertiary);
199
+ }
200
+
201
+ footer {
202
+ text-align: center;
203
+ padding: 30px 20px;
204
+ color: var(--text-secondary);
205
+ border-top: 1px solid var(--border);
206
+ margin-top: 40px;
207
+ }
208
+
209
+ ul {
210
+ margin-left: 20px;
211
+ margin-top: 10px;
212
+ }
213
+
214
+ li {
215
+ margin: 5px 0;
216
+ }
217
+ </style>
218
+ </head>
219
+ <body>
220
+ <div class="container">
221
+ <a href="index.html" class="back-link">← Back to Documentation Index</a>
222
+
223
+ <header>
224
+ <h1>📦 Asset Loader</h1>
225
+ <p class="subtitle">Loading and caching of images, sounds, and models</p>
226
+ </header>
227
+
228
+
229
+ <section>
230
+ <h2>📋 Overview</h2>
231
+ <p>The Asset Loader manages loading and caching of game resources including images, audio files, and 3D models.</p>
232
+
233
+ <div class="note">
234
+ <div class="note-title">💡 Asset Types</div>
235
+ <ul><li><strong>Images</strong> - PNG, JPG for sprites and textures</li><li><strong>Sounds</strong> - MP3, WAV, OGG audio files</li><li><strong>Models</strong> - GLB/GLTF 3D models</li><li><strong>Caching</strong> - Automatic resource caching</li></ul>
236
+ </div>
237
+
238
+
239
+ </section>
240
+
241
+ <section>
242
+ <h2>📦 Asset Functions</h2>
243
+
244
+
245
+
246
+ <div class="function">
247
+ <div class="function-sig">loadImage(url)</div>
248
+ <p>Loads an image file.</p>
249
+
250
+ <div class="param-list">
251
+
252
+ <div class="param">
253
+ <span class="param-name">url</span>
254
+ <span class="param-type">string</span> - Path to image file
255
+ </div>
256
+
257
+ </div>
258
+
259
+
260
+ <div class="return-info">
261
+ <strong>Returns:</strong> <span class="param-type">Promise<Image></span> - Promise resolving to image
262
+ </div>
263
+
264
+
265
+ <div class="example">
266
+ <div class="example-title">Example:</div>
267
+ <pre><code>const img = await loadImage("/sprites/player.png");</code></pre>
268
+ </div>
269
+
270
+ </div>
271
+
272
+ <div class="function">
273
+ <div class="function-sig">loadSound(url)</div>
274
+ <p>Loads an audio file.</p>
275
+
276
+ <div class="param-list">
277
+
278
+ <div class="param">
279
+ <span class="param-name">url</span>
280
+ <span class="param-type">string</span> - Path to audio file
281
+ </div>
282
+
283
+ </div>
284
+
285
+
286
+ <div class="return-info">
287
+ <strong>Returns:</strong> <span class="param-type">Promise<AudioBuffer></span> - Promise resolving to audio
288
+ </div>
289
+
290
+
291
+ <div class="example">
292
+ <div class="example-title">Example:</div>
293
+ <pre><code>const sfx = await loadSound("/sounds/jump.mp3");</code></pre>
294
+ </div>
295
+
296
+ </div>
297
+
298
+ </section>
299
+
300
+
301
+ <footer>
302
+ <p>Nova64 Fantasy Console © 2025 | <a href="index.html" style="color: var(--accent-cyan);">Back to Documentation</a></p>
303
+ </footer>
304
+ </div>
305
+ </body>
306
+ </html>
package/dist/docs/audio.html ADDED
@@ -0,0 +1,340 @@
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>Audio System - Nova64 Documentation</title>
7
+ <style>
8
+ :root {
9
+ --bg-primary: #0f1115; --bg-secondary: #151822; --bg-tertiary: #1a1d2e;
10
+ --text-primary: #dcdfe4; --text-secondary: #99a1b3;
11
+ --accent-cyan: #00ffff; --accent-magenta: #ff0080; --accent-yellow: #ffff00;
12
+ --border: #2a324a; --code-bg: #1a1d2e;
13
+ }
14
+ * { margin: 0; padding: 0; box-sizing: border-box; }
15
+ body {
16
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
17
+ background: linear-gradient(135deg, var(--bg-primary) 0%, #1a1625 50%, var(--bg-primary) 100%);
18
+ background-attachment: fixed; color: var(--text-primary); line-height: 1.6;
19
+ }
20
+ .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
21
+ header {
22
+ background: var(--bg-secondary); border: 2px solid var(--accent-cyan);
23
+ border-radius: 12px; padding: 30px; margin-bottom: 30px;
24
+ box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
25
+ }
26
+ h1 { color: var(--accent-cyan); font-size: 2.5em; text-shadow: 0 0 20px rgba(0, 255, 255, 0.6); margin-bottom: 10px; }
27
+ .back-link { display: inline-block; color: var(--accent-cyan); text-decoration: none; margin-bottom: 15px; transition: color 0.3s ease; }
28
+ .back-link:hover { color: #33ffff; text-decoration: underline; }
29
+ .subtitle { color: var(--text-secondary); font-size: 1.1em; }
30
+ section { background: var(--bg-secondary); border-left: 4px solid var(--accent-cyan); padding: 25px; margin-bottom: 30px; border-radius: 8px; }
31
+ h2 { color: var(--accent-magenta); font-size: 2em; margin-bottom: 15px; text-shadow: 0 0 10px rgba(255, 0, 128, 0.5); }
32
+ h3 { color: var(--accent-cyan); font-size: 1.4em; margin: 25px 0 15px 0; }
33
+ .function { background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 8px; padding: 20px; margin-bottom: 25px; }
34
+ .function-sig { font-family: 'Courier New', Courier, monospace; font-size: 1.2em; color: var(--accent-yellow); margin-bottom: 15px; padding: 10px; background: var(--code-bg); border-radius: 4px; border-left: 3px solid var(--accent-yellow); }
35
+ .param-list, .return-info { margin: 15px 0; }
36
+ .param { padding: 8px 0; border-bottom: 1px solid var(--border); }
37
+ .param:last-child { border-bottom: none; }
38
+ .param-name { color: var(--accent-cyan); font-weight: bold; font-family: 'Courier New', Courier, monospace; }
39
+ .param-type { color: var(--accent-magenta); font-style: italic; font-size: 0.9em; }
40
+ .example { background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; padding: 20px; margin: 15px 0; overflow-x: auto; }
41
+ .example-title { color: var(--accent-yellow); font-weight: bold; margin-bottom: 10px; }
42
+ pre { margin: 0; font-family: 'Courier New', Courier, monospace; line-height: 1.5; }
43
+ code { color: var(--text-primary); }
44
+ .keyword { color: #ff79c6; }
45
+ .function-name { color: #50fa7b; }
46
+ .number { color: #f1fa8c; }
47
+ .string { color: #f1fa8c; }
48
+ .comment { color: #6272a4; font-style: italic; }
49
+ .note { background: var(--bg-tertiary); border-left: 4px solid var(--accent-yellow); padding: 15px; margin: 15px 0; border-radius: 4px; }
50
+ .note-title { color: var(--accent-yellow); font-weight: bold; margin-bottom: 10px; }
51
+ table { width: 100%; border-collapse: collapse; margin: 15px 0; }
52
+ th, td { padding: 12px; text-align: left; border: 1px solid var(--border); }
53
+ th { background: var(--bg-tertiary); color: var(--accent-cyan); font-weight: bold; }
54
+ tr:nth-child(even) { background: var(--bg-tertiary); }
55
+ footer { text-align: center; padding: 30px 20px; color: var(--text-secondary); border-top: 1px solid var(--border); margin-top: 40px; }
56
+ </style>
57
+ </head>
58
+ <body>
59
+ <div class="container">
60
+ <a href="index.html" class="back-link">← Back to Documentation Index</a>
61
+
62
+ <header>
63
+ <h1>🔊 Audio System</h1>
64
+ <p class="subtitle">Sound effects and music with Web Audio API synthesis</p>
65
+ </header>
66
+
67
+ <section>
68
+ <h2>📋 Overview</h2>
69
+ <p>The Audio System provides retro-style sound effect generation using the Web Audio API. Create classic game sounds with square waves, sine waves, sawtooth, and noise using simple parameters.</p>
70
+
71
+ <div class="note">
72
+ <div class="note-title">💡 Key Features</div>
73
+ <ul>
74
+ <li><strong>Waveform Synthesis</strong> - Square, sine, sawtooth, and noise</li>
75
+ <li><strong>Frequency Sweep</strong> - Pitch changes over time (laser, explosion effects)</li>
76
+ <li><strong>Multi-Channel</strong> - 8 simultaneous sound channels</li>
77
+ <li><strong>Volume Control</strong> - Per-sound and master volume</li>
78
+ <li><strong>Preset System</strong> - Pre-configured sound effects (0-2)</li>
79
+ </ul>
80
+ </div>
81
+ </section>
82
+
83
+ <section>
84
+ <h2>🎵 Main Function</h2>
85
+
86
+ <div class="function">
87
+ <div class="function-sig">sfx(options)</div>
88
+ <p>Plays a sound effect with custom parameters or preset ID.</p>
89
+
90
+ <div class="param-list">
91
+ <div class="param">
92
+ <span class="param-name">options</span> <span class="param-type">object or number</span> - Sound parameters or preset ID (0-2)
93
+ </div>
94
+ </div>
95
+
96
+ <h3>Parameters (when options is an object):</h3>
97
+ <div class="param-list">
98
+ <div class="param">
99
+ <span class="param-name">wave</span> <span class="param-type">string</span> - Waveform: "square", "sine", "sawtooth", or "noise" (default: "square")
100
+ </div>
101
+ <div class="param">
102
+ <span class="param-name">freq</span> <span class="param-type">number (Hz)</span> - Base frequency (default: 440)
103
+ </div>
104
+ <div class="param">
105
+ <span class="param-name">dur</span> <span class="param-type">number (seconds)</span> - Duration (default: 0.2)
106
+ </div>
107
+ <div class="param">
108
+ <span class="param-name">vol</span> <span class="param-type">number (0-1)</span> - Volume (default: 0.5)
109
+ </div>
110
+ <div class="param">
111
+ <span class="param-name">sweep</span> <span class="param-type">number (Hz/sec)</span> - Frequency change rate (default: 0)
112
+ </div>
113
+ </div>
114
+
115
+ <div class="example">
116
+ <div class="example-title">Example: Custom sound effects</div>
117
+ <pre><code><span class="comment">// Jump sound (rising pitch)</span>
118
+ <span class="function-name">sfx</span>({ wave: <span class="string">'square'</span>, freq: <span class="number">200</span>, dur: <span class="number">0.15</span>, sweep: <span class="number">800</span>, vol: <span class="number">0.3</span> });
119
+
120
+ <span class="comment">// Laser shot (falling pitch)</span>
121
+ <span class="function-name">sfx</span>({ wave: <span class="string">'sine'</span>, freq: <span class="number">1000</span>, dur: <span class="number">0.3</span>, sweep: <span class="number">-1500</span>, vol: <span class="number">0.4</span> });
122
+
123
+ <span class="comment">// Explosion (noise)</span>
124
+ <span class="function-name">sfx</span>({ wave: <span class="string">'noise'</span>, dur: <span class="number">0.5</span>, vol: <span class="number">0.6</span> });
125
+
126
+ <span class="comment">// Power-up (major chord sweep)</span>
127
+ <span class="function-name">sfx</span>({ wave: <span class="string">'sine'</span>, freq: <span class="number">440</span>, dur: <span class="number">0.4</span>, sweep: <span class="number">400</span>, vol: <span class="number">0.3</span> });</code></pre>
128
+ </div>
129
+ </div>
130
+
131
+ <h3>Preset Sounds (ID-based)</h3>
132
+ <div class="function">
133
+ <div class="function-sig">sfx(id)</div>
134
+ <p>Plays a pre-configured sound effect by ID.</p>
135
+
136
+ <table>
137
+ <thead>
138
+ <tr>
139
+ <th>ID</th>
140
+ <th>Sound</th>
141
+ <th>Parameters</th>
142
+ </tr>
143
+ </thead>
144
+ <tbody>
145
+ <tr>
146
+ <td>0</td>
147
+ <td>Blip/Menu</td>
148
+ <td>Square wave, 880 Hz, 0.1s</td>
149
+ </tr>
150
+ <tr>
151
+ <td>1</td>
152
+ <td>Coin/Pickup</td>
153
+ <td>Sine wave, 220 Hz → 120 Hz, 0.3s</td>
154
+ </tr>
155
+ <tr>
156
+ <td>2</td>
157
+ <td>Hit/Impact</td>
158
+ <td>Noise, 0.2s</td>
159
+ </tr>
160
+ </tbody>
161
+ </table>
162
+
163
+ <div class="example">
164
+ <div class="example-title">Example: Using presets</div>
165
+ <pre><code><span class="comment">// Menu navigation</span>
166
+ <span class="keyword">if</span> (<span class="function-name">btnp</span>(<span class="number">2</span>)) {
167
+ menuIndex--;
168
+ <span class="function-name">sfx</span>(<span class="number">0</span>); <span class="comment">// Blip sound</span>
169
+ }
170
+
171
+ <span class="comment">// Collect coin</span>
172
+ <span class="keyword">if</span> (collectedCoin) {
173
+ score += <span class="number">10</span>;
174
+ <span class="function-name">sfx</span>(<span class="number">1</span>); <span class="comment">// Coin sound</span>
175
+ }
176
+
177
+ <span class="comment">// Take damage</span>
178
+ <span class="keyword">if</span> (hitByEnemy) {
179
+ health -= <span class="number">10</span>;
180
+ <span class="function-name">sfx</span>(<span class="number">2</span>); <span class="comment">// Hit sound</span>
181
+ }</code></pre>
182
+ </div>
183
+ </div>
184
+ </section>
185
+
186
+ <section>
187
+ <h2>🎼 Waveform Guide</h2>
188
+
189
+ <table>
190
+ <thead>
191
+ <tr>
192
+ <th>Waveform</th>
193
+ <th>Sound Character</th>
194
+ <th>Best For</th>
195
+ </tr>
196
+ </thead>
197
+ <tbody>
198
+ <tr>
199
+ <td><strong>square</strong></td>
200
+ <td>Hollow, retro, chip-tune</td>
201
+ <td>Blips, beeps, menu sounds, retro games</td>
202
+ </tr>
203
+ <tr>
204
+ <td><strong>sine</strong></td>
205
+ <td>Pure, smooth, musical</td>
206
+ <td>Lasers, power-ups, melodic effects</td>
207
+ </tr>
208
+ <tr>
209
+ <td><strong>sawtooth</strong></td>
210
+ <td>Buzzy, harsh, aggressive</td>
211
+ <td>Alarms, engines, intense action</td>
212
+ </tr>
213
+ <tr>
214
+ <td><strong>noise</strong></td>
215
+ <td>Static, explosion-like</td>
216
+ <td>Explosions, impacts, wind, crashes</td>
217
+ </tr>
218
+ </tbody>
219
+ </table>
220
+ </section>
221
+
222
+ <section>
223
+ <h2>🎨 Sound Design Examples</h2>
224
+
225
+ <div class="example">
226
+ <div class="example-title">Classic Game Sounds</div>
227
+ <pre><code><span class="comment">// Jump (8-bit platformer)</span>
228
+ <span class="keyword">function</span> <span class="function-name">playJumpSound</span>() {
229
+ <span class="function-name">sfx</span>({ wave: <span class="string">'square'</span>, freq: <span class="number">300</span>, dur: <span class="number">0.1</span>, sweep: <span class="number">600</span>, vol: <span class="number">0.25</span> });
230
+ }
231
+
232
+ <span class="comment">// Laser shoot</span>
233
+ <span class="keyword">function</span> <span class="function-name">playLaserSound</span>() {
234
+ <span class="function-name">sfx</span>({ wave: <span class="string">'sine'</span>, freq: <span class="number">800</span>, dur: <span class="number">0.2</span>, sweep: <span class="number">-1200</span>, vol: <span class="number">0.35</span> });
235
+ }
236
+
237
+ <span class="comment">// Explosion</span>
238
+ <span class="keyword">function</span> <span class="function-name">playExplosionSound</span>() {
239
+ <span class="function-name">sfx</span>({ wave: <span class="string">'noise'</span>, dur: <span class="number">0.6</span>, vol: <span class="number">0.7</span> });
240
+ <span class="comment">// Add bass rumble</span>
241
+ <span class="function-name">sfx</span>({ wave: <span class="string">'sine'</span>, freq: <span class="number">60</span>, dur: <span class="number">0.4</span>, vol: <span class="number">0.5</span> });
242
+ }
243
+
244
+ <span class="comment">// Power-up collected</span>
245
+ <span class="keyword">function</span> <span class="function-name">playPowerUpSound</span>() {
246
+ <span class="comment">// Arpeggio effect</span>
247
+ <span class="function-name">sfx</span>({ wave: <span class="string">'sine'</span>, freq: <span class="number">523</span>, dur: <span class="number">0.08</span>, vol: <span class="number">0.3</span> }); <span class="comment">// C</span>
248
+ <span class="function-name">setTimeout</span>(() => {
249
+ <span class="function-name">sfx</span>({ wave: <span class="string">'sine'</span>, freq: <span class="number">659</span>, dur: <span class="number">0.08</span>, vol: <span class="number">0.3</span> }); <span class="comment">// E</span>
250
+ }, <span class="number">80</span>);
251
+ <span class="function-name">setTimeout</span>(() => {
252
+ <span class="function-name">sfx</span>({ wave: <span class="string">'sine'</span>, freq: <span class="number">784</span>, dur: <span class="number">0.15</span>, vol: <span class="number">0.3</span> }); <span class="comment">// G</span>
253
+ }, <span class="number">160</span>);
254
+ }
255
+
256
+ <span class="comment">// Enemy hit</span>
257
+ <span class="keyword">function</span> <span class="function-name">playHitSound</span>() {
258
+ <span class="function-name">sfx</span>({ wave: <span class="string">'noise'</span>, dur: <span class="number">0.1</span>, vol: <span class="number">0.4</span> });
259
+ <span class="function-name">sfx</span>({ wave: <span class="string">'square'</span>, freq: <span class="number">150</span>, dur: <span class="number">0.15</span>, sweep: <span class="number">-100</span>, vol: <span class="number">0.3</span> });
260
+ }
261
+
262
+ <span class="comment">// Menu select</span>
263
+ <span class="keyword">function</span> <span class="function-name">playMenuSelectSound</span>() {
264
+ <span class="function-name">sfx</span>({ wave: <span class="string">'square'</span>, freq: <span class="number">660</span>, dur: <span class="number">0.05</span>, vol: <span class="number">0.2</span> });
265
+ }
266
+
267
+ <span class="comment">// Game over</span>
268
+ <span class="keyword">function</span> <span class="function-name">playGameOverSound</span>() {
269
+ <span class="comment">// Descending notes</span>
270
+ <span class="keyword">const</span> notes = [<span class="number">523</span>, <span class="number">494</span>, <span class="number">440</span>, <span class="number">392</span>, <span class="number">349</span>];
271
+ notes.<span class="function-name">forEach</span>((freq, i) => {
272
+ <span class="function-name">setTimeout</span>(() => {
273
+ <span class="function-name">sfx</span>({ wave: <span class="string">'square'</span>, freq, dur: <span class="number">0.25</span>, vol: <span class="number">0.3</span> });
274
+ }, i * <span class="number">200</span>);
275
+ });
276
+ }</code></pre>
277
+ </div>
278
+ </section>
279
+
280
+ <section>
281
+ <h2>💡 Usage Tips</h2>
282
+
283
+ <div class="note">
284
+ <div class="note-title">Best Practices</div>
285
+ <ul>
286
+ <li><strong>Volume Control:</strong> Keep vol between 0.2-0.5 to avoid overpowering music/other sounds</li>
287
+ <li><strong>Frequency Range:</strong> 20 Hz (bass) to 20,000 Hz (high pitch). Use 200-2000 Hz for most game sounds</li>
288
+ <li><strong>Duration:</strong> Short sounds (0.05-0.2s) for UI, longer (0.3-1.0s) for ambience</li>
289
+ <li><strong>Sweep:</strong> Positive values = rising pitch (jump), negative = falling (laser)</li>
290
+ <li><strong>Layering:</strong> Combine multiple sfx() calls for complex sounds (explosion = noise + bass)</li>
291
+ <li><strong>Timing:</strong> Use setTimeout() for sequential notes (melodies, arpeggios)</li>
292
+ </ul>
293
+ </div>
294
+
295
+ <div class="note">
296
+ <div class="note-title">Performance</div>
297
+ <ul>
298
+ <li>Maximum 8 sounds playing simultaneously</li>
299
+ <li>Audio context initializes on first sfx() call (user interaction required)</li>
300
+ <li>Master volume set to 0.2 by default to prevent clipping</li>
301
+ </ul>
302
+ </div>
303
+ </section>
304
+
305
+ <section>
306
+ <h2>🎹 Frequency Reference (Musical Notes)</h2>
307
+
308
+ <table>
309
+ <thead>
310
+ <tr>
311
+ <th>Note</th>
312
+ <th>Frequency (Hz)</th>
313
+ <th>Use Case</th>
314
+ </tr>
315
+ </thead>
316
+ <tbody>
317
+ <tr><td>C3</td><td>131</td><td>Bass rumble</td></tr>
318
+ <tr><td>C4 (Middle C)</td><td>262</td><td>Low effects</td></tr>
319
+ <tr><td>A4</td><td>440</td><td>Standard reference pitch</td></tr>
320
+ <tr><td>C5</td><td>523</td><td>Medium effects</td></tr>
321
+ <tr><td>C6</td><td>1047</td><td>High effects</td></tr>
322
+ <tr><td>C7</td><td>2093</td><td>Very high, sharp sounds</td></tr>
323
+ </tbody>
324
+ </table>
325
+ </section>
326
+
327
+ <section>
328
+ <h2>📚 Related APIs</h2>
329
+ <ul>
330
+ <li><a href="input.html" style="color: var(--accent-cyan);">Input System</a> - Trigger sounds on button press</li>
331
+ <li><a href="collision.html" style="color: var(--accent-cyan);">Collision Detection</a> - Play impact sounds on collision</li>
332
+ </ul>
333
+ </section>
334
+
335
+ <footer>
336
+ <p>Nova64 Fantasy Console © 2025 | <a href="index.html" style="color: var(--accent-cyan);">Back to Documentation</a></p>
337
+ </footer>
338
+ </div>
339
+ </body>
340
+ </html>