littlejsengine 1.1.17 → 1.2.0

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 (37) hide show
  1. package/README.md +13 -3
  2. package/build.bat +1 -0
  3. package/engine/engine.all.js +520 -522
  4. package/engine/engine.all.min.js +1 -1
  5. package/engine/engine.all.release.js +444 -278
  6. package/engine/engine.js +68 -33
  7. package/engine/engineAudio.js +21 -7
  8. package/engine/engineBuild.bat +9 -1
  9. package/engine/engineBuildSetup.bat +2 -1
  10. package/engine/engineDebug.js +80 -246
  11. package/engine/engineDraw.js +106 -21
  12. package/engine/engineInput.js +89 -52
  13. package/engine/engineMedals.js +14 -17
  14. package/engine/engineObject.js +14 -23
  15. package/engine/engineParticles.js +3 -3
  16. package/engine/engineRelease.js +3 -1
  17. package/engine/engineSettings.js +39 -29
  18. package/engine/engineTileLayer.js +26 -24
  19. package/engine/engineUtilities.js +14 -12
  20. package/engine/engineWebGL.js +47 -56
  21. package/engine/index.d.ts +1612 -0
  22. package/examples/breakout/game.js +9 -7
  23. package/examples/breakout/gameObjects.js +1 -1
  24. package/examples/breakout/index.html +6 -4
  25. package/examples/platformer/game.js +2 -2
  26. package/examples/platformer/gameEffects.js +8 -11
  27. package/examples/platformer/gameLevel.js +14 -7
  28. package/examples/platformer/gameObjects.js +1 -1
  29. package/examples/platformer/gamePlayer.js +13 -8
  30. package/examples/platformer/index.html +9 -7
  31. package/examples/platformer/tiles.png +0 -0
  32. package/examples/puzzle/game.js +1 -1
  33. package/examples/puzzle/index.html +5 -3
  34. package/examples/stress/index.html +6 -4
  35. package/game.js +5 -4
  36. package/index.html +16 -14
  37. package/package.json +1 -1
package/examples/breakout/game.js CHANGED
@@ -47,21 +47,23 @@ function gameUpdatePost()
47
47
  ///////////////////////////////////////////////////////////////////////////////
48
48
  function gameRender()
49
49
  {
50
- // draw a grey square for the background
51
- drawRect(cameraPos, levelSize, new Color(.2,.2,.2));
50
+ // draw a the background
51
+ drawRect(cameraPos, levelSize.scale(2), new Color(.4,.4,.4));
52
+ drawRect(cameraPos, levelSize, new Color(.1,.1,.1));
52
53
  }
53
54
 
54
55
  ///////////////////////////////////////////////////////////////////////////////
55
56
  function gameRenderPost()
56
57
  {
57
- // draw text on top of everything
58
- drawText('Score: ' + score, cameraPos.add(vec2(0,21)), 2, new Color, .2);
58
+ // use built in image font for text
59
+ const font = new FontImage;
60
+ font.drawText('Score: ' + score, cameraPos.add(vec2(0,22)), .2, 1);
59
61
  if (!blockCount)
60
- drawText('You Win!', cameraPos.add(vec2(0,-5)), 2, new Color, .2);
62
+ font.drawText('You Win!', cameraPos.add(vec2(0,-5)), .25, 1);
61
63
  else if (!ball)
62
- drawText('Click to Play', cameraPos.add(vec2(0,-5)), 2, new Color, .2);
64
+ font.drawText('Click to Play', cameraPos.add(vec2(0,-5)), .25, 1);
63
65
  }
64
66
 
65
67
  ///////////////////////////////////////////////////////////////////////////////
66
68
  // Startup LittleJS Engine
67
- engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, 'tiles.png');
69
+ engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, 'tiles.png?1');
package/examples/breakout/gameObjects.js CHANGED
@@ -28,7 +28,7 @@ class Paddle extends EngineObject
28
28
  // move to mouse
29
29
  this.pos.x = mousePos.x;
30
30
  }
31
- this.pos.x = clamp(this.pos.x, levelSize.x - this.size.x/2, this.size.x/2);
31
+ this.pos.x = clamp(this.pos.x, this.size.x/2, levelSize.x - this.size.x/2);
32
32
  }
33
33
  }
34
34
 
package/examples/breakout/index.html CHANGED
@@ -1,8 +1,10 @@
1
- <html><head><title>LittleJS Breakout Example</title>
1
+ <html><head><meta charset=utf-8>
2
2
  <meta name=viewport content=width=device-width,height=device-height,initial-scale=1,maximum-scale=1>
3
+ <meta name=apple-mobile-web-app-capable content=yes>
4
+ <meta name=mobile-web-app-capable content=yes>
3
5
  <link rel=icon type=image/png href=../../favicon.png>
4
6
  </head><body>
5
7
 
6
- <script src=../../engine/engine.all.min.js?82></script>
7
- <script src=game.js?82></script>
8
- <script src=gameObjects.js?82></script>
8
+ <script src=../../engine/engine.all.js?97></script>
9
+ <script src=game.js?97></script>
10
+ <script src=gameObjects.js?97></script>
package/examples/platformer/game.js CHANGED
@@ -11,7 +11,7 @@ let score, deaths;
11
11
  function gameInit()
12
12
  {
13
13
  // enable touch gamepad on touch devices
14
- touchGamepadSize = 80;
14
+ touchGamepadEnable = 1;
15
15
 
16
16
  // setup game
17
17
  score = deaths = 0;
@@ -33,7 +33,7 @@ function gameUpdate()
33
33
  }
34
34
 
35
35
  // mouse wheel = zoom
36
- cameraScale = clamp(cameraScale*(1-mouseWheel/10), 1e3, 1);
36
+ cameraScale = clamp(cameraScale*(1-mouseWheel/10), 1, 1e3);
37
37
 
38
38
  // T = drop test crate
39
39
  if (keyWasPressed(84))
package/examples/platformer/gameEffects.js CHANGED
@@ -89,7 +89,7 @@ function explosion(pos, radius=3)
89
89
  }
90
90
 
91
91
  // push
92
- const p = percent(d, radius, 2*radius);
92
+ const p = percent(d, 2*radius, radius);
93
93
  const force = o.pos.subtract(pos).normalize(p*radius*.2);
94
94
  o.applyForce(force);
95
95
  if (o.isDead && o.isDead())
@@ -157,6 +157,9 @@ function destroyTile(pos, makeSound = 1, cleanNeighbors = 1)
157
157
 
158
158
  function decorateBackgroundTile(pos)
159
159
  {
160
+ if (!tileBackgroundLayer)
161
+ return;
162
+
160
163
  const tileData = getTileBackgroundData(pos);
161
164
  if (tileData <= 0)
162
165
  return;
@@ -254,17 +257,11 @@ function drawStars()
254
257
  (randSeeded(w)+time*speed)%w-extraSpace,
255
258
  (randSeeded(h)+time*speed*randSeeded())%h-extraSpace);
256
259
 
257
- if (glOverlay)
258
- {
259
- // drawing stars with gl is too slow in low graphics mode, just draw rects
260
- mainContext.fillStyle = color.rgba();
261
- if (size < 9)
262
- mainContext.fillRect(screenPos.x, screenPos.y, size, size);
263
- else
264
- mainContext.beginPath(mainContext.fill(mainContext.arc(screenPos.x, screenPos.y, size, 0, 9)));
265
- }
260
+ mainContext.fillStyle = color.rgba();
261
+ if (size < 9)
262
+ mainContext.fillRect(screenPos.x, screenPos.y, size, size);
266
263
  else
267
- drawTileScreenSpace(screenPos, vec2(size), 0, vec2(16), color);
264
+ mainContext.beginPath(mainContext.fill(mainContext.arc(screenPos.x, screenPos.y, size, 0, 9)));
268
265
  }
269
266
  }
270
267
 
package/examples/platformer/gameLevel.js CHANGED
@@ -28,7 +28,7 @@ function buildTerrain(size)
28
28
  {
29
29
  tileBackground = [];
30
30
  initTileCollision(size);
31
- let startGroundLevel = 80;
31
+ let startGroundLevel = 40;
32
32
  let groundLevel = startGroundLevel;
33
33
  let groundSlope = rand(-1,1);
34
34
  let backgroundDelta = 0, backgroundDeltaSlope = 0;
@@ -46,7 +46,7 @@ function buildTerrain(size)
46
46
  {
47
47
  // big jump
48
48
  const jumpDelta = rand(19,-19);
49
- startGroundLevel = clamp(startGroundLevel + jumpDelta, 80, 20);
49
+ startGroundLevel = clamp(startGroundLevel + jumpDelta, 20, 80);
50
50
  groundLevel += jumpDelta;
51
51
  groundSlope = rand(-1,1);
52
52
  }
@@ -58,9 +58,9 @@ function buildTerrain(size)
58
58
  backgroundDelta = 0;
59
59
  if (rand() < .1)
60
60
  backgroundDeltaSlope = rand(-1,1);
61
- backgroundDelta = clamp(backgroundDelta, 3, -1)
61
+ backgroundDelta = clamp(backgroundDelta, -1, 3)
62
62
 
63
- groundLevel = clamp(groundLevel, 99, 30);
63
+ groundLevel = clamp(groundLevel, 20, levelSize.y-20);
64
64
  for (let y=0; y < size.y; y++)
65
65
  {
66
66
  const pos = vec2(x,y);
@@ -90,7 +90,7 @@ function buildTerrain(size)
90
90
  }
91
91
 
92
92
  // add ladders
93
- for (let ladderCount=50; ladderCount--;)
93
+ for (let ladderCount = 40; ladderCount--;)
94
94
  {
95
95
  // pick random pos
96
96
  const pos = vec2(randInt(levelSize.x), randInt(levelSize.y))
@@ -122,7 +122,7 @@ function buildTerrain(size)
122
122
  new Crate(vec2((randInt(levelSize.x))+.5, randInt(levelSize.y)));
123
123
 
124
124
  // spawn enemies
125
- for (let enemyCount=20; enemyCount--;)
125
+ for (let enemyCount=10; enemyCount--;)
126
126
  new Enemy(vec2(rand(levelSize.x), rand(levelSize.y)));
127
127
  }
128
128
 
@@ -181,11 +181,18 @@ function makeTileLayers()
181
181
  }
182
182
  tileLayer.redraw();
183
183
  tileBackgroundLayer.redraw();
184
+
185
+ if (!glEnable)
186
+ {
187
+ // get rid of background if webgl is not enabled
188
+ tileBackgroundLayer.destroy();
189
+ tileBackgroundLayer = 0;
190
+ }
184
191
  }
185
192
 
186
193
  function buildLevel()
187
194
  {
188
- levelSize = vec2(300,200);
195
+ levelSize = vec2(256);
189
196
  levelColor = randColor(new Color(.2,.2,.2), new Color(.8,.8,.8));
190
197
  levelGroundColor = levelColor.mutate().add(new Color(.4,.4,.4)).clamp();
191
198
 
package/examples/platformer/gameObjects.js CHANGED
@@ -25,7 +25,7 @@ class GameObject extends EngineObject
25
25
  // flash white when damaged
26
26
  if (!this.isDead() && this.damageTimer.isSet())
27
27
  {
28
- const a = .5*percent(this.damageTimer.get(), 0, .15);
28
+ const a = .5*percent(this.damageTimer.get(), .15, 0);
29
29
  this.additiveColor = new Color(a,a,a,0);
30
30
  }
31
31
  else
package/examples/platformer/gamePlayer.js CHANGED
@@ -24,7 +24,7 @@ class Character extends GameObject
24
24
  this.deadTimer = new Timer;
25
25
  this.grendeThrowTimer = new Timer;
26
26
  this.drawSize = vec2(1);
27
- this.color = (new Color).setHSLA(rand(),1,.5);
27
+ this.color = (new Color).setHSLA(rand(),1,.7);
28
28
  this.renderOrder = 10;
29
29
  this.walkCyclePercent = 0;
30
30
  this.health = 1;
@@ -126,7 +126,12 @@ class Character extends GameObject
126
126
  {
127
127
  // update jumping and ground check
128
128
  if (this.groundObject || this.climbingWall)
129
+ {
130
+ if (!this.groundTimer.isSet())
131
+ sound_walk.play(this.pos); // land sound
132
+
129
133
  this.groundTimer.set(.1);
134
+ }
130
135
 
131
136
  if (this.groundTimer.active() && !this.dodgeTimer.active())
132
137
  {
@@ -169,7 +174,7 @@ class Character extends GameObject
169
174
 
170
175
  // apply movement acceleration and clamp
171
176
  const maxCharacterSpeed = .2;
172
- this.velocity.x = clamp(this.velocity.x + moveInput.x * .042, maxCharacterSpeed, -maxCharacterSpeed);
177
+ this.velocity.x = clamp(this.velocity.x + moveInput.x * .042, -maxCharacterSpeed, maxCharacterSpeed);
173
178
 
174
179
  // track last pos for ladder collision code
175
180
  this.lastPos = this.pos.copy();
@@ -182,23 +187,23 @@ class Character extends GameObject
182
187
  if (this.climbingLadder || this.groundTimer.active() && !this.dodgeTimer.active())
183
188
  {
184
189
  this.walkCyclePercent += speed * .5;
185
- this.walkCyclePercent = speed > .01 ? mod(this.walkCyclePercent, 1) : 0;
190
+ this.walkCyclePercent = speed > .01 ? mod(this.walkCyclePercent) : 0;
186
191
  }
187
192
  else
188
193
  this.walkCyclePercent = 0;
189
194
 
190
195
  // update walk sound
191
196
  this.walkSoundTime += speed;
192
- if (speed > .01 && ((this.climbingLadder || this.groundTimer.active()) && !this.dodgeTimer.active()))
197
+ if (speed > .001 && ((this.climbingLadder || this.groundTimer.active()) && !this.dodgeTimer.active()))
193
198
  {
194
199
  if (this.walkSoundTime > 1)
195
200
  {
196
- this.walkSoundTime = 0;
201
+ this.walkSoundTime = this.walkSoundTime%1;
197
202
  sound_walk.play(this.pos);
198
203
  }
199
204
  }
200
205
  else
201
- this.walkSoundTime = .5;
206
+ this.walkSoundTime = 0;
202
207
 
203
208
  // update mirror
204
209
  if (moveInput.x && !this.dodgeTimer.active())
@@ -292,8 +297,8 @@ class Player extends Character
292
297
  // player controls
293
298
  this.holdingJump = keyIsDown(38) || gamepadIsDown(0);
294
299
  this.holdingShoot = mouseIsDown(0) || keyIsDown(90) || gamepadIsDown(2);
295
- this.pressedDodge = mouseIsDown(1) || keyIsDown(88) || gamepadIsDown(3);
296
- this.pressingThrow = mouseIsDown(2) || keyIsDown(67) || gamepadIsDown(1);
300
+ this.pressingThrow = mouseIsDown(1) || keyIsDown(67) || gamepadIsDown(1);
301
+ this.pressedDodge = mouseIsDown(2) || keyIsDown(88) || gamepadIsDown(3);
297
302
 
298
303
  // movement control
299
304
  this.moveInput = isUsingGamepad ? gamepadStick(0) :
package/examples/platformer/index.html CHANGED
@@ -1,11 +1,13 @@
1
- <html><head><title>LittleJS Platformer Example</title>
1
+ <html><head><meta charset=utf-8>
2
2
  <meta name=viewport content=width=device-width,height=device-height,initial-scale=1,maximum-scale=1>
3
+ <meta name=apple-mobile-web-app-capable content=yes>
4
+ <meta name=mobile-web-app-capable content=yes>
3
5
  <link rel=icon type=image/png href=../../favicon.png>
4
6
  </head><body>
5
7
 
6
- <script src=../../engine/engine.all.js?82></script>
7
- <script src=gameObjects.js?82></script>
8
- <script src=gamePlayer.js?82></script>
9
- <script src=gameEffects.js?82></script>
10
- <script src=gameLevel.js?82></script>
11
- <script src=game.js?82></script>
8
+ <script src=../../engine/engine.all.js?97></script>
9
+ <script src=gameObjects.js?97></script>
10
+ <script src=gamePlayer.js?97></script>
11
+ <script src=gameEffects.js?97></script>
12
+ <script src=gameLevel.js?97></script>
13
+ <script src=game.js?97></script>
package/examples/platformer/tiles.png CHANGED
Binary file
package/examples/puzzle/game.js CHANGED
@@ -100,7 +100,7 @@ function gameUpdate()
100
100
 
101
101
  if (keepFalling)
102
102
  {
103
- const p = percent(comboCount, 0, 9);
103
+ const p = percent(comboCount, 9, 0);
104
104
  fallTimer.set(fallTime*p);
105
105
  sound_fall.play();
106
106
  }
package/examples/puzzle/index.html CHANGED
@@ -1,7 +1,9 @@
1
- <html><head><title>LittleJS Puzzle Example</title>
1
+ <html><head><meta charset=utf-8>
2
2
  <meta name=viewport content=width=device-width,height=device-height,initial-scale=1,maximum-scale=1>
3
+ <meta name=apple-mobile-web-app-capable content=yes>
4
+ <meta name=mobile-web-app-capable content=yes>
3
5
  <link rel=icon type=image/png href=../../favicon.png>
4
6
  </head><body>
5
7
 
6
- <script src=../../engine/engine.all.min.js?82></script>
7
- <script src=game.js?82></script>
8
+ <script src=../../engine/engine.all.js?97></script>
9
+ <script src=game.js?97></script>
package/examples/stress/index.html CHANGED
@@ -1,9 +1,11 @@
1
- <html><head><title>LittleJS Stress Test</title>
1
+ <html><head><meta charset=utf-8>
2
2
  <meta name=viewport content=width=device-width,height=device-height,initial-scale=1,maximum-scale=1>
3
+ <meta name=apple-mobile-web-app-capable content=yes>
4
+ <meta name=mobile-web-app-capable content=yes>
3
5
  <link rel=icon type=image/png href=../../favicon.png>
4
6
  </head><body>
5
7
 
6
- <script src=../../engine/engine.all.min.js?82></script>
8
+ <script src=../../engine/engine.all.min.js?97></script>
7
9
  <script>
8
10
 
9
11
  /*
@@ -81,7 +83,7 @@ function gameUpdate()
81
83
  });
82
84
 
83
85
  // mouse wheel = zoom
84
- cameraScale = clamp(cameraScale*(1-mouseWheel/10), 1e3, 1);
86
+ cameraScale = clamp(cameraScale*(1-mouseWheel/10), 1, 1e3);
85
87
  }
86
88
 
87
89
  ///////////////////////////////////////////////////////////////////////////////
@@ -94,7 +96,7 @@ function gameRender()
94
96
  {
95
97
  // track fps and update stats
96
98
  const frameTimeMS = Date.now();
97
- showFPS = lerp(.05, 1e3/(frameTimeMS - timeMS||1), showFPS);
99
+ showFPS = lerp(.05, showFPS, 1e3/(frameTimeMS - timeMS||1));
98
100
  timeMS = frameTimeMS;
99
101
 
100
102
  const spriteCount = sprites.length
package/game.js CHANGED
@@ -4,6 +4,10 @@
4
4
 
5
5
  'use strict';
6
6
 
7
+ // popup errors if there are any (help diagnose issues on mobile devices)
8
+ if (debug)
9
+ onerror = (...parameters)=> alert(parameters);
10
+
7
11
  // game variables
8
12
  let particleEmiter, clickCount = 0;
9
13
 
@@ -11,8 +15,7 @@ let particleEmiter, clickCount = 0;
11
15
  const sound_click = new Sound([.5,.5]);
12
16
 
13
17
  // medals
14
- const medal_example = new Medal(0, 'Example Medal', 'More info about the medal goes here.');
15
- const medal_tenClicks = new Medal(1, 'Ten Clicks!', 'You have clicked 10 times.', '🖱️');
18
+ const medal_example = new Medal(0, 'Example Medal', 'Medal description goes here.');
16
19
  medalsInit('Hello World');
17
20
 
18
21
  ///////////////////////////////////////////////////////////////////////////////
@@ -82,8 +85,6 @@ function gameUpdate()
82
85
 
83
86
  // unlock medals
84
87
  medal_example.unlock();
85
- if (++clickCount == 10)
86
- medal_tenClicks.unlock();
87
88
  }
88
89
 
89
90
  // move particles to mouse location if on screen
package/index.html CHANGED
@@ -1,24 +1,26 @@
1
- <html><head><title>LittleJS Hello World</title>
1
+ <html><head><meta charset=utf-8>
2
2
  <meta name=viewport content=width=device-width,height=device-height,initial-scale=1,maximum-scale=1>
3
+ <meta name=apple-mobile-web-app-capable content=yes>
4
+ <meta name=mobile-web-app-capable content=yes>
3
5
  <link rel=icon type=image/png href=favicon.png>
4
6
  </head><body>
5
7
 
6
8
  <!-- LittleJS engine scripts -->
7
- <script src=engine/engineDebug.js?82></script>
8
- <script src=engine/engineUtilities.js?82></script>
9
- <script src=engine/engineSettings.js?82></script>
10
- <script src=engine/engineObject.js?82></script>
11
- <script src=engine/engineDraw.js?82></script>
12
- <script src=engine/engineInput.js?82></script>
13
- <script src=engine/engineAudio.js?82></script>
14
- <script src=engine/engineTileLayer.js?82></script>
15
- <script src=engine/engineParticles.js?82></script>
16
- <script src=engine/engineMedals.js?82></script>
17
- <script src=engine/engineWebGL.js?82></script>
18
- <script src=engine/engine.js?82></script>
9
+ <script src=engine/engineDebug.js?97></script>
10
+ <script src=engine/engineUtilities.js?97></script>
11
+ <script src=engine/engineSettings.js?97></script>
12
+ <script src=engine/engineObject.js?97></script>
13
+ <script src=engine/engineDraw.js?97></script>
14
+ <script src=engine/engineInput.js?97></script>
15
+ <script src=engine/engineAudio.js?97></script>
16
+ <script src=engine/engineTileLayer.js?97></script>
17
+ <script src=engine/engineParticles.js?97></script>
18
+ <script src=engine/engineMedals.js?97></script>
19
+ <script src=engine/engineWebGL.js?97></script>
20
+ <script src=engine/engine.js?97></script>
19
21
 
20
22
  <!-- You can also include all engine scripts like this... -->
21
23
  <!-- <script src=engine/engine.all.js></script> -->
22
24
 
23
25
  <!-- Add your game scripts here -->
24
- <script src=game.js?82></script>
26
+ <script src=game.js?97></script>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "littlejsengine",
3
- "version": "1.1.17",
3
+ "version": "1.2.0",
4
4
  "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
5
5
  "main": "engine/engine.all.js",
6
6
  "repository": {