littlejsengine 1.12.4 → 1.13.1

package/examples/shorts/box2dCar.js

@@ -0,0 +1,45 @@
+async function gameInit()
+{
+    // setup box2d and create the objects
+    await box2dInit();
+    gravity.y = -20;
+    groundObject = new Box2dObject(vec2(-8), vec2(), 0, 0, GRAY, box2d.bodyTypeStatic);
+    groundObject.addBox(vec2(100,6));
+    new CarObject(vec2(0,-2));
+}
+
+class CarObject extends Box2dObject
+{
+    constructor(pos)
+    {
+        super(pos, vec2(), 0, 0, RED);
+
+        // create car with wheels
+        this.addBox(vec2(7,2));
+        const frequency = 4, maxTorque = 250;
+        this.wheels = [];
+        for(let i=2; i--;)
+        {
+            const wheelPos = pos.add(vec2(i?2:-2, -1));
+            const wheel = new Box2dObject(wheelPos, vec2(2), tile(7));
+            const joint = new Box2dWheelJoint(this, wheel);
+            joint.setSpringFrequencyHz(frequency);
+            joint.setMaxMotorTorque(maxTorque);
+            joint.enableMotor(!i);
+            wheel.addCircle(2, vec2(), 1, 1);
+            wheel.motorJoint = joint;
+            this.wheels[i] = wheel;
+        }
+    }
+    update()
+    {
+        super.update();
+        
+        // car controls - use mouse, arrow keys, or A/D to drive
+        const maxSpeed = 40;
+        const input = keyDirection().x || mouseIsDown(0);
+        let s = this.wheels[0].motorJoint.getMotorSpeed();
+        s = input ? clamp(s - input, -maxSpeed, maxSpeed) : 0;
+        this.wheels[0].motorJoint.setMotorSpeed(s);
+    }
+}

package/examples/shorts/flappyGame.js

@@ -0,0 +1,52 @@
+class Wall extends EngineObject
+{
+    constructor(pos, size)
+    {
+        super(pos, size, 0, 0, hsl(.4,.5,.4));
+        this.setCollision(); // make object collide
+    }
+    update()
+    {
+        this.pos.x -= .1; // move walls to the left
+    }
+}
+
+class Player extends EngineObject
+{
+    constructor(pos)
+    {
+        super(pos, vec2(1), tile(9), 0, YELLOW);
+        this.drawSize = vec2(2);
+        this.setCollision(); // make object collide
+    }
+
+    update()
+    {
+        super.update();
+
+        // flappy movement controls
+        if (mouseWasPressed(0) || keyWasPressed('Space'))
+            this.velocity = vec2(0,.2);
+        this.angle = -this.velocity.y*2;
+    }
+
+    collideWithObject(object)
+    {
+        // reset game
+        engineObjectsDestroy();
+        gameInit();
+    }
+}
+
+function gameInit()
+{
+    // setup level
+    gravity.y = -.01;
+    for (let i=100; i--;)
+    {
+        const h=50, y=-h/2-6+rand(9), spacing=15, gap=5;
+        new Wall(vec2(14 + i*spacing,y+h + gap), vec2(3,h));
+        new Wall(vec2(14 + i*spacing,y), vec2(3,h));
+    }
+    new Player(vec2(-7,6));
+}

package/examples/shorts/helloWorld.js

@@ -1,8 +1,11 @@
 function gameRender()
 {
-    // draw text
-    drawText('Hello World', vec2(0,2), 3);
+    // draw background rect
+    drawRect(cameraPos, vec2(30), hsl(0,0,.2));
+
+    // draw text to the overlay canvas
+    drawTextOverlay('Hello World', vec2(0,3), 3);
         
     // draw a tile
-    drawTile(vec2(0,-2), vec2(7), tile(3,128));
+    drawTile(vec2(Math.sin(time)*3,-2), vec2(7), tile(3,128));
 }

package/examples/shorts/hillGlideGame.js

@@ -0,0 +1,56 @@
+class Player extends EngineObject
+{
+    constructor(pos)
+    {
+        super(pos, vec2(2), tile(9), 0, CYAN);
+        this.damping = 1; // disable damping
+        this.clampSpeed = false; // disable speed clamping
+    }
+
+    update()
+    {
+        super.update();
+
+        const h = getGroundHeight(this.pos.x);
+        if (this.pos.y < h + this.size.y/2)
+        {
+            // clamp to ground and reflect velocity
+            this.pos.y = h + this.size.y/2;
+            const n = vec2((h-getGroundHeight(this.pos.x+.1))/.1, 1).normalize();
+            this.velocity = this.velocity.reflect(n,0);
+        }
+
+        // apply movement controls
+        if (mouseIsDown(0) || keyIsDown('Space'))
+            this.applyAcceleration(vec2(0,-.05));
+        this.velocity.x = max(this.velocity.x,.4);
+        this.angle = this.velocity.angle() - PI/2;
+
+        // move camera with player
+        cameraPos = vec2(this.pos.x+9,5);
+    }
+}
+
+function getGroundHeight(x)
+{
+    return Math.sin(x/4)*2 + Math.sin(x/17);
+}
+
+function gameInit()
+{
+    gravity.y = -.01;
+    new Player(vec2(0,5));
+}
+
+function gameRender()
+{
+    const h = 100, w = 20;
+    const pos = vec2(), size = vec2(.2,h), color = WHITE;
+    for (let x=cameraPos.x-w; x<cameraPos.x+w; x+=.1)
+    {
+        pos.x = x;
+        pos.y = getGroundHeight(x)-h/2;
+        color.setHSLA(.2+.2*wave(.2,1,x), .5, .5);
+        drawRect(pos, size, color);
+    }
+}

package/examples/shorts/landerGame.js

@@ -0,0 +1,32 @@
+class Player extends EngineObject
+{
+    constructor(pos)
+    {
+        super(pos, vec2(1,2), tile(8), 0, RED);
+        this.setCollision(); // make object collide
+    }
+
+    update()
+    {
+        super.update();
+
+        // apply movement controls
+        this.applyAcceleration(keyDirection().scale(.002));
+    }
+}
+
+function gameInit()
+{
+    // setup level
+    gravity.y = -.001;
+    new Player(vec2(0,4));
+
+    // create ground
+    for (let i=0, y=0; i<20; ++i)
+    {
+        y = (y + rand(1,-1)*4) * .5;
+        const o = new EngineObject(vec2(i*2-20, y-54), vec2(2, 99), 0, 0, hsl(0,0,.5+i%.29));
+        o.setCollision(); // make object collide
+        o.mass = 0; // make object have static physics
+    }
+}

package/examples/shorts/maze.js

@@ -0,0 +1,47 @@
+function generateMaze(size)
+{
+    const maze = [], w = size.x, h = size.y;
+    maze[1 + w] = 1; // start point
+    for(let k=w*h*9|0; k--;)
+    {
+        // get a random position on odd coordinates
+        const jx = randInt(w/2-(w%2?0:2)|0)*2 + 1;
+        const jy = randInt(h/2-(h%2?1:2)|0)*2 + 1;
+        const j = jx + jy*w;
+
+        // get a random direction
+        const d = randSign() * (randBool() ? 1 : w);
+
+        // check if we are not the same line or column
+        if (j%w != (j+d*2)%w && (j/w|0) != ((j+d*2)/w|0))
+            continue;
+
+        // check if pos is open and the next 2 cells are closed
+        if (maze[j] && !maze[j+d] && !maze[j+d*2]) 
+            maze[j+d] = maze[j+d*2] = 1;
+    }
+    return maze;
+}
+
+function gameInit()
+{
+    // generate maze data
+    const mazeSize = vec2(27,15);
+    const maze = generateMaze(mazeSize);
+
+    // create tile layer
+    const pos = vec2();
+    const tileLayer = new TileCollisionLayer(pos, mazeSize);
+    for (pos.x = tileLayer.size.x; pos.x--;)
+    for (pos.y = tileLayer.size.y; pos.y--;)
+    {
+        // check if tile should be solid
+        if (maze[pos.x + pos.y*mazeSize.x])
+            continue;
+
+        // set tile data
+        tileLayer.setData(pos, new TileLayerData(1));
+    }
+    tileLayer.redraw(); // redraw tile layer with new data
+    cameraPos = mazeSize.scale(.5); // center camera
+}

package/examples/shorts/medals.js

@@ -0,0 +1,42 @@
+// create example medals
+const medal_openedExample = new Medal(0, 'Opened Example',   'You opened this example!');
+const medal_leftClick     = new Medal(1, 'Left Clicked',     'You left clicked!',     '🐁');
+const medal_rightClick    = new Medal(2, 'Right Clicked',    'You right clicked!',    '🐭');
+const medal_spacePressed  = new Medal(3, 'Pressed Spacebar', 'You pressed spacebar!', '🚀');
+
+// setup medals
+const saveName = 'Medals Example';
+medalsInit(saveName);
+
+// clear medals for testing
+medalsForEach(medal=> medal.unlocked = false);
+medal_openedExample.unlock();
+
+function gameUpdate()
+{
+    if (mouseWasPressed(0))
+        medal_leftClick.unlock();
+    if (mouseWasPressed(2))
+        medal_rightClick.unlock();
+    if (keyWasPressed('Space'))
+        medal_spacePressed.unlock();
+}
+
+function gameRender()
+{
+    const size = 80;
+    let pos = mainCanvasSize.scale(.5).subtract(vec2(0,40));
+    drawTextScreen('Unlocked Medals', pos, size);
+
+    // show unlocked medals
+    let medalsCount = 0;
+    medalsForEach(medal=> medal.unlocked && medalsCount++);
+    pos = pos.add(vec2((1-medalsCount)*size/2, 100));
+    medalsForEach(medal=>
+    {
+        if (!medal.unlocked)
+            return;
+        medal.renderIcon(pos, size);
+        pos.x += size + 8;
+    });
+}

package/examples/shorts/nineSlice.js

@@ -0,0 +1,21 @@
+function gameRender()
+{
+    const nineSliceTile = tile(16);
+    const threeSliceTile = tile(19);
+
+    // draw nine slice with thin border and color
+    drawNineSlice(vec2(-7,4), vec2(13, 6), nineSliceTile, hsl(.1,.5,.9), .5);
+    drawTextOverlay('Nine Slice\nThin Border', vec2(-7,4), 1, BLACK);
+
+    // draw nine slice in screen space with thick border
+    drawNineSliceScreen(vec2(700,150), vec2(250), nineSliceTile);
+    drawTextScreen('Nine Slice\nScreen Space', vec2(700,150), 30, BLACK);
+    
+    // draw three slice with thick border and additive color
+    drawThreeSlice(vec2(-7,-4), vec2(9, 7), threeSliceTile, WHITE, 2, hsl(.6,1,.5));
+    drawTextOverlay('Three Slice\nThick Border', vec2(-7,-4), 1, BLACK);
+
+    // draw three slice in screen space with thick border
+    drawThreeSliceScreen(vec2(700,400), vec2(400,150), threeSliceTile);
+    drawTextScreen('Three Slice\nScreen Space', vec2(700,400), 30, BLACK);
+}

package/examples/shorts/piano.js

@@ -0,0 +1,52 @@
+const pianoSound = new Sound([,0,220,,9]), keys = [];
+
+class PianoKey extends EngineObject
+{
+    constructor(pos, size, semitone, isWhite)
+    {
+        const keySize = 2;
+        size = size.scale(keySize);
+        pos = pos.scale(keySize).add(vec2(0,4-size.y/2));
+        super(pos, size, 0, 0, hsl(0,0,isWhite ? 1 : .3));
+        this.drawSize = size.subtract(vec2(.1,0));
+        this.semitone = semitone;
+    }
+    press()
+    {
+        if (!this.isDown)
+            pianoSound.playNote(this.semitone);
+        this.isDown = true;
+    }
+    release()
+    {
+        if (this.isDown)
+            pianoSound.stop(.2);
+        this.isDown = false;
+    }
+    render()
+    {
+        const color = this.isDown ? RED : this.color;
+        drawRect(this.pos, this.drawSize, color);
+    }
+}
+
+function gameInit()
+{
+    // create piano keyboard
+    for(let i=15; i--;)
+        keys.unshift(new PianoKey(vec2(i-7,0), vec2(1,4), [0,2,4,5,7,9,11][i%7]+(i/7|0)*12, 1));
+    for(let i=10; i--;)
+        keys.unshift(new PianoKey(vec2([1,2,4,5,6][i%5]+(i/5|0)*7-7.5,0), vec2(1,2), [1,3,6,8,10][i%5]+(i/5|0)*12));
+}
+
+function gameUpdate()
+{
+    // update state of piano keys
+    const pressedKey = keys.find(k=>k.isDown);
+    const newPressedKey = mouseIsDown(0) && keys.find(k=>isOverlapping(k.pos, k.size, mousePos));
+    if (newPressedKey != pressedKey)
+    {
+        pressedKey && pressedKey.release();
+        newPressedKey && newPressedKey.press();
+    }
+}

package/examples/shorts/platformer.js

@@ -1,31 +1,23 @@
-class PhysicsObject extends EngineObject
-{
-    constructor(pos, size, color)
-    {
-        super(pos, size, 0, 0, color);
-        this.setCollision(); // make object collide
-        this.mass = 0; // make object have static physics
-    }
-}
-
-class Player extends PhysicsObject
+class Player extends EngineObject
 {
     constructor(pos)
     {
-        super(pos, vec2(2,4), RED);
-        this.mass = 1; // make object have dynamic physics
+        super(pos, vec2(2,4), 0, 0, RED);
+        this.setCollision(); // make object collide
     }
 
     update()
     {
+        super.update();
+
         // apply movement controls
         const moveInput = keyDirection();
         this.velocity.x += moveInput.x * (this.groundObject ? .1: .01);
         if (this.groundObject && moveInput.y > 0)
             this.velocity.y = .9; // jump
 
-        super.update(); // call parent update function
-        cameraPos = vec2(this.pos.x, 9); // move camera with player
+        // move camera with player
+        cameraPos = vec2(this.pos.x, 9); 
     }
 }
 
@@ -33,10 +25,22 @@ function gameInit()
 {
     // setup level
     gravity.y = -.05;
-    new Player(vec2(0,4));
+    new Player(vec2(5,6));
 
-    // create random objects
-    new PhysicsObject(vec2(), vec2(1e3,4), GRAY); // ground
-    for (let i = 1; i < 500; ++i)
-        new PhysicsObject(vec2(i*10+randInt(4), 0), vec2(2+randInt(20),4+randInt(8)), GREEN);
+    // create tile layer
+    const pos = vec2();
+    const tileLayer = new TileCollisionLayer(pos, vec2(256));
+    for (pos.x = tileLayer.size.x; pos.x--;)
+    for (pos.y = tileLayer.size.y; pos.y--;)
+    {
+        // check if tile should be solid
+        const levelHeight = pos.x<9 ? 2 : (pos.x/4|0)**3.1%7;
+        if (pos.y > levelHeight)
+            continue;
+        
+        // set tile data
+        tileLayer.setData(pos, new TileLayerData(1));
+        tileLayer.setCollisionData(pos);
+    }
+    tileLayer.redraw(); // redraw tile layer with new data
 }

package/examples/shorts/{pong.js → pongGame.js}

@@ -32,7 +32,7 @@ function gameUpdate()
         ball && ball.destroy(); // destroy old ball
         ball = new PhysicsObject(cameraPos); // create a ball
         ball.velocity = vec2(.2); // give ball some movement
-        ball.elasticity = 1; // make ball bounce
+        ball.restitution = 1; // make ball bounce
         ball.mass = 1; // make ball have dynamic physics
     }
 

package/examples/shorts/postProcess.js

@@ -0,0 +1,45 @@
+function gameInit()
+{
+    new PostProcessPlugin(tvShader);
+}
+
+function gameRender()
+{
+    drawRect(vec2(), vec2(99), GRAY);
+    drawTile(vec2(), vec2(12), tile(3,128));
+}
+
+const tvShader = `
+// Simple TV Shader Code
+float hash(vec2 p)
+{
+    p=fract(p*.3197);
+    return fract(1.+sin(51.*p.x+73.*p.y)*13753.3);
+}
+float noise(vec2 p)
+{
+    vec2 i=floor(p),f=fract(p),u=f*f*(3.-2.*f);
+    return mix(mix(hash(i),hash(i+vec2(1,0)),u.x),mix(hash(i+vec2(0,1)),hash(i+1.),u.x),u.y);
+}
+void mainImage(out vec4 c, vec2 p)
+{
+    // setup the shader
+    p /= iResolution.xy;
+    c = texture(iChannel0, p);
+
+    // static noise
+    const float staticAlpha = .1;
+    const float staticScale = .005;
+    c += staticAlpha * hash(floor(p/staticScale) + mod(iTime*500., 1e3));
+
+    // scan lines
+    const float scanlineScale = 2.;
+    const float scanlineAlpha = .3;
+    c *= 1. - scanlineAlpha*cos(p.y*2.*iResolution.y/scanlineScale);
+
+    // black vignette around edges
+    const float vignette = 2.;
+    const float vignettePow = 6.;
+    float dx = 2.*p.x-1., dy = 2.*p.y-1.;
+    c *= 1.-pow((dx*dx + dy*dy)/vignette, vignettePow);
+}`;

package/examples/shorts/raycasting.js

@@ -0,0 +1,71 @@
+let playerPos = vec2(), playerAngle = 0;
+
+// a simple function to generate a level
+const levelTest = (X,Y)=> ((X|0)**3&(Y|0)**2)%30>5;
+
+// cast a ray and return the distance to the first wall hit (0-1)
+function raycast(pos, angle)
+{
+    const maxDistance = 40, delta = .05;
+    const rayX = delta*Math.sin(angle);
+    const rayY = delta*Math.cos(angle);
+    let posX = pos.x, posY = pos.y;
+    for (let distance = 0; distance < maxDistance; distance += delta)
+    {
+        if (levelTest(posX, posY))
+            return distance/maxDistance;
+        posX += rayX;
+        posY += rayY;
+    }
+    return 1;
+}
+
+function gameUpdate()
+{
+    // update camera angle with mouse pointer lock
+    if (mouseWasPressed(0))
+        pointerLockRequest();
+    if (keyWasPressed('Escape'))
+        pointerLockExit()
+    if (pointerLockIsActive() || isTouchDevice)
+        playerAngle += mouseDelta.x * .003;
+
+    // update player movement, prevent walking through walls
+    const velocity = keyDirection().scale(.1).rotate(playerAngle);
+    const newPos = playerPos.add(velocity);
+    if (!levelTest(newPos.x, newPos.y))
+        playerPos = newPos;
+}
+
+function gameRender()
+{
+    {
+        // draw horizontal slizes to create floor and ceiling
+        const h = 9;
+        let pos = vec2(), size = vec2(39, .11), color = WHITE;
+        for (let y=-h; y<h; y+=.1)
+        {
+            const p = 1.01-abs(y/h)
+            pos.y = y;
+            color.setHSLA(.1, y>0?0:.5, .7-p*.7);
+            drawRect(pos, size, color);
+        }
+    }
+    {
+        // draw vertical slices to create the walls
+        const w = 20;
+        const pos = vec2(), size = vec2(.11), color = WHITE;
+        for (let x=-w; x<w; x+=.1)
+        {
+            const p = raycast(playerPos, playerAngle + x/w);
+            pos.x = x;
+            size.y = .4/p;
+            color.setHSLA(.6, .5, .7-p*.7);
+            drawRect(pos, size, color);
+        }
+    }
+    // draw instructions and pointer lock status
+    const instructions = pointerLockIsActive() ? 'Mouse Control Active - ESC To Exit' : 'Click To Enable Mouse Control';
+    if (!isTouchDevice)
+        drawTextScreen(instructions, vec2(mainCanvasSize.x/2, 50), 24, pointerLockIsActive() ? GREEN : WHITE);
+}

package/examples/shorts/slidingPuzzle.js

@@ -0,0 +1,42 @@
+const gridSize = vec2(4,3);
+const pieceSize = vec2(5,4);
+let emptyGridPos = vec2();
+
+class PuzzlePiece extends EngineObject
+{
+    constructor(gridPos, size)
+    {
+        const color = rgb(gridPos.x/(gridSize.x-1), gridPos.y/(gridSize.y-1), 1);
+        super(gridPos.multiply(size), size, 0, 0, color);
+        this.gridPos = gridPos;
+        this.text = gridPos.x + gridPos.y*gridSize.x;
+    }
+
+    update()
+    {
+        if (mouseWasPressed(0) && isOverlapping(this.pos, this.size, mousePos))
+        if (abs(this.gridPos.x-emptyGridPos.x) + abs(this.gridPos.y-emptyGridPos.y) == 1)
+        {
+            // swap with empty space when clicked on
+            this.pos = emptyGridPos.multiply(this.size);
+            [emptyGridPos, this.gridPos] = [this.gridPos, emptyGridPos];
+        }
+    }
+
+    render()
+    {
+        super.render();
+        drawTextOverlay(this.text, this.pos, 2.5, BLACK);
+    }
+}
+
+function gameInit()
+{
+    // create puzzle pieces
+    for(let x=gridSize.x; x--;)
+    for(let y=gridSize.y; y--;)
+        (x||y) && new PuzzlePiece(vec2(x,y), pieceSize);
+
+    // center camera on grid
+    cameraPos = gridSize.subtract(vec2(1)).multiply(pieceSize).scale(.5);
+}

package/examples/shorts/spaceGame.js

@@ -0,0 +1,56 @@
+class Player extends EngineObject
+{
+    constructor(pos)
+    {
+        super(pos, vec2(1,2), tile(8), 0, CYAN);
+        this.damping = .97;
+        this.angleDamping = .95;
+        this.shootTimer = new Timer;
+    }
+
+    update()
+    {
+        super.update();
+
+        // space ship controls
+        const moveInput = keyDirection();
+        this.applyAngularAcceleration(moveInput.x * .005);
+        this.applyAcceleration(vec2().setAngle(this.angle, moveInput.y*.02));
+        if (!this.shootTimer.active() && (keyIsDown('Space') || mouseIsDown(0)))
+        {
+            // shoot bullet
+            const pos = this.pos.add(vec2(0,1).rotate(cameraAngle));
+            const bullet = new EngineObject(pos, vec2(.2,.5), 0, this.angle, YELLOW);
+            bullet.velocity = this.velocity.add(vec2(0,.5).rotate(this.angle));
+            this.shootTimer.set(.1);
+        }
+
+        // move camera with player
+        cameraPos = this.pos;
+        cameraAngle = this.angle;
+    }
+}
+
+function gameInit()
+{
+    new Player(vec2(0,4));
+}
+
+function gameRender()
+{
+    // draw wrapped starfield with parallax
+    const range = 32, halfRange = range/2;
+
+    // precreate variables to avoid overhead
+    const pos = vec2(), size = vec2(), color = WHITE;
+    for (let i=1e3; i--;)
+    {
+        // use math to generate random star positions
+        const parallax = i%.13-1;
+        pos.x = mod(i**2.1 + cameraPos.x*parallax, range) + cameraPos.x - halfRange;
+        pos.y = mod(i**3.1 + cameraPos.y*parallax, range) + cameraPos.y - halfRange;
+        size.x = size.y = i%.07+.03;
+        color.a = .1+i%.9;
+        drawRect(pos, size, color);
+    }
+}

package/examples/shorts/starfield.js

@@ -0,0 +1,17 @@
+function gameRender()
+{
+    setBlendMode(1);
+    // precreate variables to avoid overhead
+    const pos = vec2(), size = vec2(), color = WHITE;
+    for(let i=2e3; i--;)
+    {
+        // use math to generate random star positions
+        const offset = time*(9+i**2.1%15) + i**2.3;
+        pos.x = offset%70-35;
+        pos.y = i/120-8;
+        size.x = size.y = i%.11+.07;
+        color.setHSLA(0, 0, Math.sin(i)**4);
+        drawRect(pos, size, color);
+    }
+    setBlendMode(0);
+}