littlejsengine 1.18.2 → 1.18.7

package/examples/box2d/scenes.js

@@ -1,194 +0,0 @@
-/*
-    LittleJS Box2D Example - Scenes
-    - Each scene demonstrates a feature of Box2D
-    - Feel free to use tis code in your own projects
-    - 0  = Shapes: box, circle, poly, and edge
-    - 1  = Pyramid stack
-    - 2  = Dominoes chain reaction
-    - 3  = Car with controls
-    - 4  = Rope with box attached
-    - 5  = Raycasts in all directions
-    - 6  = Joints demo with every joint type
-    - 7  = Contacts begin and end callbacks
-    - 8  = Mobile object with multiple bodies
-    - 9  = Cloth object grid using rope joints
-    - 10 = Softbody object grid using weld joints
-*/
-
-'use strict';
-
-// import game module
-import * as LJS from '../../dist/littlejs.esm.js';
-import * as GameObjects from './gameObjects.js';
-import * as Game from './game.js';
-const {vec2} = LJS;
-
-export let scene, sceneName;
-
-export function loadScene(_scene)
-{
-    scene = _scene;
-
-    if (scene == 0)
-    {
-        sceneName = 'Shapes';
-        GameObjects.spawnRandomEdges();
-        GameObjects.spawnBox(vec2(11,8), 4, LJS.randColor(), LJS.box2d.bodyTypeStatic, false);
-        GameObjects.spawnCircle(vec2(20,8), 4, LJS.randColor(), LJS.box2d.bodyTypeStatic, false);
-        GameObjects.spawnRandomPoly(vec2(29,8), 4, LJS.randColor(), LJS.box2d.bodyTypeStatic);
-        for (let i=500;i--;)
-            GameObjects.spawnRandomObject(vec2(LJS.rand(1,39), LJS.rand(10,50)));
-    }
-    if (scene == 1)
-    {
-        sceneName = 'Pyramid';
-        GameObjects.spawnPyramid(vec2(20,0), 15);
-        GameObjects.spawnBox(vec2(10,2), 4, LJS.randColor());
-        GameObjects.spawnCircle(vec2(30,2), 4, LJS.randColor());
-    }
-    if (scene == 2)
-    {
-        sceneName = 'Dominoes';
-        GameObjects.spawnDominoes(vec2(11,13), 8);
-        GameObjects.spawnDominoes(vec2(3,0), 10, vec2(1,4));
-        GameObjects.spawnCircle(vec2(10.2,20), 1.5, LJS.randColor());
-        GameObjects.spawnCircle(vec2(31.9,15), 2.5, LJS.randColor());
-        GameObjects.spawnBox(vec2(16,13), vec2(32,1), LJS.randColor(), LJS.box2d.bodyTypeStatic, false);
-        GameObjects.spawnBox(vec2(24,8), vec2(34,1), LJS.randColor(), LJS.box2d.bodyTypeStatic, false, -.15);
-    }
-    if (scene == 3)
-    {
-        sceneName = 'Car';
-        new GameObjects.CarObject(vec2(10,2));
-        GameObjects.spawnBox(vec2(20,0), vec2(10,2), LJS.randColor(), LJS.box2d.bodyTypeStatic, false, -.2);
-        GameObjects.spawnPyramid(vec2(32,0), 6);
-    }
-    if (scene == 4)
-    {
-        sceneName = 'Rope';
-        const startPos = vec2(20, 14);
-        const angle = LJS.PI/2;
-        const color = LJS.randColor();
-        const count = 10;
-        const endObject = GameObjects.spawnRope(startPos, count, angle, color);
-
-        // connect box to end
-        const endPos = endObject.localToWorld(vec2(0,-endObject.size.y/2));
-        const o = GameObjects.spawnBox(endPos, 3, LJS.randColor());
-        o.setAngularDamping(.5);
-        o.setFilterData(2, 2);
-        new LJS.Box2dRevoluteJoint(endObject, o);
-        GameObjects.spawnPyramid(vec2(20,0), 7);
-    }
-    if (scene == 5)
-    {
-        sceneName = 'Raycasts';
-        GameObjects.spawnRandomEdges();
-        for (let i=100;i--;)
-            GameObjects.spawnRandomObject(vec2(LJS.rand(1,39), LJS.rand(20)), 2, LJS.box2d.bodyTypeStatic, LJS.rand(LJS.PI*2));
-    }
-    if (scene == 6)
-    {
-        sceneName = 'Joints';
-        {
-            // prismatic joint
-            const o1 = GameObjects.spawnBox(vec2(20,8), vec2(3,2), LJS.randColor());
-            new LJS.Box2dPrismaticJoint(Game.groundObject, o1, o1.pos, vec2(1,0), true);
-            const o2 = GameObjects.spawnBox(vec2(20,15), vec2(2,3), LJS.randColor());
-            new LJS.Box2dPrismaticJoint(Game.groundObject, o2, o2.pos, vec2(0,1), true);
-
-            // lines to make it look line a track
-            const l1 = new LJS.EngineObject(vec2(20, 8), vec2(39,.5), 0, 0, LJS.GRAY);
-            const l2 = new LJS.EngineObject(vec2(20,50), vec2(.5,99), 0, 0, LJS.GRAY);
-            l1.gravityScale = l2.gravityScale = 0;
-            l1.renderOrder = l2.renderOrder = -2;
-        }
-        {
-            // pulley joint
-            const anchorA = vec2(14,15);
-            const anchorB = vec2(26,15);
-            const oA = new GameObjects.PulleyJointObjects(vec2(15,8), vec2(1,2), LJS.randColor(), anchorA);
-            const oB = new GameObjects.PulleyJointObjects(vec2(25,8), vec2(1,2), LJS.randColor(), anchorB);
-            const aA = GameObjects.spawnCircle(anchorA, 2, LJS.randColor(), LJS.box2d.bodyTypeStatic);
-            const aB = GameObjects.spawnCircle(anchorB, 2, LJS.randColor(), LJS.box2d.bodyTypeStatic);
-            const oaA = oA.localToWorld(vec2(0,oA.size.y/2));
-            const oaB = oB.localToWorld(vec2(0,oB.size.y/2));
-            new LJS.Box2dPulleyJoint(oA, oB, aA.pos, aB.pos, oaA, oaB);
-
-            // a line to make it look like connecting rope
-            const line = new LJS.EngineObject(vec2(20,15), vec2(10,.2), 0, 0, LJS.BLACK);
-            line.gravityScale = 0;
-            line.renderOrder = -1;
-        }
-        {
-            // gear joint
-            const o1 = GameObjects.spawnCircle(vec2(23.5,3), 3, LJS.randColor());
-            const j1 = new LJS.Box2dRevoluteJoint(Game.groundObject, o1, o1.pos);
-            const o2 = GameObjects.spawnCircle(vec2(28,3), 6, LJS.randColor());
-            o1.tileInfo = o2.tileInfo = Game.spriteAtlas.gear;
-            const j2 = new LJS.Box2dRevoluteJoint(Game.groundObject, o2, o2.pos);
-            new LJS.Box2dGearJoint(o1, o2, j1, j2, 2);
-        }
-        {
-            // weld joint
-            const o1 = GameObjects.spawnBox(vec2(15,2), 4, LJS.randColor());
-            const o2 = GameObjects.spawnBox(vec2(17,2), 2, LJS.randColor());
-            new LJS.Box2dWeldJoint(o1, o2);
-        }
-        {
-            // distance joint
-            const o1 = new LJS.Box2dStaticObject(vec2(30,11), vec2(4), Game.spriteAtlas.circleOutline, 0, LJS.randColor());
-            o1.renderOrder = -2;
-            const o2 = GameObjects.spawnCircle(vec2(30,8), 2, LJS.randColor());
-            new LJS.Box2dDistanceJoint(o1, o2);
-        }
-        {
-            // motor joint
-            const o = new LJS.Box2dStaticObject(vec2(10,8), vec2(4), Game.spriteAtlas.circleOutline, 0, LJS.randColor());
-            o.renderOrder = -2;
-            new GameObjects.MotorJointObject(vec2(10,8), vec2(2), LJS.randColor(), o);
-        }
-        {
-            // friction joint
-            const o = GameObjects.spawnBox(vec2(10,15), 3, LJS.randColor());
-            o.tileInfo = Game.spriteAtlas.squareOutline2;
-            o.setGravityScale(0);
-            const joint = new LJS.Box2dFrictionJoint(Game.groundObject, o);
-            joint.setMaxForce(200);
-            joint.setMaxTorque(200);
-        }
-    }
-    if (scene == 7)
-    {
-        sceneName = 'Contacts';
-        new GameObjects.ContactTester(vec2(15,8), vec2(5), LJS.RED, LJS.RED);
-        new GameObjects.ContactTester(vec2(25,8), vec2(5), LJS.CYAN, LJS.CYAN, false, false);
-        for (let i=200;i--;)
-            GameObjects.spawnRandomObject(vec2(LJS.rand(1,39), LJS.rand(10,50)));
-    }
-    if (scene == 8)
-    {
-        sceneName = 'Mobile';
-        const pos = vec2(20, 16);
-        const mobile = new GameObjects.MobileObject(pos, 12, 2, 5);
-        new LJS.Box2dRevoluteJoint(Game.groundObject, mobile, pos);
-    }
-    if (scene == 9)
-    {
-        sceneName = 'Cloth'
-        new GameObjects.ClothObject(vec2(20, 9), vec2(15), vec2(24), LJS.randColor());
-    }
-    if (scene == 10)
-    {
-        sceneName = 'Softbodies';
-        for (let i=3;i--;)
-            new GameObjects.SoftBodyObject(vec2(20, 3+i*7), vec2(6-i), vec2(9-i), LJS.randColor());
-    }
-    if (scene == 11)
-    {
-        sceneName = 'Ragdolls';
-        new GameObjects.RagdollObject(vec2(20,5));
-        new GameObjects.RagdollObject(vec2(10,8), 2);
-        GameObjects.spawnPyramid(vec2(30,0), 6);
-    }
-}

package/examples/breakout/game.js

@@ -1,175 +0,0 @@
-/*
-    Little JS Breakout Game
-    - A simple breakout game
-    - Includes sound and particles
-    - Uses a post processing effect
-    - Control with mouse, touch, or gamepad
-*/
-
-'use strict';
-
-// import LittleJS module
-import * as LJS from '../../dist/littlejs.esm.js';
-import * as GameObjects from './gameObjects.js';
-const {vec2, hsl} = LJS;
-
-///////////////////////////////////////////////////////////////////////////////
-// game objects
-export let ball, score, brickCount, paddle;
-export const levelSize = vec2(38, 20);
-
-export function changeBrickCount(delta)
-{
-    brickCount += delta;
-    
-    // increase score when brick is destroyed
-    if (delta < 0)
-        score -= delta;
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameReset()
-{
-    // reset game objects
-    LJS.engineObjectsDestroy();
-    score = 0;
-    brickCount = 0;
-
-    // spawn bricks
-    const pos = vec2();
-    for (pos.x = 4; pos.x <= levelSize.x-4; pos.x += 2)
-    for (pos.y = 12; pos.y <= levelSize.y-2; pos.y += 1)
-        new GameObjects.Brick(pos);
-
-    // create walls
-    new GameObjects.Wall(vec2(-.5,levelSize.y/2),            vec2(1,100)); // top
-    new GameObjects.Wall(vec2(levelSize.x+.5,levelSize.y/2), vec2(1,100)); // left
-    new GameObjects.Wall(vec2(levelSize.x/2,levelSize.y+.5), vec2(100,1)); // right
-
-    // spawn player paddle
-    paddle = new GameObjects.Paddle(vec2(levelSize.x/2-12, 1));
-
-    // reset ball
-    ball = 0;
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameInit()
-{
-    LJS.setCanvasFixedSize(vec2(1920, 1080)); // 1080p
-    LJS.setCameraPos(levelSize.scale(.5)); // center camera
-    LJS.setCameraScale(48);
-
-    // set up a post processing shader
-    setupPostProcess();
-
-    // start a new game
-    gameReset();
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameUpdate()
-{
-    // spawn ball
-    if (!ball && (LJS.mouseWasPressed(0) || LJS.gamepadWasPressed(0)))
-        ball = new GameObjects.Ball(vec2(levelSize.x/2, levelSize.y/2));
-
-    if (ball && ball.pos.y < -1)
-    {
-        // destroy ball if it goes below the level
-        ball.destroy();
-        ball = 0;
-    }
-
-    if (LJS.keyWasPressed('KeyR'))
-        gameReset();
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameUpdatePost()
-{
-
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameRender()
-{
-    // draw a the background
-    LJS.drawRect(LJS.cameraPos, levelSize.scale(2), hsl(0,0,.5));
-    LJS.drawRect(LJS.cameraPos, levelSize, hsl(0,0,.02));
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameRenderPost()
-{
-    // use built in image font for text
-    const font = LJS.engineFontImage;
-    font.drawText('Score: ' + score, LJS.cameraPos.add(vec2(0,9.2)), 1);
-    if (!brickCount)
-        font.drawText('You Win!', LJS.cameraPos.add(vec2(0,-5)), 2);
-    else if (!ball)
-        font.drawText('Click to Play', LJS.cameraPos.add(vec2(0,-5)), 2);
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// an example shader that can be used to apply a post processing effect
-function setupPostProcess()
-{
-    const televisionShader = `
-    // Simple TV Shader Code
-    float hash(vec2 p)
-    {
-        p=fract(p*.3197);
-        return fract(1.+sin(51.*p.x+73.*p.y)*13753.3);
-    }
-
-    void mainImage(out vec4 c, vec2 p)
-    {
-        // setup the shader
-        vec2 uv = p;
-        p /= iResolution.xy;
-        c = texture(iChannel0, p);
-
-        // static noise
-        const float staticAlpha = .1;
-        const float staticScale = .002;
-        c += staticAlpha * hash(floor(p/staticScale) + mod(iTime*500., 1e3));
-
-        // scan lines
-        const float scanlineScale = 2.;
-        const float scanlineAlpha = .6;
-        c *= 1. - scanlineAlpha*cos(p.y*2.*iResolution.y/scanlineScale);
-
-        {
-            // bloom effect
-            const float blurSize = .002;
-            const float bloomIntensity = .2;
-
-            // 5-tap Gaussian blur
-            vec4 bloom = vec4(0);
-            bloom += texture(iChannel0, p + vec2(-2.*blurSize, 0)) * .12;
-            bloom += texture(iChannel0, p + vec2(   -blurSize, 0)) * .24;
-            bloom += texture(iChannel0, p)                         * .28;
-            bloom += texture(iChannel0, p + vec2(    blurSize, 0)) * .24;
-            bloom += texture(iChannel0, p + vec2( 2.*blurSize, 0)) * .12;
-            bloom += texture(iChannel0, p + vec2(0, -2.*blurSize)) * .12;
-            bloom += texture(iChannel0, p + vec2(0,    -blurSize)) * .24;
-            bloom += texture(iChannel0, p)                         * .28;
-            bloom += texture(iChannel0, p + vec2(0,     blurSize)) * .24;
-            bloom += texture(iChannel0, p + vec2(0,  2.*blurSize)) * .12;
-            c += bloom * bloomIntensity;
-        }
-
-        // 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);
-    }`;
-
-    new LJS.PostProcessPlugin(televisionShader);
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// Startup LittleJS Engine
-LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

package/examples/breakout/gameObjects.js

@@ -1,147 +0,0 @@
-/*
-    LittleJS Breakout Objects
-*/
-
-'use strict';
-
-// import LittleJS module
-import * as LJS from '../../dist/littlejs.esm.js';
-import * as Game from './game.js';
-const {tile, vec2, hsl} = LJS;
-
-///////////////////////////////////////////////////////////////////////////////
-// sound effects
-const sound_start  = new LJS.Sound([,0,500,,.04,.3,1,2,,,570,.02,.02,,,,.04]);
-const sound_break  = new LJS.Sound([,,90,,.01,.03,4,,,,,,,9,50,.2,,.2,.01]);
-const sound_bounce = new LJS.Sound([,,1e3,,.03,.02,1,2,,,940,.03,,,,,.2,.6,,.06]);
-
-///////////////////////////////////////////////////////////////////////////////
-export class PhysicsObject extends LJS.EngineObject
-{
-    constructor(pos, size, tileInfo, angle, color)
-    {
-        super(pos, size, tileInfo, angle, color);
-        this.setCollision(); // make object collide
-        this.mass = 0; // make object have static physics
-    }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-export class Wall extends PhysicsObject
-{
-    constructor(pos, size)
-    {
-        super(pos, size, 0, 0, hsl(0,0,0,0));
-    }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-export class Paddle extends PhysicsObject
-{
-    constructor(pos)
-    {
-        super(pos, vec2(5,.5));
-    }
-
-    update()
-    {
-        // control with gamepad or mouse
-        this.pos.x = LJS.isUsingGamepad ? this.pos.x + LJS.gamepadStick(0).x : LJS.mousePos.x;
-
-        // keep paddle in bounds of level
-        this.pos.x = LJS.clamp(this.pos.x, this.size.x/2, Game.levelSize.x - this.size.x/2);
-    }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-export class Brick extends PhysicsObject 
-{
-    constructor(pos)
-    {
-        super(pos, vec2(2,1), tile(1, vec2(32,16)), 0, LJS.randColor());
-        Game.changeBrickCount(1);
-    }
-
-    collideWithObject(o)              
-    {
-        // destroy brick when hit with ball
-        this.destroy();
-        Game.changeBrickCount(-1);
-        sound_break.play(this.pos);
-
-        // make explosion effect
-        const color1 = this.color;
-        const color2 = color1.lerp(hsl(), .5);
-        new LJS.ParticleEmitter(
-            this.pos, 0,                          // pos, angle
-            this.size, .1, 200, 3.14,             // emitSize, emitTime, rate, cone
-            tile(0, 16),                          // tileIndex, tileSize
-            color1, color2,                       // colorStartA, colorStartB
-            color1.scale(1,0), color2.scale(1,0), // colorEndA, colorEndB
-            .3, .8, .3, .05, .05,// time, sizeStart, sizeEnd, speed, angleSpeed
-            .99, .95, .4, 3.14,  // damp, angleDamp, gravity, cone
-            .1, .8, 0, 1         // fade, randomness, collide, additive
-        );
-
-        // set ball trail color
-        if (o.trailEffect)
-        {
-            o.trailEffect.colorStartA = this.color; 
-            o.trailEffect.colorStartB = this.color.lerp(hsl(), .5);
-        }
-        
-        return 1;
-    }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-export class Ball extends PhysicsObject 
-{
-    constructor(pos)
-    {
-        super(pos, vec2(.5), tile(0));
-
-        // make a bouncy ball
-        this.velocity = vec2(0, -.1);
-        this.restitution = 1;
-        this.mass = 1;
-        
-        // attach a trail effect
-        const color = hsl(0,0,.2);
-        this.trailEffect = new LJS.ParticleEmitter(
-            this.pos, 0,                          // pos, angle
-            this.size, 0, 80, 3.14,               // emitSize, emitTime, rate, cone
-            tile(0, 16),                          // tileIndex, tileSize
-            color, color,                         // colorStartA, colorStartB
-            color.scale(0), color.scale(0),       // colorEndA, colorEndB
-            2, .4, 1, .001, .05,// time, sizeStart, sizeEnd, speed, angleSpeed
-            .99, .95, 0, 3.14,  // damp, angleDamp, gravity, cone
-            .1, .5, 0, 1        // fade, randomness, collide, additive
-        );
-        this.addChild(this.trailEffect);
-        sound_start.play(this.pos);
-    }
-
-    collideWithObject(o)              
-    {
-        // only need special handling when colliding with paddle
-        if (o != Game.paddle)
-            return true;
-
-        // prevent colliding with paddle if moving upwards
-        if (this.velocity.y > 0)
-            return false;
-
-        // put english on the ball when it collides with paddle
-        this.velocity = this.velocity.rotate(.2 * (o.pos.x - this.pos.x));
-        this.velocity.y = LJS.max(-this.velocity.y, .2);
-
-        // speed up
-        const speed = LJS.min(1.04*this.getSpeed(), .5);
-        this.velocity = this.velocity.normalize(speed);
-        sound_bounce.play(this.pos, 1, speed*2);
-
-        // prevent default collision code
-        return false;
-    }
-}

package/examples/breakout/index.html

@@ -1,8 +0,0 @@
-<!DOCTYPE html><head>
-<title>LittleJS Breakout 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>