littlejsengine 1.11.6 → 1.11.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -16
- package/dist/littlejs.d.ts +14 -1
- package/dist/littlejs.esm.js +30 -19
- package/dist/littlejs.esm.min.js +1 -1
- package/dist/littlejs.js +27 -19
- package/dist/littlejs.min.js +1 -1
- package/dist/littlejs.release.js +23 -18
- package/examples/box2d/game.js +2 -2
- package/examples/box2d/index.html +5 -5
- package/examples/breakout/game.js +6 -5
- package/examples/breakout/index.html +4 -4
- package/examples/breakoutTutorial/index.html +2 -2
- package/examples/htmlMenu/index.html +2 -2
- package/examples/index.html +300 -32
- package/examples/module/index.html +1 -1
- package/examples/particles/index.html +1 -1
- package/examples/platformer/gamePlayer.js +2 -7
- package/examples/platformer/index.html +8 -8
- package/examples/puzzle/index.html +2 -2
- package/examples/shorts/base.html +26 -0
- package/{shortExamples/code → examples/shorts}/blending.js +1 -1
- package/examples/shorts/platformer.js +42 -0
- package/{shortExamples/code → examples/shorts}/playSound.js +3 -0
- package/{shortExamples/code → examples/shorts}/pong.js +3 -3
- package/examples/shorts/tiltedView.js +44 -0
- package/{shortExamples/code → examples/shorts}/timers.js +7 -3
- package/examples/shorts/topDown.js +44 -0
- package/examples/starter/index.html +13 -13
- package/examples/stress/index.html +2 -2
- package/examples/uiSystem/game.js +6 -1
- package/examples/uiSystem/index.html +3 -3
- package/package.json +1 -1
- package/plugins/Box2D_License.txt +17 -0
- package/plugins/uiSystem.js +2 -1
- package/reference.md +2 -1
- package/src/engine.js +1 -1
- package/src/engineDebug.js +5 -1
- package/src/engineExport.js +3 -0
- package/src/engineInput.js +19 -15
- package/src/engineRelease.js +1 -0
- package/src/engineTileLayer.js +2 -2
- package/shortExamples/base.html +0 -39
- package/shortExamples/index.html +0 -246
- /package/{shortExamples/code → examples/shorts}/animation.js +0 -0
- /package/{shortExamples/code → examples/shorts}/clock.js +0 -0
- /package/{shortExamples/code → examples/shorts}/colors.js +0 -0
- /package/{shortExamples/code → examples/shorts}/helloWorld.js +0 -0
- /package/{shortExamples/code → examples/shorts}/particles.js +0 -0
- /package/{shortExamples/code → examples/shorts}/shapes.js +0 -0
- /package/{shortExamples/code → examples/shorts}/spriteAtlas.js +0 -0
- /package/{shortExamples/code → examples/shorts}/systemFont.js +0 -0
- /package/{shortExamples/code → examples/shorts}/texture.js +0 -0
- /package/{shortExamples/code → examples/shorts}/tileLayer.js +0 -0
- /package/{shortExamples → examples/shorts}/tiles.png +0 -0
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
</head><body>
|
|
8
8
|
|
|
9
9
|
<!-- LittleJS Engine -->
|
|
10
|
-
<script src=../../dist/littlejs.min.js?
|
|
10
|
+
<script src=../../dist/littlejs.min.js?1117></script>
|
|
11
11
|
<script>
|
|
12
12
|
|
|
13
13
|
/*
|
|
@@ -161,6 +161,6 @@ engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, [ti
|
|
|
161
161
|
|
|
162
162
|
///////////////////////////////////////////////////////////////////////////////
|
|
163
163
|
// music - Depp Loop
|
|
164
|
-
const music = new Music([[[,0,
|
|
164
|
+
const music = new Music([[[.6,0,76,,,1,1,.5,,,,,.1,,,.06,,.5,.2,,-700],[,0,43,.01,,.2,2,,,,,,,,,,.01],[,0,170,.003,,.008,,.97,-35,53,,,,,,.1],[.8,0,270,,,.12,3,1.65,-2,,,,,4.5,,.02],[,0,86,,,.1,,.7,,,,.5,,6.7,1,.05],[,0,41,,.05,.4,2,0,,,9,.01,,,,.08,.02],[,0,2200,,,.04,3,2,,,800,.02,,4.8,,.01,.1],[.3,0,16,,,.3,3]],[[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33],[3,1,22,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,24,,,,,,,,,,,,,,,,,,,,,,,,22,,22,,22,,,,],[5,-1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,],[,1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,]],[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33],[3,1,24,,,,,,,,27,,,,,,,,,,,,,,,,27,,,,24,,,,24,,,,,,,,27,,,,,,,,,,,,,,,,24,,24,,24,,,,],[5,-1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,],[,1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,],[6,1,,,34,34,34,,,,,,34,34,,,,,34,,,,34,34,,,,,34,,,,34,,,,34,34,34,,,,,,34,,,,,,34,34,,,34,34,,,,,,,,,34,34],[4,1,,,,,,,24,,,,,,24,,24,,,,24,,,,24,,,,,,,,,,,,,,,,24,,,,,,24,,24,,,,24,,,,24,,,,,,,,,,]],[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,23,23,35,23,23,36,23,23,35,23,23,36,23,23,35,35,23,23,35,23,23,35,23,23,36,23,23,35,23,23,36,36],[5,-1,21,,,19,,,21,,,,,,,,,,21,,,19,,,17,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,],[3,1,24,,,24,,,24,,,,,,,,,,24,,,24,,,24,,,,24.75,24.5,24.26,24.01,24.01,24.01,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25],[4,-1,,,,,,,,,,,,,,,,,,,,,,,,,,,24.75,24.5,24.26,24.01,24.01,24.01,24.01,24,,24,24,,24,24,24,24,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24],[7,-1,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,23,,21,23,,35,,23,,21,23,,35,,35,,23,,21,23,,35,,21,23,,35,,21,23,,,],[6,1,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,34,36,34,,33,34,34,36,31,36,34,,31,34,32,,33,36,34,,31,34,34,36,33,36,33,,31,,,]],[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,17,17,29,17,17,29,17,17,29,17,17,29,17,17,29,29,17,17,29,17,17,29,17,17,29,17,17,29,17,17,29,29],[4,1,24,24,,24,24,,24,24,24,24,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24],[7,-1,21,,19,21,,33,,21,,19,21,,33,,33,,21,,19,21,,33,,21,,19,21,,33,,33,,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29],[2,1,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,,,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,,,],[6,1,,,36,,,,,,36,,36,,,,,,,,36,,,,,,36,,36,,,,,,,,36,,,,,,,,,,,,,,,,36,,,,,,36,,36,,,,,,],[3,1,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25,,,,,25,,,,,25,,,25,,,,,,,,25,,,,,,,,25,25,25,25]],[[1,-1,14,14,26,14,14,26,14,14,26,14,14,26,14,14,26,26,14,14,26,14,14,26,14,14,26,14,14,26,14,14,26,26,17,17,29,17,17,29,17,17,29,17,17,29,17,17,29,29,19,19,31,19,19,31,19,19,31,19,19,31,19,19,31,31],[4,1,24,24,,24,24,,24,24,24,24,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,24,,24,24,,36,,24,24,,24,24,,24,24,24,24,,24,24,,24,24],[7,-1,14,,14,14,26,14,14,26,14,,14,14,26,14,14,26,14,,14,14,26,14,14,26,14,,14,14,26,14,14,26,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29,19,,19,19,31,19,19,31,19,,19,19,31,19,19,31],[2,1,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,,,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,,,],[3,1,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25],[6,1,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,34,,,,,,34,,34,,,,,,,,34,,,,,,34,,34,,,,,,]]],[0,1,1,2,3,4,4]]);
|
|
165
165
|
|
|
166
166
|
</script>
|
|
@@ -17,11 +17,15 @@ let uiRoot, uiMenu;
|
|
|
17
17
|
const getMenuVisible =()=> uiMenu.visible;
|
|
18
18
|
const setMenuVisible =(visible)=> uiMenu.visible = visible;
|
|
19
19
|
|
|
20
|
+
// use a fixed size canvas
|
|
21
|
+
canvasFixedSize = vec2(1920, 1080); // 1080p
|
|
22
|
+
canvasPixelated = false;
|
|
23
|
+
|
|
20
24
|
function createUI()
|
|
21
25
|
{
|
|
22
26
|
// setup root to attach all ui elements to
|
|
23
27
|
uiRoot = new UIObject();
|
|
24
|
-
const uiInfo = new UIText(vec2(0,
|
|
28
|
+
const uiInfo = new UIText(vec2(0,90), vec2(1e3, 70),
|
|
25
29
|
'LittleJS UI System Example\nM = Toggle menu');
|
|
26
30
|
uiInfo.textColor = WHITE;
|
|
27
31
|
uiInfo.lineWidth = 8;
|
|
@@ -31,6 +35,7 @@ function createUI()
|
|
|
31
35
|
uiMenu = new UIObject(vec2(0,450));
|
|
32
36
|
uiRoot.addChild(uiMenu);
|
|
33
37
|
const uiBackground = new UIObject(vec2(0,0), vec2(450,580));
|
|
38
|
+
uiBackground.lineWidth = 8;
|
|
34
39
|
uiMenu.addChild(uiBackground);
|
|
35
40
|
|
|
36
41
|
// example large text
|
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
</head><body>
|
|
8
8
|
|
|
9
9
|
<!-- LittleJS Engine -->
|
|
10
|
-
<script src=../../dist/littlejs.js?
|
|
10
|
+
<script src=../../dist/littlejs.js?1117></script>
|
|
11
11
|
|
|
12
12
|
<!-- Add your game scripts here -->
|
|
13
|
-
<script src=../../plugins/uiSystem.js?
|
|
14
|
-
<script src=game.js?
|
|
13
|
+
<script src=../../plugins/uiSystem.js?1117></script>
|
|
14
|
+
<script src=game.js?1117></script>
|
package/package.json
CHANGED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
Copyright (c) 2006-2010 Erin Catto http://www.gphysics.com
|
|
2
|
+
|
|
3
|
+
This software is provided 'as-is', without any express or implied
|
|
4
|
+
warranty. In no event will the authors be held liable for any damages
|
|
5
|
+
arising from the use of this software.
|
|
6
|
+
|
|
7
|
+
Permission is granted to anyone to use this software for any purpose,
|
|
8
|
+
including commercial applications, and to alter it and redistribute it
|
|
9
|
+
freely, subject to the following restrictions:
|
|
10
|
+
|
|
11
|
+
1. The origin of this software must not be misrepresented; you must not
|
|
12
|
+
claim that you wrote the original software. If you use this software
|
|
13
|
+
in a product, an acknowledgment in the product documentation would be
|
|
14
|
+
appreciated but is not required.
|
|
15
|
+
2. Altered source versions must be plainly marked as such, and must not be
|
|
16
|
+
misrepresented as being the original software.
|
|
17
|
+
3. This notice may not be removed or altered from any source distribution.
|
package/plugins/uiSystem.js
CHANGED
|
@@ -246,7 +246,8 @@ class UICheckbox extends UIObject
|
|
|
246
246
|
}
|
|
247
247
|
render()
|
|
248
248
|
{
|
|
249
|
-
|
|
249
|
+
const color = this.mouseIsOver? this.hoverColor : this.color;
|
|
250
|
+
drawUIRect(this.pos, this.size, color, this.lineWidth, this.lineColor);
|
|
250
251
|
if (this.checked)
|
|
251
252
|
{
|
|
252
253
|
// draw an X if checked
|
package/reference.md
CHANGED
|
@@ -224,6 +224,7 @@ soundDefaultTaper = .7 // Default range percent to taper off sound (0-1)
|
|
|
224
224
|
keyIsDown(key) // Is key down?
|
|
225
225
|
keyWasPressed(key) // Was key pressed this frame?
|
|
226
226
|
keyWasReleased(key) // Was key released this frame?
|
|
227
|
+
keyDirection() // Get input vector from arrow keys or wasd
|
|
227
228
|
|
|
228
229
|
// Mouse / Touch
|
|
229
230
|
mousePos // World space mouse position
|
|
@@ -406,4 +407,4 @@ showWatermark // True if watermark with FPS should be show
|
|
|
406
407
|
|
|
407
408
|
[LittleJS Engine](https://github.com/KilledByAPixel/LittleJS) Copyright 2021 Frank Force
|
|
408
409
|
|
|
409
|
-

|
|
410
|
+

|
package/src/engine.js
CHANGED
package/src/engineDebug.js
CHANGED
|
@@ -162,6 +162,10 @@ function debugText(text, pos, size=1, color='#fff', time=0, angle=0, font='monos
|
|
|
162
162
|
* @memberof Debug */
|
|
163
163
|
function debugClear() { debugPrimitives = []; }
|
|
164
164
|
|
|
165
|
+
/** Trigger debug system to take a screenshot
|
|
166
|
+
* @memberof Debug */
|
|
167
|
+
function debugScreenshot() { debugTakeScreenshot = 1; }
|
|
168
|
+
|
|
165
169
|
/** Save a canvas to disk
|
|
166
170
|
* @param {HTMLCanvasElement} canvas
|
|
167
171
|
* @param {String} [filename]
|
|
@@ -235,7 +239,7 @@ function debugUpdate()
|
|
|
235
239
|
if (keyWasPressed('Digit4'))
|
|
236
240
|
debugRaycast = !debugRaycast;
|
|
237
241
|
if (keyWasPressed('Digit5'))
|
|
238
|
-
|
|
242
|
+
debugScreenshot();
|
|
239
243
|
}
|
|
240
244
|
}
|
|
241
245
|
|
package/src/engineExport.js
CHANGED
|
@@ -19,6 +19,7 @@ export {
|
|
|
19
19
|
engineInit,
|
|
20
20
|
engineObjectsUpdate,
|
|
21
21
|
engineObjectsDestroy,
|
|
22
|
+
engineObjectsCollect,
|
|
22
23
|
engineObjectsCallback,
|
|
23
24
|
engineObjectsRaycast,
|
|
24
25
|
engineAddPlugin,
|
|
@@ -38,6 +39,7 @@ export {
|
|
|
38
39
|
debugOverlap,
|
|
39
40
|
debugText,
|
|
40
41
|
debugClear,
|
|
42
|
+
debugScreenshot,
|
|
41
43
|
debugSaveCanvas,
|
|
42
44
|
debugSaveText,
|
|
43
45
|
debugSaveDataURL,
|
|
@@ -236,6 +238,7 @@ export {
|
|
|
236
238
|
keyIsDown,
|
|
237
239
|
keyWasPressed,
|
|
238
240
|
keyWasReleased,
|
|
241
|
+
keyDirection,
|
|
239
242
|
clearInput,
|
|
240
243
|
mouseIsDown,
|
|
241
244
|
mouseWasPressed,
|
package/src/engineInput.js
CHANGED
|
@@ -43,6 +43,15 @@ function keyWasReleased(key, device=0)
|
|
|
43
43
|
return inputData[device] && !!(inputData[device][key] & 4);
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
+
/** Returns input vector from arrow keys or WASD if enabled
|
|
47
|
+
* @return {Vector2}
|
|
48
|
+
* @memberof Input */
|
|
49
|
+
function keyDirection(up='ArrowUp', down='ArrowDown', left='ArrowLeft', right='ArrowRight')
|
|
50
|
+
{
|
|
51
|
+
const k = (key)=> keyIsDown(key) ? 1 : 0;
|
|
52
|
+
return vec2(k(right) - k(left), k(up) - k(down));
|
|
53
|
+
}
|
|
54
|
+
|
|
46
55
|
/** Clears all input
|
|
47
56
|
* @memberof Input */
|
|
48
57
|
function clearInput() { inputData = [[]]; touchGamepadButtons = []; }
|
|
@@ -126,9 +135,9 @@ function gamepadStick(stick, gamepad=0)
|
|
|
126
135
|
{ return gamepadStickData[gamepad] ? gamepadStickData[gamepad][stick] || vec2() : vec2(); }
|
|
127
136
|
|
|
128
137
|
///////////////////////////////////////////////////////////////////////////////
|
|
129
|
-
// Input
|
|
138
|
+
// Input system functions called automatically by engine
|
|
130
139
|
|
|
131
|
-
//
|
|
140
|
+
// input is stored as a bit field for each key: 1 = isDown, 2 = wasPressed, 4 = wasReleased
|
|
132
141
|
// mouse and keyboard are stored together in device 0, gamepads are in devices > 0
|
|
133
142
|
let inputData = [[]];
|
|
134
143
|
|
|
@@ -158,9 +167,6 @@ function inputUpdatePost()
|
|
|
158
167
|
mouseWheel = 0;
|
|
159
168
|
}
|
|
160
169
|
|
|
161
|
-
///////////////////////////////////////////////////////////////////////////////
|
|
162
|
-
// Input event handlers
|
|
163
|
-
|
|
164
170
|
function inputInit()
|
|
165
171
|
{
|
|
166
172
|
if (headlessMode) return;
|
|
@@ -203,11 +209,11 @@ function inputInit()
|
|
|
203
209
|
|
|
204
210
|
isUsingGamepad = false;
|
|
205
211
|
inputData[0][e.button] = 3;
|
|
206
|
-
mousePosScreen =
|
|
212
|
+
mousePosScreen = mouseEventToScreen(e);
|
|
207
213
|
e.button && e.preventDefault();
|
|
208
214
|
}
|
|
209
215
|
onmouseup = (e)=> inputData[0][e.button] = inputData[0][e.button] & 2 | 4;
|
|
210
|
-
onmousemove = (e)=> mousePosScreen =
|
|
216
|
+
onmousemove = (e)=> mousePosScreen = mouseEventToScreen(e);
|
|
211
217
|
onwheel = (e)=> mouseWheel = e.ctrlKey ? 0 : sign(e.deltaY);
|
|
212
218
|
oncontextmenu = (e)=> false; // prevent right click menu
|
|
213
219
|
onblur = (e) => clearInput(); // reset input when focus is lost
|
|
@@ -218,14 +224,12 @@ function inputInit()
|
|
|
218
224
|
}
|
|
219
225
|
|
|
220
226
|
// convert a mouse or touch event position to screen space
|
|
221
|
-
function
|
|
227
|
+
function mouseEventToScreen(mousePos)
|
|
222
228
|
{
|
|
223
|
-
if (!mainCanvas || headlessMode)
|
|
224
|
-
return vec2(); // fix bug that can occur if user clicks before page loads
|
|
225
|
-
|
|
226
229
|
const rect = mainCanvas.getBoundingClientRect();
|
|
227
|
-
|
|
228
|
-
|
|
230
|
+
const px = percent(mousePos.x, rect.left, rect.right);
|
|
231
|
+
const py = percent(mousePos.y, rect.top, rect.bottom);
|
|
232
|
+
return vec2(px*mainCanvas.width, py*mainCanvas.height);
|
|
229
233
|
}
|
|
230
234
|
|
|
231
235
|
///////////////////////////////////////////////////////////////////////////////
|
|
@@ -380,7 +384,7 @@ function touchInputInit()
|
|
|
380
384
|
{
|
|
381
385
|
// set event pos and pass it along
|
|
382
386
|
const p = vec2(e.touches[0].clientX, e.touches[0].clientY);
|
|
383
|
-
mousePosScreen =
|
|
387
|
+
mousePosScreen = mouseEventToScreen(p);
|
|
384
388
|
wasTouching ? isUsingGamepad = touchGamepadEnable : inputData[0][button] = 3;
|
|
385
389
|
}
|
|
386
390
|
else if (wasTouching)
|
|
@@ -428,7 +432,7 @@ function touchInputInit()
|
|
|
428
432
|
// check each touch point
|
|
429
433
|
for (const touch of e.touches)
|
|
430
434
|
{
|
|
431
|
-
const touchPos =
|
|
435
|
+
const touchPos = mouseEventToScreen(vec2(touch.clientX, touch.clientY));
|
|
432
436
|
if (touchPos.distance(stickCenter) < touchGamepadSize)
|
|
433
437
|
{
|
|
434
438
|
// virtual analog stick
|
package/src/engineRelease.js
CHANGED
package/src/engineTileLayer.js
CHANGED
|
@@ -238,10 +238,10 @@ class TileLayer extends EngineObject
|
|
|
238
238
|
!glOverlay && !this.isOverlay && glCopyToContext(mainContext);
|
|
239
239
|
|
|
240
240
|
// draw the entire cached level onto the canvas
|
|
241
|
-
|
|
241
|
+
let pos = worldToScreen(this.pos.add(vec2(0,this.size.y*this.scale.y)));
|
|
242
242
|
|
|
243
243
|
// fix canvas jitter in some browsers if position is not an integer
|
|
244
|
-
pos
|
|
244
|
+
pos = pos.floor();
|
|
245
245
|
|
|
246
246
|
(this.isOverlay ? overlayContext : mainContext).drawImage
|
|
247
247
|
(
|
package/shortExamples/base.html
DELETED
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html><head><meta charset=utf-8></head><body>
|
|
2
|
-
|
|
3
|
-
<!-- LittleJS Engine -->
|
|
4
|
-
<script src=../src/engineDebug.js?1116></script>
|
|
5
|
-
<script src=../src/engineUtilities.js?1116></script>
|
|
6
|
-
<script src=../src/engineSettings.js?1116></script>
|
|
7
|
-
<script src=../src/engineObject.js?1116></script>
|
|
8
|
-
<script src=../src/engineDraw.js?1116></script>
|
|
9
|
-
<script src=../src/engineInput.js?1116></script>
|
|
10
|
-
<script src=../src/engineAudio.js?1116></script>
|
|
11
|
-
<script src=../src/engineTileLayer.js?1116></script>
|
|
12
|
-
<script src=../src/engineParticles.js?1116></script>
|
|
13
|
-
<script src=../src/engineMedals.js?1116></script>
|
|
14
|
-
<script src=../src/engineWebGL.js?1116></script>
|
|
15
|
-
<script src=../src/engine.js?1116></script>
|
|
16
|
-
<script>
|
|
17
|
-
|
|
18
|
-
'use strict';
|
|
19
|
-
|
|
20
|
-
// use fixed size canvas for examples
|
|
21
|
-
canvasFixedSize = vec2(960, 540);
|
|
22
|
-
|
|
23
|
-
// fix bleeding from neighboring pixels
|
|
24
|
-
tileFixBleedScale = .5;
|
|
25
|
-
|
|
26
|
-
// allow improved scaling
|
|
27
|
-
canvasPixelated = false;
|
|
28
|
-
|
|
29
|
-
// disable watermark
|
|
30
|
-
showWatermark = false;
|
|
31
|
-
|
|
32
|
-
// these functions can be overridden for each example
|
|
33
|
-
function gameInit() {}
|
|
34
|
-
function gameUpdate() {}
|
|
35
|
-
function gameUpdatePost() {}
|
|
36
|
-
function gameRender() {}
|
|
37
|
-
function gameRenderPost() {}
|
|
38
|
-
|
|
39
|
-
</script>
|
package/shortExamples/index.html
DELETED
|
@@ -1,246 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html><head>
|
|
2
|
-
<title>LittleJS Short Examples</title>
|
|
3
|
-
<link rel=icon href=../examples/favicon.png>
|
|
4
|
-
<meta charset=utf-8>
|
|
5
|
-
<style>
|
|
6
|
-
html, body
|
|
7
|
-
{
|
|
8
|
-
height: 100%;
|
|
9
|
-
display: flex;
|
|
10
|
-
flex-direction: column;
|
|
11
|
-
}
|
|
12
|
-
#container1
|
|
13
|
-
{
|
|
14
|
-
height: 100%;
|
|
15
|
-
display: flex;
|
|
16
|
-
}
|
|
17
|
-
#container2
|
|
18
|
-
{
|
|
19
|
-
display: flex;
|
|
20
|
-
flex-direction: column;
|
|
21
|
-
}
|
|
22
|
-
#iframeContainer
|
|
23
|
-
{
|
|
24
|
-
border: 2px solid;
|
|
25
|
-
background: #000;
|
|
26
|
-
}
|
|
27
|
-
iframe
|
|
28
|
-
{
|
|
29
|
-
width: 100%;
|
|
30
|
-
height: 100%;
|
|
31
|
-
border: none;
|
|
32
|
-
}
|
|
33
|
-
#selectExample
|
|
34
|
-
{
|
|
35
|
-
flex-grow: 1;
|
|
36
|
-
}
|
|
37
|
-
#textareaCode
|
|
38
|
-
{
|
|
39
|
-
flex-grow: 1;
|
|
40
|
-
padding: 5px;
|
|
41
|
-
resize: none;
|
|
42
|
-
color: #fff;
|
|
43
|
-
background: #000;
|
|
44
|
-
}
|
|
45
|
-
#textareaError
|
|
46
|
-
{
|
|
47
|
-
flex-grow: .3;
|
|
48
|
-
padding: 5px;
|
|
49
|
-
resize: none;
|
|
50
|
-
display: none;
|
|
51
|
-
color:#f22;
|
|
52
|
-
background: #111;
|
|
53
|
-
}
|
|
54
|
-
#container3
|
|
55
|
-
{
|
|
56
|
-
width: 100%;
|
|
57
|
-
height: 100%;
|
|
58
|
-
display: flex;
|
|
59
|
-
flex-direction: column;
|
|
60
|
-
}
|
|
61
|
-
#titleInfo
|
|
62
|
-
{
|
|
63
|
-
margin: 5px;
|
|
64
|
-
text-align: center;
|
|
65
|
-
font-size: 50px;
|
|
66
|
-
}
|
|
67
|
-
#exampleName
|
|
68
|
-
{
|
|
69
|
-
margin: 0px;
|
|
70
|
-
text-align: center;
|
|
71
|
-
font-size: 30px;
|
|
72
|
-
}
|
|
73
|
-
select
|
|
74
|
-
{
|
|
75
|
-
color:#fff;
|
|
76
|
-
background-color: #111;
|
|
77
|
-
width:100%;
|
|
78
|
-
}
|
|
79
|
-
</style>
|
|
80
|
-
</head><body>
|
|
81
|
-
<div id=container1>
|
|
82
|
-
<div id=container3>
|
|
83
|
-
<p id=titleInfo>LittleJS Short Examples</p>
|
|
84
|
-
<p id=exampleName></p>
|
|
85
|
-
<textarea id=textareaCode oninput=codeInput() spellcheck=false></textarea>
|
|
86
|
-
<textarea id=textareaError readonly spellcheck=false></textarea>
|
|
87
|
-
<div><input type=checkbox id=checkboxLiveEdit checked>Live Edit</div>
|
|
88
|
-
</div>
|
|
89
|
-
<div id=container2>
|
|
90
|
-
<div id=iframeContainer></div>
|
|
91
|
-
<select id=selectExample autofocus onchange=setExample() size=2></select>
|
|
92
|
-
</div>
|
|
93
|
-
</div>
|
|
94
|
-
<script>
|
|
95
|
-
'use strict';
|
|
96
|
-
|
|
97
|
-
class ExampleInfo
|
|
98
|
-
{
|
|
99
|
-
constructor(name, filename, description)
|
|
100
|
-
{
|
|
101
|
-
this.name = name;
|
|
102
|
-
this.filename = filename;
|
|
103
|
-
this.description = description;
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
const exampleList =
|
|
108
|
-
[
|
|
109
|
-
new ExampleInfo('Hello World', 'helloWorld.js', 'Simplest example'),
|
|
110
|
-
new ExampleInfo('Shapes', 'shapes.js', 'How to draw geometric shapes'),
|
|
111
|
-
new ExampleInfo('Colors', 'colors.js', 'How to use the color object'),
|
|
112
|
-
new ExampleInfo('Blending', 'blending.js', 'Shows different blending modes'),
|
|
113
|
-
new ExampleInfo('Timers', 'timers.js', 'How to use the timer object'),
|
|
114
|
-
new ExampleInfo('Texture', 'texture.js', 'How to display a full texture'),
|
|
115
|
-
new ExampleInfo('Particles', 'particles.js', 'How to use the particle system'),
|
|
116
|
-
new ExampleInfo('Play Sound', 'playSound.js', 'How to play sounds with zzfx'),
|
|
117
|
-
new ExampleInfo('System Font', 'systemFont.js', 'Demo of the included system font'),
|
|
118
|
-
new ExampleInfo('Sprite Atlas', 'spriteAtlas.js', 'How to set up a simple sprite atlas'),
|
|
119
|
-
new ExampleInfo('Animation', 'animation.js', 'How to animate sprites'),
|
|
120
|
-
new ExampleInfo('Clock', 'clock.js', 'A simple clock showing the time'),
|
|
121
|
-
new ExampleInfo('Tile Layer', 'tileLayer.js', 'How to use a tile layer for collision and rendering'),
|
|
122
|
-
new ExampleInfo('Pong Game', 'pong.js', 'A simple pong game using LittleJS physics'),
|
|
123
|
-
|
|
124
|
-
// add more examples here!
|
|
125
|
-
];
|
|
126
|
-
|
|
127
|
-
///////////////////////////////////////////////////////////////////////////////
|
|
128
|
-
|
|
129
|
-
let iframeExample, inputTimeout;
|
|
130
|
-
|
|
131
|
-
// load the examples into the list
|
|
132
|
-
for (const example of exampleList)
|
|
133
|
-
{
|
|
134
|
-
const text = example.name + (example.description?' - ' + example.description : '');
|
|
135
|
-
selectExample.add(new Option(text));
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
// select first option
|
|
139
|
-
selectExample.selectedIndex = 0;
|
|
140
|
-
setExample();
|
|
141
|
-
|
|
142
|
-
onresize = () =>
|
|
143
|
-
{
|
|
144
|
-
// resize iframe to fit half the window
|
|
145
|
-
const aspect = 1920 / 1080;
|
|
146
|
-
let w = innerWidth / 2 | 0;
|
|
147
|
-
let h = w / aspect | 0;
|
|
148
|
-
iframeContainer.style.width = w + 'px';
|
|
149
|
-
iframeContainer.style.height = h + 'px';
|
|
150
|
-
}
|
|
151
|
-
onresize();
|
|
152
|
-
|
|
153
|
-
///////////////////////////////////////////////////////////////////////////////
|
|
154
|
-
|
|
155
|
-
function setExample()
|
|
156
|
-
{
|
|
157
|
-
const example = exampleList[selectExample.selectedIndex];
|
|
158
|
-
exampleName.innerText = example.name + ' - ' + example.filename +
|
|
159
|
-
(example.description ? '\n' + example.description : '');
|
|
160
|
-
loadFile(example.filename);
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
function codeInput()
|
|
164
|
-
{
|
|
165
|
-
if (!checkboxLiveEdit.checked)
|
|
166
|
-
return;
|
|
167
|
-
|
|
168
|
-
// debounce input
|
|
169
|
-
clearTimeout(inputTimeout);
|
|
170
|
-
inputTimeout = setTimeout(() => setCode(textareaCode.value), 500);
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
function loadFile(filename)
|
|
174
|
-
{
|
|
175
|
-
fetch('code/' + filename)
|
|
176
|
-
.then(response => {
|
|
177
|
-
if (!response.ok)
|
|
178
|
-
throw new Error('Could not load file: '+filename);
|
|
179
|
-
return response.text();
|
|
180
|
-
})
|
|
181
|
-
.then(text => setCode(textareaCode.value = text))
|
|
182
|
-
.catch(error => setErrorMessage(error.message));
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
function setCode(code)
|
|
186
|
-
{
|
|
187
|
-
clearTimeout(inputTimeout);
|
|
188
|
-
if (iframeExample)
|
|
189
|
-
iframeContainer.removeChild(iframeExample);
|
|
190
|
-
|
|
191
|
-
setErrorMessage('');
|
|
192
|
-
iframeExample = document.createElement('iframe');
|
|
193
|
-
iframeContainer.appendChild(iframeExample);
|
|
194
|
-
iframeExample.onload = () =>
|
|
195
|
-
{
|
|
196
|
-
const iframeContent = iframeExample.contentWindow;
|
|
197
|
-
const iframeDocument = iframeContent.document;
|
|
198
|
-
|
|
199
|
-
// create error event listeners
|
|
200
|
-
iframeContent.onerror = (message, source, lineno, colno, error) =>
|
|
201
|
-
{
|
|
202
|
-
let text = message;
|
|
203
|
-
if (lineno)
|
|
204
|
-
text += ` (Line:${lineno}, Column:${colno})`
|
|
205
|
-
if (error && error.stack)
|
|
206
|
-
text += `\n\n` + error.stack;
|
|
207
|
-
setErrorMessage(text);
|
|
208
|
-
}
|
|
209
|
-
iframeContent.onunhandledrejection = (event) =>
|
|
210
|
-
{
|
|
211
|
-
let text = event.reason;
|
|
212
|
-
if (event.reason.stack)
|
|
213
|
-
text += `\n\n` + event.reason.stack;
|
|
214
|
-
setErrorMessage(text);
|
|
215
|
-
};
|
|
216
|
-
const originalAssert = iframeContent.console.assert;
|
|
217
|
-
iframeContent.console.assert = function (condition, output)
|
|
218
|
-
{
|
|
219
|
-
if (!condition)
|
|
220
|
-
setErrorMessage('Assertion failed: ' + (output || ''));
|
|
221
|
-
originalAssert.apply(this, arguments);
|
|
222
|
-
};
|
|
223
|
-
|
|
224
|
-
// create a script element that overrides the default functions
|
|
225
|
-
const overrideScript = iframeDocument.createElement('script');
|
|
226
|
-
iframeDocument.body.appendChild(overrideScript);
|
|
227
|
-
overrideScript.text = code;
|
|
228
|
-
|
|
229
|
-
if (textareaError.style.display == 'block')
|
|
230
|
-
return; // stop if script error
|
|
231
|
-
|
|
232
|
-
// start LittleJS engine
|
|
233
|
-
iframeContent.engineInit(iframeContent.gameInit, iframeContent.gameUpdate, iframeContent.gameUpdatePost, iframeContent.gameRender, iframeContent.gameRenderPost, ['tiles.png?1']);
|
|
234
|
-
}
|
|
235
|
-
iframeExample.src = 'base.html';
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
function setErrorMessage(message)
|
|
239
|
-
{
|
|
240
|
-
textareaError.value = message
|
|
241
|
-
textareaError.style.display = message ? 'block' : 'none';
|
|
242
|
-
}
|
|
243
|
-
|
|
244
|
-
</script>
|
|
245
|
-
</body>
|
|
246
|
-
</html>
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|