littlejsengine 1.11.17 → 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.
- package/dist/littlejs.d.ts +112 -43
- package/dist/littlejs.esm.js +586 -500
- package/dist/littlejs.esm.min.js +1 -1
- package/dist/littlejs.js +2993 -122
- package/dist/littlejs.min.js +1 -1
- package/dist/littlejs.release.js +2992 -119
- package/examples/box2d/game.js +70 -39
- package/examples/box2d/gameObjects.js +81 -77
- package/examples/box2d/index.html +2 -7
- package/examples/box2d/scenes.js +80 -90
- package/examples/breakout/game.js +63 -28
- package/examples/breakout/gameObjects.js +45 -47
- package/examples/breakout/index.html +1 -5
- package/examples/breakoutTutorial/game.js +36 -29
- package/examples/breakoutTutorial/index.html +1 -3
- package/examples/empty/game.js +5 -2
- package/examples/empty/index.html +1 -3
- package/examples/htmlMenu/game.js +24 -15
- package/examples/htmlMenu/index.html +5 -7
- package/examples/index.html +2 -3
- package/examples/module/game.js +32 -34
- package/examples/module/index.html +1 -1
- package/examples/particles/index.html +27 -22
- package/examples/platformer/game.js +71 -45
- package/examples/platformer/gameCharacter.js +42 -34
- package/examples/platformer/gameEffects.js +82 -75
- package/examples/platformer/gameLevel.js +67 -38
- package/examples/platformer/{gameLevelData.js → gameLevelData.json} +1 -11
- package/examples/platformer/gameObjects.js +70 -64
- package/examples/platformer/gamePlayer.js +12 -7
- package/examples/platformer/index.html +1 -9
- package/examples/puzzle/game.js +59 -40
- package/examples/puzzle/index.html +1 -3
- package/examples/shorts/base.html +2 -2
- package/examples/shorts/particles.js +1 -1
- package/examples/shorts/platformer.js +1 -1
- package/examples/shorts/tileLayer.js +5 -6
- package/examples/shorts/tiles.png +0 -0
- package/examples/starter/game.js +9 -12
- package/examples/starter/index.html +13 -13
- package/examples/stress/index.html +44 -44
- package/examples/typescript/build.js +17 -18
- package/examples/typescript/game.js +32 -34
- package/examples/typescript/game.ts +32 -34
- package/examples/typescript/index.html +1 -1
- package/examples/uiSystem/game.js +34 -31
- package/examples/uiSystem/index.html +1 -5
- package/package.json +1 -1
- package/plugins/box2d.js +6 -2
- package/plugins/pluginExport.js +1 -2
- package/reference.md +29 -27
- package/src/engine.js +1 -1
- package/src/engineBuild.js +13 -6
- package/src/engineDebug.js +1 -3
- package/src/engineExport.js +2 -6
- package/src/engineInput.js +3 -1
- package/src/engineObject.js +18 -14
- package/src/engineSettings.js +6 -6
- package/src/engineTileLayer.js +179 -96
- package/examples/typescript/build/dist/littlejs.esm.js +0 -4834
- package/examples/typescript/build/examples/typescript/build.js +0 -24
- package/examples/typescript/build/examples/typescript/game.js +0 -102
package/examples/box2d/scenes.js
CHANGED
|
@@ -17,96 +17,85 @@
|
|
|
17
17
|
|
|
18
18
|
'use strict';
|
|
19
19
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
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), box2d.bodyTypeStatic);
|
|
35
|
-
spawnBox(vec2(-4, 0), vec2(8,1e3), BLACK, box2d.bodyTypeStatic);
|
|
36
|
-
spawnBox(vec2(44, 0), vec2(8,1e3), BLACK, box2d.bodyTypeStatic);
|
|
37
|
-
spawnBox(vec2(0,100), vec2(1e3,8), BLACK, box2d.bodyTypeStatic);
|
|
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
|
-
|
|
42
|
-
spawnRandomEdges();
|
|
43
|
-
spawnBox(vec2(11,8), 4,
|
|
44
|
-
spawnCircle(vec2(20,8), 4,
|
|
45
|
-
spawnRandomPoly(vec2(29,8), 4, randColor(), box2d.bodyTypeStatic, 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
|
-
|
|
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
|
-
|
|
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(), box2d.bodyTypeStatic, false);
|
|
64
|
-
spawnBox(vec2(24,6.5), vec2(32,1), randColor(), box2d.bodyTypeStatic, 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
|
-
|
|
69
|
-
|
|
70
|
-
spawnBox(vec2(20,0), vec2(10,2), randColor(), box2d.bodyTypeStatic, 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
|
-
|
|
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
|
-
new Box2dRevoluteJoint(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
|
-
|
|
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, box2d.bodyTypeStatic, 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
|
-
|
|
88
|
+
Game.setSceneName('Joints');
|
|
100
89
|
{
|
|
101
90
|
// prismatic joint
|
|
102
|
-
const o1 = spawnBox(vec2(20,8), vec2(3,2), randColor());
|
|
103
|
-
new Box2dPrismaticJoint(groundObject, o1, o1.pos, vec2(1,0), true);
|
|
104
|
-
const o2 = spawnBox(vec2(20,15), vec2(2,3), randColor());
|
|
105
|
-
new Box2dPrismaticJoint(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(), box2d.bodyTypeStatic);
|
|
120
|
-
const aB = spawnCircle(anchorB, 2, randColor(), box2d.bodyTypeStatic);
|
|
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
|
-
new Box2dPulleyJoint(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 = new Box2dRevoluteJoint(groundObject, o1, o1.pos);
|
|
134
|
-
const o2 = spawnCircle(vec2(28,3), 6, randColor());
|
|
135
|
-
o1.tileInfo = o2.tileInfo = spriteAtlas.gear;
|
|
136
|
-
const j2 = new Box2dRevoluteJoint(groundObject, o2, o2.pos);
|
|
137
|
-
new Box2dGearJoint(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),
|
|
142
|
-
const o2 = spawnBox(vec2(17,2), 2, randColor());
|
|
143
|
-
new Box2dWeldJoint(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(), box2d.bodyTypeStatic);
|
|
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
|
-
new Box2dDistanceJoint(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(), box2d.bodyTypeStatic);
|
|
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
|
-
|
|
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);
|
|
163
153
|
joint.setMaxForce(200);
|
|
164
154
|
joint.setMaxTorque(200);
|
|
165
155
|
}
|
|
166
156
|
}
|
|
167
157
|
if (scene == 7)
|
|
168
158
|
{
|
|
169
|
-
|
|
170
|
-
new ContactTester(vec2(15,8), vec2(5), 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
|
-
|
|
167
|
+
Game.setSceneName('Mobile');
|
|
178
168
|
const pos = vec2(20, 16);
|
|
179
|
-
const mobile = new MobileObject(pos, 12, 2, 5);
|
|
180
|
-
new Box2dRevoluteJoint(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
|
-
|
|
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
|
-
|
|
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
|
}
|
|
@@ -8,46 +8,81 @@
|
|
|
8
8
|
|
|
9
9
|
'use strict';
|
|
10
10
|
|
|
11
|
-
|
|
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;
|
|
12
15
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
const
|
|
16
|
+
///////////////////////////////////////////////////////////////////////////////
|
|
17
|
+
// game objects
|
|
18
|
+
export let ball, score, brickCount, paddle;
|
|
19
|
+
export const levelSize = vec2(38, 20);
|
|
20
|
+
|
|
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
|
+
}
|
|
17
29
|
|
|
18
30
|
///////////////////////////////////////////////////////////////////////////////
|
|
19
|
-
function
|
|
31
|
+
function gameReset()
|
|
20
32
|
{
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
paddle = new Paddle(vec2(levelSize.x/2-12, 1));
|
|
26
|
-
score = brickCount = 0;
|
|
33
|
+
// reset game objects
|
|
34
|
+
LJS.engineObjectsDestroy();
|
|
35
|
+
score = 0;
|
|
36
|
+
brickCount = 0;
|
|
27
37
|
|
|
28
38
|
// spawn bricks
|
|
29
39
|
const pos = vec2();
|
|
30
40
|
for (pos.x = 4; pos.x <= levelSize.x-4; pos.x += 2)
|
|
31
41
|
for (pos.y = 12; pos.y <= levelSize.y-2; pos.y += 1)
|
|
32
|
-
new Brick(pos);
|
|
42
|
+
new GameObjects.Brick(pos);
|
|
33
43
|
|
|
34
44
|
// create walls
|
|
35
|
-
new Wall(vec2(-.5,levelSize.y/2), vec2(1,100)); // top
|
|
36
|
-
new Wall(vec2(levelSize.x+.5,levelSize.y/2), vec2(1,100)); // left
|
|
37
|
-
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));
|
|
38
51
|
|
|
39
|
-
|
|
52
|
+
// reset ball
|
|
53
|
+
ball = 0;
|
|
54
|
+
}
|
|
55
|
+
|
|
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();
|
|
40
68
|
}
|
|
41
69
|
|
|
42
70
|
///////////////////////////////////////////////////////////////////////////////
|
|
43
71
|
function gameUpdate()
|
|
44
72
|
{
|
|
45
73
|
// spawn ball
|
|
46
|
-
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)
|
|
47
78
|
{
|
|
48
|
-
ball
|
|
49
|
-
|
|
79
|
+
// destroy ball if it goes below the level
|
|
80
|
+
ball.destroy();
|
|
81
|
+
ball = 0;
|
|
50
82
|
}
|
|
83
|
+
|
|
84
|
+
if (LJS.keyWasPressed('KeyR'))
|
|
85
|
+
gameReset();
|
|
51
86
|
}
|
|
52
87
|
|
|
53
88
|
///////////////////////////////////////////////////////////////////////////////
|
|
@@ -60,20 +95,20 @@ function gameUpdatePost()
|
|
|
60
95
|
function gameRender()
|
|
61
96
|
{
|
|
62
97
|
// draw a the background
|
|
63
|
-
drawRect(cameraPos, levelSize.scale(2), hsl(0,0,.5));
|
|
64
|
-
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));
|
|
65
100
|
}
|
|
66
101
|
|
|
67
102
|
///////////////////////////////////////////////////////////////////////////////
|
|
68
103
|
function gameRenderPost()
|
|
69
104
|
{
|
|
70
105
|
// use built in image font for text
|
|
71
|
-
const font = new FontImage;
|
|
72
|
-
font.drawText('Score: ' + score, cameraPos.add(vec2(0,
|
|
106
|
+
const font = new LJS.FontImage;
|
|
107
|
+
font.drawText('Score: ' + score, LJS.cameraPos.add(vec2(0,10)), .15, true);
|
|
73
108
|
if (!brickCount)
|
|
74
|
-
font.drawText('You Win!', cameraPos.add(vec2(0,-5)), .2, true);
|
|
109
|
+
font.drawText('You Win!', LJS.cameraPos.add(vec2(0,-5)), .2, true);
|
|
75
110
|
else if (!ball)
|
|
76
|
-
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);
|
|
77
112
|
}
|
|
78
113
|
|
|
79
114
|
///////////////////////////////////////////////////////////////////////////////
|
|
@@ -128,9 +163,9 @@ function setupPostProcess()
|
|
|
128
163
|
}`;
|
|
129
164
|
|
|
130
165
|
const includeOverlay = true;
|
|
131
|
-
new PostProcessPlugin(televisionShader, includeOverlay);
|
|
166
|
+
new LJS.PostProcessPlugin(televisionShader, includeOverlay);
|
|
132
167
|
}
|
|
133
168
|
|
|
134
169
|
///////////////////////////////////////////////////////////////////////////////
|
|
135
170
|
// Startup LittleJS Engine
|
|
136
|
-
engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
|
|
171
|
+
LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
|
|
@@ -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,
|
|
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
|
-
|
|
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
|
-
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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 (
|
|
132
|
+
if (this.velocity.y > 0)
|
|
131
133
|
return false;
|
|
132
134
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
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
|
}
|
|
@@ -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?11115></script>
|
|
10
|
-
<script src=../../plugins/postProcess.js?11115></script>
|
|
11
|
-
<script src=gameObjects.js?11115></script>
|
|
12
|
-
<script src=game.js?11115></script>
|
|
8
|
+
<script src=game.js type=module></script>
|