minimojs 1.0.0-alpha.3 → 1.0.0-alpha.4
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/README.md +57 -292
- package/dist/minimo.d.ts +208 -42
- package/dist/minimo.js +307 -48
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,332 +1,97 @@
|
|
|
1
1
|
# MinimoJS v1
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
> Emoji-only sprites · Degrees rotation · Milliseconds timing · rAF loop · TypeScript-first · LLM-friendly
|
|
3
|
+
Ultra-minimal, deterministic 2D web game engine for browser games.
|
|
5
4
|
|
|
6
|
-
|
|
5
|
+
MinimoJS focuses on a flat API, direct game-loop control, and fast iteration for small games and agent-generated prototypes.
|
|
7
6
|
|
|
8
|
-
|
|
7
|
+
This README is intentionally high-level. It explains what the project is and how to use it quickly, without listing the full API surface.
|
|
9
8
|
|
|
10
|
-
|
|
11
|
-
npm install minimojs
|
|
12
|
-
```
|
|
9
|
+
## What MinimoJS Is
|
|
13
10
|
|
|
14
|
-
|
|
11
|
+
- ESM-only TypeScript-first engine
|
|
12
|
+
- Single `Game` entry point
|
|
13
|
+
- Emoji-based sprite rendering
|
|
14
|
+
- rAF-driven loop (timers/animations/updates)
|
|
15
|
+
- Responsive auto-centered canvas
|
|
15
16
|
|
|
16
|
-
|
|
17
|
-
npm install
|
|
18
|
-
npm run build
|
|
19
|
-
```
|
|
17
|
+
## Core Conventions
|
|
20
18
|
|
|
21
|
-
|
|
19
|
+
- Time arguments are milliseconds (`ms`)
|
|
20
|
+
- Rotation uses degrees
|
|
21
|
+
- Runtime update delta (`dt`) is seconds
|
|
22
|
+
- Coordinate system is center-based world space
|
|
23
|
+
- Positive Y goes downward
|
|
22
24
|
|
|
23
|
-
|
|
25
|
+
## What It Intentionally Avoids
|
|
24
26
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
-
|
|
28
|
-
-
|
|
27
|
+
- Scene manager/ECS architecture
|
|
28
|
+
- Heavy physics engine features
|
|
29
|
+
- Image spritesheets and asset pipelines
|
|
30
|
+
- Nested subsystem APIs
|
|
31
|
+
- `setTimeout` / `setInterval` game loops
|
|
29
32
|
|
|
30
|
-
|
|
33
|
+
## Install
|
|
31
34
|
|
|
32
35
|
```bash
|
|
33
|
-
|
|
36
|
+
npm install minimojs
|
|
34
37
|
```
|
|
35
38
|
|
|
36
|
-
Open:
|
|
37
|
-
|
|
38
|
-
`http://localhost:3000/examples/chickens-eggs-basket/`
|
|
39
|
-
|
|
40
|
-
`http://localhost:3000/examples/run-dino-run/`
|
|
41
|
-
|
|
42
|
-
---
|
|
43
|
-
|
|
44
39
|
## Quick Start
|
|
45
40
|
|
|
46
|
-
```html
|
|
47
|
-
<script type="module">
|
|
48
|
-
import { Game, Sprite } from "./dist/minimo.js";
|
|
49
|
-
|
|
50
|
-
const game = new Game(800, 600);
|
|
51
|
-
game.gravityY = 980;
|
|
52
|
-
|
|
53
|
-
const player = new Sprite("🐢");
|
|
54
|
-
player.x = 400;
|
|
55
|
-
player.y = 300;
|
|
56
|
-
player.size = 48;
|
|
57
|
-
player.gravityScale = 1;
|
|
58
|
-
game.add(player);
|
|
59
|
-
|
|
60
|
-
game.onUpdate = (dt) => {
|
|
61
|
-
if (game.isKeyDown("ArrowLeft")) player.vx = -200;
|
|
62
|
-
else if (game.isKeyDown("ArrowRight")) player.vx = 200;
|
|
63
|
-
else player.vx = 0;
|
|
64
|
-
|
|
65
|
-
if (game.isKeyPressed(" ") && player.y >= 550) player.vy = -600;
|
|
66
|
-
|
|
67
|
-
if (player.y > 700) game.reset();
|
|
68
|
-
|
|
69
|
-
game.drawText(`x: ${Math.round(player.x)}`, 10, 10, 16, "#ffffff");
|
|
70
|
-
};
|
|
71
|
-
|
|
72
|
-
game.start();
|
|
73
|
-
</script>
|
|
74
|
-
```
|
|
75
|
-
|
|
76
|
-
---
|
|
77
|
-
|
|
78
|
-
## Core Rules
|
|
79
|
-
|
|
80
|
-
| Rule | Value |
|
|
81
|
-
|---|---|
|
|
82
|
-
| All time parameters | **milliseconds** |
|
|
83
|
-
| All rotations | **degrees** |
|
|
84
|
-
| Game loop | **requestAnimationFrame only** |
|
|
85
|
-
| Sprites | **emoji only** |
|
|
86
|
-
| Canvas layout | **auto-centered + responsive scaling** |
|
|
87
|
-
| Coordinate system | **center-based world space** |
|
|
88
|
-
| Y-axis | **positive = down** |
|
|
89
|
-
|
|
90
|
-
---
|
|
91
|
-
|
|
92
|
-
## API Reference
|
|
93
|
-
|
|
94
|
-
### `new Game(width?, height?)`
|
|
95
|
-
|
|
96
|
-
Creates the engine, creates its own canvas, and appends it to the page.
|
|
97
|
-
Canvas is automatically centered and scaled to the maximum viewport space
|
|
98
|
-
while keeping aspect ratio.
|
|
99
|
-
|
|
100
|
-
```ts
|
|
101
|
-
const game = new Game(800, 600);
|
|
102
|
-
```
|
|
103
|
-
|
|
104
|
-
---
|
|
105
|
-
|
|
106
|
-
### Sprite Management
|
|
107
|
-
|
|
108
|
-
| Method | Description |
|
|
109
|
-
|---|---|
|
|
110
|
-
| `game.add(sprite)` | Register a Sprite instance with the engine and return it |
|
|
111
|
-
| `game.destroySprite(sprite)` | Remove a sprite from the engine |
|
|
112
|
-
| `game.getSprites()` | Read-only snapshot of all sprites |
|
|
113
|
-
|
|
114
|
-
**Creating sprites** — instantiate `Sprite` directly or subclass it:
|
|
115
|
-
|
|
116
|
-
```ts
|
|
117
|
-
// Plain instantiation
|
|
118
|
-
const coin = new Sprite("🪙");
|
|
119
|
-
coin.x = 300; coin.y = 200; coin.size = 32;
|
|
120
|
-
game.add(coin);
|
|
121
|
-
|
|
122
|
-
// Subclassing
|
|
123
|
-
class Enemy extends Sprite {
|
|
124
|
-
health = 3;
|
|
125
|
-
constructor(x: number, y: number) {
|
|
126
|
-
super("👾");
|
|
127
|
-
this.x = x; this.y = y; this.size = 40; this.gravityScale = 1;
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
const enemy = game.add(new Enemy(600, 100));
|
|
131
|
-
```
|
|
132
|
-
|
|
133
|
-
**Sprite properties and defaults:**
|
|
134
|
-
|
|
135
|
-
| Property | Type | Default | Description |
|
|
136
|
-
|---|---|---|---|
|
|
137
|
-
| `sprite` | `string` | — | **Required in constructor.** Single emoji |
|
|
138
|
-
| `x` | `number` | `0` | World X (center), pixels |
|
|
139
|
-
| `y` | `number` | `0` | World Y (center), pixels |
|
|
140
|
-
| `size` | `number` | `32` | Bounding square size, pixels |
|
|
141
|
-
| `rotation` | `number` | `0` | Degrees, clockwise |
|
|
142
|
-
| `flipX` | `boolean` | `false` | Visual horizontal mirror |
|
|
143
|
-
| `flipY` | `boolean` | `false` | Visual vertical mirror |
|
|
144
|
-
| `ignoreScroll` | `boolean` | `false` | Render in screen space (ignore `scrollX`/`scrollY`) |
|
|
145
|
-
| `alpha` | `number` | `1` | Opacity 0–1 |
|
|
146
|
-
| `visible` | `boolean` | `true` | Render toggle |
|
|
147
|
-
| `layer` | `number` | `0` | Render order (higher = on top) |
|
|
148
|
-
| `vx` | `number` | `0` | Horizontal velocity, px/s |
|
|
149
|
-
| `vy` | `number` | `0` | Vertical velocity, px/s |
|
|
150
|
-
| `gravityScale` | `number` | `0` | Gravity multiplier |
|
|
151
|
-
|
|
152
|
-
---
|
|
153
|
-
|
|
154
|
-
### Public State
|
|
155
|
-
|
|
156
|
-
| Property | Type | Description |
|
|
157
|
-
|---|---|---|
|
|
158
|
-
| `game.gravityX` | `number` | Horizontal gravity acceleration, px/s² |
|
|
159
|
-
| `game.gravityY` | `number` | Vertical gravity acceleration, px/s² |
|
|
160
|
-
| `game.scrollX` | `number` | Camera scroll X offset, pixels |
|
|
161
|
-
| `game.scrollY` | `number` | Camera scroll Y offset, pixels |
|
|
162
|
-
| `game.background` | `string \| null` | Solid canvas background color |
|
|
163
|
-
| `game.backgroundGradient` | `{ from: string; to: string } \| null` | Vertical canvas gradient (`from` top, `to` bottom) |
|
|
164
|
-
| `game.pageBackground` | `string \| null` | Full page (`document.body`) background color |
|
|
165
|
-
| `game.pointerX` | `number` | Pointer X in screen space, pixels (read-only) |
|
|
166
|
-
| `game.pointerY` | `number` | Pointer Y in screen space, pixels (read-only) |
|
|
167
|
-
| `game.width` | `number` | Canvas width, pixels (read-only) |
|
|
168
|
-
| `game.height` | `number` | Canvas height, pixels (read-only) |
|
|
169
|
-
| `game.onCreate` | `() => void` | Scene creation callback (start + reset) |
|
|
170
|
-
| `game.onUpdate` | `(dt: number) => void` | Frame callback. `dt` = seconds |
|
|
171
|
-
|
|
172
|
-
---
|
|
173
|
-
|
|
174
|
-
### Background
|
|
175
|
-
|
|
176
|
-
```ts
|
|
177
|
-
game.background = "#92d7ff"; // solid canvas background
|
|
178
|
-
game.backgroundGradient = { from: "#92d7ff", to: "#5ca44f" }; // vertical gradient
|
|
179
|
-
game.pageBackground = "#f4e4bc"; // page background
|
|
180
|
-
// If backgroundGradient is set, it takes priority over background.
|
|
181
|
-
```
|
|
182
|
-
|
|
183
|
-
---
|
|
184
|
-
|
|
185
|
-
### Collision (AABB, no resolution)
|
|
186
|
-
|
|
187
|
-
```ts
|
|
188
|
-
game.overlap(a, b) // → boolean
|
|
189
|
-
game.overlapAny(listA, listB) // → [Sprite, Sprite] | null
|
|
190
|
-
```
|
|
191
|
-
|
|
192
|
-
Bounding box is a square centered at `(x, y)` with side `size`. Rotation ignored.
|
|
193
|
-
|
|
194
|
-
---
|
|
195
|
-
|
|
196
|
-
### Input
|
|
197
|
-
|
|
198
41
|
```ts
|
|
199
|
-
|
|
200
|
-
game.isKeyDown("ArrowRight") // true every frame while held
|
|
201
|
-
game.isKeyPressed("ArrowRight") // true only on first frame of press
|
|
202
|
-
|
|
203
|
-
// Pointer (mouse / touch)
|
|
204
|
-
game.isPointerDown() // true every frame while held
|
|
205
|
-
game.isPointerPressed() // true only on first frame of press
|
|
206
|
-
game.pointerX // screen space X
|
|
207
|
-
game.pointerY // screen space Y
|
|
208
|
-
```
|
|
209
|
-
|
|
210
|
-
---
|
|
211
|
-
|
|
212
|
-
### Sound
|
|
213
|
-
|
|
214
|
-
```ts
|
|
215
|
-
game.sound(freq, durationMs)
|
|
216
|
-
// Square wave only. freq in Hz. durationMs in milliseconds.
|
|
217
|
-
game.sound(440, 100); // 440 Hz beep for 100ms
|
|
218
|
-
```
|
|
219
|
-
|
|
220
|
-
---
|
|
221
|
-
|
|
222
|
-
### Animation
|
|
223
|
-
|
|
224
|
-
```ts
|
|
225
|
-
game.animateAlpha(sprite, to, durationMs, onComplete?)
|
|
226
|
-
game.animateRotation(sprite, toDegrees, durationMs, onComplete?)
|
|
227
|
-
// Linear interpolation. durationMs in milliseconds.
|
|
228
|
-
// New animation on same property replaces the current one immediately.
|
|
229
|
-
```
|
|
42
|
+
import { Game, Sprite } from "minimojs";
|
|
230
43
|
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
### Timers
|
|
234
|
-
|
|
235
|
-
```ts
|
|
236
|
-
const id = game.addTimer(delayMs, repeat, callback)
|
|
237
|
-
game.clearTimer(id)
|
|
238
|
-
// rAF-driven (no setTimeout). delayMs in milliseconds.
|
|
239
|
-
// repeat=true fires every delayMs; repeat=false fires once then removes.
|
|
240
|
-
// All timers cleared on game.reset().
|
|
241
|
-
```
|
|
242
|
-
|
|
243
|
-
---
|
|
244
|
-
|
|
245
|
-
### Text Overlay
|
|
246
|
-
|
|
247
|
-
```ts
|
|
248
|
-
game.drawText(text, x, y, fontSize, color?, centered?)
|
|
249
|
-
// Screen space (ignores scroll). Must be called every frame.
|
|
250
|
-
// Always renders on top of all sprites.
|
|
251
|
-
// Font is always monospace (fixed by engine).
|
|
252
|
-
// Default color: "#ffffff"
|
|
253
|
-
// centered=true makes (x, y) the center anchor (both axes).
|
|
254
|
-
```
|
|
255
|
-
|
|
256
|
-
---
|
|
257
|
-
|
|
258
|
-
### Misc
|
|
259
|
-
|
|
260
|
-
```ts
|
|
261
|
-
game.isMobileDevice() // true on likely mobile/touch-first devices (heuristic)
|
|
262
|
-
game.random() // Math.random() wrapper → [0, 1)
|
|
263
|
-
game.reset() // Full state clear + calls onCreate() for scene rebuild
|
|
264
|
-
game.start() // Start rAF loop
|
|
265
|
-
game.stop() // Stop rAF loop
|
|
266
|
-
```
|
|
267
|
-
|
|
268
|
-
---
|
|
44
|
+
const game = new Game(800, 600);
|
|
45
|
+
game.gravityY = 980;
|
|
269
46
|
|
|
270
|
-
|
|
47
|
+
const player = game.add(new Sprite("🐢", 400, 300, 48));
|
|
48
|
+
player.x = 400;
|
|
49
|
+
player.y = 300;
|
|
50
|
+
player.gravityScale = 1;
|
|
271
51
|
|
|
272
|
-
|
|
52
|
+
game.onUpdate = (dt) => {
|
|
53
|
+
if (game.isKeyDown("ArrowLeft")) player.vx = -200;
|
|
54
|
+
else if (game.isKeyDown("ArrowRight")) player.vx = 200;
|
|
55
|
+
else player.vx = 0;
|
|
273
56
|
|
|
274
|
-
|
|
275
|
-
game.
|
|
276
|
-
// Scene init — called on start and after reset()
|
|
277
|
-
const skull = new Sprite("💀");
|
|
278
|
-
skull.x = 400; skull.y = 300; skull.size = 96;
|
|
279
|
-
game.add(skull);
|
|
57
|
+
if (game.isKeyPressed(" ")) player.vy = -600;
|
|
58
|
+
game.drawText("MinimoJS", 10, 10, 16);
|
|
280
59
|
};
|
|
281
60
|
|
|
282
|
-
|
|
283
|
-
game.reset(); // clears everything, calls onCreate()
|
|
284
|
-
}
|
|
61
|
+
game.start();
|
|
285
62
|
```
|
|
286
63
|
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
## Forbidden Features
|
|
64
|
+
Note: `drawText()` uses `"Press Start 2P", monospace`. Load the font in your HTML if you want pixel-font styling.
|
|
290
65
|
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
- Scene system / scene manager
|
|
294
|
-
- Entity Component System (ECS)
|
|
295
|
-
- Physics engine
|
|
296
|
-
- Camera zoom
|
|
297
|
-
- Nested APIs
|
|
298
|
-
- Text input
|
|
299
|
-
- Parallax
|
|
300
|
-
- Multiple cameras
|
|
301
|
-
- Collision resolution
|
|
302
|
-
- Image sprites (PNG/SVG)
|
|
303
|
-
- `setTimeout` / `setInterval`
|
|
66
|
+
## Examples
|
|
304
67
|
|
|
305
|
-
|
|
68
|
+
- `examples/chickens-eggs-basket/`
|
|
69
|
+
- `examples/run-dino-run/`
|
|
70
|
+
- `examples/space-invader/`
|
|
71
|
+
- `examples/super-minimo-bros/`
|
|
72
|
+
- `examples/scale-shift/`
|
|
306
73
|
|
|
307
|
-
|
|
74
|
+
Run locally from the `minimojs` directory:
|
|
308
75
|
|
|
309
76
|
```bash
|
|
310
|
-
|
|
311
|
-
npm run clean # remove dist/
|
|
312
|
-
npm run rebuild # clean + build
|
|
313
|
-
npm run pack:check # preview npm package contents
|
|
77
|
+
npx serve .
|
|
314
78
|
```
|
|
315
79
|
|
|
316
|
-
|
|
80
|
+
## Full API Reference
|
|
317
81
|
|
|
318
|
-
|
|
82
|
+
For complete API details, use source/docs generated from types:
|
|
319
83
|
|
|
320
|
-
|
|
84
|
+
- `dist/minimo.d.ts`
|
|
85
|
+
- `src/minimo.ts` (JSDoc)
|
|
321
86
|
|
|
322
|
-
|
|
323
|
-
- `files` whitelist includes only:
|
|
324
|
-
- `dist/`
|
|
325
|
-
- `README.md`
|
|
326
|
-
- `LICENSE`
|
|
327
|
-
- Example code under `examples/` is for repository usage and is excluded from the npm package.
|
|
87
|
+
## Development
|
|
328
88
|
|
|
329
|
-
|
|
89
|
+
```bash
|
|
90
|
+
npm run build
|
|
91
|
+
npm run clean
|
|
92
|
+
npm run rebuild
|
|
93
|
+
npm run pack:check
|
|
94
|
+
```
|
|
330
95
|
|
|
331
96
|
## License
|
|
332
97
|
|