littlejsengine 1.6.0 → 1.6.4

package/examples/breakoutTutorial/game.js

@@ -0,0 +1,181 @@
+/*
+    Little JS Breakout Tutorial
+*/
+
+'use strict';
+
+///////////////////////////////////////////////////////////////////////////////
+
+// globals
+const levelSize = vec2(38, 20); // size of play area
+let score = 0; // start score at 0
+let ball; // keep track of ball object
+let paddle; // keep track of player's paddle
+
+// sound effects
+const sound_bounce = new Sound([,,1e3,,.03,.02,1,2,,,940,.03,,,,,.2,.6,,.06], 0);
+const sound_break = new Sound([,,90,,.01,.03,4,,,,,,,9,50,.2,,.2,.01], 0);
+const sound_start = new Sound([,0,500,,.04,.3,1,2,,,570,.02,.02,,,,.04]);
+
+///////////////////////////////////////////////////////////////////////////////
+
+class Paddle extends EngineObject
+{
+    constructor()
+    {
+        super(vec2(0,1), vec2(6,.5)); // set object position and size
+        this.setCollision(); // make object collide
+        this.mass = 0; // make object have static physics
+    }
+
+    update()
+    {
+        this.pos.x = mousePos.x; // move paddle to mouse
+        
+        // clamp paddle to level size
+        this.pos.x = clamp(this.pos.x, this.size.x/2, levelSize.x - this.size.x/2);
+    }
+}
+
+class Ball extends EngineObject 
+{
+    constructor(pos)
+    {
+        super(pos, vec2(.5)); // set object position and size
+
+        this.velocity = vec2(-.1, -.1); // give ball some movement
+        this.setCollision(); // make object collide
+        this.elasticity = 1; // make object bounce
+    }
+    collideWithObject(o)              
+    {
+        // prevent colliding with paddle if moving upwards
+        if (o == paddle && this.velocity.y > 0)
+            return 0;
+
+        // speed up
+        const speed = min(1.04*this.velocity.length(), .5);
+        this.velocity = this.velocity.normalize(speed);
+
+        // play bounce sound with pitch scaled by speed
+        sound_bounce.play(this.pos, 1, speed);
+
+        if (o == paddle)
+        {
+            // control bounce angle when ball collides with paddle
+            const deltaX = this.pos.x - o.pos.x;
+            this.velocity = this.velocity.rotate(.3 * deltaX);
+            
+            // make sure ball is moving upwards with a minimum speed
+            this.velocity.y = max(-this.velocity.y, .2);
+            
+            // prevent default collision code
+            return 0;
+        }
+
+        return 1; // allow object to collide
+    }
+}
+
+class Wall extends EngineObject
+{
+    constructor(pos, size)
+    {
+        super(pos, size); // set object position and size
+
+        this.setCollision(); // make object collide
+        this.mass = 0; // make object have static physics
+        this.color = new Color(0,0,0,0); // make object invisible
+    }
+}
+
+class Brick extends EngineObject
+{
+    constructor(pos, size)
+    {
+        super(pos, size);
+
+        this.setCollision(); // make object collide
+        this.mass = 0; // make object have static physics
+        this.color = randColor(); // give brick a random color
+    }
+
+    collideWithObject(o)              
+    {
+        this.destroy(); // destroy block when hit
+        sound_break.play(this.pos); // play brick break sound
+        ++score; // award a point for each brick broke
+
+        // create explosion effect
+        const color = this.color;
+        new ParticleEmitter(
+            this.pos, 0,            // pos, angle
+            this.size, .1, 200, PI, // emitSize, emitTime, emitRate, emiteCone
+            -1, vec2(16),           // tileIndex, tileSize
+            color, color,           // colorStartA, colorStartB
+            color.scale(1,0), color.scale(1,0), // colorEndA, colorEndB
+            .2, .5, 1, .1, .1,  // time, sizeStart, sizeEnd, speed, angleSpeed
+            .99, .95, .4, PI,   // damping, angleDamping, gravityScale, cone
+            .1, .5, 0, 1        // fadeRate, randomness, collide, additive
+        );
+
+        return 1; // allow object to collide
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameInit()
+{
+    // create bricks
+    for(let x=2;  x<=levelSize.x-2; x+=2)
+    for(let y=12; y<=levelSize.y-2; y+=1)
+        new Brick(vec2(x,y), vec2(2,1)); // create a brick
+
+    cameraPos = levelSize.scale(.5); // center camera in level
+    canvasFixedSize = vec2(1280, 720); // use a 720p fixed size canvas
+
+    paddle = new Paddle; // create player's paddle
+
+    // create walls
+    new Wall(vec2(-.5,levelSize.y/2),            vec2(1,100)) // top
+    new Wall(vec2(levelSize.x+.5,levelSize.y/2), vec2(1,100)) // left
+    new Wall(vec2(levelSize.x/2,levelSize.y+.5), vec2(100,1)) // right
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameUpdate()
+{
+    if (ball && ball.pos.y < -1) // if ball is below level
+    {
+        // destroy old ball
+        ball.destroy();
+        ball = 0;
+    }
+    if (!ball && mouseWasPressed(0)) // if there is no ball and left mouse is pressed
+    {
+        ball = new Ball(cameraPos); // create a ball
+        sound_start.play(); // play start sound
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameUpdatePost()
+{
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameRender()
+{
+    drawRect(cameraPos, vec2(100), new Color(.5,.5,.5)); // draw background
+    drawRect(cameraPos, levelSize, new Color(.1,.1,.1)); // draw level boundary
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameRenderPost()
+{
+    drawTextScreen("Score " + score, vec2(mainCanvasSize.x/2, 70), 50); // show score
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// Startup LittleJS Engine
+engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);

package/examples/breakoutTutorial/index.html

@@ -0,0 +1,10 @@
+<html><head>
+<title>Little JS Breakout Tutorial</title>
+<meta name=viewport content=width=device-width,height=device-height,initial-scale=1,maximum-scale=1>
+<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=../../build/littlejs.js?126></script>
+<script src=game.js?126></script>

package/examples/empty/game.js

@@ -7,26 +7,36 @@
 ///////////////////////////////////////////////////////////////////////////////
 function gameInit()
 {
+    // called once after the engine starts up
+    // setup the game
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameUpdate()
 {
+    // called every frame at 60 frames per second
+    // handle input and update the game state
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameUpdatePost()
 {
+    // called after physics and objects are updated
+    // setup camera and prepare for render
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameRender()
 {
+    // called before objects are rendered
+    // draw any background effects that appear behind objects
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameRenderPost()
 {
+    // called after objects are rendered
+    // draw effects or hud that appear above all objects
     drawTextScreen('Hello World!', mainCanvasSize.scale(.5), 80);
 }
 

package/examples/module/index.html

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

package/examples/particles/index.html

@@ -16,7 +16,7 @@ button
 </style>
 </head><body>
 
-<script src=../../build/littlejs.js?125></script>
+<script src=../../build/littlejs.js?126></script>
 <script>
 
 'use strict';

package/examples/platformer/gameLevel.js

@@ -192,7 +192,7 @@ function makeTileLayers()
 
 function buildLevel()
 {
-    levelSize = vec2(256);
+    levelSize = vec2(128);
     levelColor = randColor(new Color(.2,.2,.2), new Color(.8,.8,.8));
     levelGroundColor = levelColor.mutate().add(new Color(.4,.4,.4)).clamp();
 

package/examples/platformer/gamePlayer.js

@@ -298,7 +298,7 @@ class Player extends Character
     {
         // player controls
         this.holdingJump   = keyIsDown(38) || gamepadIsDown(0);
-        this.holdingShoot  = mouseIsDown(0) || keyIsDown(90) || gamepadIsDown(2);
+        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);
 

package/examples/platformer/index.html

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

package/examples/puzzle/index.html

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

package/examples/starter/build.bat

@@ -58,11 +58,12 @@ if %ERRORLEVEL% NEQ 0 (
     exit /b %ERRORLEVEL%
 )
 
-rem build the html, you can add html header and footers here
+rem build the html, you can add an html header and footer here
 rem type ..\header.html >> index.html
-echo ^<body^>^<script^> >> index.html
+echo ^<script^> >> index.html
 type %BUILD_FILENAME% >> index.html
 echo ^</script^> >> index.html
+rem type ..\footer.html >> index.html
 
 rem delete intermediate files
 del %BUILD_FILENAME%

package/examples/starter/game.js

@@ -12,7 +12,7 @@ const medal_example = new Medal(0, 'Example Medal', 'Welcome to LittleJS!');
 medalsInit('Hello World');
 
 // game variables
-let particleEmiter;
+let particleEmitter;
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameInit()
@@ -49,7 +49,7 @@ function gameInit()
     gravity = -.01;
 
     // create particle emitter
-    particleEmiter = new ParticleEmitter(
+    particleEmitter = new ParticleEmitter(
         vec2(16), 0,                            // emitPos, emitAngle
         1, 0, 500, PI,                          // emitSize, emitTime, emitRate, emiteCone
         0, vec2(16),                            // tileIndex, tileSize
@@ -59,8 +59,8 @@ function gameInit()
         .99, 1, 1, PI,        // damping, angleDamping, gravityScale, cone
         .05, .5, 1, 1         // fadeRate, randomness, collide, additive
     );
-    particleEmiter.elasticity = .3; // bounce when it collides
-    particleEmiter.trailScale = 2;  // stretch in direction of motion
+    particleEmitter.elasticity = .3; // bounce when it collides
+    particleEmitter.trailScale = 2;  // stretch in direction of motion
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -72,10 +72,10 @@ function gameUpdate()
         sound_click.play(mousePos);
 
         // change particle color and set to fade out
-        particleEmiter.colorStartA = new Color;
-        particleEmiter.colorStartB = randColor();
-        particleEmiter.colorEndA = particleEmiter.colorStartA.scale(1,0);
-        particleEmiter.colorEndB = particleEmiter.colorStartB.scale(1,0);
+        particleEmitter.colorStartA = new Color;
+        particleEmitter.colorStartB = randColor();
+        particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1,0);
+        particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1,0);
 
         // unlock medals
         medal_example.unlock();
@@ -83,7 +83,7 @@ function gameUpdate()
 
     // move particles to mouse location if on screen
     if (mousePosScreen.x)
-        particleEmiter.pos = mousePos;
+        particleEmitter.pos = mousePos;
 }
 
 ///////////////////////////////////////////////////////////////////////////////

package/examples/starter/index.html

@@ -7,21 +7,21 @@
 </head><body>
 
 <!-- LittleJS engine scripts -->
-<script src=../../src/engineDebug.js?125></script>
-<script src=../../src/engineUtilities.js?125></script>
-<script src=../../src/engineSettings.js?125></script>
-<script src=../../src/engineObject.js?125></script>
-<script src=../../src/engineDraw.js?125></script>
-<script src=../../src/engineInput.js?125></script>
-<script src=../../src/engineAudio.js?125></script>
-<script src=../../src/engineTileLayer.js?125></script>
-<script src=../../src/engineParticles.js?125></script>
-<script src=../../src/engineMedals.js?125></script>
-<script src=../../src/engineWebGL.js?125></script>
-<script src=../../src/engine.js?125></script>
+<script src=../../src/engineDebug.js?126></script>
+<script src=../../src/engineUtilities.js?126></script>
+<script src=../../src/engineSettings.js?126></script>
+<script src=../../src/engineObject.js?126></script>
+<script src=../../src/engineDraw.js?126></script>
+<script src=../../src/engineInput.js?126></script>
+<script src=../../src/engineAudio.js?126></script>
+<script src=../../src/engineTileLayer.js?126></script>
+<script src=../../src/engineParticles.js?126></script>
+<script src=../../src/engineMedals.js?126></script>
+<script src=../../src/engineWebGL.js?126></script>
+<script src=../../src/engine.js?126></script>
 
 <!-- You can also include all engine scripts like this... -->
 <!-- <script src=engine/engine.all.js></script> -->
 
 <!-- Add your game scripts here -->
-<script src=game.js?125></script>
+<script src=game.js?126></script>

package/examples/stress/index.html

@@ -6,7 +6,7 @@
 <link rel=icon type=image/png href=../favicon.png>
 </head><body>
 
-<script src=../../build/littlejs.min.js?125></script>
+<script src=../../build/littlejs.min.js?126></script>
 <script>
 
 /*

package/examples/typescript/game.js

@@ -1,89 +1,89 @@
-/*
-    LittleJS Hello World Starter Game
-*/
-'use strict';
-// import module
-import * as LittleJS from '../../build/littlejs.esm.js';
-const { Vector2, Color, Timer, vec2 } = LittleJS;
-// sound effects
-const sound_click = new LittleJS.Sound([1, .5]);
-// medals
-const medal_example = new LittleJS.Medal(0, 'Example Medal', 'Welcome to LittleJS!');
-LittleJS.medalsInit('Hello World');
-// game variables
-let particleEmiter;
-///////////////////////////////////////////////////////////////////////////////
-function gameInit() {
-    // create tile collision and visible tile layer
-    LittleJS.initTileCollision(vec2(32, 16));
-    const pos = vec2();
-    const tileLayer = new LittleJS.TileLayer(pos, LittleJS.tileCollisionSize);
-    // get level data from the tiles image
-    const imageLevelDataRow = 1;
-    const mainContext = LittleJS.mainContext;
-    mainContext.drawImage(LittleJS.tileImage, 0, 0);
-    for (pos.x = LittleJS.tileCollisionSize.x; pos.x--;)
-        for (pos.y = LittleJS.tileCollisionSize.y; pos.y--;) {
-            const imageData = mainContext.getImageData(pos.x, 16 * (imageLevelDataRow + 1) - pos.y - 1, 1, 1).data;
-            if (imageData[0]) {
-                const tileIndex = 1;
-                const direction = LittleJS.randInt(4);
-                const mirror = LittleJS.randInt(2) ? true : false;
-                const color = LittleJS.randColor();
-                const data = new LittleJS.TileLayerData(tileIndex, direction, mirror, color);
-                tileLayer.setData(pos, data);
-                LittleJS.setTileCollisionData(pos, 1);
-            }
-        }
-    tileLayer.redraw();
-    // move camera to center of collision
-    LittleJS.setCameraPos(LittleJS.tileCollisionSize.scale(.5));
-    // enable gravity
-    LittleJS.setGravity(-.01);
-    // create particle emitter
-    const center = LittleJS.tileCollisionSize.scale(.5).add(vec2(0, 9));
-    particleEmiter = new LittleJS.ParticleEmitter(center, 0, // emitPos, emitAngle
-    1, 0, 500, Math.PI, // emitSize, emitTime, emitRate, emiteCone
-    0, vec2(16), // tileIndex, tileSize
-    new Color(1, 1, 1), new Color(0, 0, 0), // colorStartA, colorStartB
-    new Color(1, 1, 1, 0), new Color(0, 0, 0, 0), // colorEndA, colorEndB
-    2, .2, .2, .1, .05, // time, sizeStart, sizeEnd, speed, angleSpeed
-    .99, 1, 1, Math.PI, // damping, angleDamping, gravityScale, cone
-    .05, .5, true, true // fadeRate, randomness, collide, additive
-    );
-    particleEmiter.elasticity = .3; // bounce when it collides
-    particleEmiter.trailScale = 2; // stretch in direction of motion
-}
-///////////////////////////////////////////////////////////////////////////////
-function gameUpdate() {
-    if (LittleJS.mouseWasPressed(0)) {
-        // play sound when mouse is pressed
-        sound_click.play(LittleJS.mousePos);
-        // change particle color and set to fade out
-        particleEmiter.colorStartA = new Color;
-        particleEmiter.colorStartB = LittleJS.randColor();
-        particleEmiter.colorEndA = particleEmiter.colorStartA.scale(1, 0);
-        particleEmiter.colorEndB = particleEmiter.colorStartB.scale(1, 0);
-        // unlock medals
-        medal_example.unlock();
-    }
-    // move particles to mouse location if on screen
-    if (LittleJS.mousePosScreen.x)
-        particleEmiter.pos = LittleJS.mousePos;
-}
-///////////////////////////////////////////////////////////////////////////////
-function gameUpdatePost() {
-}
-///////////////////////////////////////////////////////////////////////////////
-function gameRender() {
-    // draw a grey square in the background without using webgl
-    LittleJS.drawRect(LittleJS.cameraPos, LittleJS.tileCollisionSize.add(vec2(5)), new Color(.2, .2, .2), 0, false);
-}
-///////////////////////////////////////////////////////////////////////////////
-function gameRenderPost() {
-    // draw to overlay canvas for hud rendering
-    LittleJS.drawTextScreen('LittleJS with TypeScript', vec2(LittleJS.mainCanvasSize.x / 2, 80), 80);
-}
-///////////////////////////////////////////////////////////////////////////////
-// Startup LittleJS Engine
-LittleJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, 'tiles.png');
+/*
+    LittleJS Hello World Starter Game
+*/
+'use strict';
+// import module
+import * as LittleJS from '../../build/littlejs.esm.js';
+const { Color, vec2 } = LittleJS;
+// sound effects
+const sound_click = new LittleJS.Sound([1, .5]);
+// medals
+const medal_example = new LittleJS.Medal(0, 'Example Medal', 'Welcome to LittleJS!');
+LittleJS.medalsInit('Hello World');
+// game variables
+let particleEmitter;
+///////////////////////////////////////////////////////////////////////////////
+function gameInit() {
+    // create tile collision and visible tile layer
+    LittleJS.initTileCollision(vec2(32, 16));
+    const pos = vec2();
+    const tileLayer = new LittleJS.TileLayer(pos, LittleJS.tileCollisionSize);
+    // get level data from the tiles image
+    const imageLevelDataRow = 1;
+    const mainContext = LittleJS.mainContext;
+    mainContext.drawImage(LittleJS.tileImage, 0, 0);
+    for (pos.x = LittleJS.tileCollisionSize.x; pos.x--;)
+        for (pos.y = LittleJS.tileCollisionSize.y; pos.y--;) {
+            const imageData = mainContext.getImageData(pos.x, 16 * (imageLevelDataRow + 1) - pos.y - 1, 1, 1).data;
+            if (imageData[0]) {
+                const tileIndex = 1;
+                const direction = LittleJS.randInt(4);
+                const mirror = LittleJS.randInt(2) ? true : false;
+                const color = LittleJS.randColor();
+                const data = new LittleJS.TileLayerData(tileIndex, direction, mirror, color);
+                tileLayer.setData(pos, data);
+                LittleJS.setTileCollisionData(pos, 1);
+            }
+        }
+    tileLayer.redraw();
+    // move camera to center of collision
+    LittleJS.setCameraPos(LittleJS.tileCollisionSize.scale(.5));
+    // enable gravity
+    LittleJS.setGravity(-.01);
+    // create particle emitter
+    const center = LittleJS.tileCollisionSize.scale(.5).add(vec2(0, 9));
+    particleEmitter = new LittleJS.ParticleEmitter(center, 0, // emitPos, emitAngle
+    1, 0, 500, Math.PI, // emitSize, emitTime, emitRate, emiteCone
+    0, vec2(16), // tileIndex, tileSize
+    new Color(1, 1, 1), new Color(0, 0, 0), // colorStartA, colorStartB
+    new Color(1, 1, 1, 0), new Color(0, 0, 0, 0), // colorEndA, colorEndB
+    2, .2, .2, .1, .05, // time, sizeStart, sizeEnd, speed, angleSpeed
+    .99, 1, 1, Math.PI, // damping, angleDamping, gravityScale, cone
+    .05, .5, true, true // fadeRate, randomness, collide, additive
+    );
+    particleEmitter.elasticity = .3; // bounce when it collides
+    particleEmitter.trailScale = 2; // stretch in direction of motion
+}
+///////////////////////////////////////////////////////////////////////////////
+function gameUpdate() {
+    if (LittleJS.mouseWasPressed(0)) {
+        // play sound when mouse is pressed
+        sound_click.play(LittleJS.mousePos);
+        // change particle color and set to fade out
+        particleEmitter.colorStartA = new Color;
+        particleEmitter.colorStartB = LittleJS.randColor();
+        particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1, 0);
+        particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1, 0);
+        // unlock medals
+        medal_example.unlock();
+    }
+    // move particles to mouse location if on screen
+    if (LittleJS.mousePosScreen.x)
+        particleEmitter.pos = LittleJS.mousePos;
+}
+///////////////////////////////////////////////////////////////////////////////
+function gameUpdatePost() {
+}
+///////////////////////////////////////////////////////////////////////////////
+function gameRender() {
+    // draw a grey square in the background without using webgl
+    LittleJS.drawRect(LittleJS.cameraPos, LittleJS.tileCollisionSize.add(vec2(5)), new Color(.2, .2, .2), 0, false);
+}
+///////////////////////////////////////////////////////////////////////////////
+function gameRenderPost() {
+    // draw to overlay canvas for hud rendering
+    LittleJS.drawTextScreen('LittleJS with TypeScript', vec2(LittleJS.mainCanvasSize.x / 2, 80), 80);
+}
+///////////////////////////////////////////////////////////////////////////////
+// Startup LittleJS Engine
+LittleJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, 'tiles.png');