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
package/examples/box2d/index.html CHANGED
@@ -5,10 +5,5 @@
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></script>
10
- <script src=../../plugins/Box2D_v2.3.1_min.wasm.js?1117></script>
11
- <script src=../../plugins/box2d.js?1117></script>
12
- <script src=scenes.js?1117></script>
13
- <script src=gameObjects.js?1117></script>
14
- <script src=game.js?1117></script>
8
+ <script src=../../plugins/box2d.wasm.js></script>
9
+ <script src=game.js type=module></script>
package/examples/box2d/scenes.js CHANGED
@@ -17,96 +17,85 @@
17
17
 
18
18
  'use strict';
19
19
 
20
- function loadScene(_scene)
21
- {
22
- scene = _scene;
23
-
24
- // setup
25
- cameraPos = vec2(20,10);
26
- setGravity(-20);
27
-
28
- // destroy old scene
29
- engineObjectsDestroy();
30
- mouseJoint = 0;
31
- car = 0;
32
-
33
- // create walls
34
- groundObject = spawnBox(vec2(0,-4), vec2(1e3,8), hsl(0,0,.2), box2dBodyTypeStatic);
35
- spawnBox(vec2(-4, 0), vec2(8,1e3), BLACK, box2dBodyTypeStatic);
36
- spawnBox(vec2(44, 0), vec2(8,1e3), BLACK, box2dBodyTypeStatic);
37
- spawnBox(vec2(0,100), vec2(1e3,8), BLACK, box2dBodyTypeStatic);
20
+ // import game module
21
+ import * as LJS from '../../dist/littlejs.esm.js';
22
+ import * as GameObjects from './gameObjects.js';
23
+ import * as Game from './game.js';
24
+ const {vec2} = LJS;
38
25
 
26
+ export function loadScene(scene)
27
+ {
39
28
  if (scene == 0)
40
29
  {
41
- sceneName = 'Shapes';
42
- spawnRandomEdges();
43
- spawnBox(vec2(11,8), 4, randColor(), box2dBodyTypeStatic, false);
44
- spawnCircle(vec2(20,8), 4, randColor(), box2dBodyTypeStatic, false);
45
- spawnRandomPoly(vec2(29,8), 4, randColor(), box2dBodyTypeStatic, false);
30
+ Game.setSceneName('Shapes');
31
+ GameObjects.spawnRandomEdges();
32
+ GameObjects.spawnBox(vec2(11,8), 4, LJS.randColor(), LJS.box2d.bodyTypeStatic, false);
33
+ GameObjects.spawnCircle(vec2(20,8), 4, LJS.randColor(), LJS.box2d.bodyTypeStatic, false);
34
+ GameObjects.spawnRandomPoly(vec2(29,8), 4, LJS.randColor(), LJS.box2d.bodyTypeStatic, false);
46
35
  for (let i=500;i--;)
47
- spawnRandomObject(vec2(rand(1,39), rand(10,50)));
36
+ GameObjects.spawnRandomObject(vec2(LJS.rand(1,39), LJS.rand(10,50)));
48
37
  }
49
38
  if (scene == 1)
50
39
  {
51
- sceneName = 'Pyramid';
52
- spawnPyramid(vec2(20,0), 15);
53
- spawnBox(vec2(10,2), 4, randColor());
54
- spawnCircle(vec2(30,2), 4, randColor());
40
+ Game.setSceneName('Pyramid');
41
+ GameObjects.spawnPyramid(vec2(20,0), 15);
42
+ GameObjects.spawnBox(vec2(10,2), 4, LJS.randColor());
43
+ GameObjects.spawnCircle(vec2(30,2), 4, LJS.randColor());
55
44
  }
56
45
  if (scene == 2)
57
46
  {
58
- sceneName = 'Dominoes';
59
- spawnDominoes(vec2(11,11), 11);
60
- spawnDominoes(vec2(2,0), 13, vec2(1,3));
61
- spawnCircle(vec2(10,20), 2, randColor());
62
- spawnCircle(vec2(31.7,12), 2, randColor());
63
- spawnBox(vec2(16,11), vec2(32,1), randColor(), box2dBodyTypeStatic, false);
64
- spawnBox(vec2(24,6.5), vec2(32,1), randColor(), box2dBodyTypeStatic, false, -.15);
47
+ Game.setSceneName('Dominoes');
48
+ GameObjects.spawnDominoes(vec2(11,11), 11);
49
+ GameObjects.spawnDominoes(vec2(2,0), 13, vec2(1,3));
50
+ GameObjects.spawnCircle(vec2(10,20), 2, LJS.randColor());
51
+ GameObjects.spawnCircle(vec2(31.7,12), 2, LJS.randColor());
52
+ GameObjects.spawnBox(vec2(16,11), vec2(32,1), LJS.randColor(), LJS.box2d.bodyTypeStatic, false);
53
+ GameObjects.spawnBox(vec2(24,6.5), vec2(32,1), LJS.randColor(), LJS.box2d.bodyTypeStatic, false, -.15);
65
54
  }
66
55
  if (scene == 3)
67
56
  {
68
- sceneName = 'Car';
69
- car = new CarObject(vec2(10,2));
70
- spawnBox(vec2(20,0), vec2(10,2), randColor(), box2dBodyTypeStatic, false, -.2);
71
- spawnPyramid(vec2(32,0), 6);
57
+ Game.setSceneName('Car');
58
+ Game.setCarObject(new GameObjects.CarObject(vec2(10,2)));
59
+ GameObjects.spawnBox(vec2(20,0), vec2(10,2), LJS.randColor(), LJS.box2d.bodyTypeStatic, false, -.2);
60
+ GameObjects.spawnPyramid(vec2(32,0), 6);
72
61
  }
73
62
  if (scene == 4)
74
63
  {
75
- sceneName = 'Rope';
64
+ Game.setSceneName('Rope');
76
65
  const startPos = vec2(20, 14);
77
- const angle = PI/2;
78
- const color = randColor();
66
+ const angle = LJS.PI/2;
67
+ const color = LJS.randColor();
79
68
  const count = 10;
80
- const endObject = spawnRope(startPos, count, angle, color);
69
+ const endObject = GameObjects.spawnRope(startPos, count, angle, color);
81
70
 
82
71
  // connect box to end
83
72
  const endPos = endObject.localToWorld(vec2(0,-endObject.size.y/2));
84
- const o = spawnBox(endPos, 3, randColor());
73
+ const o = GameObjects.spawnBox(endPos, 3, LJS.randColor());
85
74
  o.setAngularDamping(.5);
86
75
  o.setFilterData(2, 2);
87
- box2dCreateRevoluteJoint(endObject, o);
88
- spawnPyramid(vec2(20,0), 7);
76
+ new LJS.Box2dRevoluteJoint(endObject, o);
77
+ GameObjects.spawnPyramid(vec2(20,0), 7);
89
78
  }
90
79
  if (scene == 5)
91
80
  {
92
- sceneName = 'Raycasts';
93
- spawnRandomEdges();
81
+ Game.setSceneName('Raycasts');
82
+ GameObjects.spawnRandomEdges();
94
83
  for (let i=100;i--;)
95
- spawnRandomObject(vec2(rand(1,39), rand(20)), 2, box2dBodyTypeStatic, rand(PI*2));
84
+ GameObjects.spawnRandomObject(vec2(LJS.rand(1,39), LJS.rand(20)), 2, LJS.box2d.bodyTypeStatic, LJS.rand(LJS.PI*2));
96
85
  }
97
86
  if (scene == 6)
98
87
  {
99
- sceneName = 'Joints';
88
+ Game.setSceneName('Joints');
100
89
  {
101
90
  // prismatic joint
102
- const o1 = spawnBox(vec2(20,8), vec2(3,2), randColor());
103
- box2dCreatePrismaticJoint(groundObject, o1, o1.pos, vec2(1,0), true);
104
- const o2 = spawnBox(vec2(20,15), vec2(2,3), randColor());
105
- box2dCreatePrismaticJoint(groundObject, o2, o2.pos, vec2(0,1), true);
91
+ const o1 = GameObjects.spawnBox(vec2(20,8), vec2(3,2), LJS.randColor());
92
+ new LJS.Box2dPrismaticJoint(Game.groundObject, o1, o1.pos, vec2(1,0), true);
93
+ const o2 = GameObjects.spawnBox(vec2(20,15), vec2(2,3), LJS.randColor());
94
+ new LJS.Box2dPrismaticJoint(Game.groundObject, o2, o2.pos, vec2(0,1), true);
106
95
 
107
96
  // lines to make it look line a track
108
- const l1 = new EngineObject(vec2(20, 8), vec2(39,.5), 0, 0, GRAY);
109
- const l2 = new EngineObject(vec2(20,50), vec2(.5,99), 0, 0, GRAY);
97
+ const l1 = new LJS.EngineObject(vec2(20, 8), vec2(39,.5), 0, 0, LJS.GRAY);
98
+ const l2 = new LJS.EngineObject(vec2(20,50), vec2(.5,99), 0, 0, LJS.GRAY);
110
99
  l1.gravityScale = l2.gravityScale = 0;
111
100
  l1.renderOrder = l2.renderOrder = -2;
112
101
  }
@@ -114,80 +103,81 @@ function loadScene(_scene)
114
103
  // pulley joint
115
104
  const anchorA = vec2(14,15);
116
105
  const anchorB = vec2(26,15);
117
- const oA = new PulleyJointObjects(vec2(15,8), vec2(1,2), randColor(), anchorA);
118
- const oB = new PulleyJointObjects(vec2(25,8), vec2(1,2), randColor(), anchorB);
119
- const aA = spawnCircle(anchorA, 2, randColor(), box2dBodyTypeStatic);
120
- const aB = spawnCircle(anchorB, 2, randColor(), box2dBodyTypeStatic);
106
+ const oA = new GameObjects.PulleyJointObjects(vec2(15,8), vec2(1,2), LJS.randColor(), anchorA);
107
+ const oB = new GameObjects.PulleyJointObjects(vec2(25,8), vec2(1,2), LJS.randColor(), anchorB);
108
+ const aA = GameObjects.spawnCircle(anchorA, 2, LJS.randColor(), LJS.box2d.bodyTypeStatic);
109
+ const aB = GameObjects.spawnCircle(anchorB, 2, LJS.randColor(), LJS.box2d.bodyTypeStatic);
121
110
  const oaA = oA.localToWorld(vec2(0,oA.size.y/2));
122
111
  const oaB = oB.localToWorld(vec2(0,oB.size.y/2));
123
- box2dCreatePulleyJoint(oA, oB, aA.pos, aB.pos, oaA, oaB);
112
+ new LJS.Box2dPulleyJoint(oA, oB, aA.pos, aB.pos, oaA, oaB);
124
113
 
125
114
  // a line to make it look like connecting rope
126
- const line = new EngineObject(vec2(20,15), vec2(10,.2), 0, 0, BLACK);
115
+ const line = new LJS.EngineObject(vec2(20,15), vec2(10,.2), 0, 0, LJS.BLACK);
127
116
  line.gravityScale = 0;
128
117
  line.renderOrder = -1;
129
118
  }
130
119
  {
131
120
  // gear joint
132
- const o1 = spawnCircle(vec2(23.5,3), 3, randColor());
133
- const j1 = box2dCreateRevoluteJoint(groundObject, o1, o1.pos);
134
- const o2 = spawnCircle(vec2(28,3), 6, randColor());
135
- o1.tileInfo = o2.tileInfo = spriteAtlas.gear;
136
- const j2 = box2dCreateRevoluteJoint(groundObject, o2, o2.pos);
137
- box2dCreateGearJoint(o1, o2, j1, j2, 2);
121
+ const o1 = GameObjects.spawnCircle(vec2(23.5,3), 3, LJS.randColor());
122
+ const j1 = new LJS.Box2dRevoluteJoint(Game.groundObject, o1, o1.pos);
123
+ const o2 = GameObjects.spawnCircle(vec2(28,3), 6, LJS.randColor());
124
+ o1.tileInfo = o2.tileInfo = Game.spriteAtlas.gear;
125
+ const j2 = new LJS.Box2dRevoluteJoint(Game.groundObject, o2, o2.pos);
126
+ new LJS.Box2dGearJoint(o1, o2, j1, j2, 2);
138
127
  }
139
128
  {
140
129
  // weld joint
141
- const o1 = spawnBox(vec2(15,2), 4, randColor());
142
- const o2 = spawnBox(vec2(17,2), 2, randColor());
143
- box2dCreateWeldJoint(o1, o2);
130
+ const o1 = GameObjects.spawnBox(vec2(15,2), 4, LJS.randColor());
131
+ const o2 = GameObjects.spawnBox(vec2(17,2), 2, LJS.randColor());
132
+ new LJS.Box2dWeldJoint(o1, o2);
144
133
  }
145
134
  {
146
135
  // distance joint
147
- const o1 = new Box2dObject(vec2(30,11), vec2(4), spriteAtlas.circleOutline, 0, randColor(), box2dBodyTypeStatic);
136
+ const o1 = new LJS.Box2dObject(vec2(30,11), vec2(4), Game.spriteAtlas.circleOutline, 0, LJS.randColor(), LJS.box2d.bodyTypeStatic);
148
137
  o1.renderOrder = -2;
149
- const o2 = spawnCircle(vec2(30,8), 2, randColor());
150
- box2dCreateDistanceJoint(o1, o2);
138
+ const o2 = GameObjects.spawnCircle(vec2(30,8), 2, LJS.randColor());
139
+ new LJS.Box2dDistanceJoint(o1, o2);
151
140
  }
152
141
  {
153
142
  // motor joint
154
- const o = new Box2dObject(vec2(10,8), vec2(4), spriteAtlas.circleOutline, 0, randColor(), box2dBodyTypeStatic);
143
+ const o = new LJS.Box2dObject(vec2(10,8), vec2(4), Game.spriteAtlas.circleOutline, 0, LJS.randColor(), LJS.box2d.bodyTypeStatic);
155
144
  o.renderOrder = -2;
156
- new MotorJointObject(vec2(10,8), vec2(2), randColor(), o);
145
+ new GameObjects.MotorJointObject(vec2(10,8), vec2(2), LJS.randColor(), o);
157
146
  }
158
147
  {
159
148
  // friction joint
160
- const o = spawnBox(vec2(10,15), 3, randColor());
161
- o.tileInfo = spriteAtlas.squareOutline2;
162
- const joint = box2dCreateFrictionJoint(groundObject, o);
163
- joint.SetMaxForce(200);
164
- joint.SetMaxTorque(200);
149
+ const o = GameObjects.spawnBox(vec2(10,15), 3, LJS.randColor());
150
+ o.tileInfo = Game.spriteAtlas.squareOutline2;
151
+ o.setGravityScale(0);
152
+ const joint = new LJS.Box2dFrictionJoint(Game.groundObject, o);
153
+ joint.setMaxForce(200);
154
+ joint.setMaxTorque(200);
165
155
  }
166
156
  }
167
157
  if (scene == 7)
168
158
  {
169
- sceneName = 'Contacts';
170
- new ContactTester(vec2(15,8), vec2(5), RED, RED);
171
- new ContactTester(vec2(25,8), vec2(5), CYAN, CYAN, false, false);
159
+ Game.setSceneName('Contacts');
160
+ new GameObjects.ContactTester(vec2(15,8), vec2(5), LJS.RED, LJS.RED);
161
+ new GameObjects.ContactTester(vec2(25,8), vec2(5), LJS.CYAN, LJS.CYAN, false, false);
172
162
  for (let i=200;i--;)
173
- spawnRandomObject(vec2(rand(1,39), rand(10,50)));
163
+ GameObjects.spawnRandomObject(vec2(LJS.rand(1,39), LJS.rand(10,50)));
174
164
  }
175
165
  if (scene == 8)
176
166
  {
177
- sceneName = 'Mobile';
167
+ Game.setSceneName('Mobile');
178
168
  const pos = vec2(20, 16);
179
- const mobile = new MobileObject(pos, 12, 2, 5);
180
- box2dCreateRevoluteJoint(groundObject, mobile, pos);
169
+ const mobile = new GameObjects.MobileObject(pos, 12, 2, 5);
170
+ new LJS.Box2dRevoluteJoint(Game.groundObject, mobile, pos);
181
171
  }
182
172
  if (scene == 9)
183
173
  {
184
- sceneName = 'Cloth';
185
- new ClothObject(vec2(20, 9), vec2(15), vec2(24), randColor());
174
+ Game.setSceneName('Cloth');
175
+ new GameObjects.ClothObject(vec2(20, 9), vec2(15), vec2(24), LJS.randColor());
186
176
  }
187
177
  if (scene == 10)
188
178
  {
189
- sceneName = 'Softbodies';
179
+ Game.setSceneName('Softbodies');
190
180
  for(let i=3;i--;)
191
- new SoftBodyObject(vec2(20, 3+i*7), vec2(6-i), vec2(9-i), randColor());
181
+ new GameObjects.SoftBodyObject(vec2(20, 3+i*7), vec2(6-i), vec2(9-i), LJS.randColor());
192
182
  }
193
183
  }
package/examples/breakout/game.js CHANGED
@@ -8,49 +8,81 @@
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
+ import * as GameObjects from './gameObjects.js';
14
+ const {vec2, hsl} = LJS;
13
15
 
14
- let levelSize, ball, paddle, score, brickCount;
16
+ ///////////////////////////////////////////////////////////////////////////////
17
+ // game objects
18
+ export let ball, score, brickCount, paddle;
19
+ export const levelSize = vec2(38, 20);
15
20
 
16
- // sound effects
17
- const sound_start = new Sound([,0,500,,.04,.3,1,2,,,570,.02,.02,,,,.04]);
18
- const sound_break = new Sound([,,90,,.01,.03,4,,,,,,,9,50,.2,,.2,.01]);
19
- const sound_bounce = new Sound([,,1e3,,.03,.02,1,2,,,940,.03,,,,,.2,.6,,.06]);
21
+ export function changeBrickCount(delta)
22
+ {
23
+ brickCount += delta;
24
+
25
+ // increase score when brick is destroyed
26
+ if (delta < 0)
27
+ score -= delta;
28
+ }
20
29
 
21
30
  ///////////////////////////////////////////////////////////////////////////////
22
- function gameInit()
31
+ function gameReset()
23
32
  {
24
- canvasFixedSize = vec2(1920, 1080); // 1080p
25
- levelSize = vec2(38, 20);
26
- cameraPos = levelSize.scale(.5);
27
- cameraScale = 48;
28
- paddle = new Paddle(vec2(levelSize.x/2-12, 1));
29
- score = brickCount = 0;
33
+ // reset game objects
34
+ LJS.engineObjectsDestroy();
35
+ score = 0;
36
+ brickCount = 0;
30
37
 
31
38
  // spawn bricks
32
39
  const pos = vec2();
33
40
  for (pos.x = 4; pos.x <= levelSize.x-4; pos.x += 2)
34
41
  for (pos.y = 12; pos.y <= levelSize.y-2; pos.y += 1)
35
- new Brick(pos);
42
+ new GameObjects.Brick(pos);
36
43
 
37
44
  // create walls
38
- new Wall(vec2(-.5,levelSize.y/2), vec2(1,100)); // top
39
- new Wall(vec2(levelSize.x+.5,levelSize.y/2), vec2(1,100)); // left
40
- new Wall(vec2(levelSize.x/2,levelSize.y+.5), vec2(100,1)); // right
45
+ new GameObjects.Wall(vec2(-.5,levelSize.y/2), vec2(1,100)); // top
46
+ new GameObjects.Wall(vec2(levelSize.x+.5,levelSize.y/2), vec2(1,100)); // left
47
+ new GameObjects.Wall(vec2(levelSize.x/2,levelSize.y+.5), vec2(100,1)); // right
48
+
49
+ // spawn player paddle
50
+ paddle = new GameObjects.Paddle(vec2(levelSize.x/2-12, 1));
51
+
52
+ // reset ball
53
+ ball = 0;
54
+ }
41
55
 
42
- setupPostProcess(); // set up a post processing shader
56
+ ///////////////////////////////////////////////////////////////////////////////
57
+ function gameInit()
58
+ {
59
+ LJS.setCanvasFixedSize(vec2(1920, 1080)); // 1080p
60
+ LJS.setCameraPos(levelSize.scale(.5)); // center camera
61
+ LJS.setCameraScale(48);
62
+
63
+ // set up a post processing shader
64
+ setupPostProcess();
65
+
66
+ // start a new game
67
+ gameReset();
43
68
  }
44
69
 
45
70
  ///////////////////////////////////////////////////////////////////////////////
46
71
  function gameUpdate()
47
72
  {
48
73
  // spawn ball
49
- if (!ball && (mouseWasPressed(0) || gamepadWasPressed(0)))
74
+ if (!ball && (LJS.mouseWasPressed(0) || LJS.gamepadWasPressed(0)))
75
+ ball = new GameObjects.Ball(vec2(levelSize.x/2, levelSize.y/2));
76
+
77
+ if (ball && ball.pos.y < -1)
50
78
  {
51
- ball = new Ball(vec2(levelSize.x/2, levelSize.y/2));
52
- sound_start.play();
79
+ // destroy ball if it goes below the level
80
+ ball.destroy();
81
+ ball = 0;
53
82
  }
83
+
84
+ if (LJS.keyWasPressed('KeyR'))
85
+ gameReset();
54
86
  }
55
87
 
56
88
  ///////////////////////////////////////////////////////////////////////////////
@@ -63,20 +95,20 @@ function gameUpdatePost()
63
95
  function gameRender()
64
96
  {
65
97
  // draw a the background
66
- drawRect(cameraPos, levelSize.scale(2), hsl(0,0,.5));
67
- drawRect(cameraPos, levelSize, hsl(0,0,.02));
98
+ LJS.drawRect(LJS.cameraPos, levelSize.scale(2), hsl(0,0,.5));
99
+ LJS.drawRect(LJS.cameraPos, levelSize, hsl(0,0,.02));
68
100
  }
69
101
 
70
102
  ///////////////////////////////////////////////////////////////////////////////
71
103
  function gameRenderPost()
72
104
  {
73
105
  // use built in image font for text
74
- const font = new FontImage;
75
- font.drawText('Score: ' + score, cameraPos.add(vec2(0,9.7)), .15, true);
106
+ const font = new LJS.FontImage;
107
+ font.drawText('Score: ' + score, LJS.cameraPos.add(vec2(0,10)), .15, true);
76
108
  if (!brickCount)
77
- font.drawText('You Win!', cameraPos.add(vec2(0,-5)), .2, true);
109
+ font.drawText('You Win!', LJS.cameraPos.add(vec2(0,-5)), .2, true);
78
110
  else if (!ball)
79
- font.drawText('Click to Play', cameraPos.add(vec2(0,-5)), .2, true);
111
+ font.drawText('Click to Play', LJS.cameraPos.add(vec2(0,-5)), .2, true);
80
112
  }
81
113
 
82
114
  ///////////////////////////////////////////////////////////////////////////////
@@ -131,9 +163,9 @@ function setupPostProcess()
131
163
  }`;
132
164
 
133
165
  const includeOverlay = true;
134
- initPostProcess(televisionShader, includeOverlay);
166
+ new LJS.PostProcessPlugin(televisionShader, includeOverlay);
135
167
  }
136
168
 
137
169
  ///////////////////////////////////////////////////////////////////////////////
138
170
  // Startup LittleJS Engine
139
- engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
171
+ LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
package/examples/breakout/gameObjects.js CHANGED
@@ -4,8 +4,19 @@
4
4
 
5
5
  'use strict';
6
6
 
7
+ // import LittleJS module
8
+ import * as LJS from '../../dist/littlejs.esm.js';
9
+ import * as Game from './game.js';
10
+ const {tile, vec2, hsl} = LJS;
11
+
12
+ ///////////////////////////////////////////////////////////////////////////////
13
+ // sound effects
14
+ const sound_start = new LJS.Sound([,0,500,,.04,.3,1,2,,,570,.02,.02,,,,.04]);
15
+ const sound_break = new LJS.Sound([,,90,,.01,.03,4,,,,,,,9,50,.2,,.2,.01]);
16
+ const sound_bounce = new LJS.Sound([,,1e3,,.03,.02,1,2,,,940,.03,,,,,.2,.6,,.06]);
17
+
7
18
  ///////////////////////////////////////////////////////////////////////////////
8
- class PhysicsObject extends EngineObject
19
+ export class PhysicsObject extends LJS.EngineObject
9
20
  {
10
21
  constructor(pos, size, tileInfo, angle, color)
11
22
  {
@@ -16,16 +27,16 @@ class PhysicsObject extends EngineObject
16
27
  }
17
28
 
18
29
  ///////////////////////////////////////////////////////////////////////////////
19
- class Wall extends PhysicsObject
30
+ export class Wall extends PhysicsObject
20
31
  {
21
32
  constructor(pos, size)
22
33
  {
23
- super(pos, size, 0, 0, new Color(0,0,0,0));
34
+ super(pos, size, 0, 0, hsl(0,0,0));
24
35
  }
25
36
  }
26
37
 
27
38
  ///////////////////////////////////////////////////////////////////////////////
28
- class Paddle extends PhysicsObject
39
+ export class Paddle extends PhysicsObject
29
40
  {
30
41
  constructor(pos)
31
42
  {
@@ -35,41 +46,40 @@ class Paddle extends PhysicsObject
35
46
  update()
36
47
  {
37
48
  // control with gamepad or mouse
38
- this.pos.x = isUsingGamepad ? this.pos.x + gamepadStick(0).x : mousePos.x;
49
+ this.pos.x = LJS.isUsingGamepad ? this.pos.x + LJS.gamepadStick(0).x : LJS.mousePos.x;
39
50
 
40
51
  // keep paddle in bounds of level
41
- this.pos.x = clamp(this.pos.x, this.size.x/2, levelSize.x - this.size.x/2);
52
+ this.pos.x = LJS.clamp(this.pos.x, this.size.x/2, Game.levelSize.x - this.size.x/2);
42
53
  }
43
54
  }
44
55
 
45
56
  ///////////////////////////////////////////////////////////////////////////////
46
- class Brick extends PhysicsObject
57
+ export class Brick extends PhysicsObject
47
58
  {
48
59
  constructor(pos)
49
60
  {
50
- super(pos, vec2(2,1), tile(1, vec2(32,16)), 0, randColor());
51
- ++brickCount;
61
+ super(pos, vec2(2,1), tile(1, vec2(32,16)), 0, LJS.randColor());
62
+ Game.changeBrickCount(1);
52
63
  }
53
64
 
54
65
  collideWithObject(o)
55
66
  {
56
67
  // destroy brick when hit with ball
57
68
  this.destroy();
58
- ++score;
59
- --brickCount;
69
+ Game.changeBrickCount(-1);
60
70
  sound_break.play(this.pos);
61
71
 
62
72
  // make explosion effect
63
73
  const color1 = this.color;
64
74
  const color2 = color1.lerp(hsl(), .5);
65
- new ParticleEmitter(
75
+ new LJS.ParticleEmitter(
66
76
  this.pos, 0, // pos, angle
67
- this.size, .1, 200, PI, // emitSize, emitTime, emitRate, emitCone
77
+ this.size, .1, 200, 3.14, // emitSize, emitTime, emitRate, emitCone
68
78
  tile(0, 16), // tileIndex, tileSize
69
79
  color1, color2, // colorStartA, colorStartB
70
80
  color1.scale(1,0), color2.scale(1,0), // colorEndA, colorEndB
71
81
  .3, .8, .3, .05, .05,// time, sizeStart, sizeEnd, speed, angleSpeed
72
- .99, .95, .4, PI, // damp, angleDamp, gravity, cone
82
+ .99, .95, .4, 3.14, // damp, angleDamp, gravity, cone
73
83
  .1, .8, 0, 1 // fade, randomness, collide, additive
74
84
  );
75
85
 
@@ -85,7 +95,7 @@ class Brick extends PhysicsObject
85
95
  }
86
96
 
87
97
  ///////////////////////////////////////////////////////////////////////////////
88
- class Ball extends PhysicsObject
98
+ export class Ball extends PhysicsObject
89
99
  {
90
100
  constructor(pos)
91
101
  {
@@ -98,52 +108,40 @@ class Ball extends PhysicsObject
98
108
 
99
109
  // attach a trail effect
100
110
  const color = hsl(0,0,.2);
101
- this.trailEffect = new ParticleEmitter(
111
+ this.trailEffect = new LJS.ParticleEmitter(
102
112
  this.pos, 0, // pos, angle
103
- this.size, 0, 80, PI, // emitSize, emitTime, emitRate, emitCone
113
+ this.size, 0, 80, 3.14, // emitSize, emitTime, emitRate, emitCone
104
114
  tile(0, 16), // tileIndex, tileSize
105
115
  color, color, // colorStartA, colorStartB
106
116
  color.scale(0), color.scale(0), // colorEndA, colorEndB
107
117
  2, .4, 1, .001, .05,// time, sizeStart, sizeEnd, speed, angleSpeed
108
- .99, .95, 0, PI, // damp, angleDamp, gravity, cone
118
+ .99, .95, 0, 3.14, // damp, angleDamp, gravity, cone
109
119
  .1, .5, 0, 1 // fade, randomness, collide, additive
110
120
  );
111
121
  this.addChild(this.trailEffect);
112
- }
113
-
114
- update()
115
- {
116
- if (this.pos.y < -1)
117
- {
118
- // destroy ball if it goes below the level
119
- ball = 0;
120
- this.destroy();
121
- }
122
-
123
- // update physics
124
- super.update();
122
+ sound_start.play(this.pos);
125
123
  }
126
124
 
127
125
  collideWithObject(o)
128
126
  {
127
+ // only need special handling when colliding with paddle
128
+ if (o != Game.paddle)
129
+ return true;
130
+
129
131
  // prevent colliding with paddle if moving upwards
130
- if (o == paddle && this.velocity.y > 0)
132
+ if (this.velocity.y > 0)
131
133
  return false;
132
134
 
133
- if (o == paddle)
134
- {
135
- // put english on the ball when it collides with paddle
136
- this.velocity = this.velocity.rotate(.2 * (o.pos.x - this.pos.x));
137
- this.velocity.y = max(-this.velocity.y, .2);
138
-
139
- // speed up
140
- const speed = min(1.04*this.velocity.length(), .5);
141
- this.velocity = this.velocity.normalize(speed);
142
- sound_bounce.play(this.pos, 1, speed*2);
143
-
144
- return false; // prevent default collision code
145
- }
146
-
147
- return true;
135
+ // put english on the ball when it collides with paddle
136
+ this.velocity = this.velocity.rotate(.2 * (o.pos.x - this.pos.x));
137
+ this.velocity.y = LJS.max(-this.velocity.y, .2);
138
+
139
+ // speed up
140
+ const speed = LJS.min(1.04*this.velocity.length(), .5);
141
+ this.velocity = this.velocity.normalize(speed);
142
+ sound_bounce.play(this.pos, 1, speed*2);
143
+
144
+ // prevent default collision code
145
+ return false;
148
146
  }
149
147
  }
package/examples/breakout/index.html CHANGED
@@ -5,8 +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=../../plugins/postProcess.js?1117></script>
11
- <script src=gameObjects.js?1117></script>
12
- <script src=game.js?1117></script>
8
+ <script src=game.js type=module></script>