littlejsengine 1.18.2 → 1.18.7

package/examples/breakoutTutorial/game.js

@@ -1,191 +0,0 @@
-/*
-    Little JS Breakout Tutorial
-    - Shows how to make a simple breakout game
-    - Includes sound and particles
-    - Control with mouse or touch
-*/
-
-'use strict';
-
-// import LittleJS module
-import * as LJS from '../../dist/littlejs.esm.js';
-const {vec2, rgb} = LJS;
-
-///////////////////////////////////////////////////////////////////////////////
-
-// 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 paddle
-
-// sound effects
-const sound_bounce = new LJS.Sound([,,1e3,,.03,.02,1,2,,,940,.03,,,,,.2,.6,,.06], 0);
-const sound_break  = new LJS.Sound([,,90,,.01,.03,4,,,,,,,9,50,.2,,.2,.01], 0);
-const sound_start  = new LJS.Sound([,0,500,,.04,.3,1,2,,,570,.02,.02,,,,.04]);
-
-///////////////////////////////////////////////////////////////////////////////
-
-class Paddle extends LJS.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 = LJS.mousePos.x; // move paddle to mouse
-        
-        // clamp paddle to level size
-        this.pos.x = LJS.clamp(this.pos.x, this.size.x/2, levelSize.x - this.size.x/2);
-    }
-}
-
-class Ball extends LJS.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.restitution = 1; // make object bounce
-    }
-    collideWithObject(o)              
-    {
-        // prevent colliding with paddle if moving upwards
-        if (o == paddle && this.velocity.y > 0)
-            return false;
-
-        // speed up
-        const speed = LJS.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 = o.pos.x - this.pos.x;
-            this.velocity = this.velocity.rotate(.3 * deltaX);
-            
-            // make sure ball is moving upwards with a minimum speed
-            this.velocity.y = LJS.max(-this.velocity.y, .2);
-            
-            // prevent default collision code
-            return false;
-        }
-
-        return true; // allow object to collide
-    }
-}
-
-class Wall extends LJS.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 = rgb(0,0,0,0); // make object invisible
-    }
-}
-
-class Brick extends LJS.EngineObject
-{
-    constructor(pos, size)
-    {
-        super(pos, size);
-
-        this.setCollision(); // make object collide
-        this.mass = 0; // make object have static physics
-        this.color = LJS.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 LJS.ParticleEmitter(
-            this.pos, 0,             // pos, angle
-            this.size, .1, 200, 3.14,// emitSize, emitTime, rate, cone
-            undefined,               // tileInfo
-            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, 3.14, // damp, angleDamp, gravity, cone
-            .1, .5, false, true // fade, randomness, collide, additive
-        );
-
-        return true; // allow object to collide
-    }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameInit()
-{
-    // setup camera and canvas
-    LJS.setCameraPos(levelSize.scale(.5));   // center camera in level
-    LJS.setCanvasFixedSize(vec2(1280, 720)); // use a 720p fixed size canvas
-    
-    // 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
-
-    // create player paddle
-    paddle = new 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 && LJS.mouseWasPressed(0))
-    {
-        // spawn new ball if there is no ball and left mouse pressed
-        ball = new Ball(LJS.cameraPos); // create a ball
-        sound_start.play(); // play start sound
-    }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameUpdatePost()
-{
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameRender()
-{
-    LJS.drawRect(LJS.cameraPos, vec2(100), rgb(.5,.5,.5)); // draw background
-    LJS.drawRect(LJS.cameraPos, levelSize, rgb(.1,.1,.1)); // draw level boundary
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameRenderPost()
-{
-    LJS.drawTextScreen('Score ' + score, vec2(LJS.mainCanvasSize.x/2, 70), 50); // show score
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// Startup LittleJS Engine
-LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);

package/examples/breakoutTutorial/index.html

@@ -1,8 +0,0 @@
-<!DOCTYPE html><head>
-<title>LittleJS Breakout Tutorial</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/electron/build.mjs

@@ -1,127 +0,0 @@
-/** 
- * LittleJS Build System
- */
-
-'use strict';
-
-import { fileURLToPath } from 'node:url';
-import { dirname, join } from 'node:path';
-import fs from 'node:fs';
-import { execSync } from 'node:child_process';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
-const PROGRAM_TITLE = 'Little JS Electron Project';
-const PROGRAM_NAME = 'game';
-const BUILD_FOLDER = join(__dirname, 'build');
-const USE_ROADROLLER = false; // enable for extra compression
-const sourceFiles =
-[
-    join(__dirname, '../../dist/littlejs.release.js'),
-    join(__dirname, 'game.js'),
-    // add your game's files here
-];
-const dataFiles =
-[
-    'tiles.png',
-    // add your game's data files here
-];
-
-console.log(`Building ${PROGRAM_NAME}...`);
-const startTime = Date.now();
-
-// rebuild engine
-//execSync(`npm run build`, { stdio: 'inherit' });
-
-// remove old files and setup build folder
-fs.rmSync(BUILD_FOLDER, { recursive: true, force: true });
-fs.rmSync(join(__dirname, `${PROGRAM_NAME}.zip`), { force: true });
-fs.mkdirSync(BUILD_FOLDER);
-
-// copy data files
-for (const file of dataFiles)
-    fs.copyFileSync(join(__dirname, file), join(BUILD_FOLDER, file));
-
-Build
-(
-    join(BUILD_FOLDER, 'index.js'),
-    sourceFiles,
-    USE_ROADROLLER ? 
-        [closureCompilerStep, uglifyBuildStep, roadrollerBuildStep, htmlBuildStep, electronBuildStep] :
-        [closureCompilerStep, uglifyBuildStep, htmlBuildStep, electronBuildStep]
-);
-
-console.log('');
-console.log(`Build Completed in ${((Date.now() - startTime)/1e3).toFixed(2)} seconds!`);
-
-///////////////////////////////////////////////////////////////////////////////
-
-// A single build with its own source files, build steps, and output file
-// - each build step is a callback that accepts a single filename
-function Build(outputFile, files=[], buildSteps=[])
-{
-    // copy files into a buffer
-    let buffer = '';
-    for (const file of files)
-        buffer += fs.readFileSync(file) + '\n';
-
-    // output file
-    fs.writeFileSync(outputFile, buffer, {flag: 'w+'});
-
-    // execute build steps in order
-    for (const buildStep of buildSteps)
-        buildStep(outputFile);
-}
-
-function closureCompilerStep(filename)
-{
-    console.log('Running closure compiler...');
-
-    // use closer compiler to minify the code
-    const filenameTemp = filename + '.tmp';
-    fs.copyFileSync(filename, filenameTemp);
-    execSync(`npx google-closure-compiler --js=${filenameTemp} --js_output_file=${filename} --compilation_level=ADVANCED --warning_level=VERBOSE --jscomp_off=* --assume_function_wrapper`, {stdio: 'inherit'});
-    fs.rmSync(filenameTemp);
-}
-
-function uglifyBuildStep(filename)
-{
-    console.log('Running uglify...');
-    execSync(`npx uglifyjs ${filename} -c -m -o ${filename}`, {stdio: 'inherit'});
-}
-
-function roadrollerBuildStep(filename)
-{
-    console.log('Running roadroller...');
-    execSync(`npx roadroller ${filename} -o ${filename}`, {stdio: 'inherit'});
-}
-
-function htmlBuildStep(filename)
-{
-    console.log('Building html...');
-
-    // create html file
-    let buffer = '';
-    buffer += '<!DOCTYPE html>';
-    buffer += '<head>';
-    buffer += `<title>${PROGRAM_TITLE}</title>`;
-    buffer += '<meta charset=utf-8>';
-    buffer += '</head>';
-    buffer += '<body>';
-    buffer += `<script src='index.js'></script>`;
-
-    // output html file
-    fs.writeFileSync(join(BUILD_FOLDER, 'index.html'), buffer, {flag: 'w+'});
-}
-
-function electronBuildStep(filename)
-{
-    console.log('Building executable with electron...');
-
-    // copy elecron files to build folder
-    fs.copyFileSync(join(__dirname, 'electron.js'), join(BUILD_FOLDER, 'electron.js'));
-    fs.copyFileSync(join(__dirname, 'package.json'), join(BUILD_FOLDER, 'package.json'));
-
-    // run electron packager
-    execSync(`npx electron-packager "${BUILD_FOLDER}" --overwrite --out="${__dirname}"`, {stdio: 'inherit'});
-}

package/examples/electron/electron.js

@@ -1,35 +0,0 @@
-const { app, BrowserWindow } = require('electron');
-
-function createWindow()
-{
-  // create the browser window
-  const mainWindow = new BrowserWindow({width: 800, height: 600});
-  
-  // hide the toolbar menu
-  mainWindow.setMenu(null);
-
-  // load the index.html of the app
-  mainWindow.loadFile('index.html');
-
-  // go fullscreen
-  //mainWindow.setFullScreen(true);
-
-  // open the dev tools debugging
-  //mainWindow.webContents.openDevTools()
-}
-
-// wait until the app is ready and create the window
-app.whenReady().then(createWindow);
-
-// quit when all windows are closed (except macOS convention)
-app.on('window-all-closed', ()=>
-{
-    if (process.platform != 'darwin')
-        app.quit();
-});
-
-app.on('activate', ()=>
-{
-    if (BrowserWindow.getAllWindows().length == 0)
-        createWindow();
-});

package/examples/electron/game.js

@@ -1,54 +0,0 @@
-/*
-    Little JS Starter Project
-    - A simple starter project for LittleJS
-    - Demos all the main engine features
-    - Builds to a zip file
-*/
-
-'use strict';
-
-// show the LittleJS splash screen
-setShowSplashScreen(true);
-
-// sound effects
-const sound_click = new Sound([1,.5]);
-
-///////////////////////////////////////////////////////////////////////////////
-function gameInit()
-{
-    setCanvasClearColor(GRAY);
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameUpdate()
-{
-    if (mouseWasPressed(0))
-    {
-        // play sound when mouse is pressed
-        sound_click.play(mousePos);
-    }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameUpdatePost()
-{
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameRender()
-{
-    // draw the logo as a tile
-    drawTile(vec2(sin(time)*4, 0), vec2(10), tile(3,128));
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameRenderPost()
-{
-    drawTextScreen('LittleJS\nElectron Demo', 
-        vec2(mainCanvasSize.x/2, 100), 80, // position, size
-        hsl(0,0,1), 6, hsl(0,0,0));       // color, outline size and color
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// Startup LittleJS Engine
-engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

package/examples/electron/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html><head>
-<title>LittleJS Starter Project</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>
-
-<!-- LittleJS Engine -->
-<script src=../../dist/littlejs.js></script>
-
-<!-- Add your game scripts here -->
-<script src=game.js></script>

package/examples/electron/package.json

@@ -1,5 +0,0 @@
-{
-  "name": "littlejsgame",
-  "version": "1.0.0",
-  "main": "electron.js"
-}

package/examples/empty/game.js

@@ -1,51 +0,0 @@
-/*
-    Little JS Hello World Demo
-    - Just prints 'Hello World!'
-    - A good starting point for new projects
-*/
-
-'use strict';
-
-// import LittleJS module
-import * as LJS from '../../dist/littlejs.esm.js';
-const {vec2, rgb} = LJS;
-
-///////////////////////////////////////////////////////////////////////////////
-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
-    LJS.drawTextScreen('Hello World!', LJS.mainCanvasSize.scale(.5), 80);
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// Startup LittleJS Engine
-LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

package/examples/empty/index.html

@@ -1,5 +0,0 @@
-<!DOCTYPE html><head>
-<title>LittleJS Hello World Demo</title>
-<meta charset=utf-8>
-</head><body>
-<script src=game.js type=module></script>

package/examples/htmlMenu/game.js

@@ -1,82 +0,0 @@
-/*
-    Little JS HTML Menu Example Project
-    - Setup a simple html menu system
-    - Menu can be opened and closed
-    - Pauses game when menu is visible
-    - Shows several input types
-*/
-
-'use strict';
-
-// import LittleJS module
-import * as LJS from '../../dist/littlejs.esm.js';
-const {vec2, hsl, tile} = LJS;
-
-// sound effects
-const sound_click = new LJS.Sound([1,.5]);
-
-///////////////////////////////////////////////////////////////////////////////
-
-// html menu system
-const getMenuVisible = ()=> menu.style.visibility != 'hidden';
-function setMenuVisible(visible)
-{
-    menu.style.visibility = visible ? 'visible' : 'hidden';
-    LJS.setInputPreventDefault(!visible); // don't prevent default when menu is visible
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameInit()
-{
-    button_test.onclick = function() { alert('Button was clicked!'); }
-    button_exitMenu.onclick = function() { setMenuVisible(false); }
-    input_test.onchange = function() { alert('New text: ' + this.value); }
-    input_rangeTest.onchange = function() { alert('New value: ' + this.value); }
-    LJS.setCanvasClearColor(hsl(0,0,.2));
-
-    // show menu for demo
-    setMenuVisible(true);
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameUpdate()
-{
-    // play sound when mouse is pressed
-    if (LJS.mouseWasPressed(0))
-        sound_click.play(LJS.mousePos);
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameUpdatePost()
-{
-    // open menu visibility
-    if (LJS.keyWasPressed('KeyM'))
-        setMenuVisible(true);
-
-    // pause game when menu is visible
-    LJS.setPaused(getMenuVisible());
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameRender()
-{
-    // test game rendering
-    for (let i=0; i<1e3; ++i)
-    {
-        const time = LJS.time;
-        const pos = vec2(30*LJS.sin(i+time/9),20*LJS.sin(i*i+time/9));
-        LJS.drawTile(pos, vec2(2), tile(3,128), hsl(i/9,1,.4), time+i, !(i%2), hsl(i/9,1,.1,0));
-    }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameRenderPost()
-{
-    LJS.drawTextScreen('LittleJS HTML Menu Example\nM = Open menu', 
-        vec2(LJS.mainCanvasSize.x/2, 70), 60, // position, size
-        hsl(0,0,1), 6, hsl(0,0,0));           // color, outline size and color
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// Startup LittleJS Engine
-LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);