littlejsengine 1.8.9 → 1.9.1

package/examples/platformer/gamePlayer.js

@@ -1,311 +1,27 @@
 /*
     LittleJS Platformer Example - Player
-    - Platform style player controls
+    - Extends character class
+    - Uses character physics system
     - Player can jump, shoot, roll, and throw grenades
-    - Can be controlled with keyboard and mouse or gamepad
-    - Attaches weapon which can be fired
-    - Plays animation and sound effects
+    - Supports keyboard, mouse, and gamepad controls
+    - Keeps track of player deaths
 */
 
 'use strict';
 
-class Character extends GameObject 
-{
-    constructor(pos)
-    { 
-        super(pos, vec2(.6,.95), tile());
-
-        this.weapon = new Weapon(pos, this);
-        this.lastPos = pos;
-        this.groundTimer        = new Timer;
-        this.jumpTimer          = new Timer;
-        this.pressedJumpTimer   = new Timer;
-        this.dodgeTimer         = new Timer;
-        this.dodgeRechargeTimer = new Timer;
-        this.deadTimer          = new Timer;
-        this.grendeThrowTimer   = new Timer;
-        this.drawSize = vec2(1);
-        this.color = (new Color).setHSLA(rand(),1,.7);
-        this.renderOrder = 10;
-        this.walkCyclePercent = 0;
-        this.health = 1;
-        this.moveInput = 0;
-        this.setCollision(1,0);
-    }
-    
-    update() 
-    {
-        this.gravityScale = 1; // reset to default gravity
-
-        if (this.isDead())
-            return super.update();
-
-        const moveInput = this.moveInput.copy();
-        
-        // jump
-        if (!this.holdingJump)
-            this.pressedJumpTimer.unset();
-        else if (!this.wasHoldingJump || this.climbingWall)
-            this.pressedJumpTimer.set(.3);
-        this.wasHoldingJump = this.holdingJump;
-
-        // wall climb
-        this.climbingWall = 0;
-        if (moveInput.x && !this.velocity.x && this.velocity.y < 0)
-        {
-            this.velocity.y *=.8;
-            this.climbingWall = 1;
-        }
-
-        if (this.dodgeTimer.active())
-        {
-            // update roll
-            this.angle = this.getMirrorSign()*2*PI*this.dodgeTimer.getPercent();
-            if (this.groundObject)
-                this.velocity.x += this.getMirrorSign()*.1;
-        }
-        else
-        {
-            // not rolling
-            this.angle = 0;
-            if (this.pressedDodge && !this.dodgeRechargeTimer.active())
-            {
-                // start dodge
-                this.dodgeTimer.set(.4);
-                this.dodgeRechargeTimer.set(2);
-                this.jumpTimer.unset();
-                sound_dodge.play(this.pos);
-
-                if (!this.groundObject && this.getAliveTime() > .2)
-                    this.velocity.y += .2;
-            }
-            if (this.pressingThrow && !this.wasPressingThrow && !this.grendeThrowTimer.active())
-            {
-                // throw greande
-                const grenade = new Grenade(this.pos);
-                grenade.velocity = this.velocity.add(vec2(this.getMirrorSign(),rand(.8,.7)).normalize(.2+rand(.02)));
-                grenade.angleVelocity = this.getMirrorSign() * rand(.8,.5);
-                sound_jump.play(this.pos);
-                this.grendeThrowTimer.set(1);
-            }
-            this.wasPressingThrow = this.pressingThrow;
-        }
-
-        // allow grabbing ladder at head or feet
-        let touchingLadder = 0;
-        for (let y=2;y--;)
-        {
-            const testPos = this.pos.add(vec2(0, y + .1*moveInput.y - this.size.y/2));
-            const collisionData = getTileCollisionData(testPos);
-            touchingLadder ||= collisionData == tileType_ladder;
-        }
-        if (!touchingLadder)
-            this.climbingLadder = 0;
-        else if (moveInput.y)
-            this.climbingLadder = 1;
-
-        if (this.weapon) // update weapon trigger
-            this.weapon.triggerIsDown = this.holdingShoot && !this.dodgeTimer.active();
-
-        if (this.climbingLadder)
-        {
-            // update ladder
-            this.gravityScale = this.climbingWall = this.groundObject = 0;
-            this.jumpTimer.unset();
-            this.groundTimer.unset();
-            this.velocity = this.velocity.multiply(vec2(.85)).add(vec2(0,.02*moveInput.y));
-
-            // pull towards ladder
-            const delta = (this.pos.x|0)+.5 - this.pos.x;
-            this.velocity.x += .02*delta*abs(moveInput.x ? 0:moveInput.y);
-            moveInput.x *= .2;
-
-            // exit ladder if ground is below
-            this.climbingLadder = moveInput.y >= 0 || getTileCollisionData(this.pos.subtract(vec2(0,1))) <= 0;
-        }
-        else
-        {
-            // update jumping and ground check
-            if (this.groundObject || this.climbingWall)
-            {
-                if (!this.groundTimer.isSet())
-                    sound_walk.play(this.pos); // land sound
-                    
-                this.groundTimer.set(.1);
-            }
-
-            if (this.groundTimer.active() && !this.dodgeTimer.active())
-            {
-                // is on ground
-                if (this.pressedJumpTimer.active() && !this.jumpTimer.active())
-                {
-                    // start jump
-                    if (this.climbingWall)
-                        this.velocity.y = .25;
-                    else
-                    {
-                        this.velocity.y = .15;
-                        this.jumpTimer.set(.2);
-                    }
-                    sound_jump.play(this.pos);
-                }
-            }
-
-            if (this.jumpTimer.active() && !this.climbingWall)
-            {
-                // update variable height jump
-                this.groundTimer.unset();
-                if (this.holdingJump && this.velocity.y > 0 && this.jumpTimer.active())
-                    this.velocity.y += .017;
-            }
-
-            if (!this.groundObject)
-            {
-                // air control
-                if (sign(moveInput.x) == sign(this.velocity.x))
-                    moveInput.x *= .1; // moving with velocity
-                else
-                    moveInput.x *= .2; // moving against velocity (stopping)
-                
-                // slight extra gravity when moving down
-                if (this.velocity.y < 0)
-                    this.velocity.y += gravity*.2;
-            }
-        }
-        
-        // apply movement acceleration and clamp
-        const maxCharacterSpeed = .2;
-        this.velocity.x = clamp(this.velocity.x + moveInput.x * .042, -maxCharacterSpeed, maxCharacterSpeed);
-
-        // track last pos for ladder collision code
-        this.lastPos = this.pos.copy();
-
-        // call parent and update physics
-        super.update();
-
-        // update walk cycle
-        const speed = this.velocity.length();
-        if (this.climbingLadder || this.groundTimer.active() && !this.dodgeTimer.active())
-        {
-            this.walkCyclePercent += speed * .5;
-            this.walkCyclePercent = speed > .01 ? mod(this.walkCyclePercent) : 0;
-        }
-        else
-            this.walkCyclePercent = 0;
-
-        // update walk sound
-        this.walkSoundTime += speed;
-        if (speed > .001 && ((this.climbingLadder || this.groundTimer.active()) && !this.dodgeTimer.active()))
-        {
-            if (this.walkSoundTime > 1)
-            {
-                this.walkSoundTime = this.walkSoundTime%1;
-                sound_walk.play(this.pos);
-            }
-        }
-        else
-            this.walkSoundTime = 0;
-
-        // update mirror
-        if (moveInput.x && !this.dodgeTimer.active())
-            this.mirror = moveInput.x < 0;
-        
-        // set tile to use
-        const tile = this.isDead() ? 3 : 
-            this.climbingLadder || this.groundTimer.active() ? 3 + 2*this.walkCyclePercent|0 : 4;
-        this.tileInfo.pos.x = tile * 16;
-    }
-       
-    render()
-    {
-        let bodyPos = this.pos;
-        if (!this.isDead())
-        {
-            // bounce pos with walk cycle
-            bodyPos = bodyPos.add(vec2(0,.05*Math.sin(this.walkCyclePercent*PI)));
-
-            // make bottom flush
-            bodyPos = bodyPos.add(vec2(0,(this.drawSize.y-this.size.y)/2));
-        }
-        drawTile(bodyPos, this.drawSize, this.tileInfo, this.color, this.angle, this.mirror);
-    }
-
-    damage(damage, damagingObject)
-    {
-        if (this.isDead() || this.getAliveTime() < 1 || this.dodgeTimer.active())
-            return;
-
-        makeBlood(damagingObject ? damagingObject.pos : this.pos);
-        super.damage(damage, damagingObject);
-    }
-
-    kill(damagingObject)                  
-    {
-        if (this.isDead())
-            return;
-
-        makeBlood(this.pos, 300);
-        sound_die.play(this.pos);
-
-        this.health = 0;
-        if (this.weapon)
-            this.weapon.destroy();
-        this.deadTimer.set();
-        this.size = this.size.scale(.5);
-        const fallDirection = damagingObject ? sign(damagingObject.velocity.x) : randSign();
-        this.angleVelocity = fallDirection*rand(.22,.14);
-        this.angleDamping = .9;
-        this.renderOrder = -1;  // move to back layer
-    }
-    
-    collideWithTile(data, pos)
-    {
-        if (!data)
-            return;
-
-        if (data == tileType_ladder)
-        {
-            // handle ladder collisions
-            if (pos.y + 1 > this.lastPos.y - this.size.y/2)
-                return;
-
-            if (getTileCollisionData(pos.add(vec2(0,1)))      // above
-                && !getTileCollisionData(pos.add(vec2(1,0)))  // left
-                && !getTileCollisionData(pos.add(vec2(1,0)))) // right
-                return; // dont collide if something above it and nothing to left or right
-
-            // allow standing on top of ladders
-            return !this.climbingLadder;
-        }
-
-        const d = pos.y - this.pos.y;
-        if (!this.climbingLadder && this.velocity.y > .1 && d > 0 && d < this.size.y/2)
-        if (destroyTile(pos))
-        {
-            // break blocks above
-            this.velocity.y = 0;
-            return;
-        }
-
-        return 1;
-    }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-
 class Player extends Character
 {
     update() 
     {
         // player controls
-        this.holdingJump   = keyIsDown(38) || gamepadIsDown(0);
-        this.holdingShoot  = !isUsingGamepad && mouseIsDown(0) || keyIsDown(90) || gamepadIsDown(2);
-        this.pressingThrow = mouseIsDown(1) || keyIsDown(67) || gamepadIsDown(1);
-        this.pressedDodge  = mouseIsDown(2) || keyIsDown(88) || gamepadIsDown(3);
+        this.holdingJump   = keyIsDown('ArrowUp') || gamepadIsDown(0);
+        this.holdingShoot  = !isUsingGamepad && mouseIsDown(0) || keyIsDown('KeyZ') || gamepadIsDown(2);
+        this.pressingThrow = keyIsDown('KeyC') || mouseIsDown(1) || gamepadIsDown(1);
+        this.pressedDodge  = keyIsDown('KeyX') || mouseIsDown(2) || gamepadIsDown(3);
 
         // movement control
         this.moveInput = isUsingGamepad ? gamepadStick(0) : 
-            vec2(keyIsDown(39) - keyIsDown(37), keyIsDown(38) - keyIsDown(40));
+            vec2(keyIsDown('ArrowRight') - keyIsDown('ArrowLeft'), keyIsDown('ArrowUp') - keyIsDown('ArrowDown'));
 
         super.update();
     }

package/examples/platformer/index.html

@@ -6,9 +6,10 @@
 <link rel=icon type=image/png href=../favicon.png>
 </head><body>
 
-<script src=../../build/littlejs.js?188></script>
-<script src=gameObjects.js?188></script>
-<script src=gamePlayer.js?188></script>
-<script src=gameEffects.js?188></script>
-<script src=gameLevel.js?188></script>
-<script src=game.js?188></script> 
+<script src=../../build/littlejs.js?1812></script>
+<script src=gameObjects.js?1812></script>
+<script src=gameCharacter.js?1812></script>
+<script src=gamePlayer.js?1812></script>
+<script src=gameEffects.js?1812></script>
+<script src=gameLevel.js?1812></script>
+<script src=game.js?1812></script> 

package/examples/puzzle/game.js

@@ -9,9 +9,10 @@
 'use strict';
 
 // show the LittleJS splash screen
-showSplashScreen = 1;
+setShowSplashScreen(true);
 
-canvasPixelated = 0; // do not use pixelated rendering
+// do not use pixelated rendering
+setCanvasPixelated(false);
 
 const fallTime = .2;
 const cameraOffset = vec2(0,-.5);

package/examples/puzzle/index.html

@@ -5,5 +5,5 @@
 <link rel=icon type=image/png href=../favicon.png>
 </head><body>
 
-<script src=../../build/littlejs.js?188></script>
-<script src=game.js?188></script>
+<script src=../../build/littlejs.js?1812></script>
+<script src=game.js?1812></script>

package/examples/starter/build.js

@@ -27,7 +27,7 @@ const fs = require('node:fs');
 const child_process = require('node:child_process');
 
 // rebuild engine
-child_process.execSync(`npm run build`, { stdio: 'inherit' });
+//child_process.execSync(`npm run build`, { stdio: 'inherit' });
 
 // remove old files and setup build folder
 fs.rmSync(BUILD_FOLDER, { recursive: true, force: true });

package/examples/starter/game.js

@@ -8,7 +8,7 @@
 'use strict';
 
 // show the LittleJS splash screen
-showSplashScreen = 1;
+setShowSplashScreen(true);
 
 // sound effects
 const sound_click = new Sound([1,.5]);
@@ -62,7 +62,7 @@ function gameInit()
 
     // create particle emitter
     particleEmitter = new ParticleEmitter(
-        vec2(16,15), 0,                         // emitPos, emitAngle
+        vec2(16,9), 0,                          // emitPos, emitAngle
         1, 0, 500, PI,                          // emitSize, emitTime, emitRate, emiteCone
         tile(0, 16),                            // tileIndex, tileSize
         new Color(1,1,1),   new Color(0,0,0),   // colorStartA, colorStartB

package/examples/starter/index.html

@@ -6,18 +6,18 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../src/engineDebug.js?188></script>
-<script src=../../src/engineUtilities.js?188></script>
-<script src=../../src/engineSettings.js?188></script>
-<script src=../../src/engineObject.js?188></script>
-<script src=../../src/engineDraw.js?188></script>
-<script src=../../src/engineInput.js?188></script>
-<script src=../../src/engineAudio.js?188></script>
-<script src=../../src/engineTileLayer.js?188></script>
-<script src=../../src/engineParticles.js?188></script>
-<script src=../../src/engineMedals.js?188></script>
-<script src=../../src/engineWebGL.js?188></script>
-<script src=../../src/engine.js?188></script>
+<script src=../../src/engineDebug.js?1812></script>
+<script src=../../src/engineUtilities.js?1812></script>
+<script src=../../src/engineSettings.js?1812></script>
+<script src=../../src/engineObject.js?1812></script>
+<script src=../../src/engineDraw.js?1812></script>
+<script src=../../src/engineInput.js?1812></script>
+<script src=../../src/engineAudio.js?1812></script>
+<script src=../../src/engineTileLayer.js?1812></script>
+<script src=../../src/engineParticles.js?1812></script>
+<script src=../../src/engineMedals.js?1812></script>
+<script src=../../src/engineWebGL.js?1812></script>
+<script src=../../src/engine.js?1812></script>
 
 <!-- Add your game scripts here -->
-<script src=game.js?188></script>
+<script src=game.js?1812></script>

package/examples/stress/index.html

@@ -6,7 +6,7 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../build/littlejs.min.js?188></script>
+<script src=../../build/littlejs.min.js?1812></script>
 <script>
 
 /*
@@ -23,7 +23,7 @@ let sprites, timeMS, fpsDisplay, statsDisplay, spriteColor, spriteAdditiveColor;
 
 ///////////////////////////////////////////////////////////////////////////////
 
-class TestObject extends EngineObject 
+class TestObject extends EngineObject
 {
     constructor(pos)
     {
@@ -36,31 +36,31 @@ class TestObject extends EngineObject
 ///////////////////////////////////////////////////////////////////////////////
 function gameInit()
 {
-    canvasFixedSize = vec2(800, 600); // 720p
-
     // create tile collision
-    initTileCollision(vec2(80,50));
+    const w = 94;
+    initTileCollision(vec2(w,w*.5625|0));
     for (let x = tileCollisionSize.x; x--;)
         setTileCollisionData(vec2(x,0), 1), setTileCollisionData(vec2(x,tileCollisionSize.y-1), 1);
     for (let y = tileCollisionSize.y; y--;)
         setTileCollisionData(vec2(0,y), 1), setTileCollisionData(vec2(tileCollisionSize.x-1,y), 1);
 
     // set things up
-    cameraScale = 16;
+    canvasFixedSize = vec2(1920, 1080); // 1080p
+    cameraScale = 20;
     cameraPos = tileCollisionSize.scale(.5);
     mainCanvas.style.background = '#555';
     sprites = [];
-    gravity = -.01;
+    gravity = -.005;
 
     // display stats using a div so when using glOverlay it still appears on top
     document.body.appendChild(statsDisplay = document.createElement('div'));
-    statsDisplay.style = 'position:absolute;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);font-size:6em;text-align:center;font-family:arial;user-select:none';
+    statsDisplay.style = 'position:absolute;width:100%;font-size:3em;text-align:center;font-family:arial;user-select:none;';
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameUpdate()
 {
-    if (!music.isPlaying() && mouseWasPressed(0))
+    if (mouseWasPressed(0) && !music.getSource())
         music.play();
 
     // mouse click = change color
@@ -73,15 +73,19 @@ function gameUpdate()
 
     // mouse hold = add objects
     if (mouseIsDown(0))
+    {
+        spriteColor = spriteColor.mutate();
+        spriteAdditiveColor = spriteAdditiveColor.mutate();
         for (let i=100;i--;)
             sprites.push({
                 pos:mousePos.add(randInCircle(2)),
-                angle:rand(), 
+                angle:rand(2*PI),
                 velocity:randInCircle(.2),
-                color:spriteColor = spriteColor.mutate(), 
-                additiveColor:spriteAdditiveColor.mutate()
+                color:spriteColor.rgbaInt(),
+                additiveColor:spriteAdditiveColor.rgbaInt()
             });
-    
+    }
+
     // mouse wheel = zoom
     cameraScale = clamp(cameraScale*(1-mouseWheel/10), 1, 1e3);
 }
@@ -99,41 +103,45 @@ function gameRender()
     fpsDisplay = lerp(.05, fpsDisplay||0, 1e3/(frameTimeMS - timeMS||1));
     timeMS = frameTimeMS;
 
+    // show stats 
     const spriteCount = sprites.length
     const objectCount = engineObjects.length;
-    statsDisplay.innerText = 
+    statsDisplay.innerText =
         spriteCount + objectCount ?
-            spriteCount + ' Sprites\n' 
-            + objectCount + ' Objects\n' 
+            spriteCount + ' Sprites / '
+            + (objectCount ? objectCount + ' Objects / ' : '')
             + fpsDisplay.toFixed(1) + ' FPS'
-        : 'LittleJS Stress Test\nLeft Click = Add Particles\nRight Click = Add Objects';
+        : 'LittleJS Stress Test\nLeft Click = Add Sprites\nRight Click = Add Objects';
+
+    // position stats
+    const canvasRect = mainCanvas.getBoundingClientRect();
+    statsDisplay.style.top = canvasRect.top+'px';
+    statsDisplay.style.fontSize = canvasRect.width*.04+'px';
 
-    const size = vec2(.5);
+    // update sprites
     for (const sprite of sprites)
     {
         // keep sprites above 0
         sprite.pos.y = max(sprite.pos.y, 0);
 
-        // apply gravity
-        sprite.velocity.y += gravity;
-        
-        // apply velocity
-        sprite.pos = sprite.pos.add(sprite.velocity);
+        // apply velocity and gravity
+        sprite.pos.x += sprite.velocity.x;
+        sprite.pos.y += sprite.velocity.y += gravity;
 
         // bounce
         if (sprite.pos.y < 0)
-            sprite.velocity.y = rand(1,.5);
+            sprite.velocity.y = rand(.3,.8);
         if (sprite.pos.x < 0)
             sprite.pos.x = 0, sprite.velocity.x *= -1;
         if (sprite.pos.x > tileCollisionSize.x)
             sprite.pos.x = tileCollisionSize.x, sprite.velocity.x *= -1;
 
         // rotate sprite
-        sprite.angle += .01*sign(sprite.velocity.x);
+        sprite.angle += .02*sign(sprite.velocity.x);
 
         // draw the sprite
-        glDraw(sprite.pos.x, sprite.pos.y, 1, 1, sprite.angle, 0, 0, 1, 1, 
-            sprite.color.rgbaInt(), sprite.additiveColor.rgbaInt());
+        glDraw(sprite.pos.x, sprite.pos.y, 1, 1, sprite.angle, 0, 0, 1, 1,
+            sprite.color, sprite.additiveColor);
     }
 }
 

package/examples/typescript/index.html

@@ -6,4 +6,4 @@
 </head><body>
 
 <!-- Add your game scripts here -->
-<script src=game.js?188 type=module></script>
+<script src=game.js?1812 type=module></script>