littlejsengine 1.5.2 → 1.6.4

package/{engine/engine.all.release.js → build/littlejs.release.js}

@@ -10,6 +10,7 @@
 
 let showWatermark = 0;
 let godMode = 0;
+let debugKeyCode = 0;
 const debug = 0;
 const debugOverlay = 0;
 const debugPhysics = 0;
@@ -381,7 +382,7 @@ class Vector2
  * @return {Color}
  * @memberof Utilities
  */
-const colorRGBA = (r, g, b, a)=> new Color(r, g, b, a);
+const rgb = (r, g, b, a)=> new Color(r, g, b, a);
 
 /** 
  * Create a color object with HSLA values
@@ -392,7 +393,7 @@ const colorRGBA = (r, g, b, a)=> new Color(r, g, b, a);
  * @return {Color}
  * @memberof Utilities
  */
-const colorHSLA = (h, s, l, a)=> new Color().setHSLA(h, s, l, a);
+const hsl = (h, s, l, a)=> new Color().setHSLA(h, s, l, a);
 
 /** 
  * Color object (red, green, blue, alpha) with some helpful functions
@@ -400,8 +401,8 @@ const colorHSLA = (h, s, l, a)=> new Color().setHSLA(h, s, l, a);
  * let a = new Color;              // white
  * let b = new Color(1, 0, 0);     // red
  * let c = new Color(0, 0, 0, 0);  // transparent black
- * let d = colorRGBA(0, 0, 1);     // blue using rgb color
- * let e = colorHSLA(.3, 1, .5);   // green using hsl color
+ * let d = RGB(0, 0, 1);           // blue using rgb color
+ * let e = HSL(.3, 1, .5);         // green using hsl color
  */
 class Color
 {
@@ -898,7 +899,7 @@ const engineName = 'LittleJS';
  *  @type {String}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.5.2';
+const engineVersion = '1.6.4';
 
 /** Frames per second to update objects
  *  @type {Number}
@@ -989,7 +990,6 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         (glCanvas||mainCanvas).style = mainCanvas.style = overlayCanvas.style = styleCanvas;
         
         gameInit();
-        touchGamepadCreate();
         engineUpdate();
     };
 
@@ -1300,6 +1300,7 @@ class EngineObject
         this.velocity.y += gravity * this.gravityScale;
         this.pos.x += this.velocity.x *= this.damping;
         this.pos.y += this.velocity.y *= this.damping;
+        this.angle += this.angleVelocity *= this.angleDamping;
 
         // physics sanity checks
         ASSERT(this.angleDamping >= 0 && this.angleDamping <= 1);
@@ -1356,6 +1357,7 @@ class EngineObject
                 const smallStepUp = (oldPos.y - o.pos.y)*2 > sizeBoth.y + gravity; // prefer to push up if small delta
                 const isBlockedX = abs(oldPos.y - o.pos.y)*2 < sizeBoth.y;
                 const isBlockedY = abs(oldPos.x - o.pos.x)*2 < sizeBoth.x;
+                const elasticity = max(this.elasticity, o.elasticity);
                 
                 if (smallStepUp | isBlockedY | !isBlockedX) // resolve y collision
                 {
@@ -1368,7 +1370,7 @@ class EngineObject
                             this.groundObject = o;
 
                         // bounce if other object is fixed or grounded
-                        this.velocity.y *= -this.elasticity;
+                        this.velocity.y *= -elasticity;
                     }
                     else if (o.mass)
                     {
@@ -1382,7 +1384,6 @@ class EngineObject
                             + this.velocity.y * 2 * this.mass / (this.mass + o.mass);
 
                         // lerp betwen elastic or inelastic based on elasticity
-                        const elasticity = max(this.elasticity, o.elasticity);
                         this.velocity.y = lerp(elasticity, inelastic, elastic0);
                         o.velocity.y = lerp(elasticity, inelastic, elastic1);
                     }
@@ -1403,12 +1404,11 @@ class EngineObject
                             + this.velocity.x * 2 * this.mass / (this.mass + o.mass);
 
                         // lerp betwen elastic or inelastic based on elasticity
-                        const elasticity = max(this.elasticity, o.elasticity);
                         this.velocity.x = lerp(elasticity, inelastic, elastic0);
                         o.velocity.x = lerp(elasticity, inelastic, elastic1);
                     }
                     else // bounce if other object is fixed
-                        this.velocity.x *= -this.elasticity;
+                        this.velocity.x *= -elasticity;
                 }
                 debugOverlay && debugPhysics && debugAABB(this.pos, this.size, o.pos, o.size, '#f0f');
             }
@@ -1790,6 +1790,23 @@ function setBlendMode(additive, useWebGL=glEnable)
         mainContext.globalCompositeOperation = additive ? 'lighter' : 'source-over';
 }
 
+/** Draw text on overlay canvas in world space
+ *  Automatically splits new lines into rows
+ *  @param {String}  text
+ *  @param {Vector2} pos
+ *  @param {Number}  [size=1]
+ *  @param {Color}   [color=Color()]
+ *  @param {Number}  [lineWidth=0]
+ *  @param {Color}   [lineColor=Color(0,0,0)]
+ *  @param {String}  [textAlign='center']
+ *  @param {String}  [font=fontDefault]
+ *  @param {CanvasRenderingContext2D} [context=overlayContext]
+ *  @memberof Draw */
+function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font, context)
+{
+    drawTextScreen(text, worldToScreen(pos), size*cameraScale, color, lineWidth*cameraScale, lineColor, textAlign, font, context);
+}
+
 /** Draw text on overlay canvas in screen space
  *  Automatically splits new lines into rows
  *  @param {String}  text
@@ -1799,6 +1816,8 @@ function setBlendMode(additive, useWebGL=glEnable)
  *  @param {Number}  [lineWidth=0]
  *  @param {Color}   [lineColor=Color(0,0,0)]
  *  @param {String}  [textAlign='center']
+ *  @param {String}  [font=fontDefault]
+ *  @param {CanvasRenderingContext2D} [context=overlayContext]
  *  @memberof Draw */
 function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=fontDefault, context=overlayContext)
 {
@@ -1819,21 +1838,6 @@ function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineCol
     });
 }
 
-/** Draw text on overlay canvas in world space
- *  Automatically splits new lines into rows
- *  @param {String}  text
- *  @param {Vector2} pos
- *  @param {Number}  [size=1]
- *  @param {Color}   [color=Color()]
- *  @param {Number}  [lineWidth=0]
- *  @param {Color}   [lineColor=Color(0,0,0)]
- *  @param {String}  [textAlign='center']
- *  @memberof Draw */
-function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font)
-{
-    drawTextScreen(text, worldToScreen(pos), size*cameraScale, color, lineWidth*cameraScale, lineColor, textAlign, font, mainContext);
-}
-
 ///////////////////////////////////////////////////////////////////////////////
 
 let engineFontImage;
@@ -2087,15 +2091,15 @@ function inputUpdatePost()
 onkeydown = (e)=>
 {
     if (debug && e.target != document.body) return;
-    e.repeat || (inputData[isUsingGamepad = 0][remapKeyCode(e.keyCode)] = 3);
+    e.repeat || (inputData[isUsingGamepad = 0][remapKey(e.which)] = 3);
     preventDefaultInput && e.preventDefault();
 }
 onkeyup = (e)=>
 {
     if (debug && e.target != document.body) return;
-    inputData[0][remapKeyCode(e.keyCode)] = 4;
+    inputData[0][remapKey(e.which)] = 4;
 }
-const remapKeyCode = (c)=> inputWASDEmulateDirection ? c==87?38 : c==83?40 : c==65?37 : c==68?39 : c : c;
+const remapKey = (c)=> inputWASDEmulateDirection ? c==87?38 : c==83?40 : c==65?37 : c==68?39 : c : c;
 
 ///////////////////////////////////////////////////////////////////////////////
 // Mouse event handlers
@@ -2237,6 +2241,9 @@ if (isTouchDevice)
             return true;
         }
 
+        // try to create touch game pad
+        touchGamepadEnable && touchGamepadCreate();
+
         return ontouchstart(e);
     }
 }
@@ -2250,76 +2257,69 @@ let touchGamepadTimer = new Timer, touchGamepadButtons, touchGamepadStick;
 // create the touch gamepad, called automatically by the engine
 function touchGamepadCreate()
 {
-    if (!touchGamepadEnable || !isTouchDevice)
-        return;
-
     // touch input internal variables
     touchGamepadButtons = [];
     touchGamepadStick = vec2();
 
-    // setup touch input
-    ontouchstart = (e)=>
+    let touchHandler = ontouchstart;
+    ontouchstart = ontouchmove = ontouchend = (e)=> 
     {
-        // fix mobile audio, force it to play a sound on first touch
-        zzfx(0);
-
-        ontouchstart = ontouchmove = ontouchend = (e)=> 
+        // clear touch gamepad input
+        touchGamepadStick = vec2();
+        touchGamepadButtons = [];
+            
+        const touching = e.touches.length;
+        if (touching)
         {
-            // clear touch gamepad input
-            touchGamepadStick = vec2();
-            touchGamepadButtons = [];
-                
-            const touching = e.touches.length;
-            if (touching)
+            touchGamepadTimer.set();
+            if (paused)
             {
-                // set that gamepad is active
-                isUsingGamepad = 1;
-                touchGamepadTimer.set();
-
-                if (paused)
-                {
-                    // touch anywhere to press start when paused
-                    touchGamepadButtons[9] = 1;
-                    return;
-                }
+                // touch anywhere to press start when paused
+                touchGamepadButtons[9] = 1;
+                return;
             }
+        }
 
-            // get center of left and right sides
-            const stickCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
-            const buttonCenter = mainCanvasSize.subtract(vec2(touchGamepadSize, touchGamepadSize));
-            const startCenter = mainCanvasSize.scale(.5);
+        // get center of left and right sides
+        const stickCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
+        const buttonCenter = mainCanvasSize.subtract(vec2(touchGamepadSize, touchGamepadSize));
+        const startCenter = mainCanvasSize.scale(.5);
 
-            // check each touch point
-            for (const touch of e.touches)
+        // check each touch point
+        for (const touch of e.touches)
+        {
+            const touchPos = mouseToScreen(vec2(touch.clientX, touch.clientY));
+            if (touchPos.distance(stickCenter) < touchGamepadSize)
             {
-                const touchPos = mouseToScreen(vec2(touch.clientX, touch.clientY));
-                if (touchPos.distance(stickCenter) < touchGamepadSize)
+                // virtual analog stick
+                if (touchGamepadAnalog)
+                    touchGamepadStick = touchPos.subtract(stickCenter).scale(2/touchGamepadSize).clampLength();
+                else
                 {
-                    // virtual analog stick
-                    if (touchGamepadAnalog)
-                        touchGamepadStick = touchPos.subtract(stickCenter).scale(2/touchGamepadSize).clampLength();
-                    else
-                    {
-                        // 8 way dpad
-                        const angle = touchPos.subtract(stickCenter).angle();
-                        touchGamepadStick.setAngle((angle * 4 / PI + 8.5 | 0) * PI / 4);
-                    }
-                }
-                else if (touchPos.distance(buttonCenter) < touchGamepadSize)
-                {
-                    // virtual face buttons
-                    const button = touchPos.subtract(buttonCenter).direction();
-                    touchGamepadButtons[button] = 1;
-                }
-                else if (touchPos.distance(startCenter) < touchGamepadSize)
-                {
-                    // virtual start button in center
-                    touchGamepadButtons[9] = 1;
+                    // 8 way dpad
+                    const angle = touchPos.subtract(stickCenter).angle();
+                    touchGamepadStick.setAngle((angle * 4 / PI + 8.5 | 0) * PI / 4);
                 }
             }
+            else if (touchPos.distance(buttonCenter) < touchGamepadSize)
+            {
+                // virtual face buttons
+                const button = touchPos.subtract(buttonCenter).direction();
+                touchGamepadButtons[button] = 1;
+            }
+            else if (touchPos.distance(startCenter) < touchGamepadSize)
+            {
+                // virtual start button in center
+                touchGamepadButtons[9] = 1;
+            }
         }
 
-        return ontouchstart(e);
+        // call default touch handler and set to using gamepad
+        touchHandler(e);
+        isUsingGamepad = 1;
+        
+        // must return true so the document will get focus
+        return true;
     }
 }
 
@@ -2345,7 +2345,7 @@ function touchGamepadRender()
     overlayContext.beginPath();
 
     const leftCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
-    if (touchGamepadAnalog)
+    if (touchGamepadAnalog) // draw circle shaped gamepad
     {
         overlayContext.arc(leftCenter.x, leftCenter.y, touchGamepadSize/2, 0, 9);
         overlayContext.fill();
@@ -2650,7 +2650,7 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0)
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-// ZzFXMicro - Zuper Zmall Zound Zynth - v1.1.8 by Frank Force
+// ZzFXMicro - Zuper Zmall Zound Zynth - v1.2.0 by Frank Force
 
 /** Generate and play a ZzFX sound
  *  <br>
@@ -2676,11 +2676,11 @@ function zzfxG
     bitCrush = 0, delay = 0, sustainVolume = 1, decay = 0, tremolo = 0
 )
 {
-    // init parameters
+    // locals
     let PI2 = PI*2, startSlide = slide *= 500 * PI2 / zzfxR / zzfxR, b=[],
         startFrequency = frequency *= (1 + randomness*rand(-1,1)) * PI2 / zzfxR,
-        t=0, tm=0, i=0, j=1, r=0, c=0, s=0, f, length;
-        
+        t=0, tm=0, i=0, j=1, r=0, c=0, s=0, f, length
+
     // scale by sample rate
     attack = attack * zzfxR + 9; // minimum attack to prevent pop
     decay *= zzfxR;
@@ -2730,18 +2730,18 @@ function zzfxG
             Math.cos(modulation*tm++);                    // modulation
         t += f - f*noise*(1 - (Math.sin(i)+1)*1e9%2);     // noise
 
-        if (j && ++j > pitchJumpTime)       // pitch jump
+        if (j && ++j > pitchJumpTime)    // pitch jump
         {
-            frequency += pitchJump;         // apply pitch jump
-            startFrequency += pitchJump;    // also apply to start
-            j = 0;                          // reset pitch jump time
+            frequency += pitchJump;      // apply pitch jump
+            startFrequency += pitchJump; // also apply to start
+            j = 0;                       // reset pitch jump time
         }
 
         if (repeatTime && !(++r % repeatTime)) // repeat
         {
-            frequency = startFrequency;     // reset frequency
-            slide = startSlide;             // reset slide
-            j = j || 1;                     // reset pitch jump time
+            frequency = startFrequency;  // reset frequency
+            slide = startSlide;          // reset slide
+            j ||= 1;                     // reset pitch jump time
         }
     }
     
@@ -3509,7 +3509,7 @@ class Particle extends EngineObject
  * LittleJS Medal System
  * <br> - Tracks and displays medals
  * <br> - Saves medals to local storage
- * <br> - Newgrounds and OS13k integration
+ * <br> - Newgrounds integration
  * @namespace Medals
  */
 

package/examples/breakout/game.js

@@ -26,6 +26,11 @@ function gameInit()
     for (pos.y = 12; pos.y <= levelSize.y-2; pos.y += 1)
         new Brick(pos);
 
+    // create walls
+    new Wall(vec2(-.5,levelSize.y/2),            vec2(1,100)) // top
+    new Wall(vec2(levelSize.x+.5,levelSize.y/2), vec2(1,100)) // left
+    new Wall(vec2(levelSize.x/2,levelSize.y+.5), vec2(100,1)) // right
+
     initPostProcess(); // set up a post processing shader
 }
 

package/examples/breakout/gameObjects.js

@@ -5,31 +5,36 @@
 'use strict';
 
 ///////////////////////////////////////////////////////////////////////////////
-class Paddle extends EngineObject 
+class Wall extends EngineObject
+{
+    constructor(pos, size)
+    {
+        super(pos, size);
+        
+        this.mass = 0; // make object have static physics
+        this.setCollision(); // make object collide
+        this.color = new Color(0,0,0,0); // make object invisible
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+class Paddle extends EngineObject
 {
     constructor(pos)
     {
         super(pos, vec2(5,.5));
-
-        // set to collide
-        this.setCollision();
-        this.mass = 0;
+        
+        this.mass = 0; // make object have static physics
+        this.setCollision(); // make object collide
     }
 
     update()
     {
-        if (isUsingGamepad)
-        {
-            // control with gamepad
-            this.pos.x += gamepadStick(0).x;
-        }
-        else
-        {
-            // move to mouse
-            this.pos.x = mousePos.x;
-        }
+        // control with gamepad or mouse
+        this.pos.x = isUsingGamepad ? this.pos.x + gamepadStick(0).x : mousePos.x;
+
+        // keep paddle in bounds of level
         this.pos.x = clamp(this.pos.x, this.size.x/2, levelSize.x - this.size.x/2);
-        super.update();
     }
 }
 
@@ -39,11 +44,10 @@ class Brick extends EngineObject
     constructor(pos)
     {
         super(pos, vec2(2,1), 1, vec2(32,16), 0, randColor());
-
-        // set to collide
-        this.setCollision();
-        this.mass = 0;
         ++brickCount;
+        
+        this.mass = 0; // make object have static physics
+        this.setCollision(); // make object collide
     }
 
     collideWithObject(o)              
@@ -54,6 +58,7 @@ class Brick extends EngineObject
         --brickCount;
         sound_break.play(this.pos);
 
+        // make explosion effect
         const color1 = this.color;
         const color2 = color1.lerp(new Color, .5);
         new ParticleEmitter(
@@ -62,7 +67,7 @@ class Brick extends EngineObject
             0, vec2(16),                          // tileIndex, tileSize
             color1, color2,                       // colorStartA, colorStartB
             color1.scale(1,0), color2.scale(1,0), // colorEndA, colorEndB
-            .2, .5, 1, .05, .05,// time, sizeStart, sizeEnd, speed, angleSpeed
+            .1, .3, 1, .05, .05,// time, sizeStart, sizeEnd, speed, angleSpeed
             .99, .95, .4, PI,   // damping, angleDamping, gravityScale, cone
             .1, .5, 0, 1        // fadeRate, randomness, collide, additive
         );
@@ -82,55 +87,43 @@ class Ball extends EngineObject
         this.setCollision();
         this.velocity = vec2(randSign(), -1).scale(.1);
         this.elasticity = 1;
-        this.damping = 1;
     }
 
     update()
     {
-        if (this.pos.y < 0)
+        if (this.pos.y < -1)
         {
             // destroy ball if it goes below the level
             ball = 0;
             this.destroy();
         }
 
-        // bounce on sides and top
-        const nextPos = this.pos.x + this.velocity.x;
-        if (nextPos - this.size.x/2 < 0 || nextPos + this.size.x/2 > levelSize.x)
-        {
-            this.velocity.x *= -1;
-            this.bounce();
-        }
-        if (this.pos.y + this.velocity.y > levelSize.y)
-        {
-            this.velocity.y *= -1;
-            this.bounce();
-        }
-
         // update physics
         super.update();
     }
 
     collideWithObject(o)              
     {
-        if (o == paddle && this.velocity.y < 0)
-        {
-            // put english on the ball when it collides with paddle
-            this.velocity = this.velocity.rotate(.2 * (this.pos.x - o.pos.x));
-            this.velocity.y = max(-this.velocity.y, .2);
-            this.bounce();
+        // prevent colliding with paddle if moving upwards
+        if (o == paddle && this.velocity.y > 0)
             return 0;
-        }
-        return 1;
-    }
 
-    bounce()
-    {
         // speed up
-        const speed = min(1.05*this.velocity.length(), .5);
+        const speed = min(1.04*this.velocity.length(), .5);
         this.velocity = this.velocity.normalize(speed);
 
         // scale bounce sound pitch by speed
         sound_bounce.play(this.pos, 1, speed);
+
+        if (o == paddle)
+        {
+            // put english on the ball when it collides with paddle
+            this.velocity = this.velocity.rotate(.2 * (this.pos.x - o.pos.x));
+            this.velocity.y = max(-this.velocity.y, .2);
+            return 0;
+        }
+        
+        // prevent default collision with paddle
+        return 1;
     }
 }

package/examples/breakout/index.html

@@ -1,10 +1,11 @@
 <html><head>
+<title>Little JS Breakout Game Demo</title>
 <meta name=viewport content=width=device-width,height=device-height,initial-scale=1,maximum-scale=1>
 <meta name=apple-mobile-web-app-capable content=yes>
 <meta name=mobile-web-app-capable content=yes>
-<link rel=icon type=image/png href=../../favicon.png>
+<link rel=icon type=image/png href=../favicon.png>
 </head><body>
 
-<script src=../../engine/engine.all.js?125></script>
-<script src=gameObjects.js?125></script>
-<script src=game.js?125></script>
+<script src=../../build/littlejs.js?126></script>
+<script src=gameObjects.js?126></script>
+<script src=game.js?126></script>