littlejsengine 1.18.4 → 1.18.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.
Files changed (177) hide show
  1. package/COPYRIGHT.txt +38 -0
  2. package/FAQ.md +633 -0
  3. package/README.md +19 -1
  4. package/dist/littlejs.d.ts +349 -54
  5. package/dist/littlejs.esm.js +1469 -448
  6. package/dist/littlejs.esm.min.js +1 -1
  7. package/dist/littlejs.js +1438 -436
  8. package/dist/littlejs.min.js +1 -1
  9. package/dist/littlejs.release.js +1438 -436
  10. package/package.json +8 -1
  11. package/plugins/box2d.js +32 -7
  12. package/{src/engineMedals.js → plugins/medalSystem.js} +248 -196
  13. package/plugins/pathFinder.js +758 -0
  14. package/plugins/pluginExport.js +19 -0
  15. package/plugins/tween.js +1 -1
  16. package/plugins/tweenSystem.js +509 -0
  17. package/plugins/uiSystem.js +150 -11
  18. package/src/engine.js +2 -141
  19. package/src/engineAudio.js +8 -5
  20. package/src/engineBuild.mjs +4 -2
  21. package/src/engineDebug.js +1 -1
  22. package/src/engineDraw.js +21 -3
  23. package/src/engineExport.js +12 -12
  24. package/src/engineInput.js +1 -1
  25. package/src/engineLogo.js +146 -0
  26. package/src/engineMath.js +10 -3
  27. package/src/engineObject.js +11 -5
  28. package/src/engineParticles.js +6 -3
  29. package/src/engineRelease.js +1 -1
  30. package/src/engineSettings.js +0 -47
  31. package/src/engineUtilities.js +7 -2
  32. package/src/engineWebGL.js +34 -7
  33. package/src/jsconfig.json +3 -1
  34. package/.github/workflows/test.yml +0 -17
  35. package/AI.md +0 -173
  36. package/CLAUDE.md +0 -1
  37. package/examples/box2d/game.js +0 -192
  38. package/examples/box2d/gameObjects.js +0 -564
  39. package/examples/box2d/index.html +0 -9
  40. package/examples/box2d/scenes.js +0 -194
  41. package/examples/box2d/tiles.png +0 -0
  42. package/examples/breakout/game.js +0 -175
  43. package/examples/breakout/gameObjects.js +0 -147
  44. package/examples/breakout/index.html +0 -8
  45. package/examples/breakout/tiles.png +0 -0
  46. package/examples/breakoutTutorial/README.md +0 -521
  47. package/examples/breakoutTutorial/game.js +0 -191
  48. package/examples/breakoutTutorial/images/1.png +0 -0
  49. package/examples/breakoutTutorial/images/10.png +0 -0
  50. package/examples/breakoutTutorial/images/11.png +0 -0
  51. package/examples/breakoutTutorial/images/2.png +0 -0
  52. package/examples/breakoutTutorial/images/3.png +0 -0
  53. package/examples/breakoutTutorial/images/4.png +0 -0
  54. package/examples/breakoutTutorial/images/5.png +0 -0
  55. package/examples/breakoutTutorial/images/6.png +0 -0
  56. package/examples/breakoutTutorial/images/7.png +0 -0
  57. package/examples/breakoutTutorial/images/8.png +0 -0
  58. package/examples/breakoutTutorial/images/9.png +0 -0
  59. package/examples/breakoutTutorial/index.html +0 -8
  60. package/examples/electron/build.mjs +0 -127
  61. package/examples/electron/electron.js +0 -35
  62. package/examples/electron/game.js +0 -54
  63. package/examples/electron/index.html +0 -13
  64. package/examples/electron/package.json +0 -5
  65. package/examples/electron/tiles.png +0 -0
  66. package/examples/empty/game.js +0 -51
  67. package/examples/empty/index.html +0 -5
  68. package/examples/empty/tiles.png +0 -0
  69. package/examples/favicon.png +0 -0
  70. package/examples/games.jpg +0 -0
  71. package/examples/htmlMenu/game.js +0 -82
  72. package/examples/htmlMenu/index.html +0 -45
  73. package/examples/htmlMenu/tiles.png +0 -0
  74. package/examples/index.html +0 -62
  75. package/examples/logo.png +0 -0
  76. package/examples/logo2.png +0 -0
  77. package/examples/module/build.mjs +0 -124
  78. package/examples/module/game.js +0 -132
  79. package/examples/module/index.html +0 -10
  80. package/examples/module/tiles.png +0 -0
  81. package/examples/particles/index.html +0 -426
  82. package/examples/particles/tiles.png +0 -0
  83. package/examples/platformer/data/gameLevelData.tmx +0 -143
  84. package/examples/platformer/data/gameLevelData.tsx +0 -4
  85. package/examples/platformer/game.js +0 -147
  86. package/examples/platformer/gameCharacter.js +0 -309
  87. package/examples/platformer/gameEffects.js +0 -278
  88. package/examples/platformer/gameLevel.js +0 -205
  89. package/examples/platformer/gameLevelData.json +0 -171
  90. package/examples/platformer/gameObjects.js +0 -378
  91. package/examples/platformer/gamePlayer.js +0 -35
  92. package/examples/platformer/index.html +0 -9
  93. package/examples/platformer/tiles.png +0 -0
  94. package/examples/platformer/tilesLevel.png +0 -0
  95. package/examples/puzzle/game.js +0 -331
  96. package/examples/puzzle/index.html +0 -8
  97. package/examples/puzzle/tiles.png +0 -0
  98. package/examples/screenshot.jpg +0 -0
  99. package/examples/shorts/animation.js +0 -18
  100. package/examples/shorts/base.html +0 -54
  101. package/examples/shorts/blending.js +0 -14
  102. package/examples/shorts/box2d.js +0 -51
  103. package/examples/shorts/box2dCar.js +0 -59
  104. package/examples/shorts/box2dPool.js +0 -107
  105. package/examples/shorts/box2dTileLayer.js +0 -48
  106. package/examples/shorts/cameraDrag.js +0 -22
  107. package/examples/shorts/clock.js +0 -21
  108. package/examples/shorts/colors.js +0 -25
  109. package/examples/shorts/debugDraw.js +0 -37
  110. package/examples/shorts/empty.js +0 -30
  111. package/examples/shorts/flappyGame.js +0 -55
  112. package/examples/shorts/fontImage.js +0 -17
  113. package/examples/shorts/fps.js +0 -90
  114. package/examples/shorts/helloWorld.js +0 -11
  115. package/examples/shorts/hillGlideGame.js +0 -63
  116. package/examples/shorts/input.js +0 -64
  117. package/examples/shorts/landerGame.js +0 -57
  118. package/examples/shorts/maze.js +0 -48
  119. package/examples/shorts/medals.js +0 -51
  120. package/examples/shorts/music.js +0 -78
  121. package/examples/shorts/musicPlayer.js +0 -137
  122. package/examples/shorts/nineSlice.js +0 -40
  123. package/examples/shorts/parallax.js +0 -72
  124. package/examples/shorts/particles.js +0 -28
  125. package/examples/shorts/piano.js +0 -44
  126. package/examples/shorts/platformer.js +0 -45
  127. package/examples/shorts/pongGame.js +0 -41
  128. package/examples/shorts/postProcess.js +0 -62
  129. package/examples/shorts/sequencer.js +0 -124
  130. package/examples/shorts/shader.js +0 -29
  131. package/examples/shorts/shapes.js +0 -21
  132. package/examples/shorts/slidingPuzzle.js +0 -52
  133. package/examples/shorts/song.mp3 +0 -0
  134. package/examples/shorts/sound.js +0 -36
  135. package/examples/shorts/spaceGame.js +0 -58
  136. package/examples/shorts/spriteAtlas.js +0 -31
  137. package/examples/shorts/starfield.js +0 -15
  138. package/examples/shorts/texture.js +0 -16
  139. package/examples/shorts/textureWrapped.js +0 -12
  140. package/examples/shorts/tileLayer.js +0 -48
  141. package/examples/shorts/tileRaycast.js +0 -39
  142. package/examples/shorts/tiles.png +0 -0
  143. package/examples/shorts/tiltedView.js +0 -63
  144. package/examples/shorts/timers.js +0 -53
  145. package/examples/shorts/topDown.js +0 -38
  146. package/examples/shorts/tween.js +0 -24
  147. package/examples/shorts/uiSystem.js +0 -61
  148. package/examples/shorts/video.webm +0 -0
  149. package/examples/shorts/videoPlayer.js +0 -34
  150. package/examples/shorts.js +0 -743
  151. package/examples/starter/build.bat +0 -7
  152. package/examples/starter/build.mjs +0 -126
  153. package/examples/starter/game.js +0 -137
  154. package/examples/starter/index.html +0 -35
  155. package/examples/starter/tiles.png +0 -0
  156. package/examples/stress/index.html +0 -173
  157. package/examples/style.css +0 -150
  158. package/examples/tweenSystem/game.js +0 -171
  159. package/examples/tweenSystem/index.html +0 -10
  160. package/examples/tweenSystem/tiles.png +0 -0
  161. package/examples/typescript/build.mjs +0 -60
  162. package/examples/typescript/game.js +0 -100
  163. package/examples/typescript/game.ts +0 -132
  164. package/examples/typescript/index.html +0 -10
  165. package/examples/typescript/tiles.png +0 -0
  166. package/examples/typescript/tsconfig.json +0 -17
  167. package/examples/uiSystem/game.js +0 -139
  168. package/examples/uiSystem/index.html +0 -10
  169. package/examples/uiSystem/tiles.png +0 -0
  170. package/jsconfig.json +0 -12
  171. package/plugins/desktop.ini +0 -2
  172. package/reference.md +0 -448
  173. package/test/math.test.mjs +0 -774
  174. package/test/setup.mjs +0 -22
  175. package/test/smoke.test.mjs +0 -274
  176. package/test/tween.test.mjs +0 -576
  177. package/test/util.test.mjs +0 -80
package/examples/starter/build.bat DELETED
@@ -1,7 +0,0 @@
1
- rem LittleJS Build Script
2
- call node build.mjs
3
- if %errorlevel% neq 0 (
4
- echo Build failed with error level %errorlevel%
5
- pause
6
- exit /b %errorlevel%
7
- )
package/examples/starter/build.mjs DELETED
@@ -1,126 +0,0 @@
1
- /**
2
- * LittleJS Build System
3
- */
4
-
5
- 'use strict';
6
-
7
- import { fileURLToPath } from 'node:url';
8
- import { dirname, join } from 'node:path';
9
- import fs from 'node:fs';
10
- import { execSync } from 'node:child_process';
11
-
12
- const __dirname = dirname(fileURLToPath(import.meta.url));
13
-
14
- const PROGRAM_TITLE = 'Little JS Starter Project';
15
- const PROGRAM_NAME = 'game';
16
- const BUILD_FOLDER = join(__dirname, 'build');
17
- const USE_ROADROLLER = false; // enable for extra compression
18
- const sourceFiles =
19
- [
20
- join(__dirname, '../../dist/littlejs.release.js'),
21
- join(__dirname, 'game.js'),
22
- // add your game's files here
23
- ];
24
- const dataFiles =
25
- [
26
- 'tiles.png',
27
- // add your game's data files here
28
- ];
29
-
30
- console.log(`Building ${PROGRAM_NAME}...`);
31
- const startTime = Date.now();
32
-
33
- // rebuild engine
34
- //execSync(`npm run build`, { stdio: 'inherit' });
35
-
36
- // remove old files and setup build folder
37
- fs.rmSync(BUILD_FOLDER, { recursive: true, force: true });
38
- fs.rmSync(join(__dirname, `${PROGRAM_NAME}.zip`), { force: true });
39
- fs.mkdirSync(BUILD_FOLDER);
40
-
41
- // copy data files
42
- for (const file of dataFiles)
43
- fs.copyFileSync(join(__dirname, file), join(BUILD_FOLDER, file));
44
-
45
- Build
46
- (
47
- join(BUILD_FOLDER, 'index.js'),
48
- sourceFiles,
49
- USE_ROADROLLER ?
50
- [closureCompilerStep, uglifyBuildStep, roadrollerBuildStep, htmlBuildStep, zipBuildStep] :
51
- [closureCompilerStep, uglifyBuildStep, htmlBuildStep, zipBuildStep]
52
- );
53
-
54
- console.log('');
55
- console.log(`Build Completed in ${((Date.now() - startTime)/1e3).toFixed(2)} seconds!`);
56
-
57
- ///////////////////////////////////////////////////////////////////////////////
58
-
59
- // A single build with its own source files, build steps, and output file
60
- // - each build step is a callback that accepts a single filename
61
- function Build(outputFile, files=[], buildSteps=[])
62
- {
63
- // copy files into a buffer
64
- let buffer = '';
65
- for (const file of files)
66
- buffer += fs.readFileSync(file) + '\n';
67
-
68
- // output file
69
- fs.writeFileSync(outputFile, buffer, {flag: 'w+'});
70
-
71
- // execute build steps in order
72
- for (const buildStep of buildSteps)
73
- buildStep(outputFile);
74
- }
75
-
76
- function closureCompilerStep(filename)
77
- {
78
- console.log('Running closure compiler...');
79
-
80
- // use closer compiler to minify the code
81
- const filenameTemp = filename + '.tmp';
82
- fs.copyFileSync(filename, filenameTemp);
83
- execSync(`npx google-closure-compiler --js=${filenameTemp} --js_output_file=${filename} --compilation_level=ADVANCED --warning_level=VERBOSE --jscomp_off=* --assume_function_wrapper`, {stdio: 'inherit'});
84
- fs.rmSync(filenameTemp);
85
- }
86
-
87
- function uglifyBuildStep(filename)
88
- {
89
- console.log('Running uglify...');
90
- execSync(`npx uglifyjs ${filename} -c -m -o ${filename}`, {stdio: 'inherit'});
91
- }
92
-
93
- function roadrollerBuildStep(filename)
94
- {
95
- console.log('Running roadroller...');
96
- execSync(`npx roadroller ${filename} -o ${filename}`, {stdio: 'inherit'});
97
- }
98
-
99
- function htmlBuildStep(filename)
100
- {
101
- console.log('Building html...');
102
-
103
- // create html file
104
- let buffer = ''
105
- buffer += '<!DOCTYPE html>';
106
- buffer += '<head>';
107
- buffer += `<title>${PROGRAM_TITLE}</title>`;
108
- buffer += '<meta charset=utf-8>';
109
- buffer += '</head>';
110
- buffer += '<body>';
111
- buffer += '<script>';
112
- buffer += fs.readFileSync(filename) + '\n';
113
- buffer += '</script>';
114
-
115
- // output html file
116
- fs.writeFileSync(join(BUILD_FOLDER, 'index.html'), buffer, {flag: 'w+'});
117
- }
118
-
119
- function zipBuildStep(filename)
120
- {
121
- console.log('Zipping...');
122
- const sources = ['index.html', ...dataFiles];
123
- const sourceList = sources.join(' ');
124
- execSync(`npx bestzip ../${PROGRAM_NAME}.zip ${sourceList}`, {cwd:BUILD_FOLDER, stdio: 'inherit'});
125
- console.log(`Size of ${PROGRAM_NAME}.zip: ${fs.statSync(join(__dirname, `${PROGRAM_NAME}.zip`)).size} bytes`);
126
- }
package/examples/starter/game.js DELETED
@@ -1,137 +0,0 @@
1
- /*
2
- Little JS Starter Project
3
- - A simple starter project for LittleJS
4
- - Demos all the main engine features
5
- - Builds to a zip file
6
- */
7
-
8
- 'use strict';
9
-
10
- // show the LittleJS splash screen
11
- setShowSplashScreen(true);
12
-
13
- // fix texture bleeding by shrinking tile slightly
14
- setTileDefaultBleed(.5);
15
-
16
- // sound effects
17
- const sound_click = new Sound([1,.5]);
18
-
19
- // medals
20
- const medal_example = new Medal(0, 'Example Medal', 'Welcome to LittleJS!');
21
- medalsInit('Hello World');
22
-
23
- // game variables
24
- let particleEmitter;
25
-
26
- ///////////////////////////////////////////////////////////////////////////////
27
- function gameInit()
28
- {
29
- // create tile collision and visible tile layer
30
- const pos = vec2();
31
- const tileLayer = new TileCollisionLayer(pos, vec2(32,16));
32
-
33
- // get level data from the tiles image
34
- const tileImage = textureInfos[0].image;
35
- mainContext.drawImage(tileImage,0,0);
36
- const imageData = mainContext.getImageData(0,0,tileImage.width,tileImage.height).data;
37
- for (pos.x = tileLayer.size.x; pos.x--;)
38
- for (pos.y = tileLayer.size.y; pos.y--;)
39
- {
40
- // check if this pixel is set
41
- const i = pos.x + tileImage.width*(15 + tileLayer.size.y - pos.y);
42
- if (!imageData[4*i])
43
- continue;
44
-
45
- // set tile data
46
- const tileIndex = 1;
47
- const direction = randInt(4)
48
- const mirror = randBool();
49
- const color = randColor();
50
- const data = new TileLayerData(tileIndex, direction, mirror, color);
51
- tileLayer.setData(pos, data);
52
- tileLayer.setCollisionData(pos);
53
- }
54
-
55
- // draw tile layer with new data
56
- tileLayer.redraw();
57
-
58
- // setup camera
59
- setCameraPos(vec2(16,8));
60
- setCameraScale(32);
61
-
62
- // enable gravity
63
- setGravity(vec2(0,-.01));
64
-
65
- // create particle emitter
66
- particleEmitter = new ParticleEmitter(
67
- vec2(16,9), 0, // emitPos, emitAngle
68
- 0, 0, 500, 3.14, // emitSize, emitTime, rate, cone
69
- tile(0, 16), // tileIndex, tileSize
70
- hsl(1,1,1), hsl(0,0,0), // colorStartA, colorStartB
71
- hsl(0,0,0,0), hsl(0,0,0,0), // colorEndA, colorEndB
72
- 1, .2, .2, .1, .05, // time, sizeStart, sizeEnd, speed, angleSpeed
73
- .99, 1, 1, 3.14, // damping, angleDamping, gravityScale, cone
74
- .05, .5, true, true // fadeRate, randomness, collide, additive
75
- );
76
- particleEmitter.restitution = .3; // bounce when it collides
77
- particleEmitter.trailScale = 2; // stretch as it moves
78
- particleEmitter.velocityInheritance = .3; // inherit emitter velocity
79
- }
80
-
81
- ///////////////////////////////////////////////////////////////////////////////
82
- function gameUpdate()
83
- {
84
- if (mouseWasPressed(0))
85
- {
86
- // play sound when mouse is pressed
87
- sound_click.play(mousePos);
88
-
89
- // change particle color and set to fade out
90
- particleEmitter.colorStartA = randColor();
91
- particleEmitter.colorStartB = randColor();
92
- particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1,0);
93
- particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1,0);
94
-
95
- // unlock medals
96
- medal_example.unlock();
97
- }
98
-
99
- if (mouseWheel)
100
- {
101
- // zoom in and out with mouse wheel
102
- cameraScale -= sign(mouseWheel)*cameraScale/5;
103
- cameraScale = clamp(cameraScale, 10, 300);
104
- }
105
-
106
- // move particles to mouse location if on screen
107
- if (mousePosScreen.x)
108
- particleEmitter.pos = mousePos;
109
- }
110
-
111
- ///////////////////////////////////////////////////////////////////////////////
112
- function gameUpdatePost()
113
- {
114
-
115
- }
116
-
117
- ///////////////////////////////////////////////////////////////////////////////
118
- function gameRender()
119
- {
120
- // draw a grey square in the background
121
- drawRect(vec2(16,8), vec2(20,14), hsl(0,0,.6));
122
-
123
- // draw the logo as a tile
124
- drawTile(vec2(21,5), vec2(4.5), tile(3,128));
125
- }
126
-
127
- ///////////////////////////////////////////////////////////////////////////////
128
- function gameRenderPost()
129
- {
130
- drawTextScreen('LittleJS Demo',
131
- vec2(mainCanvasSize.x/2, 70), 80, // position, size
132
- hsl(0,0,1), 6, hsl(0,0,0)); // color, outline size and color
133
- }
134
-
135
- ///////////////////////////////////////////////////////////////////////////////
136
- // Startup LittleJS Engine
137
- engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
package/examples/starter/index.html DELETED
@@ -1,35 +0,0 @@
1
- <!DOCTYPE html><head>
2
- <title>LittleJS Starter Project</title>
3
- <meta charset=utf-8>
4
- <meta name=apple-mobile-web-app-capable content=yes>
5
- <meta name=mobile-web-app-capable content=yes>
6
- <link rel=icon type=image/png href=../favicon.png>
7
- </head><body>
8
-
9
- <!-- LittleJS Engine -->
10
- <script src=../../dist/littlejs.js?1.18.4></script>
11
-
12
- <!-- LittleJS Engine Source
13
- <script src=../../src/engine.js></script>
14
- <script src=../../src/engineDebug.js></script>
15
- <script src=../../src/engineMath.js></script>
16
- <script src=../../src/engineUtilities.js></script>
17
- <script src=../../src/engineSettings.js></script>
18
- <script src=../../src/engineObject.js></script>
19
- <script src=../../src/engineDraw.js></script>
20
- <script src=../../src/engineInput.js></script>
21
- <script src=../../src/engineAudio.js></script>
22
- <script src=../../src/engineTileLayer.js></script>
23
- <script src=../../src/engineParticles.js></script>
24
- <script src=../../src/engineMedals.js></script>
25
- <script src=../../src/engineWebGL.js></script>
26
- <script src=../../plugins/box2d.js></script>
27
- <script src=../../plugins/box2d.wasm.js></script>
28
- <script src=../../plugins/drawUtilities.js></script>
29
- <script src=../../plugins/postProcess.js></script>
30
- <script src=../../plugins/uiSystem.js></script>
31
- <script src=../../plugins/zzfxm.js></script>
32
- -->
33
-
34
- <!-- Add your game scripts here -->
35
- <script src=game.js?1.18.4></script>
package/examples/starter/tiles.png DELETED
Binary file
package/examples/stress/index.html DELETED
@@ -1,173 +0,0 @@
1
- <!DOCTYPE html><head>
2
- <title>LittleJS Stress Test</title>
3
- <meta charset=utf-8>
4
- <meta name=apple-mobile-web-app-capable content=yes>
5
- <meta name=mobile-web-app-capable content=yes>
6
- <link rel=icon type=image/png href=../favicon.png>
7
- </head><body>
8
- <script type=module>
9
-
10
- /*
11
- LittleJS Stress Test
12
- - Render over 100,000 sprites at 60 fps in Chrome
13
- - Also plays music in the background with zzfxm
14
- - All code and the image is contained in this html file
15
- */
16
-
17
- 'use strict';
18
-
19
- // import LittleJS module
20
- import * as LJS from '../../dist/littlejs.esm.min.js';
21
- const {vec2, rgb} = LJS;
22
-
23
- // keep our own list of simple sprites and track fps
24
- let sprites, tileLayer, timeMS, fpsDisplay, statsDisplay, spriteColor, spriteAdditiveColor, musicInstance, hasClicked;
25
-
26
- ///////////////////////////////////////////////////////////////////////////////
27
-
28
- class TestObject extends LJS.EngineObject
29
- {
30
- constructor(pos)
31
- {
32
- super(pos, vec2(1), LJS.tile(0), 0, spriteColor);
33
- this.additiveColor = spriteAdditiveColor;
34
- this.setCollision();
35
- }
36
- }
37
-
38
- ///////////////////////////////////////////////////////////////////////////////
39
- function gameInit()
40
- {
41
- // create tile collision ground for objects to collide with
42
- tileLayer = new LJS.TileCollisionLayer(vec2(), vec2(99,55));
43
- for (let x = tileLayer.size.x; x--;)
44
- tileLayer.setCollisionData(vec2(x,0));
45
-
46
- // set things up
47
- LJS.setCanvasFixedSize(vec2(1920, 1080)); // 1080p
48
- LJS.setCameraScale(20);
49
- LJS.setCameraPos(tileLayer.size.scale(.5));
50
- LJS.setCanvasClearColor(rgb(.4,.4,.4));
51
- LJS.setGravity(vec2(0,-.005));
52
- sprites = [];
53
-
54
- // display stats using a div so it doesn't use canvas rendering
55
- document.body.appendChild(statsDisplay = document.createElement('div'));
56
- statsDisplay.style = 'position:absolute;width:100%;font-size:3em;text-align:center;font-family:arial;user-select:none;';
57
- }
58
-
59
- ///////////////////////////////////////////////////////////////////////////////
60
- function gameUpdate()
61
- {
62
- // mouse click = change color
63
- if (LJS.mouseWasPressed(0) || LJS.mouseIsDown(2))
64
- {
65
- hasClicked = true;
66
- spriteColor = LJS.randColor();
67
- spriteAdditiveColor = LJS.randColor(rgb(.5,.5,.5, 0), rgb(0,0,0,0));
68
- }
69
-
70
- // right click = drop test object
71
- if (LJS.mouseIsDown(2))
72
- new TestObject(LJS.mousePos.add(LJS.randInCircle()));
73
-
74
- // mouse hold = add objects
75
- if (LJS.mouseIsDown(0))
76
- {
77
- spriteColor = spriteColor.mutate();
78
- spriteAdditiveColor = spriteAdditiveColor.mutate();
79
- for (let i=100;i--;)
80
- sprites.push({
81
- pos:LJS.mousePos.add(LJS.randInCircle(2)),
82
- angle:LJS.rand(2*LJS.PI),
83
- velocity:LJS.randInCircle(.2),
84
- color:spriteColor.rgbaInt(),
85
- additiveColor:spriteAdditiveColor.rgbaInt()
86
- });
87
- }
88
-
89
- // mouse wheel = zoom
90
- LJS.setCameraScale(LJS.clamp(LJS.cameraScale*(1-LJS.mouseWheel/10), 1, 1e3));
91
-
92
- // mouse click = play music
93
- if (hasClicked)
94
- {
95
- if (!musicInstance)
96
- musicInstance = music.play();
97
- else if (!musicInstance.isPlaying())
98
- musicInstance.start();
99
- }
100
- }
101
-
102
- ///////////////////////////////////////////////////////////////////////////////
103
- function gameUpdatePost()
104
- {
105
- }
106
-
107
- ///////////////////////////////////////////////////////////////////////////////
108
- function gameRender()
109
- {
110
- // track fps and update stats
111
- const frameTimeMS = Date.now();
112
- fpsDisplay = LJS.lerp(fpsDisplay||0, 1e3/(frameTimeMS - timeMS||1), .05);
113
- timeMS = frameTimeMS;
114
-
115
- // show stats
116
- const spriteCount = sprites.length
117
- const objectCount = LJS.engineObjects.length;
118
- statsDisplay.innerText =
119
- spriteCount + objectCount ?
120
- spriteCount + ' Sprites / '
121
- + (objectCount ? objectCount + ' Objects / ' : '')
122
- + fpsDisplay.toFixed(1) + ' FPS'
123
- : 'LittleJS Stress Test\nLeft Click = Add Sprites\nRight Click = Add Objects';
124
-
125
- // position stats
126
- const canvasRect = LJS.mainCanvas.getBoundingClientRect();
127
- statsDisplay.style.top = canvasRect.top+'px';
128
- statsDisplay.style.fontSize = canvasRect.width*.04+'px';
129
-
130
- // update sprites
131
- for (const sprite of sprites)
132
- {
133
- // apply velocity and gravity
134
- sprite.pos.x += sprite.velocity.x;
135
- sprite.pos.y += sprite.velocity.y += LJS.gravity.y;
136
-
137
- // bounce
138
- if (sprite.pos.y < 0)
139
- {
140
- sprite.pos.y = 0;
141
- sprite.velocity.y = LJS.rand(.3,.8);
142
- }
143
- if (sprite.pos.x < 0)
144
- sprite.pos.x = 0, sprite.velocity.x *= -1;
145
- if (sprite.pos.x > tileLayer.size.x)
146
- sprite.pos.x = tileLayer.size.x, sprite.velocity.x *= -1;
147
-
148
- // rotate sprite
149
- sprite.angle += sprite.velocity.x > 0 ? .02 : -.02;
150
-
151
- // draw the sprite directly using glDraw for extra speed
152
- LJS.glDraw(sprite.pos.x, sprite.pos.y, 1, 1, sprite.angle, 0, 0, 1, 1,
153
- sprite.color, sprite.additiveColor);
154
- }
155
- }
156
-
157
- ///////////////////////////////////////////////////////////////////////////////
158
- function gameRenderPost()
159
- {
160
- }
161
-
162
- ///////////////////////////////////////////////////////////////////////////////
163
- // load tiles image via url data
164
- const tilesImageData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAYklEQVR42u2TQQqAQAwDPfg6P5SX+b7VgkpDhNH7DuTSNGFZ6LJv66OTUWoz9M28sCXyw2xLpjc/CiQNQpIVFGaKZa+I538JZ4EDYSgAsCB+Pma5OwtgGWd2ZUCE4xr/6M4d3aFsj7DwoPQAAAAASUVORK5CYII=';
165
-
166
- ///////////////////////////////////////////////////////////////////////////////
167
- // Startup LittleJS Engine
168
- LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, [tilesImageData]);
169
-
170
- ///////////////////////////////////////////////////////////////////////////////
171
- // music - Depp Loop
172
- const music = new LJS.ZzFXMusic([[[.6,0,77,,,1,1,.5,,,,,.1,,,.05,,.5,.4,.2],[,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]]);
173
- </script>
package/examples/style.css DELETED
@@ -1,150 +0,0 @@
1
- html, body
2
- {
3
- height: 100%;
4
- display: flex;
5
- flex-direction: column;
6
- }
7
- #container1
8
- {
9
- height: 100%;
10
- display: flex;
11
- gap: 4px;
12
- }
13
- #container2
14
- {
15
- display: flex;
16
- flex-direction: column;
17
- gap: 4px;
18
- }
19
- #iframeContainer
20
- {
21
- border: 2px solid;
22
- background: #000;
23
- }
24
- iframe
25
- {
26
- width: 100%;
27
- height: 100%;
28
- border: none;
29
- }
30
- #selectExample
31
- {
32
- flex-grow: 1;
33
- min-height: 100px;
34
- }
35
- #divTextareas
36
- {
37
- flex-grow: 1;
38
- display: flex;
39
- flex-direction: column;
40
- min-height: 300px;
41
- }
42
- .CodeMirror,
43
- #textareaCode
44
- {
45
- flex-grow: 1;
46
- resize: none;
47
- color: #fff;
48
- background: #000;
49
- }
50
- #textareaConsole,
51
- #textareaError
52
- {
53
- flex-grow: .3;
54
- resize: none;
55
- display: none;
56
- color:#f22;
57
- background: #111;
58
- }
59
- #textareaConsole
60
- {
61
- color: #ff0;
62
- }
63
- #container3
64
- {
65
- width: 100%;
66
- height: 100%;
67
- display: flex;
68
- flex-direction: column;
69
- gap: 2px;
70
- }
71
- #titleInfo
72
- {
73
- margin: 5px;
74
- text-align: center;
75
- font-size: 40px;
76
- font-weight: bold;
77
- }
78
- #exampleInfo
79
- {
80
- margin: 0px;
81
- text-align: center;
82
- font-size: 20px;
83
- }
84
- #exampleLink
85
- {
86
- margin: 0px;
87
- text-align: center;
88
- font-size: 15px;
89
- display: inline-block;
90
- align-self: center;
91
- font-style: italic;
92
- }
93
- select
94
- {
95
- color:#fff;
96
- background-color: #111;
97
- width:100%;
98
- }
99
- hr
100
- {
101
- border: 1px solid #555;
102
- margin:9px;
103
- }
104
- button
105
- {
106
- color:#fff;
107
- background-color: #111;
108
- border: 1px solid #555;
109
- margin:0px 4px;
110
- padding: 2px 8px;
111
- cursor: pointer;
112
- }
113
- button:disabled
114
- {
115
- color: #aaa;
116
- background-color: #666;
117
- border-color: #666;
118
- }
119
- input[type='checkbox']:disabled
120
- {
121
- opacity: 0.5;
122
- }
123
- .error-line
124
- {
125
- background-color: #f004 !important;
126
- }
127
- .nowrap
128
- {
129
- white-space:nowrap;
130
- }
131
-
132
- /* LittleJS CodeMirror Theme */
133
- .cm-s-littlejs.CodeMirror { background: #080808; color: #aef; }
134
- .cm-s-littlejs div.CodeMirror-selected { background: #068; }
135
- .cm-s-littlejs .CodeMirror-gutters {background: #222; border-right: 0px;}
136
- .cm-s-littlejs .CodeMirror-linenumber { color: #aaa; }
137
- .cm-s-littlejs .CodeMirror-cursor { border-left: 2px solid #fff; }
138
- .cm-s-littlejs .cm-keyword { color: #6e1; }
139
- .cm-s-littlejs .cm-def { color: #fab; }
140
- .cm-s-littlejs .cm-operator { color: #1be; }
141
- .cm-s-littlejs .cm-property,
142
- .cm-s-littlejs span.cm-variable,
143
- .cm-s-littlejs span.cm-variable-2,
144
- .cm-s-littlejs span.cm-variable-3 { color: #ddd; }
145
- .cm-s-littlejs .cm-builtin,
146
- .cm-s-littlejs .cm-number { color: #e15; }
147
- .cm-s-littlejs .cm-comment { color:#888; font-style:italic; }
148
- .cm-s-littlejs .cm-string,
149
- .cm-s-littlejs .cm-string-2 { color:#fda; }
150
- .cm-s-littlejs .CodeMirror-matchingbracket { background-color: #381 !important; }