littlejsengine 1.14.19 → 1.14.28

package/examples/shorts/box2dPool.js

@@ -0,0 +1,108 @@
+const hitSound = new Sound([,,2e3,,,.01]);
+const maxHitDistance = 6;
+
+class Ball extends Box2dObject
+{
+    constructor(position, number=0)
+    {
+        const color = hsl(number/9, 1, number? .5 : 1);
+        super(position, vec2(), 0, 0, color);
+        this.number = number;
+
+        // setup pool ball physics
+        const friction = 0, restitution = .95;
+        this.addCircle(1, vec2(), 1, friction, restitution);
+        this.setLinearDamping(.4);
+        this.setBullet(true);
+        this.setFixedRotation(true);
+    }
+    beginContact()
+    {
+        const volume = clamp(this.getSpeed()/20);
+        hitSound.play(this.pos, clamp(this.getSpeed()/20));
+    }
+    canHit() { return this == cueBall && this.getSpeed() < 1; }
+    getHitOffset()
+    {
+        // hit from cue ball to mouse position
+        const deltaPos = mousePos.subtract(this.pos);
+        const length = min(deltaPos.length(), maxHitDistance);
+        return deltaPos.normalize(length); 
+    }
+    update()
+    {
+        if (this.canHit() && mouseWasPressed(0))
+        {
+            // hit the cue ball
+            const accel = this.getHitOffset().scale(8);
+            this.applyAcceleration(accel);
+            hitSound.play(cueBall.pos);
+        }
+        if (this.pocketed)
+            this.destroy();
+    }
+    render()
+    {
+        super.render();
+
+        // draw white circle and ball number
+        drawCircle(this.pos, .6, WHITE);
+        const textPos = this.pos.add(vec2(0,-.06));
+       	if (this.number)
+            drawTextOverlay(this.number, textPos, .5, BLACK);
+        if (this.canHit())
+        {
+            // draw the aim line
+            const offset = this.getHitOffset();
+            const endPos = this.pos.add(offset);
+            const width = offset.length()/maxHitDistance;
+            drawLine(this.pos, endPos, width, hsl(0,1,.5,.5), 
+                vec2(), 0, false, false, overlayContext);
+        }
+    }
+}
+
+class Pocket extends Box2dStaticObject
+{
+    constructor(pos, size)
+    {
+        super(pos, size, 0, 0, BLACK);
+
+        // create a sensor circle for pocket
+        this.addCircle(size.x);
+        this.setSensor(true);
+    }
+    render()
+    {
+        // add ball size to pocket size for drawing
+        drawCircle(this.pos, this.size.x + 1, BLACK);
+    }
+    beginContact(other) { other.pocketed = 1; }
+}
+
+async function gameInit()
+{
+    // setup box2d
+    await box2dInit();
+    canvasClearColor = hsl(.4,.5,.5);
+
+    // create table walls
+    const groundObject = new Box2dStaticObject;
+    groundObject.color = hsl(.1,1,.2);
+    groundObject.addBox(vec2(100,3), vec2( 0, 8.5));
+    groundObject.addBox(vec2(100,3), vec2( 0,-8.5));
+    groundObject.addBox(vec2(3,100), vec2( 15,0));
+    groundObject.addBox(vec2(3,100), vec2(-15,0));
+
+    // create pockets
+    for (let j=0; j<2; ++j)
+    for (let i=0; i<3; ++i)
+        new Pocket(vec2(i-1, j-.5).scale(13), vec2(.5));
+   
+    // create balls
+    let number = 1;
+    for (let i=5;   i--;)
+    for (let j=i+1; j--;)
+        new Ball(vec2(6+i*.9, j-i/2), number++);
+    cueBall = new Ball(vec2(-6, 0));
+}

package/examples/shorts/cameraDrag.js

@@ -0,0 +1,22 @@
+function gameInit()
+{
+    // create some objects
+    for (let i=500; i--;)
+    {
+        const pos = randInCircle(100);
+        const size = vec2(rand(2,9),rand(2,9));
+        const color = randColor();
+        const angle = rand(PI);
+        new EngineObject(pos, size, 0, angle, color);
+    }
+}
+
+function gameUpdate()
+{
+    // drag camera with mouse
+    if (mouseIsDown(0))
+        cameraPos = cameraPos.subtract(mouseDelta);
+
+    // zoom camera with mouse wheel
+    cameraScale = clamp(cameraScale*(1-mouseWheel/5), 1, 1e3);
+}

package/examples/shorts/debugDraw.js

@@ -0,0 +1,37 @@
+class BounceObject extends EngineObject
+{
+    constructor(pos, size, tile)
+    {
+        super(pos, size, tile);
+        this.velocity = vec2(.1);
+    }
+
+    update()
+    {
+        // show debug info
+        debugText('Debug Text', this.pos.add(vec2(0,3)), 1, WHITE);
+        debugRect(this.pos, this.size, RED);
+        const trianglePoints = [vec2(-2,-1), vec2(0,2), vec2(2,-1)];
+        debugPoly(mousePos, trianglePoints, YELLOW);
+        debugLine(this.pos, mousePos, BLUE);
+
+        // bounce off screen edges
+        const cameraSize = getCameraSize();
+        if (abs(this.pos.x) > cameraSize.x/2)
+        {
+            debugCircle(this.pos, 3, GREEN, 1);
+            this.velocity.x = -this.velocity.x;
+        }
+        if (abs(this.pos.y) > cameraSize.y/2)
+        {
+            debugCircle(this.pos, 3, GREEN, 1);
+            this.velocity.y = -this.velocity.y;
+        }
+    }
+}
+
+function gameInit()
+{
+    canvasClearColor = GRAY;
+    new BounceObject(vec2(), vec2(5), tile(3,128));
+}

package/examples/shorts/flappyGame.js

@@ -4,6 +4,7 @@ class Wall extends EngineObject
     {
         super(pos, size, 0, 0, hsl(.3,.5,.3));
         this.setCollision(); // make object collide
+        this.mass = 0;
     }
     update()
     {

package/examples/shorts/fps.js

@@ -0,0 +1,90 @@
+let playerPos = vec2(), playerAngle = 0;
+setTileFixBleedScale(0);
+
+// a simple function to create the level
+const levelTest = (p)=> (floor(p.x)**3&floor(p.y)**2)%30>5;
+
+function gameUpdate()
+{
+    // update camera angle with mouse pointer lock
+    if (mouseWasPressed(0))
+        pointerLockRequest();
+    if (keyWasPressed('Escape'))
+        pointerLockExit()
+    if (pointerLockIsActive() || isTouchDevice)
+        playerAngle += mouseDelta.x * .03;
+
+    // update player movement, prevent walking through walls
+    const velocity = keyDirection().rotate(playerAngle).scale(.05);
+    const normal = vec2();
+    let newPos = playerPos.add(velocity);
+    if (lineTest(playerPos, newPos, levelTest, normal))
+    {
+        // adjust velocity to slide along wall
+        const d = velocity.dot(normal);
+        newPos = newPos.subtract(vec2(d*normal.x, d*normal.y));
+        if (!levelTest(newPos))
+            playerPos = newPos;
+    }
+    else
+        playerPos = newPos;
+}
+
+function gameRender()
+{
+    {
+        // draw horizontal slizes to create floor and ceiling
+        const h = 9;
+        let pos = vec2(), size = vec2(39, .15), color = rgb();
+        for (let y=-h; y<h; y+=.1)
+        {
+            const p = 1.01 - abs(y/h)
+            color.setHSLA(.1, y>0?0:.5, .7-p*.7);
+            pos.y = y;
+            drawRect(pos, size, color);
+        }
+    }
+    {
+        // draw vertical slices to create the walls
+        // create objects in advance for optimal performance
+        const w = 15;
+        const maxDistance = 50;
+        const pos = vec2(), endPos = vec2(), size = vec2(.15);
+        const tileInfo = new TileInfo(vec2(), vec2(0,16));
+        const normal = vec2(), light = vec2().setAngle(2);
+        const color = rgb();
+        for (pos.x=-w; pos.x<w; pos.x+=.1)
+        {
+            // cast ray for this slice
+            const angle = playerAngle + pos.x/w/2;
+            endPos.setAngle(angle, maxDistance);
+            endPos.x += playerPos.x;
+            endPos.y += playerPos.y;
+            const p = lineTest(playerPos, endPos, levelTest, normal);
+            if (!p) continue;
+
+            // get texture coordinate
+            const t = mod(p.x+p.y, 1);
+            tileInfo.pos.x = 161 + 14*t;
+
+            // apply fog and lighting
+            const d = p.distance(playerPos)/maxDistance;
+            const l = max(0, normal.dot(light));
+            size.y = .5/d;
+            color.setHSLA(.6, 1-d, .7-d+l*.3);
+
+            // draw the section the wall
+            drawTile(pos, size, tileInfo, color);
+        }
+    }
+    
+    // draw instructions and pointer lock status
+    const instructions = pointerLockIsActive() ? 
+        'Mouse Control Active - ESC To Exit' : 
+        'Click To Enable Mouse Control';
+    const textPos = vec2(mainCanvasSize.x/2, 50);
+    const textSize = 30;
+    const textColor = pointerLockIsActive() ? GREEN : WHITE;
+    if (!isTouchDevice)
+        drawTextScreen(instructions, textPos, textSize, textColor);
+}

package/examples/shorts/helloWorld.js

@@ -7,5 +7,5 @@ function gameRender()
     drawTextOverlay('LittleJS Engine', vec2(0,3), 3);
         
     // draw a tile
-    drawTile(vec2(Math.sin(time)*3,-2), vec2(7), tile(3,128));
+    drawTile(vec2(sin(time)*3,-2), vec2(7), tile(3,128));
 }

package/examples/shorts/hillGlideGame.js

@@ -9,8 +9,6 @@ class Player extends EngineObject
 
     update()
     {
-        super.update();
-
         // check ground height
         const h = getGroundHeight(this.pos.x);
         if (this.pos.y < h + this.size.y/2)
@@ -35,7 +33,7 @@ class Player extends EngineObject
 
 function getGroundHeight(x)
 {
-    return Math.sin(x/4)*2 + Math.sin(x/17);
+    return sin(x/4)*2 + sin(x/17);
 }
 
 function gameInit()

package/examples/shorts/input.js

@@ -0,0 +1,59 @@
+function gameUpdate()
+{
+    if (isUsingGamepad)
+    {
+        debugText('Gamepad Mode', vec2(0,4));
+
+        // analog sticks
+        for (let i=2; i--;)
+        {
+            const stick = gamepadStick(i);
+            const pos = vec2(i?2:-2, 1);
+            debugCircle(pos, 2, WHITE);
+            debugLine(pos, pos.add(stick), GREEN);
+        }
+
+        // buttons
+        for (let i=16; i--;)
+        {
+            const pos = vec2(-1.5 + i%4, -2 - (i/4|0));
+            if (gamepadIsDown(i))
+                debugCircle(pos, 1, RED, 0, 1);
+            debugCircle(pos, 1, WHITE);
+        }
+    }
+    else if (isTouchDevice)
+    {
+        debugText('Touch Mode', vec2(0,4));
+
+        // touch input routed to mouse
+        if (mouseIsDown(0))
+            debugCircle(mousePos, 4, RED, 0, 1);
+        debugCircle(mousePos, 4, WHITE);
+    }
+    else
+    {
+        debugText('Mouse and Keyboard Mode', vec2(0,4));
+
+        // keyboard key (space bar)
+        debugRect(vec2(), vec2(2), WHITE);
+        if (keyIsDown('Space'))
+            debugRect(vec2(), vec2(2), RED, 0, 0, 1);
+
+        // keyboard direction (arrow keys or WASD)
+        const inputDirection = keyDirection();
+        debugLine(vec2(), inputDirection, GREEN);
+
+        // mouse pos
+        debugPoint(mousePos, mouseIsDown(0) ? RED : YELLOW);
+
+        // mouse buttons
+        for (let i=3; i--;)
+        {
+            const pos = vec2(-1 + i, -3);
+            if (mouseIsDown(i))
+                debugCircle(pos, 1, RED, 0, 1);
+            debugCircle(pos, 1, WHITE);
+        }
+    }
+}

package/examples/shorts/landerGame.js

@@ -9,12 +9,10 @@ class Player extends EngineObject
 
     update()
     {
-        super.update();
-        
         // space ship controls
         const moveInput = keyDirection();
         this.applyAngularAcceleration(moveInput.x * .002);
-        const accel = vec2(0, moveInput.y*.002).rotate(this.angle);
+        const accel = this.getUp(moveInput.y*.002);
         this.applyAcceleration(accel);
     }
 

package/examples/shorts/medals.js

@@ -4,19 +4,25 @@ const medal_leftClick = new Medal(1, 'Lefty', 'Left clicked!', '🐁');
 const medal_rightClick = new Medal(2, 'Righty', 'Right clicked!', '🐭');
 const medal_spacePressed = new Medal(3, 'Space', 'Pressed spacebar!', '🚀');
 
-// setup medals
-const saveName = 'Medals Example';
-medalsInit(saveName);
+function gameInit()
+{
+    // setup medals
+    const saveName = 'Medals Example';
+    medalsInit(saveName);
+
+    // clear unlocked medals for testing
+    medalsForEach(medal=> medal.unlocked = false);
 
-// clear medals for testing
-medalsForEach(medal=> medal.unlocked = false);
-medal_openedExample.unlock();
+    // unlock the example medal
+    medal_openedExample.unlock();
 
-// set background color
-canvasClearColor = hsl(.5,.3,.2);
+    // set background color
+    canvasClearColor = hsl(.5,.3,.2);
+}
 
 function gameUpdate()
 {
+    // unlock example medals based on input
     if (mouseWasPressed(0))
         medal_leftClick.unlock();
     if (mouseWasPressed(2))
@@ -25,7 +31,7 @@ function gameUpdate()
         medal_spacePressed.unlock();
 }
 
-function gameRender()
+function gameRenderPost()
 {
     const size = 80;
     let pos = mainCanvasSize.scale(.5).subtract(vec2(0,40));

package/examples/shorts/music.js

@@ -1,7 +1,5 @@
-let musicPlayer, playButton, stopButton, infoText;
-let musicSound = new SoundWave('song.mp3');
-let musicVolume = 1;
-let music;
+const musicSound = new SoundWave('song.mp3');
+let musicVolume = 1, musicInstance;
 
 function gameInit()
 {
@@ -13,7 +11,8 @@ function gameInit()
     canvasClearColor = hsl(.9,.3,.2);
 
     // setup music player UI
-    musicPlayer = new UIObject(mainCanvasSize.scale(.5), vec2(500, 220));
+    const center = mainCanvasSize.scale(.5);
+    musicPlayer = new UIObject(center, vec2(500, 220));
 
     // infomation text
     infoText = new UIText(vec2(0, -70), vec2(400, 50));
@@ -26,8 +25,7 @@ function gameInit()
     volumeSlider.onChange = () => 
     {
         musicVolume = volumeSlider.value;
-        if (music) 
-            music.setVolume(musicVolume);
+        musicInstance?.setVolume(musicVolume);
     };
 
     // play button
@@ -39,17 +37,17 @@ function gameInit()
             return;
         
         // handle play/pause toggle
-        if (!music)
-            music = musicSound.playMusic(musicVolume);
-        else if (music.isPaused())
-            music.resume();
+        if (!musicInstance)
+            musicInstance = musicSound.playMusic(musicVolume);
+        else if (musicInstance.isPaused())
+            musicInstance.resume();
         else
-            music.pause();
+            musicInstance.pause();
     };
 
     // stop button
     stopButton = new UIButton(vec2(90, 50), vec2(140, 50), 'Stop');
-    stopButton.onClick = ()=>  music && music.stop();
+    stopButton.onClick = ()=>  musicInstance?.stop();
     musicPlayer.addChild(stopButton);
 }
 
@@ -69,10 +67,10 @@ function gameUpdate()
     else
     {
         // update ui text
-        const isPlaying = music && music.isPlaying();
+        const isPlaying = musicInstance?.isPlaying();
         playButton.text = isPlaying ? 'Pause' : 'Play';
-        const current = music ? music.getCurrentTime() : 0;
-        const duration = musicSound.getDuration();
-        infoText.text = formatTime(current) +' / '+ formatTime(duration);
+        const current = formatTime(musicInstance?.getCurrentTime());
+        const duration = formatTime(musicSound.getDuration());
+        infoText.text = current + ' / ' + duration;
     }
 }

package/examples/shorts/musicPlayer.js

@@ -1,6 +1,5 @@
-let musicPlayer, playButton, stopButton, progressBar;
-let musicSound, music;
-let musicVolume = 1;
+
+let musicVolume = 1, musicSound, musicInstance;
 
 function gameInit()
 {
@@ -13,7 +12,8 @@ function gameInit()
     canvasClearColor = hsl(.9,.3,.2);
 
     // setup music player UI
-    musicPlayer = new UIObject(mainCanvasSize.scale(.5), vec2(500, 300));
+    const center = mainCanvasSize.scale(.5);
+    musicPlayer = new UIObject(center, vec2(500, 300));
     const title = new UIText(vec2(0, -100), vec2(500, 40),
         'LittleJS Music Player');
     musicPlayer.addChild(title);
@@ -21,7 +21,7 @@ function gameInit()
     // drop zone text
     const dropZoneText = new UIText(vec2(0, -60), vec2(450, 20),
         'Drag & Drop Audio Files Here!');
-    dropZoneText.textColor = hsl(.9, .3, .8, .7);
+    dropZoneText.textColor = GRAY;
     musicPlayer.addChild(dropZoneText);
 
     // volume slider
@@ -31,8 +31,7 @@ function gameInit()
     volumeSlider.onChange = () => 
     {
         musicVolume = volumeSlider.value;
-        if (music) 
-            music.setVolume(musicVolume);
+        musicInstance?.setVolume(musicVolume);
     };
 
     // play button
@@ -44,17 +43,17 @@ function gameInit()
             return;
         
         // handle play/pause toggle
-        if (!music)
-            music = musicSound.playMusic(musicVolume);
-        else if (music.isPaused())
-            music.resume();
+        if (!musicInstance)
+            musicInstance = musicSound.playMusic(musicVolume);
+        else if (musicInstance.isPaused())
+            musicInstance.resume();
         else
-            music.pause();
+            musicInstance.pause();
     };
 
     // stop button
     stopButton = new UIButton(vec2(90, 50), vec2(140, 50), 'Stop');
-    stopButton.onClick = ()=>  music && music.stop();
+    stopButton.onClick = ()=>  musicInstance?.stop();
     musicPlayer.addChild(stopButton);
 
     // progress bar and scrollbar for seeking
@@ -63,14 +62,14 @@ function gameInit()
     progressBar.onChange = ()=> 
     {
         // control music seek position
-        const wasPlaying = music && music.isPlaying();
-        if (!music)
-            music = musicSound.playMusic(musicVolume, true, true);
+        const wasPlaying = musicInstance?.isPlaying();
+        if (!musicInstance)
+            musicInstance = musicSound.playMusic(musicVolume, 1, 1);
         progressBar.value = min(progressBar.value, .999); // prevent wrap
         const seekTime = progressBar.value * musicSound.getDuration();
-        music.start(seekTime);
+        musicInstance.start(seekTime);
         if (!wasPlaying)
-            music.pause();
+            musicInstance.pause();
     };
     musicPlayer.addChild(progressBar);
 
@@ -93,8 +92,8 @@ function gameInit()
             dropZoneText.text = file.name;
             
             // reset UI
-            music && music.stop();
-            music = undefined;
+            musicInstance?.stop();
+            musicInstance = undefined;
             progressBar.value = 0;
         }
         uiSystem.setupDragAndDrop(onDrop, onDragEnter, onDragLeave);
@@ -124,12 +123,13 @@ function gameUpdate()
     else
     {
         // update ui text
-        const isPlaying = music && music.isPlaying();
+        const isPlaying = musicInstance?.isPlaying();
         playButton.text = isPlaying ? 'Pause' : 'Play';
-        const current = music ? music.getCurrentTime() : 0;
+        const current = musicInstance?.getCurrentTime() || 0;
         const duration = musicSound.getDuration();
-        progressBar.text = formatTime(current) +' / '+ formatTime(duration);
-        if (!progressBar.mouseIsHeld)
+        progressBar.text = formatTime(current) +
+            ' / ' + formatTime(duration);
+        if (!progressBar.isActiveObject())
             progressBar.value = current / duration;
     }
 }

package/examples/shorts/platformer.js

@@ -8,8 +8,6 @@ class Player extends EngineObject
 
     update()
     {
-        super.update();
-
         // apply movement controls
         const moveInput = keyDirection();
         this.velocity.x += moveInput.x * (this.groundObject ? .1: .01);

package/examples/shorts/postProcess.js

@@ -6,7 +6,7 @@ function gameInit()
 function gameRender()
 {
     drawRect(vec2(), vec2(99), GRAY);
-    drawTile(vec2(Math.sin(time)*3, 0), vec2(12), tile(3,128));
+    drawTile(vec2(sin(time)*3, 0), vec2(12), tile(3,128));
 }
 
 const tvShader = `

package/examples/shorts/sequencer.js

@@ -34,7 +34,7 @@ class UISequencerButton extends UIButton
         this.hue = track*.15;
         if (track >= pianoStart)
         {
-            const octave = Math.floor((track-pianoStart) / scale.length);
+            const octave = floor((track-pianoStart) / scale.length);
             const scaleNote = (track-pianoStart) % scale.length;
             this.semitone = scale[scaleNote] + 12*octave;
             this.sound = sound_piano;
@@ -93,7 +93,7 @@ function gameInit()
     tempoSlider.onChange = ()=>
     {
         tempo = lerp(minTempo, maxTempo, tempoSlider.value);
-        tempo = Math.floor(tempo/10) * 10; // round to nearest 10th
+        tempo = floor(tempo/10) * 10; // round to nearest 10th
         tempoSlider.text = `${tempo} BPM`;
     };
     tempoSlider.onChange();
@@ -108,7 +108,7 @@ function gameUpdate()
     const lastStepTime = stepTime;
     const lastStep = currentStep;
     stepTime += timeDelta*tempo/60;
-    currentStep = Math.floor(stepTime) % stepCount;
+    currentStep = floor(stepTime) % stepCount;
     if (currentStep == lastStep && lastStepTime)
         return;
 

package/examples/shorts/slidingPuzzle.js

@@ -20,7 +20,7 @@ class PuzzlePiece extends EngineObject
         const deltaX = emptyGridPos.x - this.gridPos.x;
         const deltaY = emptyGridPos.y - this.gridPos.y;
         if (mouseWasPressed(0))
-        if (isOverlapping(this.pos, this.size, mousePos))
+        if (this.isOverlapping(mousePos))
         if (abs(deltaX) + abs(deltaY) === 1)
         {
             // swap with empty space when clicked on

package/examples/shorts/spaceGame.js

@@ -10,8 +10,6 @@ class Player extends EngineObject
 
     update()
     {
-        super.update();
-
         // space ship controls
         const moveInput = keyDirection();
         this.applyAngularAcceleration(moveInput.x * .005);
@@ -23,7 +21,7 @@ class Player extends EngineObject
             // shoot bullet
             const pos = this.pos.add(vec2(0,1).rotate(cameraAngle));
             const bullet = new EngineObject(pos, vec2(.2,.5), 0, this.angle);
-            bullet.velocity = vec2(0,.5).rotate(this.angle);
+            bullet.velocity = this.getUp(.5);
             bullet.velocity = bullet.velocity.add(this.velocity);
             this.shootTimer.set(.1);
         }