littlejsengine 1.14.11 → 1.14.19

package/examples/box2d/game.js

@@ -56,10 +56,9 @@ async function gameInit()
     // start up LittleJS Box2D plugin
     await LJS.box2dInit();
     //LJS.box2dSetDebug(true); // enable box2d debug draw
-    LJS.setCanvasClearColor(hsl(0,0,.8));
 
     // create a table of all sprites
-    const gameTile = (i)=> LJS.tile(i, 496, 0, 8);
+    const gameTile = (i)=> LJS.tile(i, 124, 0, 2);
     spriteAtlas =
     {
         circle:         gameTile(0),
@@ -71,6 +70,8 @@ async function gameInit()
         squareOutline2: gameTile(6),
     };
 
+    // startup the demo
+    LJS.setCanvasClearColor(hsl(0,0,.8));
     setScene(startScene);
 }
 

package/examples/box2d/gameObjects.js

@@ -471,7 +471,7 @@ export function explosion(pos, radius=3, strength=300)
     // smoke
     new LJS.ParticleEmitter(
         pos, 0,                       // pos, angle
-        radius/2, .2, 50*radius, 3.14,// emitSize, emitTime, emitRate, emitCone
+        radius/2, .2, 50*radius, 3.14,// emitSize, emitTime, rate, cone
         Game.spriteAtlas.dot,         // tileInfo
         hsl(0,0,0),   hsl(0,0,0),     // colorStartA, colorStartB
         hsl(0,0,0,0), hsl(0,0,0,0),   // colorEndA, colorEndB
@@ -483,7 +483,7 @@ export function explosion(pos, radius=3, strength=300)
     // fire
     new LJS.ParticleEmitter(
         pos, 0,                         // pos, angle
-        radius, .1, 100*radius, 3.14,   // emitSize, emitTime, emitRate, emitCone
+        radius, .1, 100*radius, 3.14,   // emitSize, emitTime, rate, cone
         Game.spriteAtlas.dot,           // tileInfo
         hsl(0,1,.5),   hsl(.15,1,.5),   // colorStartA, colorStartB
         hsl(0,1,.5,0), hsl(.1, 1,.5,0), // colorEndA, colorEndB

package/examples/breakout/game.js

@@ -104,11 +104,12 @@ function gameRenderPost()
 {
     // use built in image font for text
     const font = new LJS.FontImage;
-    font.drawText('Score: ' + score, LJS.cameraPos.add(vec2(0,9.7)), .15, true);
+
+    font.drawTextOverlay('Score: ' + score, LJS.cameraPos.add(vec2(0,9.7)), .15, true);
     if (!brickCount)
-        font.drawText('You Win!', LJS.cameraPos.add(vec2(0,-5)), .2, true);
+        font.drawTextOverlay('You Win!', LJS.cameraPos.add(vec2(0,-5)), .2, true);
     else if (!ball)
-        font.drawText('Click to Play', LJS.cameraPos.add(vec2(0,-5)), .2, true);
+        font.drawTextOverlay('Click to Play', LJS.cameraPos.add(vec2(0,-5)), .2, true);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -167,8 +168,7 @@ function setupPostProcess()
         c *= 1.-pow((dx*dx + dy*dy)/vignette, vignettePow);
     }`;
 
-    const includeOverlay = true;
-    new LJS.PostProcessPlugin(televisionShader, includeOverlay);
+    new LJS.PostProcessPlugin(televisionShader);
 }
 
 ///////////////////////////////////////////////////////////////////////////////

package/examples/breakout/gameObjects.js

@@ -74,7 +74,7 @@ export class Brick extends PhysicsObject
         const color2 = color1.lerp(hsl(), .5);
         new LJS.ParticleEmitter(
             this.pos, 0,                          // pos, angle
-            this.size, .1, 200, 3.14,             // emitSize, emitTime, emitRate, emitCone
+            this.size, .1, 200, 3.14,             // emitSize, emitTime, rate, cone
             tile(0, 16),                          // tileIndex, tileSize
             color1, color2,                       // colorStartA, colorStartB
             color1.scale(1,0), color2.scale(1,0), // colorEndA, colorEndB
@@ -110,7 +110,7 @@ export class Ball extends PhysicsObject
         const color = hsl(0,0,.2);
         this.trailEffect = new LJS.ParticleEmitter(
             this.pos, 0,                          // pos, angle
-            this.size, 0, 80, 3.14,               // emitSize, emitTime, emitRate, emitCone
+            this.size, 0, 80, 3.14,               // emitSize, emitTime, rate, cone
             tile(0, 16),                          // tileIndex, tileSize
             color, color,                         // colorStartA, colorStartB
             color.scale(0), color.scale(0),       // colorEndA, colorEndB

package/examples/breakoutTutorial/README.md

@@ -33,11 +33,11 @@ That will make a square of 20×20 engine objects, we can adjust it as we go. It
 
 ![LittleJS Screenshot](images/1.png)
 
-It is completely off center and may not look like much yet, but it’s a start!
+It is completely off center and may not look like much yet, but it's a start!
 
 ## Improve the Bricks
 
-Let’s make the bricks more rectangular by passing vec2(2,1) to the size parameter of Engine Object. We will need to adjust the loop to add 2 for each x iteration. Also we can use a Vector2 to describe the size of the level.
+Let's make the bricks more rectangular by passing vec2(2,1) to the size parameter of Engine Object. We will need to adjust the loop to add 2 for each x iteration. Also we can use a Vector2 to describe the size of the level.
 
 ```javascript
 // create bricks
@@ -52,7 +52,7 @@ for (let y=0; y<=levelSize.y; y+=1)
 
 ## Move the Camera
 
-Let’s move the camera to the center of our level by setting the cameraPos variable to half the level size.
+Let's move the camera to the center of our level by setting the cameraPos variable to half the level size.
 You can also change the camera zoom by using camaraScale which controls the number of pixels for each world space unit.
 For this example the camera will just remain stationary, but in other types of games it is very useful!
 
@@ -60,7 +60,7 @@ For this example the camera will just remain stationary, but in other types of g
 LJS.setCameraPos(levelSize.scale(.5)); // center camera in level
 ```
 
-We’ll also start with a blank slate by commenting out the default “Hello World!” text in gameRenderPost.
+We'll also start with a blank slate by commenting out the default “Hello World!” text in gameRenderPost.
 
 ```javascript
 // LJS.drawTextScreen('Hello World!', LJS.mainCanvasSize.scale(.5), 80);
@@ -68,11 +68,11 @@ We’ll also start with a blank slate by commenting out the default “Hello Wor
 
 ![LittleJS Screenshot](images/2.png)
 
-It’s getting closer! The camera is now centered and blocks are rectangular.
+It is getting closer! The camera is now centered and blocks are rectangular.
 
 ## Modify the Level Size
 
-For this example we will use a fixed size canvas. This will let the drawing canvas always be the same resolution, even if the window size changes. Black space is added on the sides to compensate. It’s a great option for any game that uses a single screen like this.
+For this example we will use a fixed size canvas. This will let the drawing canvas always be the same resolution, even if the window size changes. Black space is added on the sides to compensate. It is a great option for any game that uses a single screen like this.
 
 To enable it we will set canvasFixedSize in gameInit to use 720p resolution.
 
@@ -80,7 +80,7 @@ To enable it we will set canvasFixedSize in gameInit to use 720p resolution.
 LJS.setCanvasFixedSize(vec2(1280, 720)); // use a 720p fixed size canvas
 ```
 
-Before we tweak the level size, let’s add this bit of code to gameRender to show the size of the level. This will cause some rects to be drawn each frame before the engine objects. To create color objects we pass in RGB values between 0 and 1.
+Before we tweak the level size, let's add this bit of code to gameRender to show the size of the level. This will cause some rects to be drawn each frame before the engine objects. To create color objects we pass in RGB values between 0 and 1.
 
 ```javascript
 LJS.drawRect(LJS.cameraPos, vec2(100), rgb(.5,.5,.5)); // draw background
@@ -112,7 +112,7 @@ Now that looks almost like a breakout game!
 
 ## Create the Player Paddle
 
-For the player’s paddle, let’s create a new class of object that extends the built in EngineObject. This will allow us to control movement with the mouse. In this Paddle class we will just add some new code to the update function which is automatically called each frame by the engine.
+For the player's paddle, let's create a new class of object that extends the built in EngineObject. This will allow us to control movement with the mouse. In this Paddle class we will just add some new code to the update function which is automatically called each frame by the engine.
 
 ```javascript
 class Paddle extends LJS.EngineObject
@@ -132,7 +132,7 @@ new Paddle; // create player's paddle
 
 There is now a square paddle that moves along the bottom of the screen.
 
-Let’s make the paddle wider and move it up a smidge by adding a constructor to the Paddle class.
+Let's make the paddle wider and move it up a smidge by adding a constructor to the Paddle class.
 
 ```javascript
 constructor()
@@ -153,7 +153,7 @@ this.pos.x = LJS.clamp(this.pos.x, this.size.x/2, levelSize.x - this.size.x/2);
 ```
 
 ## Create the Ball
-The final missing piece is of course that ball that moves around and bounces off of stuff. We will leverage the built in physics solver to handle all the ball’s physics and collision math.
+The final missing piece is of course that ball that moves around and bounces off of stuff. We will leverage the built in physics solver to handle all the ball's physics and collision math.
 
 We can create a Ball class the same way we created the paddle. In this case we will also apply some velocity to ball so it starts moving right away.
 
@@ -169,7 +169,7 @@ class Ball extends LJS.EngineObject
 }
 ```
 
-Then we just need to create the ball in gameInit, passing in the camera position for it’s location.
+Then we just need to create the ball in gameInit, passing in the camera position for its location.
 
 ```javascript
 {
@@ -186,13 +186,13 @@ You may have noticed that the ball goes right through the paddle and bricks. To
 this.setCollision(); // make object collide
 ```
 
-Now the ball collides but unfortunately also pushes the paddle away, not quite what we want. To prevent the paddle from being moved by physics we will make it use static physics by setting it’s mass to 0 in the paddle constructor.
+Now the ball collides but unfortunately also pushes the paddle away, not quite what we want. To prevent the paddle from being moved by physics we will make it use static physics by setting its mass to 0 in the paddle constructor.
 
 ```javascript
 this.mass = 0; // make object have static physics
 ```
 
-Getting closer, the paddle is not pushed away but the ball doesn’t bounce either. To make it bounce, we need to set the ball’s restitution which controls how much it will bounce.
+Getting closer, the paddle is not pushed away but the ball doesn't bounce either. To make it bounce, we need to set the ball's restitution which controls how much it will bounce.
 
 ```javascript
 this.restitution = 1; // make object bounce
@@ -202,7 +202,7 @@ this.restitution = 1; // make object bounce
 
 It works! The ball now bounces off the paddle, still not the walls or blocks yet though.
 
-Before we continue, let’s make the ball a bit smaller by changing the super call in it’s constructor.
+Before we continue, let's make the ball a bit smaller by changing the super call in its constructor.
 
 ```javascript
 super(pos, vec2(.5)); // set object position and size
@@ -210,7 +210,7 @@ super(pos, vec2(.5)); // set object position and size
 
 ## Make the Ball Bounce Off Walls
 
-Next, let’s make the ball bounce when it hits the top or sides of the screen. To do this, we will make a Wall object class that works similar to the paddle but without an update function.
+Next, let's make the ball bounce when it hits the top or sides of the screen. To do this, we will make a Wall object class that works similar to the paddle but without an update function.
 
 ```javascript
 class Wall extends LJS.EngineObject
@@ -275,11 +275,11 @@ if (!ball || ball.pos.y < -1)
 }
 ```
 
-Don’t forget to destroy the old ball before creating the new one! Though it doesn’t really matter for this simple example, it would cause the old balls to continue existing while being updated and rendered. That could really slow things in bigger games with thousands of objects.
+Don't forget to destroy the old ball before creating the new one! Though it doesn't really matter for this simple example, it would cause the old balls to continue existing while being updated and rendered. That could really slow things in bigger games with thousands of objects.
 
 ## Break the Bricks
 
-Still, the ball doesn’t collide with the bricks much less breaks them and it wouldn’t be breakout without that. So we need to make the brick collide with the ball, just like the walls, so let’s start with Brick class that is the same as Wall.
+Still, the ball doesn't collide with the bricks much less breaks them and it wouldn't be breakout without that. So we need to make the brick collide with the ball, just like the walls, so let's start with Brick class that is the same as Wall.
 
 ```javascript
 class Brick extends LJS.EngineObject
@@ -300,7 +300,7 @@ And we will just change the for loop in gameInit to use the Brick class.
 const brick = new Brick(vec2(x,y), vec2(2,1)); // create a brick
 ```
 
-Now the ball will bounce off the bricks, but we want it to break the bricks. To do this we can override the brick’s collideWithObject function which is called by the engine when the ball hits it. Instead of the default collide behavior, we just destroy the brick.
+Now the ball will bounce off the bricks, but we want it to break the bricks. To do this we can override the brick's collideWithObject function which is called by the engine when the ball hits it. Instead of the default collide behavior, we just destroy the brick.
 
 ```javascript
 collideWithObject(o)              
@@ -319,7 +319,7 @@ return true; // allow object to collide
 
 Success, we have breakout! All the core components are here though there are a few more changes we can make that will greatly increase the playability.
 
-## Track the Player’s Score
+## Track the Player's Score
 
 We can easily add a score tracker to the game by making a global score variable called score.
 
@@ -343,7 +343,7 @@ LJS.drawTextScreen('Score ' + score, vec2(LJS.mainCanvasSize.x/2, 70), 50); // s
 
 ## Add Sound Effects
 
-So far the game is completely silent. Let’s add sounds using ZzFX. This is a tiny sound effect generator that works in conjunction with LittleJS and can be used on it’s own too.
+So far the game is completely silent. Let's add sounds using ZzFX. This is a tiny sound effect generator that works in conjunction with LittleJS and can be used on its own too.
 
 We will start with the ball bounce sound. [You can use the official ZzFX sound designer to create your own sound.](https://killedbyapixel.github.io/ZzFX/) I recommend using the Blip preset for this one.
 
@@ -364,7 +364,7 @@ collideWithObject(o)
     return true; // allow object to collide
 }
 ```
-Let’s also make a brick break sound. You can use the ZzFX sound designer again to create your own sound, for this one try the Hit preset.
+Let's also make a brick break sound. You can use the ZzFX sound designer again to create your own sound, for this one try the Hit preset.
 
 Create a global object for this sound the same way we did for the bounce sound. You can replace it with your own generated sound or use mine.
 
@@ -372,17 +372,17 @@ Create a global object for this sound the same way we did for the bounce sound.
 const sound_break = new LJS.Sound([,,90,,.01,.03,4,,,,,,,9,50,.2,,.2,.01], 0);
 ```
 
-Then in the Brick’s collideWithObject function just add some code to play that sound.
+Then in the Brick's collideWithObject function just add some code to play that sound.
 
 ```javascript
 sound_break.play(); // play brick break sound
 ```
 
-Now you should hear sound as the ball bounces around and breaks bricks! Of course it’s easy to swap out these sounds with other ones, feel free to experiment.
+Now you should hear sound as the ball bounces around and breaks bricks! Of course it is easy to swap out these sounds with other ones, feel free to experiment.
 
 ## Add Click To Start Interaction
 
-Let’s improve the gameplay by letting the player click to start, instead of creating the ball right away. This will also ensure that the player has clicked which is requirement for audio to play in most browsers.
+Let's improve the gameplay by letting the player click to start, instead of creating the ball right away. This will also ensure that the player has clicked which is requirement for audio to play in most browsers.
 
 We can also add a special sound that plays on startup. Try making an interesting start from the ZzFX sound designer, maybe using the Powerup preset.
 
@@ -408,9 +408,9 @@ if (!ball && LJS.mouseWasPressed(0)) // if there is no ball and left mouse is pr
 
 ## Add Particle Effects
 
-Let’s add some effects when the bricks break. You can use the LittleJS particle system designer to create an explosion effect.
+Let's add some effects when the bricks break. You can use the LittleJS particle system designer to create an explosion effect.
 
-This will be a one shot type of effect, not a continuous emitter so change emitTime to something small like .1 for this example. Now before you play with it too much, let’s test it by pasting in the code it generated into the Brick’s collideWithObject function.
+This will be a one shot type of effect, not a continuous emitter so change emitTime to something small like .1 for this example. Now before you play with it too much, let's test it by pasting in the code it generated into the Brick's collideWithObject function.
 
 Make sure you replace the first parameter, vec2(), with this.pos so the effect appears wherever the brick is, otherwise it will spawn at the world origin.
 
@@ -419,14 +419,14 @@ Make sure you replace the first parameter, vec2(), with this.pos so the effect a
 new LJS.ParticleEmitter(this.pos, 0, 0, 0.1, 100, 3.14, 0, rgb(1, 1, 1, 1), rgb(1, 1, 1, 1), rgb(1, 1, 1, 0), rgb(1, 1, 1, 0), 0.5, 0.1, 1, 0.1, 0.05, 1, 1, 0, 3.14, 0.1, 0.2, 0, 0, 1);
 ```
 
-Now you should see this simple particle effect play wherever a brick breaks. You can continue tweaking the parameters to make your own effect or use the one I made which also uses this.color to change the particle’s color so it matches the brick.
+Now you should see this simple particle effect play wherever a brick breaks. You can continue tweaking the parameters to make your own effect or use the one I made which also uses this.color to change the particle's color so it matches the brick.
 
 ```javascript
 // create explosion effect
 const color = this.color;
 new LJS.ParticleEmitter(
     this.pos, 0,             // pos, angle
-    this.size, .1, 200, 3.14,// emitSize, emitTime, emitRate, emitCone
+    this.size, .1, 200, 3.14,// emitSize, emitTime, rate, cone
     undefined,               // tileInfo
     color, color,                       // colorStartA, colorStartB
     color.scale(1,0), color.scale(1,0), // colorEndA, colorEndB
@@ -440,7 +440,7 @@ new LJS.ParticleEmitter(
 
 ## Improve the Gameplay
 
-Last but certainly not least, let’s make a few small improvements to the gameplay. It would help to give the player some more control of where the ball goes when it hits the paddle. We can do this by adding some code to the ball’s collideWithObject function.
+Last but certainly not least, let's make a few small improvements to the gameplay. It would help to give the player some more control of where the ball goes when it hits the paddle. We can do this by adding some code to the ball's collideWithObject function.
 
 This code will use the rotate function to modify the bounce angle based on the distance from the center of the paddle.
 
@@ -484,7 +484,7 @@ And assign that paddle object when it is created in gameInit.
 paddle = new Paddle; // create player's paddle
 ```
 
-While we are working in the ball’s collideWithObject function, let’s also make it speed up a little bit each time it bounces.
+While we are working in the ball's collideWithObject function, let's also make it speed up a little bit each time it bounces.
 
 ```javascript
 // speed up the ball
@@ -494,13 +494,13 @@ this.velocity = this.velocity.normalize(speed);
 
 ## Improve the Sound
 
-Lets make the sound a bit more interesting by using positional audio. This lets the volume and panning be adjusted based on the sound’s on screen location. To enable this, just pass a position to the sound’s play function.
+Let's make the sound a bit more interesting by using positional audio. This lets the volume and panning be adjusted based on the sound's on screen location. To enable this, just pass a position to the sound's play function.
 
 ```javascript
 sound_break.play(this.pos); // play brick break sound
 ```
 
-For the ball bounce sound, let’s also tweak the pitch by how fast the ball is moving. For the sound play function, the second parameter takes a scalar for volume and the third parameter takes a scalar for pitch.
+For the ball bounce sound, let's also tweak the pitch by how fast the ball is moving. For the sound play function, the second parameter takes a scalar for volume and the third parameter takes a scalar for pitch.
 
 ```javascript
 sound_bounce.play(this.pos, 1, speed); // play bounce sound with pitch scaled by speed

package/examples/breakoutTutorial/game.js

@@ -117,7 +117,7 @@ class Brick extends LJS.EngineObject
         const color = this.color;
         new LJS.ParticleEmitter(
             this.pos, 0,             // pos, angle
-            this.size, .1, 200, 3.14,// emitSize, emitTime, emitRate, emitCone
+            this.size, .1, 200, 3.14,// emitSize, emitTime, rate, cone
             undefined,               // tileInfo
             color, color,                       // colorStartA, colorStartB
             color.scale(1,0), color.scale(1,0), // colorEndA, colorEndB

package/examples/electron/game.js

@@ -65,16 +65,16 @@ function gameInit()
     // create particle emitter
     particleEmitter = new ParticleEmitter(
         vec2(16,9), 0,              // emitPos, emitAngle
-        0, 0, 500, PI,              // emitSize, emitTime, emitRate, emitCone
+        0, 0, 500, PI,              // emitSize, emitTime, rate, cone
         tile(0, 16),                // tileIndex, tileSize
         hsl(1,1,1),   hsl(0,0,0),   // colorStartA, colorStartB
         hsl(0,0,0,0), hsl(0,0,0,0), // colorEndA, colorEndB
-        2, .2, .2, .1, .05,         // time, sizeStart, sizeEnd, speed, angleSpeed
+        1, .2, .2, .1, .05,         // time, sizeStart, sizeEnd, speed, angleSpeed
         .99, 1, 1, PI,              // damping, angleDamping, gravityScale, cone
         .05, .5, true, true         // fadeRate, randomness, collide, additive
     );
     particleEmitter.restitution = .3; // bounce when it collides
-    particleEmitter.trailScale = 2;  // stretch in direction of motion
+    particleEmitter.trailScale = 2;   // stretch as it moves
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -86,7 +86,7 @@ function gameUpdate()
         sound_click.play(mousePos);
 
         // change particle color and set to fade out
-        particleEmitter.colorStartA = hsl();
+        particleEmitter.colorStartA = randColor();
         particleEmitter.colorStartB = randColor();
         particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1,0);
         particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1,0);

package/examples/electron/index.html

@@ -7,7 +7,7 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../dist/littlejs.js?1136></script>
+<script src=../../dist/littlejs.js?11417></script>
 
 <!-- Add your game scripts here -->
-<script src=game.js?1136></script>
+<script src=game.js?11417></script>

package/examples/electron/package.json

@@ -1,12 +1,5 @@
 {
   "name": "littlejsgame",
   "version": "1.0.0",
-  "main": "electron.js",
-  "scripts": {
-    "build": "node build.js"
-  },
-  "devDependencies": {
-    "electron": "^38.2.0",
-    "electron-packager": "^17.1.2"
-  }
+  "main": "electron.js"
 }

package/examples/index.html

@@ -4,6 +4,17 @@
 <link rel=stylesheet href=style.css?9>
 <meta charset=utf-8>
 <meta name='viewport' content='width=device-width, initial-scale=1.0'>
+<!-- meta tags for social media -->
+<meta name='twitter:title'       content='LittleJS Example Browser'>
+<meta property='og:title'        content='LittleJS Example Browser'>
+<meta name='description'         content='Tiny fast HTML5 game engine!'>
+<meta name='twitter:description' content='Tiny fast HTML5 game engine!'>
+<meta property='og:description'  content='Tiny fast HTML5 game engine!'>
+<meta name='twitter:image'       content='https://3d2k.com/images/LittleJSExamples.png'>
+<meta property='og:image'        content='https://3d2k.com/images/LittleJSExamples.png'>
+<meta name='keywords'            content='JavaScript, HTML5, Game, Engine'>
+<meta name='twitter:creator'     content='@KilledByAPixel'>
+<meta name='twitter:card'        content='summary_large_image'>
 </head><body>
 <div id=container1>
 <div id=container3>
@@ -21,8 +32,7 @@ Theme:
     <option value=20px>L</option>
     <option value=24px>XL</option>
 </select>
-<span class=nowrap><input type=checkbox id=checkboxLiveEdit checked>Live Edit</span>
-<span class=nowrap><input type=checkbox id=checkboxJumpToErrors>Jump to Errors</span>
+<span class=nowrap><input type=checkbox id=checkboxLiveEdit onchange=writeSaveData() checked>Live Edit</span>
 </div>
 <div id=divTextareas>
 <textarea id=textareaCode oninput=codeInput() spellcheck=false></textarea>
@@ -75,7 +85,8 @@ class ExampleInfo
 const exampleList = 
 [
     new ExampleInfo('--- SHORT EXAMPLES ---'),
-    new ExampleInfo('Hello World', 'helloWorld.js', 'Minimal starter example', false, 'beginner, gradient, text, tiles'),
+    new ExampleInfo('Hello World', 'helloWorld.js', 'Simple starter example', false, 'beginner, gradient, text, tiles'),
+    new ExampleInfo('Empty', 'empty.js', 'Empty example template', false, 'beginner, text'),
     new ExampleInfo('Texture', 'texture.js', 'Texture display and manipulation', false, 'sprites, loading, tiles'),
     new ExampleInfo('Animation', 'animation.js', 'Sprite animation system', false, 'frames, loop, tiles, sprites'),
     new ExampleInfo('Shapes', 'shapes.js', 'Draw geometric shapes and primitives', false, 'circle, ellipses, rectangles, polygon, lines'),
@@ -87,13 +98,16 @@ const exampleList =
     new ExampleInfo('Particles', 'particles.js', 'Particle system', false, 'effects, emitter, physics, fire, smoke'),
     new ExampleInfo('Timers', 'timers.js', 'Timer objects and UI', false, 'delay, interval, slider'),
     new ExampleInfo('Sound Effects', 'sound.js', 'ZzFX sound effect generator', false, 'audio, volume, ui'),
-    new ExampleInfo('Music', 'music.js', 'Music playback and controls', false, 'audio, streaming, volume, ui'),
+    new ExampleInfo('Music', 'music.js', 'Basic music load, play, pause, and stop', false, 'music, sound, audio, streaming, volume, ui'),
     new ExampleInfo('Font Image', 'systemFont.js', 'Bitmap font system with built-in system font', false, 'text, characters'),
     new ExampleInfo('Parallax', 'parallax.js', 'Parallax scrolling mountains', false, 'generative, canvas, background'),
     new ExampleInfo('Maze Generator', 'maze.js', 'Procedural maze generation', false, 'generative, level, tiles, map, grid'),
     new ExampleInfo('Medals', 'medals.js', 'Achievement system', false, 'unlock, progress, newgrounds'),
-    new ExampleInfo('Piano', 'piano.js', 'Interactive piano keyboard', false, 'music, notes, ui, instrument'),
     new ExampleInfo('Clock', 'clock.js', 'Animated analog clock', false, 'time, rotation, lines, rectangles'),
+    new ExampleInfo('Piano', 'piano.js', 'Interactive piano keyboard', false, 'music, sound, audio, notes, ui, instrument'),
+    new ExampleInfo('Step Sequencer', 'sequencer.js', 'Simple music loop creation tool', false, 'music, sound, audio, notes, ui, instrument'),
+    new ExampleInfo('Music Player', 'musicPlayer.js', 'Advanced music player with audio seeking and drag and drop', false, 'music, sound, audio, streaming, volume, ui'),
+    new ExampleInfo('WebGL Shader', 'shader.js', 'Full canvas webgl shader', false, 'webgl, visual, effect'),
     new ExampleInfo('--- MINI GAMES ---'),
     new ExampleInfo('Pong Game', 'pongGame.js', 'Classic paddle ball bouncing', false, 'objects, collision'),
     new ExampleInfo('Platformer Game', 'platformer.js', 'Jump and run side view', false, 'objects, gravity, level, tiles, camera'),
@@ -138,7 +152,7 @@ function initExampleBrowser()
     // 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);
+    let exampleIndex = exampleList.findIndex((example) => example.name === selectedExample);
     if (exampleIndex < 0)
         exampleIndex = 1;
     selectExample.selectedIndex = exampleIndex;
@@ -233,11 +247,11 @@ function setExample()
     exampleInfo.innerText = example.text;
     const filename = 'examples/' + example.filename;
     exampleLink.href = 'https://github.com/KilledByAPixel/LittleJS/tree/main/' + filename;
-    exampleLink.innerText = 'View code on GitHub';
+    exampleLink.innerText = 'View on GitHub: ' + example.filename;
     
     // update URL parameter
     const url = new URL(window.location);
-    url.searchParams.set('example', example.filename);
+    url.searchParams.set('example', example.name);
     window.history.replaceState({}, '', url);
     
     loadFile(example.filename, example.largeExample);
@@ -522,13 +536,13 @@ function setCode(code, filename)
         iframeContent.engineInit(iframeContent.gameInit, iframeContent.gameUpdate, iframeContent.gameUpdatePost, iframeContent.gameRender, iframeContent.gameRenderPost, ['tiles.png?'+Date.now()])
         .catch(error =>
         {
-            const errorLine = getErrorLine(error.stack);
+            const errorLine = error ? getErrorLine(error.stack) : -1;
             if (errorLine >= 0)
                 setErrorLine(errorLine);
             let message = error;
-            if (error.message)
+            if (error && error.message)
                 message = error.message;
-            if (error.stack)
+            if (error && error.stack)
                 message += '\n' + error.stack;
             setErrorMessage(message);
             throw error;
@@ -613,35 +627,6 @@ function setErrorLine(lineNumber)
         clearErrorLine();
         --lineNumber; // codeMirror uses 0-based line numbers
         errorLineMarker = codeMirror.getDoc().addLineClass(lineNumber, 'background', 'error-line');
-        if (checkboxJumpToErrors.checked)
-        {
-            codeMirror.scrollIntoView({line: lineNumber, ch: 0});
-            codeMirror.focus();
-        }
-    }
-    else if (textareaCode && checkboxJumpToErrors.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 (checkboxJumpToErrors.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();
-        }
     }
 }
 
@@ -666,13 +651,41 @@ textareaConsole.addEventListener('scroll', onScrollConsole);
 
 ///////////////////////////////////////////////////////////////////////////////
 // load saved preferences from localStorage
-const defaultTheme = 'littlejs';
-const defaultFontSize = '16px';
-const savePrefix = 'LittleJSExamples_';
-const savedTheme = localStorage.getItem(savePrefix+'theme') || defaultTheme;
-const savedFontSize = localStorage.getItem(savePrefix+'fontSize') || defaultFontSize;
-selectFontSize.value = savedFontSize;
-textareaCode.style.fontSize = savedFontSize;
+const saveName = 'LittleJSExamples';
+let savedTheme;
+
+function readSaveData()
+{
+    // load saved preferences
+    const defaultTheme = 'littlejs';
+    const defaultFontSize = '16px';
+    const saveDataJSON = localStorage.getItem(saveName);
+    const saveData = saveDataJSON ? JSON.parse(saveDataJSON) : {};
+    selectTheme.value = savedTheme = saveData.theme ?? defaultTheme;
+    selectFontSize.value = saveData.fontSize ?? defaultFontSize;
+}
+readSaveData();
+
+function writeSaveData()
+{
+    // Save preferences to localStorage
+    const theme = selectTheme.value;
+    const fontSize = selectFontSize.value;
+    const saveData =
+    {
+        theme,
+        fontSize
+    };
+    const saveDataJSON = JSON.stringify(saveData);
+    localStorage.setItem(saveName, saveDataJSON);
+}
+
+function resetDefaults()
+{
+    localStorage.removeItem(saveName);
+    readSaveData();
+    loadTheme();
+}
 
 ///////////////////////////////////////////////////////////////////////////////
 // setup code mirror
@@ -750,20 +763,18 @@ function addCodeMirrorElement(filename, type, rel)
 
 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;
+    const theme = selectTheme.value;
+    const fontSize = selectFontSize.value;
+    textareaCode.style.fontSize = fontSize;
     if (codeMirror)
     {
-        codeMirror.getWrapperElement().style.fontSize = size;
+        codeMirror.getWrapperElement().style.fontSize = fontSize;
         codeMirror.setOption('theme', theme);
     }
+    
+    // Save preferences to localStorage
+    writeSaveData();
 }
 
 ///////////////////////////////////////////////////////////////////////////////