littlejsengine 1.11.13 → 1.12.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.
Files changed (79) hide show
  1. package/dist/littlejs.d.ts +1418 -109
  2. package/dist/littlejs.esm.js +3495 -581
  3. package/dist/littlejs.esm.min.js +1 -1
  4. package/dist/littlejs.js +3258 -399
  5. package/dist/littlejs.min.js +1 -1
  6. package/dist/littlejs.release.js +3147 -379
  7. package/examples/box2d/game.js +73 -45
  8. package/examples/box2d/gameObjects.js +96 -92
  9. package/examples/box2d/index.html +2 -7
  10. package/examples/box2d/scenes.js +82 -92
  11. package/examples/breakout/game.js +62 -30
  12. package/examples/breakout/gameObjects.js +45 -47
  13. package/examples/breakout/index.html +1 -5
  14. package/examples/breakoutTutorial/game.js +36 -29
  15. package/examples/breakoutTutorial/index.html +1 -3
  16. package/examples/empty/game.js +5 -2
  17. package/examples/empty/index.html +1 -3
  18. package/examples/htmlMenu/game.js +25 -19
  19. package/examples/htmlMenu/index.html +5 -7
  20. package/examples/index.html +2 -3
  21. package/examples/module/game.js +32 -34
  22. package/examples/module/index.html +1 -1
  23. package/examples/particles/index.html +27 -22
  24. package/examples/platformer/game.js +71 -48
  25. package/examples/platformer/gameCharacter.js +42 -34
  26. package/examples/platformer/gameEffects.js +82 -75
  27. package/examples/platformer/gameLevel.js +67 -38
  28. package/examples/platformer/{gameLevelData.js → gameLevelData.json} +1 -11
  29. package/examples/platformer/gameObjects.js +70 -64
  30. package/examples/platformer/gamePlayer.js +12 -7
  31. package/examples/platformer/index.html +1 -9
  32. package/examples/puzzle/game.js +58 -42
  33. package/examples/puzzle/index.html +1 -3
  34. package/examples/shorts/base.html +2 -2
  35. package/examples/shorts/particles.js +1 -1
  36. package/examples/shorts/platformer.js +1 -1
  37. package/examples/shorts/tileLayer.js +5 -6
  38. package/examples/shorts/tiles.png +0 -0
  39. package/examples/starter/build.js +4 -4
  40. package/examples/starter/game.js +9 -12
  41. package/examples/starter/index.html +13 -13
  42. package/examples/stress/index.html +44 -43
  43. package/examples/typescript/build.js +17 -18
  44. package/examples/typescript/game.js +32 -34
  45. package/examples/typescript/game.ts +32 -34
  46. package/examples/typescript/index.html +1 -1
  47. package/examples/uiSystem/game.js +33 -36
  48. package/examples/uiSystem/index.html +1 -5
  49. package/package.json +3 -3
  50. package/plugins/box2d.js +1556 -640
  51. package/plugins/{Box2D_v2.3.1_min.wasm.js → box2d.wasm.js} +1 -1
  52. package/plugins/newgrounds.js +7 -8
  53. package/plugins/pluginExport.js +50 -0
  54. package/plugins/postProcess.js +94 -93
  55. package/plugins/uiSystem.js +145 -161
  56. package/plugins/zzfxm.js +163 -0
  57. package/reference.md +29 -27
  58. package/src/engine.js +15 -20
  59. package/src/engineAudio.js +74 -204
  60. package/src/engineBuild.js +29 -4
  61. package/src/engineDebug.js +105 -9
  62. package/src/engineDraw.js +27 -14
  63. package/src/engineExport.js +12 -8
  64. package/src/engineInput.js +3 -1
  65. package/src/engineObject.js +18 -14
  66. package/src/engineParticles.js +6 -1
  67. package/src/engineRelease.js +6 -1
  68. package/src/engineSettings.js +8 -8
  69. package/src/engineTileLayer.js +179 -96
  70. package/src/engineUtilities.js +5 -11
  71. package/src/engineWebGL.js +19 -7
  72. package/examples/starter/build/index.html +0 -2
  73. package/examples/starter/build/index.js +0 -1
  74. package/examples/starter/build/tiles.png +0 -0
  75. package/examples/starter/game.zip +0 -0
  76. package/examples/typescript/build/dist/littlejs.esm.js +0 -4834
  77. package/examples/typescript/build/examples/typescript/build.js +0 -24
  78. package/examples/typescript/build/examples/typescript/game.js +0 -102
  79. /package/plugins/{Box2D_v2.3.1_min.wasm.wasm → box2d.wasm.wasm} +0 -0
@@ -8,7 +8,13 @@
8
8
 
9
9
  'use strict';
10
10
 
11
- class GameObject extends EngineObject
11
+ // import LittleJS module
12
+ import * as LJS from '../../dist/littlejs.esm.js';
13
+ import * as GameEffects from './gameEffects.js';
14
+ import * as Game from './game.js';
15
+ const {vec2, hsl, rgb, Timer} = LJS;
16
+
17
+ export class GameObject extends LJS.EngineObject
12
18
  {
13
19
  constructor(pos, size, tileInfo, angle)
14
20
  {
@@ -25,7 +31,7 @@ class GameObject extends EngineObject
25
31
  // flash white when damaged
26
32
  let brightness = 0;
27
33
  if (!this.isDead() && this.damageTimer.isSet())
28
- brightness = .5*percent(this.damageTimer, .15, 0);
34
+ brightness = .5*LJS.percent(this.damageTimer, .15, 0);
29
35
  this.additiveColor = hsl(0,0,brightness,0);
30
36
 
31
37
  // kill if below level
@@ -35,7 +41,7 @@ class GameObject extends EngineObject
35
41
 
36
42
  damage(damage, damagingObject)
37
43
  {
38
- ASSERT(damage >= 0);
44
+ LJS.ASSERT(damage >= 0);
39
45
  if (this.isDead())
40
46
  return 0;
41
47
 
@@ -45,7 +51,7 @@ class GameObject extends EngineObject
45
51
  child.damageTimer && child.damageTimer.set();
46
52
 
47
53
  // apply damage and kill if necessary
48
- const newHealth = max(this.health - damage, 0);
54
+ const newHealth = LJS.max(this.health - damage, 0);
49
55
  if (!newHealth)
50
56
  this.kill(damagingObject);
51
57
 
@@ -59,13 +65,13 @@ class GameObject extends EngineObject
59
65
 
60
66
  ///////////////////////////////////////////////////////////////////////////////
61
67
 
62
- class Crate extends GameObject
68
+ export class Crate extends GameObject
63
69
  {
64
70
  constructor(pos)
65
71
  {
66
- super(pos, vec2(.999), spriteAtlas.crate, (randInt(4))*PI/2);
72
+ super(pos, vec2(.999), Game.spriteAtlas.crate, (LJS.randInt(4))*LJS.PI/2);
67
73
 
68
- this.color = hsl(rand(),1,.8);
74
+ this.color = hsl(LJS.rand(),1,.8);
69
75
  this.health = 5;
70
76
 
71
77
  // make it a solid object for collision
@@ -77,59 +83,59 @@ class Crate extends GameObject
77
83
  if (this.destroyed)
78
84
  return;
79
85
 
80
- sound_destroyObject.play(this.pos);
81
- makeDebris(this.pos, this.color, 30);
86
+ GameEffects.sound_destroyObject.play(this.pos);
87
+ GameEffects.makeDebris(this.pos, this.color, 30);
82
88
  this.destroy();
83
89
  }
84
90
  }
85
91
 
86
92
  ///////////////////////////////////////////////////////////////////////////////
87
93
 
88
- class Coin extends EngineObject
94
+ export class Coin extends LJS.EngineObject
89
95
  {
90
96
  constructor(pos)
91
97
  {
92
- super(pos, vec2(1), spriteAtlas.coin);
98
+ super(pos, vec2(1), Game.spriteAtlas.coin);
93
99
  this.color = hsl(.15,1,.5);
94
100
  }
95
101
 
96
102
  render()
97
103
  {
98
104
  // make it appear to spin
99
- const t = time+this.pos.x/4+this.pos.y/4;
100
- drawTile(this.pos, vec2(.1, .6), 0, this.color); // edge of coin
101
- drawTile(this.pos, vec2(.5+.5*Math.sin(t*2*PI), 1), this.tileInfo, this.color);
105
+ const t = LJS.time+this.pos.x/4+this.pos.y/4;
106
+ LJS.drawTile(this.pos, vec2(.1, .6), 0, this.color); // edge of coin
107
+ LJS.drawTile(this.pos, vec2(.5+.5*Math.sin(t*2*LJS.PI), 1), this.tileInfo, this.color);
102
108
  }
103
109
 
104
110
  update()
105
111
  {
106
- if (!player)
112
+ if (!Game.player)
107
113
  return;
108
114
 
109
115
  // check if player in range
110
- const d = this.pos.distanceSquared(player.pos);
116
+ const d = this.pos.distanceSquared(Game.player.pos);
111
117
  if (d > .5)
112
118
  return;
113
119
 
114
120
  // award points and destroy
115
- ++score;
116
- sound_score.play(this.pos);
121
+ Game.addToScore();
122
+ GameEffects.sound_score.play(this.pos);
117
123
  this.destroy();
118
124
  }
119
125
  }
120
126
 
121
127
  ///////////////////////////////////////////////////////////////////////////////
122
128
 
123
- class Enemy extends GameObject
129
+ export class Enemy extends GameObject
124
130
  {
125
131
  constructor(pos)
126
132
  {
127
- super(pos, vec2(.9,.9), spriteAtlas.enemy);
133
+ super(pos, vec2(.9,.9), Game.spriteAtlas.enemy);
128
134
 
129
135
  this.drawSize = vec2(1);
130
- this.color = hsl(rand(), 1, .7);
136
+ this.color = hsl(LJS.rand(), 1, .7);
131
137
  this.health = 5;
132
- this.bounceTime = new Timer(rand(1e3));
138
+ this.bounceTime = new Timer(LJS.rand(1e3));
133
139
  this.setCollision(true, false);
134
140
  }
135
141
 
@@ -137,16 +143,16 @@ class Enemy extends GameObject
137
143
  {
138
144
  super.update();
139
145
 
140
- if (!player)
146
+ if (!Game.player)
141
147
  return;
142
148
 
143
149
  // jump around randomly
144
- if (this.groundObject && rand() < .01 && this.pos.distance(player.pos) < 20)
145
- this.velocity = vec2(rand(.1,-.1), rand(.4,.2));
150
+ if (this.groundObject && LJS.rand() < .01 && this.pos.distance(Game.player.pos) < 20)
151
+ this.velocity = vec2(LJS.rand(.1,-.1), LJS.rand(.4,.2));
146
152
 
147
153
  // damage player if touching
148
- if (isOverlapping(this.pos, this.size, player.pos, player.size))
149
- player.damage(1, this);
154
+ if (LJS.isOverlapping(this.pos, this.size, Game.player.pos, Game.player.size))
155
+ Game.player.damage(1, this);
150
156
  }
151
157
 
152
158
  kill()
@@ -154,9 +160,9 @@ class Enemy extends GameObject
154
160
  if (this.destroyed)
155
161
  return;
156
162
 
157
- ++score;
158
- sound_score.play(this.pos);
159
- makeDebris(this.pos, this.color);
163
+ Game.addToScore();
164
+ GameEffects.sound_score.play(this.pos);
165
+ GameEffects.makeDebris(this.pos, this.color);
160
166
  this.destroy();
161
167
  }
162
168
 
@@ -169,17 +175,17 @@ class Enemy extends GameObject
169
175
  // make bottom flush
170
176
  let bodyPos = this.pos;
171
177
  bodyPos = bodyPos.add(vec2(0,(this.drawSize.y-this.size.y)/2));
172
- drawTile(bodyPos, this.drawSize, this.tileInfo, this.color, this.angle, this.mirror, this.additiveColor);
178
+ LJS.drawTile(bodyPos, this.drawSize, this.tileInfo, this.color, this.angle, this.mirror, this.additiveColor);
173
179
  }
174
180
  }
175
181
 
176
182
  ///////////////////////////////////////////////////////////////////////////////
177
183
 
178
- class Grenade extends GameObject
184
+ export class Grenade extends GameObject
179
185
  {
180
186
  constructor(pos)
181
187
  {
182
- super(pos, vec2(.2), spriteAtlas.grenade);
188
+ super(pos, vec2(.2), Game.spriteAtlas.grenade);
183
189
 
184
190
  this.beepTimer = new Timer(1);
185
191
  this.elasticity = .3;
@@ -195,35 +201,35 @@ class Grenade extends GameObject
195
201
 
196
202
  if (this.getAliveTime() > 3)
197
203
  {
198
- explosion(this.pos);
204
+ GameEffects.explosion(this.pos);
199
205
  this.destroy();
200
206
  }
201
207
  else if (this.beepTimer.elapsed())
202
208
  {
203
- sound_grenade.play(this.pos)
209
+ GameEffects.sound_grenade.play(this.pos)
204
210
  this.beepTimer.set(1);
205
211
  }
206
212
  }
207
213
 
208
214
  render()
209
215
  {
210
- drawTile(this.pos, vec2(.5), this.tileInfo, this.color, this.angle);
216
+ LJS.drawTile(this.pos, vec2(.5), this.tileInfo, this.color, this.angle);
211
217
 
212
218
  // draw additive flash exploding
213
- setBlendMode(true);
214
- const flash = Math.cos(this.getAliveTime()*2*PI);
215
- drawTile(this.pos, vec2(2), spriteAtlas.circle, hsl(0,1,.5,.2-.2*flash));
216
- setBlendMode(false);
219
+ LJS.setBlendMode(true);
220
+ const flash = Math.cos(this.getAliveTime()*2*LJS.PI);
221
+ LJS.drawTile(this.pos, vec2(2), Game.spriteAtlas.circle, hsl(0,1,.5,.2-.2*flash));
222
+ LJS.setBlendMode(false);
217
223
  }
218
224
  }
219
225
 
220
226
  ///////////////////////////////////////////////////////////////////////////////
221
227
 
222
- class Weapon extends EngineObject
228
+ export class Weapon extends LJS.EngineObject
223
229
  {
224
230
  constructor(pos, parent)
225
231
  {
226
- super(pos, vec2(.6), spriteAtlas.gun);
232
+ super(pos, vec2(.6), Game.spriteAtlas.gun);
227
233
 
228
234
  // weapon settings
229
235
  this.fireRate = 8;
@@ -238,7 +244,7 @@ class Weapon extends EngineObject
238
244
  parent.addChild(this, vec2(.6,0));
239
245
 
240
246
  // shell effect
241
- this.addChild(this.shellEmitter = new ParticleEmitter(
247
+ this.addChild(this.shellEmitter = new LJS.ParticleEmitter(
242
248
  vec2(), 0, 0, 0, 0, .1, // pos, angle, emitSize, emitTime, emitRate, emitCone
243
249
  0, // tileInfo
244
250
  rgb(1,.8,.5), rgb(.9,.7,.5), // colorStartA, colorStartB
@@ -248,7 +254,7 @@ class Weapon extends EngineObject
248
254
  .1, 1 // randomness, collide, additive, colorLinear, renderOrder
249
255
  ), vec2(.1,0), -.8);
250
256
  this.shellEmitter.elasticity = .5;
251
- this.shellEmitter.particleDestroyCallback = persistentParticleDestroyCallback;
257
+ this.shellEmitter.particleDestroyCallback = GameEffects.persistentParticleDestroyCallback;
252
258
  }
253
259
 
254
260
  update()
@@ -257,21 +263,21 @@ class Weapon extends EngineObject
257
263
 
258
264
  // update recoil
259
265
  if (this.recoilTimer.active())
260
- this.localAngle = lerp(this.recoilTimer.getPercent(), this.localAngle, 0);
266
+ this.localAngle = LJS.lerp(this.recoilTimer.getPercent(), this.localAngle, 0);
261
267
 
262
268
  this.mirror = this.parent.mirror;
263
- this.fireTimeBuffer += timeDelta;
269
+ this.fireTimeBuffer += LJS.timeDelta;
264
270
  if (this.triggerIsDown)
265
271
  {
266
272
  // try to fire
267
273
  for (; this.fireTimeBuffer > 0; this.fireTimeBuffer -= 1/this.fireRate)
268
274
  {
269
275
  // create bullet
270
- sound_shoot.play(this.pos);
271
- this.localAngle = -rand(.2,.25);
276
+ GameEffects.sound_shoot.play(this.pos);
277
+ this.localAngle = -LJS.rand(.2,.25);
272
278
  this.recoilTimer.set(.1);
273
279
  const direction = vec2(this.bulletSpeed*this.getMirrorSign(), 0);
274
- const velocity = direction.rotate(rand(-1,1)*this.bulletSpread);
280
+ const velocity = direction.rotate(LJS.rand(-1,1)*this.bulletSpread);
275
281
  new Bullet(this.pos, this.parent, velocity, this.damage);
276
282
 
277
283
  // spawn shell particle
@@ -279,13 +285,13 @@ class Weapon extends EngineObject
279
285
  }
280
286
  }
281
287
  else
282
- this.fireTimeBuffer = min(this.fireTimeBuffer, 0);
288
+ this.fireTimeBuffer = LJS.min(this.fireTimeBuffer, 0);
283
289
  }
284
290
  }
285
291
 
286
292
  ///////////////////////////////////////////////////////////////////////////////
287
293
 
288
- class Bullet extends EngineObject
294
+ export class Bullet extends LJS.EngineObject
289
295
  {
290
296
  constructor(pos, attacker, velocity, damage)
291
297
  {
@@ -305,7 +311,7 @@ class Bullet extends EngineObject
305
311
  update()
306
312
  {
307
313
  // check if hit someone
308
- engineObjectsCallback(this.pos, this.size, (o)=>
314
+ LJS.engineObjectsCallback(this.pos, this.size, (o)=>
309
315
  {
310
316
  if (o.isGameObject)
311
317
  this.collideWithObject(o)
@@ -317,12 +323,12 @@ class Bullet extends EngineObject
317
323
  this.range -= this.velocity.length();
318
324
  if (this.range < 0)
319
325
  {
320
- new ParticleEmitter(
321
- this.pos, 0, .2, .1, 50, PI, spriteAtlas.circle, // pos, emit info, tileInfo
322
- rgb(1,1,.1), rgb(1,1,1), // colorStartA, colorStartB
323
- rgb(1,1,.1,0), rgb(1,1,1,0),// colorEndA, colorEndB
326
+ new LJS.ParticleEmitter(
327
+ this.pos, 0, .2, .1, 50, 3.14, Game.spriteAtlas.circle, // pos, emit info, tileInfo
328
+ rgb(1,1,.1), rgb(1,1,1), // colorStartA, colorStartB
329
+ rgb(1,1,.1,0), rgb(1,1,1,0), // colorEndA, colorEndB
324
330
  .1, .5, .1, .05, 0, // particleTime, sizeStart, sizeEnd, speed, angleSpeed
325
- 1, 1, .5, PI, .1, // damping, angleDamping, gravityScale, cone, fadeRate,
331
+ 1, 1, .5, 3.14, .1, // damping, angleDamping, gravityScale, cone, fadeRate,
326
332
  .5, 0, 1 // randomness, collide, additive, randomColorLinear
327
333
  );
328
334
 
@@ -347,7 +353,7 @@ class Bullet extends EngineObject
347
353
  if (data <= 0)
348
354
  return false;
349
355
 
350
- destroyTile(pos);
356
+ GameEffects.destroyTile(pos);
351
357
  this.kill();
352
358
  return true;
353
359
  }
@@ -359,17 +365,17 @@ class Bullet extends EngineObject
359
365
  this.destroy();
360
366
 
361
367
  // spark effects
362
- const emitter = new ParticleEmitter(
368
+ const emitter = new LJS.ParticleEmitter(
363
369
  this.pos, 0, 0, .1, 100, .5, // pos, angle, emitSize, emitTime, emitRate, emitCone
364
- 0, // tileInfo
370
+ 0, // tileInfo
365
371
  rgb(1,1,0), rgb(1,0,0), // colorStartA, colorStartB
366
372
  rgb(1,1,0), rgb(1,0,0), // colorEndA, colorEndB
367
- .2, .2, 0, .1, .1, // time, sizeStart, sizeEnd, speed, angleSpeed
368
- 1, 1, .5, PI, .1, // damp, angleDamp, gravityScale, particleCone, fade,
369
- .5, 1, 1 // randomness, collide, additive, colorLinear, renderOrder
373
+ .2, .2, 0, .1, .1, // time, sizeStart, sizeEnd, speed, angleSpeed
374
+ 1, 1, .5, 3.14, .1, // damp, angleDamp, gravityScale, particleCone, fade,
375
+ .5, 1, 1 // randomness, collide, additive, colorLinear, renderOrder
370
376
  );
371
377
  emitter.trailScale = 1;
372
378
  emitter.elasticity = .3;
373
- emitter.angle = this.velocity.angle() + PI;
379
+ emitter.angle = this.velocity.angle() + LJS.PI;
374
380
  }
375
381
  }
@@ -9,22 +9,27 @@
9
9
 
10
10
  'use strict';
11
11
 
12
- class Player extends Character
12
+ // import LittleJS module
13
+ import * as LJS from '../../dist/littlejs.esm.js';
14
+ import * as GameCharacter from './gameCharacter.js';
15
+ import * as Game from './game.js';
16
+
17
+ export class Player extends GameCharacter.Character
13
18
  {
14
19
  update()
15
20
  {
16
21
  // movement control
17
- this.moveInput = isUsingGamepad ? gamepadStick(0) : keyDirection();
18
- this.holdingJump = keyIsDown('ArrowUp') || gamepadIsDown(0);
19
- this.holdingShoot = !isUsingGamepad && mouseIsDown(0) || keyIsDown('KeyZ') || gamepadIsDown(2);
20
- this.pressingThrow = keyIsDown('KeyC') || mouseIsDown(1) || gamepadIsDown(1);
21
- this.pressedDodge = keyIsDown('KeyX') || mouseIsDown(2) || gamepadIsDown(3);
22
+ this.moveInput = LJS.isUsingGamepad ? LJS.gamepadStick(0) : LJS.keyDirection();
23
+ this.holdingJump = LJS.keyIsDown('ArrowUp') || LJS.gamepadIsDown(0);
24
+ this.holdingShoot = !LJS.isUsingGamepad && LJS.mouseIsDown(0) || LJS.keyIsDown('KeyZ') || LJS.gamepadIsDown(2);
25
+ this.pressingThrow = LJS.keyIsDown('KeyC') || LJS.mouseIsDown(1) || LJS.gamepadIsDown(1);
26
+ this.pressedDodge = LJS.keyIsDown('KeyX') || LJS.mouseIsDown(2) || LJS.gamepadIsDown(3);
22
27
  super.update();
23
28
  }
24
29
 
25
30
  kill()
26
31
  {
27
- ++deaths;
32
+ Game.addToDeaths();
28
33
  super.kill();
29
34
  }
30
35
  }
@@ -6,12 +6,4 @@
6
6
  <meta name=mobile-web-app-capable content=yes>
7
7
  <link rel=icon type=image/png href=../favicon.png>
8
8
  </head><body>
9
-
10
- <script src=../../dist/littlejs.js?1117></script>
11
- <script src=gameObjects.js?1117></script>
12
- <script src=gameCharacter.js?1117></script>
13
- <script src=gamePlayer.js?1117></script>
14
- <script src=gameEffects.js?1117></script>
15
- <script src=gameLevel.js?1117></script>
16
- <script src=gameLevelData.js?1117></script>
17
- <script src=game.js?1117></script>
9
+ <script src=game.js type=module></script>
@@ -8,12 +8,14 @@
8
8
 
9
9
  'use strict';
10
10
 
11
- // show the LittleJS splash screen
12
- setShowSplashScreen(true);
11
+ // import LittleJS module
12
+ import * as LJS from '../../dist/littlejs.esm.js';
13
+ const {vec2, rgb, hsl, tile} = LJS;
13
14
 
15
+ ///////////////////////////////////////////////////////////////////////////////
14
16
  // do not use pixelated rendering
15
- setCanvasPixelated(false);
16
- setTilesPixelated(false);
17
+ LJS.setCanvasPixelated(false);
18
+ LJS.setTilesPixelated(false);
17
19
 
18
20
  const fallTime = .2;
19
21
  const cameraOffset = vec2(0,-.5);
@@ -22,9 +24,9 @@ const minMatchCount = 3;
22
24
  const highScoreKey = 'puzzleBestScore';
23
25
 
24
26
  // sound effects
25
- const sound_goodMove = new Sound([.4,.2,250,.04,,.04,,,1,,,,,3]);
26
- const sound_badMove = new Sound([,,700,,,.07,,,,3.7,,,,3,,,.1]);
27
- const sound_fall = new Sound([.2,,1900,,,.01,,1.4,,91,,,,,,,,,,.7]);
27
+ const sound_goodMove = new LJS.Sound([.4,.2,250,.04,,.04,,,1,,,,,3]);
28
+ const sound_badMove = new LJS.Sound([,,700,,,.07,,,,3.7,,,,3,,,.1]);
29
+ const sound_fall = new LJS.Sound([.2,,1900,,,.01,,1.4,,91,,,,,,,,,,.7]);
28
30
 
29
31
  let level, levelSize, levelFall, fallTimer, dragStartPos, comboCount, score, bestScore;
30
32
 
@@ -46,29 +48,40 @@ const getTile = (pos) => level[pos.x + pos.y * levelSize.x];
46
48
  const setTile = (pos, data) => level[pos.x + pos.y * levelSize.x] = data;
47
49
 
48
50
  ///////////////////////////////////////////////////////////////////////////////
49
- function gameInit()
51
+ function gameReset()
50
52
  {
51
- // setup canvas
52
- canvasFixedSize = vec2(1920, 1080); // 1080p
53
- mainCanvas.style.background = backgroundColor;
54
-
55
- // load high score
56
- bestScore = localStorage[highScoreKey] || 0;
53
+ // reset game objects
54
+ LJS.engineObjectsDestroy();
57
55
 
58
56
  // randomize level
59
57
  level = [];
60
- levelSize = vec2(12,6);
61
58
  const pos = vec2();
62
59
  for (pos.x = levelSize.x; pos.x--;)
63
60
  for (pos.y = levelSize.y; pos.y--;)
64
- setTile(pos, randInt(tileTypeCount));
61
+ setTile(pos, LJS.randInt(tileTypeCount));
65
62
 
66
- // setup game
67
- cameraPos = levelSize.scale(.5).add(cameraOffset);
68
- cameraScale = 900/levelSize.y;
69
- gravity = -.004;
70
- fallTimer = new Timer;
71
63
  comboCount = score = 0;
64
+ fallTimer = new LJS.Timer;
65
+ }
66
+
67
+ ///////////////////////////////////////////////////////////////////////////////
68
+ function gameInit()
69
+ {
70
+ // setup canvas
71
+ LJS.setCanvasFixedSize(vec2(1920, 1080)); // 1080p
72
+ LJS.mainCanvas.style.background = backgroundColor;
73
+
74
+ // load high score
75
+ bestScore = localStorage[highScoreKey] || 0;
76
+
77
+ // setup game
78
+ levelSize = vec2(12,6);
79
+ LJS.setCameraPos(levelSize.scale(.5).add(cameraOffset));
80
+ LJS.setCameraScale(900/levelSize.y);
81
+ LJS.setGravity(vec2(0,-.004));
82
+
83
+ // start a new game
84
+ gameReset();
72
85
  }
73
86
 
74
87
  ///////////////////////////////////////////////////////////////////////////////
@@ -81,7 +94,7 @@ function gameUpdate()
81
94
  {
82
95
  // add more blocks in the top
83
96
  for (let x = 0; x < levelSize.x; ++x)
84
- setTile(vec2(x,levelSize.y),randInt(tileTypeCount));
97
+ setTile(vec2(x,levelSize.y), LJS.randInt(tileTypeCount));
85
98
  }
86
99
 
87
100
  // allow blocks to fall
@@ -107,7 +120,7 @@ function gameUpdate()
107
120
 
108
121
  if (keepFalling)
109
122
  {
110
- const p = percent(comboCount, 9, 0);
123
+ const p = LJS.percent(comboCount, 9, 0);
111
124
  fallTimer.set(fallTime*p);
112
125
  sound_fall.play();
113
126
  }
@@ -122,22 +135,22 @@ function gameUpdate()
122
135
  if (!fallTimer.isSet())
123
136
  {
124
137
  // mouse/touch control
125
- const mouseTilePos = mousePos.floor();
126
- if (!mousePos.arrayCheck(levelSize))
138
+ const mouseTilePos = LJS.mousePos.floor();
139
+ if (!LJS.mousePos.arrayCheck(levelSize))
127
140
  {
128
141
  // cancel drag if mouse is not in the level bounds
129
142
  dragStartPos = 0;
130
143
  }
131
- else if (mouseWasPressed(0) && !dragStartPos)
144
+ else if (LJS.mouseWasPressed(0) && !dragStartPos)
132
145
  {
133
146
  // start drag
134
147
  dragStartPos = mouseTilePos.copy();
135
148
  }
136
- else if (mouseIsDown(0) && dragStartPos)
149
+ else if (LJS.mouseIsDown(0) && dragStartPos)
137
150
  {
138
151
  // if dragging to a neighbor tile
139
- const dx = abs(dragStartPos.x - mouseTilePos.x);
140
- const dy = abs(dragStartPos.y - mouseTilePos.y);
152
+ const dx = LJS.abs(dragStartPos.x - mouseTilePos.x);
153
+ const dy = LJS.abs(dragStartPos.y - mouseTilePos.y);
141
154
  if (dx == 1 && dy == 0 || dx == 0 && dy == 1)
142
155
  {
143
156
  const startTile = getTile(dragStartPos);
@@ -175,6 +188,9 @@ function gameUpdate()
175
188
  bestScore = score;
176
189
  localStorage[highScoreKey] = bestScore;
177
190
  }
191
+
192
+ if (LJS.keyWasPressed('KeyR'))
193
+ gameReset();
178
194
  }
179
195
 
180
196
  ///////////////////////////////////////////////////////////////////////////////
@@ -187,7 +203,7 @@ function gameUpdatePost()
187
203
  function gameRender()
188
204
  {
189
205
  // draw a black square for the background
190
- drawRect(cameraPos.subtract(cameraOffset), levelSize, hsl(0,0,0));
206
+ LJS.drawRect(LJS.cameraPos.subtract(cameraOffset), levelSize, hsl(0,0,0));
191
207
 
192
208
  // draw the blocks
193
209
  const pos = vec2();
@@ -201,7 +217,7 @@ function gameRender()
201
217
  // highlight drag start
202
218
  const drawPos = pos.add(vec2(.5));
203
219
  if (dragStartPos && pos.x == dragStartPos.x && pos.y == dragStartPos.y)
204
- drawRect(drawPos, vec2(1.05));
220
+ LJS.drawRect(drawPos, vec2(1.05));
205
221
 
206
222
  // make pieces fall gradually
207
223
  if (fallTimer.active() && levelFall[pos.x + pos.y*levelSize.x])
@@ -209,28 +225,28 @@ function gameRender()
209
225
 
210
226
  // draw background
211
227
  const color = tileColors[data];
212
- drawRect(drawPos, vec2(.95), color);
228
+ LJS.drawRect(drawPos, vec2(.95), color);
213
229
 
214
230
  // use darker color for icon
215
231
  const color2 = color.scale(.8, 1);
216
- drawTile(drawPos, vec2(.5), tile(data, 64), color2);
232
+ LJS.drawTile(drawPos, vec2(.5), tile(data, 64), color2);
217
233
  }
218
234
 
219
235
  // draw a grey square at top to cover up incoming tiles
220
- drawRect(cameraPos.subtract(cameraOffset).add(vec2(0,levelSize.y)), levelSize, backgroundColor);
236
+ LJS.drawRect(LJS.cameraPos.subtract(cameraOffset).add(vec2(0,levelSize.y)), levelSize, backgroundColor);
221
237
  }
222
238
 
223
239
  ///////////////////////////////////////////////////////////////////////////////
224
240
  function gameRenderPost()
225
241
  {
226
242
  // draw text on top of everything
227
- drawTextOverlay('Score: ' + score, cameraPos.add(vec2(-3,-3.1)), .9, hsl(), .1);
228
- drawTextOverlay('Best: ' + bestScore, cameraPos.add(vec2( 3,-3.1)), .9, hsl(), .1);
243
+ LJS.drawTextOverlay('Score: ' + score, LJS.cameraPos.add(vec2(-3,-3.1)), .9, hsl(), .1);
244
+ LJS.drawTextOverlay('Best: ' + bestScore, LJS.cameraPos.add(vec2( 3,-3.1)), .9, hsl(), .1);
229
245
  }
230
246
 
231
247
  ///////////////////////////////////////////////////////////////////////////////
232
248
  // Startup LittleJS Engine
233
- engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
249
+ LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
234
250
 
235
251
  ///////////////////////////////////////////////////////////////////////////////
236
252
  // find and remove all runs of 3 or higher
@@ -292,14 +308,14 @@ function clearMatches()
292
308
  // spawn particles
293
309
  const color1 = tileColors[data];
294
310
  const color2 = color1.lerp(hsl(), .5);
295
- new ParticleEmitter(
296
- pos.add(vec2(.5)), 0, // pos, angle
297
- .5, .1, 200, PI, // emitSize, emitTime, emitRate, emitCone
298
- 0, // tileInfo
311
+ new LJS.ParticleEmitter(
312
+ pos.add(vec2(.5)), 0, // pos, angle
313
+ .5, .1, 200, 3.14, // emitSize, emitTime, emitRate, emitCone
314
+ 0, // tileInfo
299
315
  color1, color2, // colorStartA, colorStartB
300
316
  color1.scale(1,0), color2.scale(1,0),// colorEndA, colorEndB
301
317
  .5, .3, .2, .05, .05, // particleTime, sizeStart, sizeEnd, speed, angleSpeed
302
- .99, 1, 1, PI, .05, // damp, angleDamp, gravityScale, particleCone, fadeRate
318
+ .99, 1, 1, 3.14, .05, // damp, angleDamp, gravityScale, particleCone, fadeRate
303
319
  .5, 0, 1 // randomness, collide, additive, colorLinear, renderOrder
304
320
  );
305
321
  }
@@ -5,6 +5,4 @@
5
5
  <meta name=mobile-web-app-capable content=yes>
6
6
  <link rel=icon type=image/png href=../favicon.png>
7
7
  </head><body>
8
-
9
- <script src=../../dist/littlejs.js?1117></script>
10
- <script src=game.js?1117></script>
8
+ <script src=game.js type=module></script>
@@ -1,5 +1,5 @@
1
1
  <!DOCTYPE html><meta charset=utf-8><body>
2
- <script src=../../dist/littlejs.js?1117></script>
2
+ <script src=../../dist/littlejs.js?1120></script>
3
3
  <script>
4
4
 
5
5
  'use strict';
@@ -23,4 +23,4 @@ function gameUpdatePost() {}
23
23
  function gameRender() {}
24
24
  function gameRenderPost() {}
25
25
 
26
- </script>
26
+ </script>
@@ -1,6 +1,6 @@
1
1
  function gameInit()
2
2
  {
3
- gravity = -.01; // set default gravity
3
+ gravity.y = -.01; // set default gravity
4
4
 
5
5
  // fire
6
6
  new ParticleEmitter(
@@ -32,7 +32,7 @@ class Player extends PhysicsObject
32
32
  function gameInit()
33
33
  {
34
34
  // setup level
35
- gravity = -.05;
35
+ gravity.y = -.05;
36
36
  new Player(vec2(0,4));
37
37
 
38
38
  // create random objects