littlejsengine 1.12.6 → 1.13.4

package/examples/shorts/box2d.js

@@ -10,7 +10,7 @@ async function gameInit()
     groundObject.addBox(vec2(100,2));
 
     // add some random objects
-    for(let i=50; i--;)
+    for (let i=50; i--;)
     {
         const o = new Box2dObject(randInCircle(5), vec2(), 0, 0, randColor());
         randInt(2) ? o.addCircle(rand(1,2)) : o.addRandomPoly(rand(1,2));

package/examples/shorts/box2dCar.js

@@ -14,11 +14,11 @@ class CarObject extends Box2dObject
     {
         super(pos, vec2(), 0, 0, RED);
 
-        // create a car with wheels
+        // create car with wheels
         this.addBox(vec2(7,2));
         const frequency = 4, maxTorque = 250;
         this.wheels = [];
-        for(let i=2; i--;)
+        for (let i=2; i--;)
         {
             const wheelPos = pos.add(vec2(i?2:-2, -1));
             const wheel = new Box2dObject(wheelPos, vec2(2), tile(7));
@@ -26,24 +26,20 @@ class CarObject extends Box2dObject
             joint.setSpringFrequencyHz(frequency);
             joint.setMaxMotorTorque(maxTorque);
             joint.enableMotor(!i);
-            wheel.addCircle(2);
+            wheel.addCircle(2, vec2(), 1, 1);
             wheel.motorJoint = joint;
             this.wheels[i] = wheel;
         }
     }
     update()
     {
-        // car controls - use arrow keys or A/D to drive
-        const maxSpeed = 40, brakeAmount = .9;
-        const input = keyDirection().x;
+        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) : s * brakeAmount;
+        s = input ? clamp(s - input, -maxSpeed, maxSpeed) : 0;
         this.wheels[0].motorJoint.setMotorSpeed(s);
-        super.update();
-    }
-    destroy()
-    {
-        this.wheels.forEach(o=>o.destroy());
-        super.destroy();
     }
 }

package/examples/shorts/clock.js

@@ -1,7 +1,7 @@
 function gameRender()
 {
     // draw background
-    for(let i=12; i--;)
+    for (let i=12; i--;)
     {
         const a = i/6*PI;
         const pos = vec2(0,7).rotate(a);

package/examples/shorts/colors.js

@@ -10,12 +10,12 @@ function gameRender()
     // rgb and hsl color
     drawRect(vec2(-8, 0), vec2(3), new Color(1,0,0));
     drawRect(vec2(-4, 0), vec2(3), rgb(0,1,1));
-    drawRect(vec2(-0, 0), vec2(3), hsl(0,1,.5));
+    drawRect(vec2(-0, 0), vec2(3), hsl(0,1,.5, .5));
     drawRect(vec2( 4, 0), vec2(3), hsl(.6,.5,.5));
     drawRect(vec2( 8, 0), vec2(3), hsl(0,0,1));
 
     // color lerpping
-    for(let i=5; i--;)
+    for (let i=5; i--;)
     {
         const color1 = RED;
         const color2 = YELLOW;

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(11+wave(.5,2), 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 and rotation
+    drawNineSliceScreen(vec2(700,150), vec2(250), nineSliceTile, 32, 2, time/2);
+    drawTextScreen('Nine Slice\nScreen Space', vec2(700,150), 30, BLACK);
+    
+    // draw three slice with variable border and additive color
+    drawThreeSlice(vec2(-7,-4), vec2(9, 7), threeSliceTile, WHITE, 2+wave(.2)*2, hsl(time/30,.5,.5));
+    drawTextOverlay('Three Slice\nVariable\n Border', vec2(-7,-4), 1, BLACK);
+
+    // draw three slice in screen space with changing size
+    drawThreeSliceScreen(vec2(700,420), vec2(350-wave(.3,90),120+wave(.3,60)), threeSliceTile);
+    drawTextScreen('Three Slice\nScreen Space', vec2(700,420), 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/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, .15), 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(.15), 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/shapes.js

@@ -1,24 +1,24 @@
 function gameRender()
 {
     // polygon shapes
-    for(let j=3; j<7; ++j)
+    for (let j=3; j<7; ++j)
     {
         let points = [];
-        for(let i=0; i<j; ++i)
+        for (let i=0; i<j; ++i)
         {
             let angle = i * Math.PI * 2 / j;
-            points.push(vec2(j*4-18,0).add(vec2(Math.sin(angle), Math.cos(angle))));
+            points.push(vec2(j*4-18,0).add(vec2(0,1).rotate(angle)));
         }
-        drawPoly(points, hsl(j/4,1,.5)); // draw a star
+        drawPoly(points, hsl(j/4+time/9,1,.5)); // draw a regular polygon
     }
 
     // circles and ellipses
-    drawCircle(vec2(0,5), 1, hsl(.15,1,.5));
-    drawEllipse(vec2(-5,5), 2, 1, 0, hsl(0,1,.5));
-    drawEllipse(vec2(5,5), .5, 2, .5, hsl(.55,1,.5));
+    drawCircle(vec2(0,5), 1+wave(.5), hsl(.15,1,.5));
+    drawEllipse(vec2(-5,5), vec2(2,1), hsl(0,1,.5));
+    drawEllipse(vec2(5,5), vec2(.5,2), hsl(.55,1,.5), .5);
 
     // rects and lines
-    drawRect(vec2(0,-5), vec2(13,2), hsl(.6,1,.5));
-    drawLine(vec2(-5,-7), vec2(5,-3), 1,  hsl(0,0,1));
+    drawRect(vec2(0,-5), vec2(4,3), hsl(.6,1,.5), time);
+    drawLine(vec2(-5,-7), vec2(5,-3), 1,  hsl(0,0,1, .5));
     drawLine(vec2(-5,-3), vec2(5,-7), .2, hsl(1,1,.5));
 }

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);
+}