npm - littlejsengine - Versions diffs - 1.12.6 → 1.13.4 - Mend

littlejsengine 1.12.6 → 1.13.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 (102) hide show

package/README.md +15 -12
package/dist/littlejs.d.ts +466 -236
package/dist/littlejs.esm.js +6126 -5370
package/dist/littlejs.esm.min.js +4 -1
package/dist/littlejs.js +6093 -5359
package/dist/littlejs.min.js +4 -1
package/dist/littlejs.release.js +5614 -4907
package/examples/box2d/game.js +2 -2
package/examples/box2d/gameObjects.js +8 -7
package/examples/box2d/index.html +1 -1
package/examples/box2d/scenes.js +8 -8
package/examples/breakout/game.js +1 -1
package/examples/breakout/gameObjects.js +2 -2
package/examples/breakout/index.html +1 -1
package/examples/breakoutTutorial/README.md +46 -43
package/examples/breakoutTutorial/game.js +3 -3
package/examples/breakoutTutorial/index.html +1 -1
package/examples/electron/build.bat +7 -0
package/examples/electron/build.js +124 -0
package/examples/electron/electron.js +35 -0
package/examples/electron/game.js +140 -0
package/examples/electron/index.html +13 -0
package/examples/electron/package.json +12 -0
package/examples/electron/tiles.png +0 -0
package/examples/empty/game.js +1 -0
package/examples/empty/index.html +1 -1
package/examples/htmlMenu/game.js +1 -1
package/examples/htmlMenu/index.html +1 -1
package/examples/index.html +486 -182
package/examples/module/game.js +6 -3
package/examples/module/index.html +1 -1
package/examples/particles/index.html +12 -3
package/examples/platformer/game.js +4 -4
package/examples/platformer/gameCharacter.js +6 -6
package/examples/platformer/gameEffects.js +74 -57
package/examples/platformer/gameLevel.js +61 -70
package/examples/platformer/gameObjects.js +4 -4
package/examples/platformer/index.html +1 -1
package/examples/puzzle/index.html +1 -1
package/examples/shorts/base.html +23 -3
package/examples/shorts/blending.js +9 -5
package/examples/shorts/box2d.js +1 -1
package/examples/shorts/box2dCar.js +9 -13
package/examples/shorts/clock.js +1 -1
package/examples/shorts/colors.js +2 -2
package/examples/shorts/flappyGame.js +52 -0
package/examples/shorts/helloWorld.js +6 -3
package/examples/shorts/hillGlideGame.js +56 -0
package/examples/shorts/landerGame.js +32 -0
package/examples/shorts/maze.js +47 -0
package/examples/shorts/medals.js +42 -0
package/examples/shorts/nineSlice.js +21 -0
package/examples/shorts/piano.js +52 -0
package/examples/shorts/platformer.js +24 -20
package/examples/shorts/{pong.js → pongGame.js} +1 -1
package/examples/shorts/raycasting.js +71 -0
package/examples/shorts/shapes.js +9 -9
package/examples/shorts/slidingPuzzle.js +42 -0
package/examples/shorts/spaceGame.js +56 -0
package/examples/shorts/starfield.js +15 -0
package/examples/shorts/systemFont.js +1 -1
package/examples/shorts/tileLayer.js +3 -5
package/examples/shorts/tiles.png +0 -0
package/examples/shorts/tiltedView.js +8 -7
package/examples/shorts/topDown.js +18 -26
package/examples/shorts/uiSystem.js +5 -7
package/examples/starter/build.bat +6 -1
package/examples/starter/build.js +9 -8
package/examples/starter/game.js +7 -4
package/examples/starter/index.html +23 -13
package/examples/stress/index.html +7 -8
package/examples/style.css +139 -0
package/examples/typescript/build.js +2 -3
package/examples/typescript/game.js +4 -4
package/examples/typescript/game.ts +6 -3
package/examples/typescript/index.html +1 -1
package/examples/uiSystem/game.js +10 -25
package/examples/uiSystem/index.html +1 -1
package/package.json +2 -2
package/plugins/box2d.js +22 -97
package/plugins/drawUtilities.js +132 -0
package/plugins/newgrounds.js +1 -1
package/plugins/pluginExport.js +7 -1
package/plugins/postProcess.js +9 -2
package/plugins/uiSystem.js +155 -67
package/plugins/zzfxm.js +1 -1
package/reference.md +10 -10
package/src/engine.js +56 -30
package/src/engineAudio.js +15 -6
package/src/engineBuild.bat +6 -1
package/src/engineBuild.js +20 -5
package/src/engineDebug.js +55 -28
package/src/engineDraw.js +321 -177
package/src/engineExport.js +27 -9
package/src/engineInput.js +110 -38
package/src/engineMedals.js +4 -4
package/src/engineObject.js +71 -70
package/src/engineParticles.js +33 -9
package/src/engineSettings.js +69 -23
package/src/engineTileLayer.js +312 -153
package/src/engineUtilities.js +187 -135
package/src/engineWebGL.js +70 -39

package/examples/index.html CHANGED Viewed

@@ -1,102 +1,42 @@
 <!DOCTYPE html><head>
 <title>LittleJS Example Browser</title>
 <link rel=icon type=image/png href=favicon.png>
+<link rel=stylesheet href=style.css?6>
 <meta charset=utf-8>
-<style>
-html, body
-{
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-}
-#container1
-{
-    height: 100%;
-    display: flex;
-}
-#container2
-{
-    display: flex;
-    flex-direction: column;
-}
-#iframeContainer
-{
-    border: 2px solid;
-    background: #000;
-}
-iframe
-{
-    width: 100%;
-    height: 100%;
-    border: none;
-}
-#selectExample
-{
-    flex-grow: 1;
-}
-#textareaCode
-{
-    flex-grow: 1;
-    padding: 5px;
-    resize: none;
-    color: #fff;
-    background: #000;
-}
-#textareaError
-{
-    flex-grow: .3;
-    padding: 5px;
-    resize: none;
-    display: none;
-    color:#f22;
-    background: #111;
-}
-#container3
-{
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-}
-#titleInfo
-{
-    margin: 5px;
-    text-align: center;
-    font-size: 50px;
-}
-#exampleLink
-{
-    margin: 0px;
-    text-align: center;
-    font-size: 30px;
-}
-#exampleInfo
-{
-    margin: 0px;
-    text-align: center;
-    font-size: 22px;
-}
-select
-{
-    color:#fff;
-    background-color: #111;
-    width:100%;
-}
-</style>
 </head><body>
 <div id=container1>
 <div id=container3>
 <p id=titleInfo>LittleJS Example Browser</p>
-<a id=exampleLink target="_blank">Example LINK</a>
-<p id=exampleInfo>Example Info</p>
+<p id=exampleInfo></p>
+<a id=exampleLink target='_blank'></a>
+<hr>
+<div>
+Theme:
+<select style=width:120px onchange=loadTheme() id=selectTheme></select>
+<select style=width:40px onchange=loadTheme() id=selectFontSize>
+    <option value=10px>XS</option>
+    <option value=13px>S</option>
+    <option value=16px selected>M</option>
+    <option value=20px>L</option>
+    <option value=24px>XL</option>
+</select>
+<input type=checkbox id=checkboxLiveEdit checked>Live Edit
+<input type=checkbox id=checkboxJumpToError>Jump to Error
+</div>
 <textarea id=textareaCode oninput=codeInput() spellcheck=false></textarea>
 <textarea id=textareaError readonly spellcheck=false></textarea>
-<div><input type=checkbox id=checkboxLiveEdit checked>Live Edit
-<button id=buttonScreenshot>Screenshot</button>
-</div>
+<textarea id=textareaConsole readonly spellcheck=false></textarea>
 </div>
 <div id=container2>
 <div id=iframeContainer></div>
+<div>
+<input id=inputSearch placeholder='Search examples...' oninput=filterExamples() onkeydown='if(event.key=="Escape")filterExamples(1)'>
+<button id=buttonRestart onclick=restartCode()>Restart</button>
+<button id=buttonPause>Pause</button>
+<button id=buttonScreenshot>Screenshot</button>
+<button id=buttonFullscreen>Fullscreen</button>
+<input type=checkbox id=checkboxWebGL checked>WebGL
+</div>
 <select id=selectExample autofocus onchange=setExample() size=2></select>
 </div>
 </div>
@@ -105,70 +45,81 @@ select
 class ExampleInfo
 {
-    constructor(name, filename, description, fullExample=false)
+    constructor(name, filename, description='', largeExample=false)
     {
-        if (filename && !fullExample)
-            filename = 'shorts/' + filename; // short examples folder
+        if (filename && !largeExample)
+            filename = 'shorts/' + filename;
         this.name = name;
         this.filename = filename;
         this.description = description;
-        this.fullExample = fullExample;
+        this.largeExample = largeExample;
     }
 }
 const exampleList =
 [
     new ExampleInfo('--- SHORT EXAMPLES ---'),
-    new ExampleInfo('Hello World', 'helloWorld.js', 'Simplest example'),
-    new ExampleInfo('Shapes', 'shapes.js', 'How to draw geometric shapes'),
-    new ExampleInfo('Colors', 'colors.js', 'How to use the color object'),
-    new ExampleInfo('Blending', 'blending.js', 'How to use blending modes'),
-    new ExampleInfo('Timers', 'timers.js', 'How to use the timer object'),
-    new ExampleInfo('Texture', 'texture.js', 'How to display a full texture'),
-    new ExampleInfo('Particles', 'particles.js', 'How to use the particle system'),
-    new ExampleInfo('Play Sound', 'playSound.js', 'How to play sounds with zzfx'),
-    new ExampleInfo('System Font', 'systemFont.js', 'Demo of the included system font'),
-    new ExampleInfo('Sprite Atlas', 'spriteAtlas.js', 'How to set up a simple sprite atlas'),
-    new ExampleInfo('Animation', 'animation.js', 'How to animate sprites'),
-    new ExampleInfo('Clock', 'clock.js', 'Simple clock showing the time'),
-    new ExampleInfo('Tile Layer', 'tileLayer.js', 'How to use the tile layer object'),
-    new ExampleInfo('Platformer Game', 'platformer.js', 'Platformer jumping game'),
-    new ExampleInfo('Top Down Game', 'topDown.js', 'Rop down adventure game'),
-    new ExampleInfo('Tilted View', 'tiltedView.js', 'Pseudo 3D view with tilted camera'),
-    new ExampleInfo('Pong Game', 'pong.js', 'Simple pong game'),
-    new ExampleInfo('Box2d Demo', 'box2d.js', 'Demo of the Box2D physics plugin'),
-    new ExampleInfo('Box2d Car', 'box2dCar.js', 'Controllable vehicle using the Box2D physics plugin'),
-    new ExampleInfo('Post Processing', 'postProcess.js', 'Example of the post processing plugin'),
-    new ExampleInfo('UI System Plugin', 'uiSystem.js', 'Simple example of LittleJS UI plugin'),
+    new ExampleInfo('Hello World', 'helloWorld.js', 'Minimal starter example - [basic, beginner]'),
+    new ExampleInfo('Shapes', 'shapes.js', 'Draw geometric shapes - [graphics, primitives, basic]'),
+    new ExampleInfo('Colors', 'colors.js', 'Color object and HSL usage - [graphics, color, basic]'),
+    new ExampleInfo('Blending', 'blending.js', 'Blending modes and transparency - [graphics, effects]'),
+    new ExampleInfo('Timers', 'timers.js', 'Timer object and timing functions - [utilities, time]'),
+    new ExampleInfo('Texture', 'texture.js', 'Display and manipulate textures - [graphics, sprites]'),
+    new ExampleInfo('Particles', 'particles.js', 'Particle system basics - [effects, particles]'),
+    new ExampleInfo('Play Sound', 'playSound.js', 'Sound effects with ZzFX - [audio, sound]'),
+    new ExampleInfo('System Font', 'systemFont.js', 'Built-in bitmap font rendering - [text, font]'),
+    new ExampleInfo('Sprite Atlas', 'spriteAtlas.js', 'Sprite atlas and tile rendering - [graphics, sprites]'),
+    new ExampleInfo('Animation', 'animation.js', 'Sprite animation techniques - [animation, sprites]'),
+    new ExampleInfo('Clock', 'clock.js', 'Real-time clock display - [time, ui, utilities]'),
+    new ExampleInfo('Tile Layer', 'tileLayer.js', 'Tile layer rendering system - [tiles, levels]'),
+    new ExampleInfo('Piano', 'piano.js', 'Interactive piano keyboard - [audio, input, ui]'),
+    new ExampleInfo('Maze Generator', 'maze.js', 'Procedural maze generation - [algorithm, generation]'),
+    new ExampleInfo('Starfield', 'starfield.js', 'Animated parallax starfield - [effects, space]'),
+    new ExampleInfo('Medals', 'medals.js', 'Achievement system demo - [ui, achievements]'),
+    new ExampleInfo('--- MINI GAMES ---'),
+    new ExampleInfo('Platformer Game', 'platformer.js', 'Jump and run platformer - [game, platformer, physics]'),
+    new ExampleInfo('Top Down Game', 'topDown.js', 'Adventure with collision - [game, topdown, rpg]'),
+    new ExampleInfo('Tilted View', 'tiltedView.js', 'Pseudo 3D tilted perspective - [3d, camera, perspective]'),
+    new ExampleInfo('Space Game', 'spaceGame.js', 'Spaceship with parallax scrolling - [game, space, shooter]'),
+    new ExampleInfo('Lander Game', 'landerGame.js', 'Lunar lander physics game - [game, physics, thrust]'),
+    new ExampleInfo('Flappy Game', 'flappyGame.js', 'Flappy bird clone - [game, arcade, flying]'),
+    new ExampleInfo('Hill Glide Game', 'hillGlideGame.js', 'Tiny wings style glider - [game, physics, flying]'),
+    new ExampleInfo('Pong Game', 'pongGame.js', 'Classic paddle ball game - [game, classic, arcade]'),
+    new ExampleInfo('Sliding Puzzle', 'slidingPuzzle.js', 'Tile sliding puzzle game - [game, puzzle, logic]'),
+    new ExampleInfo('Raycasting Game', 'raycasting.js', 'Pseudo 3D raycasting demo - [3d, raycasting, wolfenstein]'),
+    new ExampleInfo('--- PLUGINS ---'),
+    new ExampleInfo('Box2d Demo', 'box2d.js', 'Box2D physics plugin demo - [physics, box2d, plugin]'),
+    new ExampleInfo('Box2d Car', 'box2dCar.js', 'Drivable car with Box2D - [physics, box2d, vehicle]'),
+    new ExampleInfo('Post Processing', 'postProcess.js', 'Shader effects and filters - [graphics, shaders, effects]'),
+    new ExampleInfo('UI System Plugin', 'uiSystem.js', 'UI elements and widgets - [ui, plugin, interface]'),
+    new ExampleInfo('Nine Slice', 'nineSlice.js', 'Scalable UI panel rendering - [ui, graphics, scaling]'),
     new ExampleInfo('--- FULL EXAMPLES ---'),
-    new ExampleInfo('Starter', 'starter', 'Clean starter project', true),
-    new ExampleInfo('Breakout Tutorial', 'breakoutTutorial', 'Tutorial Breakout example', true),
-    new ExampleInfo('Breakout Game', 'breakout', 'Block breaking game with post-processing effects', true),
-    new ExampleInfo('Platforming Game', 'platformer', 'Platformer/shooter with level data loading', true),
-    new ExampleInfo('Puzzle Game', 'puzzle', 'Match 3 puzzle game with HD rendering', true),
-    new ExampleInfo('Stress Test', 'stress', 'Max sprite/object test and music system demo', true),
-    new ExampleInfo('Box2D Plugin', 'box2d', 'Demo of the Box2D physics plugin', true),
-    new ExampleInfo('HTML Menus', 'htmlMenu', 'Shows how to combine HTML with LittleJS', true),
-    new ExampleInfo('UI System Plugin', 'uiSystem', 'Example of how to use LittleJS UI plugin', true),
-    // Add more examples here!
+    new ExampleInfo('Starter', 'starter', 'Clean project template - [template, beginner]', true),
+    new ExampleInfo('Breakout Tutorial', 'breakoutTutorial', 'Step-by-step breakout guide - [tutorial, breakout]', true),
+    new ExampleInfo('Breakout Game', 'breakout', 'Complete breakout with effects - [game, breakout, complete]', true),
+    new ExampleInfo('Platforming Game', 'platformer', 'Full platformer with levels - [game, platformer, complete]', true),
+    new ExampleInfo('Puzzle Game', 'puzzle', 'Match-3 puzzle with HD graphics - [game, puzzle, match3]', true),
+    new ExampleInfo('Stress Test', 'stress', 'Performance test with music - [performance, test, music]', true),
+    new ExampleInfo('Box2D Plugin', 'box2d', 'Complete Box2D physics demo - [physics, box2d, complete]', true),
+    new ExampleInfo('HTML Menus', 'htmlMenu', 'HTML integration example - [html, ui, integration]', true),
+    new ExampleInfo('UI System Plugin', 'uiSystem', 'Complete UI system demo - [ui, plugin, complete]', true),
 ];
 ///////////////////////////////////////////////////////////////////////////////
-let iframeExample, inputTimeout;
+// global variables
+let iframeExample, inputTimeout, codeMirror, consoleAutoScroll, errorLineMarker, codeIsJS;
 // load the examples into the list
-for (const example of exampleList)
-{
-    const text = example.name + (example.description?' - ' + example.description : '');
-    const o = new Option(text);
-    o.disabled = !example.filename;
-    selectExample.add(o);
-}
+filterExamples();
-// set the selected example from the URL hash
-selectExample.selectedIndex = location.hash.split`#`[1] | 0
+// set the selected example from the URL parameters
+const urlParams = new URLSearchParams(window.location.search);
+const selectedExample = urlParams.get('example') || '';
+let exampleIndex = exampleList.findIndex((example) => example.filename == selectedExample);
+if (exampleIndex < 0)
+    exampleIndex = 1;
+selectExample.selectedIndex = exampleIndex;
 setExample();
 onresize = () =>
@@ -179,55 +130,73 @@ onresize = () =>
     let h = w / aspect | 0;
     iframeContainer.style.width = w + 'px';
     iframeContainer.style.height = h + 'px';
+    // fix code mirror width
+    container3.style.width = w-30 + 'px';
 }
 onresize();
 ///////////////////////////////////////////////////////////////////////////////
+// setting examples
 function setExample()
 {
-    if (selectExample.selectedIndex < 1 || selectExample.selectedIndex >= exampleList.length)
-        selectExample.selectedIndex = 1;  // reset to default
-    let example = exampleList[selectExample.selectedIndex];
-    if (!example.filename)
-        example = exampleList[selectExample.selectedIndex = 1]; // reset to default
+    // get the original index if this is a filtered result
+    const selectedOption = selectExample.options[selectExample.selectedIndex];
+    let exampleIndex = selectedOption && selectedOption.originalIndex ?
+        parseInt(selectedOption.originalIndex) :
+        selectExample.selectedIndex;
+    // make sure we have a valid example
+    if (exampleIndex < 0 || exampleIndex >= exampleList.length)
+        exampleIndex = 1;  // reset to default
+    if (!exampleList[exampleIndex].filename)
+        exampleIndex = 1;
+    // load the example
+    const example = exampleList[exampleIndex];
     exampleInfo.innerText = example.name + (example.description ? ' - ' + example.description : '');
     const filename = 'examples/' + example.filename;
     exampleLink.href = 'https://github.com/KilledByAPixel/LittleJS/tree/main/' + filename;
     exampleLink.innerText = filename;
-    loadFile(example.filename, example.fullExample);
-    location.hash = selectExample.selectedIndex;
+    // update URL parameter
+    const url = new URL(window.location);
+    url.searchParams.set('example', example.filename);
+    window.history.replaceState({}, '', url);
+    loadFile(example.filename, example.largeExample);
 }
-function codeInput()
+async function loadFile(filename, largeExample)
 {
-    if (!checkboxLiveEdit.checked)
-        return;
-    // debounce input
-    clearTimeout(inputTimeout);
-    inputTimeout = setTimeout(() => setCode(textareaCode.value), 500);
-}
-async function loadFile(filename, fullExample)
-{
-    textareaCode.disabled = fullExample;
-    if (fullExample)
+    if (codeMirror)
+        codeMirror.setOption('readOnly', largeExample);
+    else
+        textareaCode.disabled = largeExample;
+    // disable buttons in large example mode
+    buttonPause.disabled = largeExample;
+    buttonRestart.disabled = largeExample;
+    buttonScreenshot.disabled = largeExample;
+    buttonFullscreen.disabled = largeExample;
+    checkboxWebGL.disabled = largeExample;
+    if (largeExample)
     {
-        if (iframeExample)
-            iframeContainer.removeChild(iframeExample);
-        setErrorMessage();
-        iframeExample = document.createElement('iframe');
-        iframeContainer.appendChild(iframeExample);
-        iframeExample.onload = () =>
+        // Show message in code view that full examples can't be edited
+        const text = 'Code view not available for large examples.';
+        setCode(text, filename);
+        codeIsJS = false;
+        if (codeMirror)
         {
-            const iframeContent = iframeExample.contentWindow;
-            const iframeDocument = iframeContent.document;
-            //textareaCode.value = iframeDocument.body.innerHTML;
-            textareaCode.value = 'Editor code view not available for large examples.\n';
+            codeMirror.off('change', codeInput);
+            codeMirror.setOption('mode', 'text');
+            codeMirror.setValue(text);
         }
-        iframeExample.src = filename;
+        else
+            textareaCode.value = text;
+        clearTimeout(inputTimeout);
         return;
     }
@@ -237,7 +206,19 @@ async function loadFile(filename, fullExample)
         if (!response.ok)
             throw new Error('Could not load file: ' + filename);
         const text = await response.text();
-        setCode(textareaCode.value = text, fullExample);
+        // set the code in both code mirror and textarea
+        codeIsJS = true;
+        if (codeMirror)
+        {
+            codeMirror.on('change', codeInput);
+            codeMirror.setOption('mode', 'javascript');
+            codeMirror.setValue(text);
+        }
+        else
+            textareaCode.value = text;
+        clearTimeout(inputTimeout);
+        setCode(text);
     }
     catch (error)
     {
@@ -245,45 +226,167 @@ async function loadFile(filename, fullExample)
     }
 }
-function setCode(code, largeExample)
+function filterExamples(reset=0)
+{
+    if (reset)
+        inputSearch.value = '';
+    // clear current options
+    selectExample.options.length = 0;
+    // filter and add matching examples
+    const searchTerm = inputSearch.value.toLowerCase().trim();
+    for (let i = 0; i < exampleList.length; i++)
+    {
+        // check if search term matches name or description
+        const example = exampleList[i];
+        const text = example.name + (example.description ? ` - ${example.description}` : '');
+        if (example.name.toLowerCase().includes(searchTerm) ||
+            example.description.toLowerCase().includes(searchTerm))
+        {
+            const o = new Option(text);
+            o.disabled = !example.filename;
+            o.originalIndex = i;
+            selectExample.add(o);
+        }
+    }
+    if (!selectExample.options.length)
+    {
+        // show a message if no matches
+        const o = new Option('No examples found matching "' + searchTerm + '"');
+        o.disabled = true;
+        selectExample.add(o);
+    }
+}
+///////////////////////////////////////////////////////////////////////////////
+// setting code
+function codeInput()
 {
+    if (!checkboxLiveEdit.checked)
+        return;
+    // debounce input - get content from code mirror if available, otherwise from textarea
+    clearTimeout(inputTimeout);
+    const code = codeMirror ? codeMirror.getValue() : textareaCode.value;
+    inputTimeout = setTimeout(() => setCode(code), 500);
+}
+function restartCode()
+{
+    // manually restart/run the code regardless of live edit setting
+    const code = codeMirror ? codeMirror.getValue() : textareaCode.value;
+    setCode(code);
+}
+function setCode(code, textFilename)
+{
+    const largeExample = !!textFilename;
     clearTimeout(inputTimeout);
     if (iframeExample)
         iframeContainer.removeChild(iframeExample);
-    setErrorMessage();
+    unsetErrorMessage();
+    unsetConsoleMessage();
     iframeExample = document.createElement('iframe');
     iframeContainer.appendChild(iframeExample);
-    iframeExample.onload = () =>
+    iframeExample.onload = ()=>
     {
+        if (largeExample)
+            return;
         const iframeContent = iframeExample.contentWindow;
         const iframeDocument = iframeContent.document;
-        // create error event listeners
+        // intercept errors
+        function getErrorLine(stack)
+        {
+            // try to extract line number from stack trace, look for <anonymous> or injectedScript to find the user code
+            const anonymousMatch = stack.match(/(<anonymous>|injectedScript):(\d+)/);
+            return anonymousMatch ? parseInt(anonymousMatch[2]) : -1;
+        }
         iframeContent.onerror = (message, source, lineno, colno, error) =>
         {
             let text = message;
             if (lineno)
                 text += ` (Line:${lineno}, Column:${colno})`
             if (error && error.stack)
-                text += `\n\n` + error.stack;
+                text += `\n` + error.stack;
             setErrorMessage(text);
+            setErrorLine(lineno);
         }
         iframeContent.onunhandledrejection = (event) =>
         {
             let text = event.reason;
-            if (event.reason.stack)
-                text += `\n\n` + event.reason.stack;
             setErrorMessage(text);
+            if (event.reason && event.reason.stack)
+            {
+                text = event.reason.stack;
+                const errorLine = getErrorLine(event.reason.stack);
+                if (errorLine >= 0)
+                    setErrorLine(errorLine);
+            }
         };
+        // intercept asserts
         const originalAssert = iframeContent.console.assert;
         iframeContent.console.assert = function (condition, output)
         {
-            if (!condition)
-                setErrorMessage('Assertion failed!\n' + (output || '') + '\n' + (new Error).stack);
+           if (!condition)
+           {
+                const stack = (new Error).stack;
+                const errorLine = getErrorLine(stack);
+                if (errorLine >= 0)
+                    setErrorLine(errorLine);
+                setErrorMessage('Assertion failed!\n' + (output || '') + '\n' + stack);
+           }
             originalAssert.apply(this, arguments);
         };
+        // intercept console prints
+        const originalConsole = iframeContent.console;
+        function interceptConsole(method)
+        {
+            const original = originalConsole[method];
+            iframeContent.console[method] = function(...args)
+            {
+                const message = args.map(m=>stringifyMessage(m)).join('\n');
+                setConsoleMessage(message);
+                original.apply(originalConsole, args);
+            };
+        }
+        ['log','info','warn','error','debug'].forEach(f=>interceptConsole(f));
+        {
+            // setup buttons
+            buttonScreenshot.onclick = () =>
+            {
+                if (iframeContent.debugScreenshot)
+                    iframeContent.debugScreenshot();
+            }
+            // pause/resume functionality
+            buttonPause.onclick = () =>
+            {
+                if (!iframeContent.getPaused || !iframeContent.setPaused)
+                    return;
+                const paused = !iframeContent.getPaused();
+                iframeContent.setPaused(paused);
+                buttonPause.textContent = paused ? 'Resume' : 'Pause';
+            }
+            buttonPause.textContent = 'Pause';
+            // fullscreen functionality
+            buttonFullscreen.onclick = ()=> iframeContent.toggleFullscreen();
+        }
+        // set WebGL based on checkbox
+        iframeContent.setGLEnable(checkboxWebGL.checked);
+        checkboxWebGL.onchange = ()=> iframeContent.setGLEnable(checkboxWebGL.checked);
         // create a script element that overrides the default functions
         const overrideScript = iframeDocument.createElement('script');
         iframeDocument.body.appendChild(overrideScript);
@@ -293,23 +396,224 @@ function setCode(code, largeExample)
             return; // stop if script error
         // start LittleJS engine
-        iframeContent.engineInit(iframeContent.gameInit, iframeContent.gameUpdate, iframeContent.gameUpdatePost, iframeContent.gameRender, iframeContent.gameRenderPost, ['tiles.png?1']);
+        iframeContent.engineInit(iframeContent.gameInit, iframeContent.gameUpdate, iframeContent.gameUpdatePost, iframeContent.gameRender, iframeContent.gameRenderPost, ['tiles.png?'+Date.now()]);
+    }
+    iframeExample.src = textFilename || 'shorts/base.html?' + Date.now();
+}
+///////////////////////////////////////////////////////////////////////////////
+// error and console messages
+function stringifyMessage(message)
+{
+    // make sure message is a string
+    if (message === null)
+        return 'null';
+    if (Number.isNaN(message))
+        return 'NaN';
+    if (message === undefined)
+        return 'undefined';
+    if (message === 0)
+        return '0';
+    if (message === false)
+        return 'false';
+    return message;
+}
+function setMessage(message, element, clear=true)
+{
+    message = stringifyMessage(message);
+    if (clear || !element.value)
+        element.value = message;
+    else
+        element.value += '\n' + message;
+    element.style.display = message ? 'block' : 'none';
+    if (element == textareaConsole)
+    {
+        const maxConsoleLines = 100;
+        const lines = element.value.split('\n');
+        if (lines.length > maxConsoleLines)
+        {
+            // limit max lines, prevents slowdown from too many lines
+            const excessLines = lines.length - maxConsoleLines;
+            element.value = lines.slice(excessLines).join('\n');
+        }
+        // auto scroll to bottom only if user hasn't manually scrolled
+        if (consoleAutoScroll)
+            element.scrollTop = element.scrollHeight;
+    }
+}
+function unsetMessage(element)
+{
+    element.style.display = 'none';
+    element.value = '';
+}
+function clearErrorLine()
+{
+    if (!codeMirror || !errorLineMarker)
+        return;
+    codeMirror.getDoc().removeLineClass(errorLineMarker, 'background', 'error-line');
+}
+function setErrorLine(lineNumber)
+{
+    if (!lineNumber || lineNumber <= 0)
+        return;
-        buttonScreenshot.onclick = () =>
+    if (codeMirror)
+    {
+        clearErrorLine();
+        --lineNumber; // codeMirror uses 0-based line numbers
+        errorLineMarker = codeMirror.getDoc().addLineClass(lineNumber, 'background', 'error-line');
+        if (checkboxJumpToError.checked)
         {
-            if (iframeContent.debugScreenshot)
-                iframeContent.debugScreenshot();
+            codeMirror.scrollIntoView({line: lineNumber, ch: 0});
+            codeMirror.focus();
+        }
+    }
+    else if (textareaCode && checkboxJumpToError.checked)
+    {
+        // for textarea, calculate character position and set cursor
+        const lines = textareaCode.value.split('\n');
+        let charPos = 0;
+        for (let i = 0; i < lineNumber - 1 && i < lines.length; i++)
+        {
+            charPos += lines[i].length + 1; // +1 for newline character
+        }
+        textareaCode.setSelectionRange(charPos, charPos);
+        if (checkboxJumpToError.checked)
+        {
+            const line = textareaCode.value.split('\n');
+            lineNumber = Math.min(Math.max(0, lineNumber-1), lines.length-1);
+            // select error line in textarea
+            let start = 0;
+            for (let i = 0; i < lineNumber; i++)
+                start += lines[i].length + 1;
+            textareaCode.selectionStart = start;
+            textareaCode.selectionEnd = start + lines[lineNumber].length;
+            textareaCode.focus();
         }
     }
-    iframeExample.src = 'shorts/base.html';
 }
-function setErrorMessage(message='')
+function setErrorMessage(message)
+{
+    // prevent overwriting an existing error message
+    const errorMessageIsVisible = textareaError.style.display == 'block';
+    if (!errorMessageIsVisible)
+        setMessage(message, textareaError);
+}
+function unsetErrorMessage() { unsetMessage(textareaError); clearErrorLine(); }
+function setConsoleMessage(message) { setMessage(message, textareaConsole, false); }
+function unsetConsoleMessage() { unsetMessage(textareaConsole); consoleAutoScroll = true; }
+function onScrollConsole()
+{
+    // only auto scroll console is it is scrolled to bottom
+    const tolerance = 5; // pixels of tolerance
+    consoleAutoScroll = Math.abs(textareaConsole.scrollTop - (textareaConsole.scrollHeight - textareaConsole.clientHeight)) < tolerance;
+}
+textareaConsole.addEventListener('scroll', onScrollConsole);
+///////////////////////////////////////////////////////////////////////////////
+// setup code mirror
+const defaultTheme = 'littlejs';
+const defaultFontSize = '16px';
+const themes =
+[
+    'littlejs',
+    '3024-night',
+    'abcdef',
+    'ambiance',
+    'blackboard',
+    'monokai',
+    'duotone-light',
+    'icecoder',
+    'lesser-dark',
+    'night',
+    'yonce'
+];
+// Load saved preferences from localStorage
+const savePrefix = 'LittleJSExamples_';
+const savedTheme = localStorage.getItem(savePrefix+'theme') || defaultTheme;
+const savedFontSize = localStorage.getItem(savePrefix+'fontSize') || defaultFontSize;
+for (const theme of themes)
+{
+    if (theme != 'littlejs')
+        addCodeMirrorElement(`theme/${theme}.min.css`, 'link', 'stylesheet');
+    const o = new Option(theme);
+    o.selected = theme == savedTheme;
+    selectTheme.add(o);
+}
+// Set the saved font size
+selectFontSize.value = savedFontSize;
+textareaCode.style.fontSize = savedFontSize;
+addCodeMirrorElement('codemirror.min.js', 'script').onload = ()=>
+addCodeMirrorElement('codemirror.min.css', 'link', 'stylesheet').onload = ()=>
+addCodeMirrorElement('addon/edit/matchbrackets.js', 'script').onload = ()=>
+addCodeMirrorElement('mode/javascript/javascript.min.js', 'script').onload = ()=>
+initCodeMirror();
+function initCodeMirror()
 {
-    textareaError.value = message
-    textareaError.style.display = message ? 'block' : 'none';
+    if (codeMirror)
+        return; // prevent duplicate initialization
+    const textareaCode = document.getElementById('textareaCode');
+    codeMirror = CodeMirror.fromTextArea(textareaCode,
+    {
+        theme: savedTheme,
+        indentUnit: 4,
+        mode: codeIsJS ? 'javascript' : 'text',
+        lineNumbers: true,
+        lineWrapping: true,
+        matchBrackets: true,
+    });
+    codeMirror.on('change', codeInput);
+    loadTheme();
+}
+function addCodeMirrorElement(filename, type, rel)
+{
+    // add element for code mirror
+    const e = document.createElement(type);
+    e.rel = rel;
+    filename = 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/' + filename;
+    if (type == 'link')
+        e.href = filename;
+    else
+        e.src = filename;
+    e.crossOrigin = 'anonymous';
+    document.head.appendChild(e);
+    return e;
+}
+function loadTheme()
+{
+    const theme = selectTheme.value;
+    const size = selectFontSize.value;
+    // Save preferences to localStorage
+    localStorage.setItem(savePrefix+'theme', theme);
+    localStorage.setItem(savePrefix+'fontSize', size);
+    // Apply the theme and font size
+    textareaCode.style.fontSize = size;
+    if (codeMirror)
+    {
+        codeMirror.getWrapperElement().style.fontSize = size;
+        codeMirror.setOption('theme', theme);
+    }
 }
 </script>
 </body>
-</html>
+</html>