littlejsengine 1.18.2 → 1.18.7

package/examples/puzzle/game.js

@@ -1,331 +0,0 @@
-/*
-    Little Puzzle Game
-    - A simple match 3 style puzzle game
-    - Uses a high resolution texture
-    - Tracks high score in local storage
-    - Control with mouse or touch
-*/
-
-'use strict';
-
-// import LittleJS module
-import * as LJS from '../../dist/littlejs.esm.js';
-const {vec2, rgb, hsl, tile} = LJS;
-
-///////////////////////////////////////////////////////////////////////////////
-// do not use pixelated rendering
-LJS.setCanvasPixelated(false);
-LJS.setTilesPixelated(false);
-
-const fallTime = .2;
-const cameraOffset = vec2(0,-.5);
-const backgroundColor = hsl(0,0,.2);
-const minMatchCount = 3;
-const highScoreKey = 'puzzleBestScore';
-
-// sound effects
-const sound_goodMove = new LJS.Sound([.4,.2,250,.04,,.04,,,1,,,,,3]);
-const sound_badMove  = new LJS.Sound([,,700,,,.07,,,,3.7,,,,3,,,.1]);
-const sound_fall     = new LJS.Sound([.2,,1900,,,.01,,1.4,,91,,,,,,,,,,.7]);
-
-let level, levelSize, levelFall, fallTimer, dragStartPos, comboCount, score, bestScore;
-
-///////////////////////////////////////////////////////////////////////////////
-// tiles
-const tileColors = 
-[
-    rgb(1,0,0),
-    rgb(1,1,1),
-    rgb(1,1,0),
-    rgb(0,1,0),
-    rgb(0,.6,1),
-    rgb(.8,0,1),
-    rgb(.5,.5,.5),
-];
-const tileTypeCount = tileColors.length;
-
-const getTile = (pos)=> level[pos.x + pos.y * levelSize.x];
-const setTile = (pos, data)=> level[pos.x + pos.y * levelSize.x] = data;
-
-///////////////////////////////////////////////////////////////////////////////
-function gameReset()
-{
-    // reset game objects
-    LJS.engineObjectsDestroy();
-
-    // randomize level
-    level = [];
-    const pos = vec2();
-    for (pos.x = levelSize.x; pos.x--;)
-    for (pos.y = levelSize.y; pos.y--;)
-        setTile(pos, LJS.randInt(tileTypeCount));
-
-    comboCount = score = 0;
-    fallTimer = new LJS.Timer;
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameInit()
-{
-    // setup canvas
-    LJS.setCanvasFixedSize(vec2(1920, 1080)); // 1080p
-    LJS.setCanvasClearColor(backgroundColor);
-    // load high score
-    bestScore = localStorage[highScoreKey] || 0;
-
-    // setup game
-    levelSize = vec2(12,6);
-    LJS.setCameraPos(levelSize.scale(.5).add(cameraOffset));
-    LJS.setCameraScale(900/levelSize.y);
-    LJS.setGravity(vec2(0,-.004));
-
-    // start a new game
-    gameReset();
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameUpdate()
-{
-    if (fallTimer.isSet())
-    {
-        // update falling tiles
-        if (fallTimer.elapsed())
-        {
-            // add more blocks in the top
-            for (let x = 0; x < levelSize.x; ++x)
-                setTile(vec2(x,levelSize.y), LJS.randInt(tileTypeCount));
-        }
-        
-        // allow blocks to fall
-        if (!fallTimer.active())
-        {
-            // check if there is more to fall
-            levelFall = [];
-            let keepFalling = 0;
-            const pos = vec2();
-            for (pos.x = levelSize.x; pos.x--;)
-            for (pos.y = 0; pos.y<levelSize.y; pos.y++)
-            {
-                const data = getTile(pos);
-                const abovePos = pos.add(vec2(0,1));
-                const aboveData = getTile(abovePos);
-                if (data == -1 && aboveData >= 0)
-                {
-                    setTile(pos, aboveData);
-                    setTile(abovePos, -1);
-                    levelFall[pos.x+pos.y*levelSize.x] = keepFalling = 1;
-                }
-            }
-
-            if (keepFalling)
-            {
-                const p = LJS.percent(comboCount, 9, 0);
-                fallTimer.set(fallTime*p);
-                sound_fall.play();
-            }
-            else
-                fallTimer.unset();
-        }
-    }
-    else
-    {
-        // try to clear matches
-        clearMatches();
-        if (!fallTimer.isSet())
-        {
-            // mouse/touch control
-            const mouseTilePos = LJS.mousePos.floor();
-            if (!LJS.mousePos.arrayCheck(levelSize))
-            {
-                // cancel drag if mouse is not in the level bounds
-                dragStartPos = 0;
-            }
-            else if (LJS.mouseWasPressed(0) && !dragStartPos)
-            {
-                // start drag
-                dragStartPos = mouseTilePos.copy();
-            }
-            else if (LJS.mouseIsDown(0) && dragStartPos)
-            {
-                // if dragging to a neighbor tile
-                const dx = LJS.abs(dragStartPos.x - mouseTilePos.x);
-                const dy = LJS.abs(dragStartPos.y - mouseTilePos.y);
-                if (dx == 1 && dy == 0 || dx == 0 && dy == 1)
-                {
-                    const startTile = getTile(dragStartPos);
-                    const endTile =   getTile(mouseTilePos);
-                    if (startTile >= 0 && endTile >= 0)
-                    {
-                        // swap tiles
-                        setTile(mouseTilePos, startTile);
-                        setTile(dragStartPos, endTile);
-
-                        // try to clear matches
-                        clearMatches();
-
-                        // undo if no matches
-                        if (!fallTimer.isSet())
-                        {
-                            sound_badMove.play();
-                            setTile(mouseTilePos, endTile);
-                            setTile(dragStartPos, startTile);
-                        }
-                        else
-                            sound_goodMove.play();
-                        dragStartPos = 0;
-                    }
-                }
-            }
-            else
-                dragStartPos = 0;
-        }
-    }
-
-    if (score > bestScore)
-    {
-        // update high score
-        bestScore = score;
-        localStorage[highScoreKey] = bestScore;
-    }
-
-    if (LJS.keyWasPressed('KeyR'))
-        gameReset();
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameUpdatePost()
-{
-
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameRender()
-{
-    // draw a black square for the background
-    LJS.drawRect(LJS.cameraPos.subtract(cameraOffset), levelSize, hsl(0,0,0));
-
-    // draw the blocks
-    const pos = vec2();
-    for (pos.x = levelSize.x; pos.x--;)
-    for (pos.y = levelSize.y; pos.y--;)
-    {
-        const data = getTile(pos);
-        if (data == -1)
-            continue;
-
-        // highlight drag start
-        const drawPos = pos.add(vec2(.5));
-        if (dragStartPos && pos.x == dragStartPos.x && pos.y == dragStartPos.y)
-            LJS.drawRect(drawPos, vec2(1.05));
-
-        // make pieces fall gradually
-        if (fallTimer.active() && levelFall[pos.x + pos.y*levelSize.x])
-            drawPos.y += 1-fallTimer.getPercent();
-
-        // draw background
-        const color = tileColors[data];
-        LJS.drawRect(drawPos, vec2(.95), color);
-        
-        // use darker color for icon
-        const color2 = color.scale(.8, 1);
-        LJS.drawTile(drawPos, vec2(.5), tile(data, 64), color2);
-    }
-
-    // draw a grey square at top to cover up incoming tiles
-    LJS.drawRect(LJS.cameraPos.subtract(cameraOffset).add(vec2(0,levelSize.y)), levelSize, backgroundColor);
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameRenderPost()
-{
-    // draw text on top of everything
-    LJS.drawText('Score: ' + score,    LJS.cameraPos.add(vec2(-3,-3.1)), .9, hsl(), .1);
-    LJS.drawText('Best: ' + bestScore, LJS.cameraPos.add(vec2( 3,-3.1)), .9, hsl(), .1);
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// Startup LittleJS Engine
-LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
-
-///////////////////////////////////////////////////////////////////////////////
-// find and remove all runs of 3 or higher
-function clearMatches()
-{
-    // horizontal match check
-    const removeTiles = [], pos = vec2();
-    for (pos.y = levelSize.y; pos.y--;)
-    {
-        let runCount, runData;
-        for (pos.x = levelSize.x; pos.x--;)
-        {
-            const data = getTile(pos);
-            if (data >= 0 && data == runData)
-            {
-                for (let i=++runCount; runCount >= minMatchCount && i--;)
-                    removeTiles[pos.x + i + pos.y * levelSize.x] = 1;
-            }
-            else
-            {
-                runData = data;
-                runCount = 1;
-            }
-        }
-    }
-
-    // vertical match check
-    for (pos.x = levelSize.x; pos.x--;)
-    {
-        let runCount, runData;
-        for (pos.y = levelSize.y; pos.y--;)
-        {
-            const data = getTile(pos);
-            if (data >= 0 && data == runData)
-            {
-                for (let i=++runCount; runCount >= minMatchCount && i--;)
-                    removeTiles[pos.x + (pos.y + i) * levelSize.x] = 1;
-            }
-            else
-            {
-                runData = data;
-                runCount = 1;
-            }
-        }
-    }
-
-    // remove tiles all at once like this to handle shapes like L or T
-    let removedCount = 0;
-    for (pos.x = levelSize.x; pos.x--;)
-    for (pos.y = levelSize.y; pos.y--;)
-    {
-        if (removeTiles[pos.x + pos.y * levelSize.x])
-        {
-            // remove tile
-            ++removedCount;
-            const data = getTile(pos);
-            setTile(pos, -1);
-
-            // spawn particles
-            const color1 = tileColors[data];
-            const color2 = color1.lerp(hsl(), .5);
-            new LJS.ParticleEmitter(
-                pos.add(vec2(.5)), 0, // pos, angle
-                .5, .1, 200, 3.14,    // emitSize, emitTime, rate, cone
-                0,                    // tileInfo
-                color1, color2,                      // colorStartA, colorStartB
-                color1.scale(1,0), color2.scale(1,0),// colorEndA, colorEndB
-                .5, .3, .2, .05, .05, // particleTime, sizeStart, sizeEnd, speed, angleSpeed
-                .99, 1, 1, 3.14, .05, // damp, angleDamp, gravityScale, particleCone, fadeRate
-                .5, 0, 1              // randomness, collide, additive, colorLinear, renderOrder
-            );
-        }
-    }
-
-    if (removedCount)
-    {
-        score += ++comboCount*removedCount;
-        fallTimer.set();
-        levelFall = [];
-    }
-    else
-        comboCount = 0;
-}

package/examples/puzzle/index.html

@@ -1,8 +0,0 @@
-<!DOCTYPE html><head>
-<title>LittleJS Puzzle Game</title>
-<meta charset=utf-8>
-<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>
-</head><body>
-<script src=game.js type=module></script>

package/examples/shorts/animation.js

@@ -1,18 +0,0 @@
-canvasClearColor = GRAY;
-
-function gameRender()
-{
-    {
-        // animate by changing frames
-        const pos = vec2(-5, 2*abs(sin(time*2*PI)));
-        const frame = (time*4)%2|0;
-        drawTile(pos, vec2(7), tile(3).frame(frame), RED);
-    }
-    {
-        // animate with stretch and squash
-        const s = sin(time*9)*.5;
-        const size = vec2(7-s,7+s);
-        const pos = vec2(5,size.y-7);
-        drawTile(pos, size, tile(5), GREEN);
-    }
-}

package/examples/shorts/base.html

@@ -1,54 +0,0 @@
-<!DOCTYPE html><meta charset=utf-8><body>
-<script src=../../dist/littlejs.js?1.18.2></script>
-<script src=../../dist/box2d.wasm.js></script>
-
-<!-- LittleJS Engine Source
-<script src=../../src/engine.js></script>
-<script src=../../src/engineDebug.js></script>
-<script src=../../src/engineMath.js></script>
-<script src=../../src/engineUtilities.js></script>
-<script src=../../src/engineSettings.js></script>
-<script src=../../src/engineObject.js></script>
-<script src=../../src/engineDraw.js></script>
-<script src=../../src/engineInput.js></script>
-<script src=../../src/engineAudio.js></script>
-<script src=../../src/engineTileLayer.js></script>
-<script src=../../src/engineParticles.js></script>
-<script src=../../src/engineMedals.js></script>
-<script src=../../src/engineWebGL.js></script>
-<script src=../../plugins/box2d.js></script>
-<script src=../../plugins/box2d.wasm.js></script>
-<script src=../../plugins/drawUtilities.js></script>
-<script src=../../plugins/postProcess.js></script>
-<script src=../../plugins/uiSystem.js></script>
-<script src=../../plugins/zzfxm.js></script>
--->
-<script>
-'use strict';
-
-// use fixed size canvas for examples
-canvasFixedSize = vec2(960, 540);
-
-// fix bleeding from neighboring pixels
-tileDefaultBleed = .5;
-
-// allow improved canvas scaling for smoother graphics
-canvasPixelated = false;
-
-// disable watermark
-debugWatermark = false;
-
-// disable showing the engine version in console
-showEngineVersion = false;
-
-// these functions can be overridden for each example
-function gameInit() {}
-function gameUpdate() {}
-function gameUpdatePost() {}
-function gameRender() {}
-function gameRenderPost() {}
-
-// check if WebGL can be enabled
-function glCanEnable() { return glCanBeEnabled; }
-
-</script>

package/examples/shorts/blending.js

@@ -1,14 +0,0 @@
-function gameRender()
-{
-    // additive blending
-    setBlendMode(1);
-    drawCircle(vec2(-8,-2), 7, rgb(0,0,.5));
-    drawCircle(vec2(-6, 2), 7, rgb(0,1,0));
-    drawCircle(vec2(-4,-2), 7, rgb(1,0,0));
-
-    // alpha blending
-    setBlendMode(0);
-    drawCircle(vec2(4,-2), 7, hsl(time/9    ,1,.5));
-    drawCircle(vec2(8,-2), 7, hsl(time/9+1/3,1,.5,.5));
-    drawCircle(vec2(6, 2), 7, hsl(time/9+2/3,1,.5,.5));
-}

package/examples/shorts/box2d.js

@@ -1,51 +0,0 @@
-async function gameInit()
-{
-    // setup box2d
-    await box2dInit();
-    mouseJoint = 0;
-    gravity.y = -50;
-    canvasClearColor = hsl(0,0,.9);
-    
-    // create ground object
-    groundObject = new Box2dStaticObject(vec2(-8));
-    groundObject.color = GRAY;
-    groundObject.addBox(vec2(100,2));
-
-    // add some random objects
-    for (let i=50; i--;)
-    {
-        const pos = randInCircle(5);
-        const color = randColor();
-        const o = new Box2dObject(pos, vec2(), 0, 0, color);
-        randInt(2) ? o.addCircle(rand(1,2)) : o.addRandomPoly(rand(1,2));
-    }
-}
-
-function gameUpdate()
-{
-    // mouse controls
-    if (mouseJoint)
-    {
-        // update mouse joint
-        mouseJoint.setTarget(mousePos);
-        if (mouseWasReleased(0))
-        {
-            // release object
-            mouseJoint = mouseJoint.destroy();
-        }
-    }
-    else if (mouseWasPressed(0))
-    {
-        // grab object
-        const object = box2d.pointCast(mousePos);
-        if (object)
-            mouseJoint = new Box2dTargetJoint(object,
-                groundObject, mousePos);
-    }
-}
-
-function gameRenderPost()
-{
-    // draw mouse joint
-    mouseJoint && drawLine(mousePos, mouseJoint.getAnchorB(), .2, RED);
-}

package/examples/shorts/box2dCar.js

@@ -1,59 +0,0 @@
-async function gameInit()
-{
-    // setup box2d and create the objects
-    await box2dInit();
-    gravity.y = -20;
-
-    // create edge list for ground
-    const edgePoints = [];
-    for (let i=0, y=0, s=0; i<1e3; ++i)
-    {   
-        y = clamp(y+rand(-1,1),0,5);
-        edgePoints.push(vec2(i*5-15, y-8));
-    }
-    const ground = new Box2dStaticObject;
-    ground.lineWidth = 1;
-    ground.addEdgeList(edgePoints);
-
-    // make a car
-    new CarObject(vec2(0,-2));
-    canvasClearColor = hsl(0,0,.9);
-}
-
-class CarObject extends Box2dObject
-{
-    constructor(pos)
-    {
-        super(pos);
-
-        // create car with wheels
-        this.color = RED;
-        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);
-            const friction = 20;
-            wheel.addCircle(2, vec2(), 1, friction);
-            wheel.motorJoint = joint;
-            this.wheels[i] = wheel;
-        }
-    }
-    update()
-    {
-        // car controls - use mouse, arrow keys, or A/D to drive
-        const maxSpeed = 40;
-        const input = mouseIsDown(0) ? 1 : 
-            mouseIsDown(2) ? -1 : keyDirection().x ;
-        let s = this.wheels[0].motorJoint.getMotorSpeed();
-        s = input ? clamp(s - input, -maxSpeed, maxSpeed) : 0;
-        this.wheels[0].motorJoint.setMotorSpeed(s);
-        cameraPos.x = this.pos.x;
-    }
-}

package/examples/shorts/box2dPool.js

@@ -1,107 +0,0 @@
-const hitSound = new Sound([,.1,2e3,,,.01,,,,,,,,1]);
-const maxHitDistance = 6;
-
-class Ball extends Box2dObject
-{
-    constructor(pos, number=0)
-    {
-        const color = hsl(number/9, 1, number? .5 : 1);
-        super(pos, 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()
-    { hitSound.play(this.pos, clamp(this.getSpeed()/20)); }
-    canHit()
-    { return this == cueBall && this.getSpeed() < 1; }
-    getHitStrength()
-    { return this.getHitOffset().length()/maxHitDistance; }
-    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, this.getHitStrength(), .5);
-        }
-        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)
-            drawText(this.number, textPos, .5, BLACK);
-        if (this.canHit())
-        {
-            // draw the aim line
-            const endPos = this.pos.add(this.getHitOffset());
-            const width = this.getHitStrength();
-            drawLine(this.pos, endPos, width, hsl(0,1,.5,.5), 
-                vec2(), 0, false);
-        }
-    }
-}
-
-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));
-}