separate js13k and starter project

separate js13k and starter project add <!DOCTYPE html>
KilledByAPixel · Jan 6, 2024 · 2b1a219 · 2b1a219
1 parent f3e207d
commit 2b1a219
Show file tree

Hide file tree

Showing 29 changed files with 12,519 additions and 39 deletions.
diff --git a/examples/breakout/index.html b/examples/breakout/index.html
@@ -1,4 +1,4 @@
-<html><head>
+<!DOCTYPE html><head>
 <title>Little JS Breakout Game Demo</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>

diff --git a/examples/breakoutTutorial/index.html b/examples/breakoutTutorial/index.html
@@ -1,4 +1,4 @@
-<html><head>
+<!DOCTYPE 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>

diff --git a/examples/electron/build.js b/examples/electron/build.js
@@ -2,11 +2,6 @@
 
 /** 
  * LittleJS Build System
- * - Combine input files
- * - Run custom build steps
- * - Check for errors
- * - Output to build folder
- * @namespace Build
  */
 
 const PROGRAM_NAME = 'game';
@@ -86,7 +81,7 @@ function htmlBuildStep(filename)
     console.log(`Building html...`);
 
     // copy files into a buffer
-    let buffer = '';
+    let buffer = '<!DOCTYPE html>';
     buffer += '<script>';
     buffer += fs.readFileSync(filename) + '\n';
     buffer += '</script>';

diff --git a/examples/electron/index.html b/examples/electron/index.html
@@ -1,4 +1,4 @@
-<html><head>
+<!DOCTYPE html><head>
 <title>Little JS Starter Project</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>

diff --git a/examples/empty/index.html b/examples/empty/index.html
@@ -1,4 +1,4 @@
-<html><head>
+<!DOCTYPE html><head>
 <title>Little JS Hello World Demo</title>
 </head><body>
 

diff --git a/examples/js13k/build.bat b/examples/js13k/build.bat
@@ -0,0 +1,2 @@
+rem LittleJS Build Script
+call node build.js
diff --git a/examples/js13k/build.js b/examples/js13k/build.js
@@ -0,0 +1,110 @@
+#!/usr/bin/env node
+
+/** 
+ * LittleJS Build System
+ */
+
+const PROGRAM_NAME = 'game';
+const BUILD_FOLDER = 'build';
+const sourceFiles =
+[
+    '../../build/littlejs.release.js',
+    '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();
+const fs = require('node:fs');
+const child_process = require('node:child_process');
+
+// rebuild engine
+//child_process.execSync(`npm run build`, { stdio: 'inherit' });
+
+// remove old files and setup build folder
+fs.rmSync(BUILD_FOLDER, { recursive: true, force: true });
+fs.rmSync(`${PROGRAM_NAME}.zip`, { force: true });
+fs.mkdirSync(BUILD_FOLDER);
+
+// copy data files
+for(const file of dataFiles)
+    fs.copyFileSync(file, `${BUILD_FOLDER}/${file}`);
+
+Build
+(
+    `${BUILD_FOLDER}/index.js`,
+    sourceFiles,
+    [closureCompilerStep, uglifyBuildStep, roadrollerBuildStep, htmlBuildStep, zipBuildStep]
+);
+
+console.log(``);
+console.log(`Build Completed in ${((Date.now() - startTime)/1e3).toFixed(2)} seconds!`);
+console.log(`Size of ${PROGRAM_NAME}.zip: ${fs.statSync(`${PROGRAM_NAME}.zip`).size} bytes`);
+
+///////////////////////////////////////////////////////////////////////////////
+
+// 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...`);
+
+    const filenameTemp = filename + '.tmp';
+    fs.copyFileSync(filename, filenameTemp);
+    child_process.execSync(`npx google-closure-compiler --js=${filenameTemp} --js_output_file=${filename} --compilation_level=ADVANCED --language_out=ECMASCRIPT_2021 --warning_level=VERBOSE --jscomp_off=* --assume_function_wrapper`, {stdio: 'inherit'});
+    fs.rmSync(filenameTemp);
+};
+
+function uglifyBuildStep(filename)
+{
+    console.log(`Running uglify...`);
+    child_process.execSync(`npx uglifyjs ${filename} -c -m -o ${filename}`, {stdio: 'inherit'});
+};
+
+function roadrollerBuildStep(filename)
+{
+    console.log(`Running roadroller...`);
+    child_process.execSync(`npx roadroller ${filename} -o ${filename}`, {stdio: 'inherit'});
+};
+
+function htmlBuildStep(filename)
+{
+    console.log(`Building html...`);
+
+    // copy files into a buffer
+    let buffer = '';
+    buffer += '<script>';
+    buffer += fs.readFileSync(filename);
+    buffer += '</script>';
+
+    // output html file
+    fs.writeFileSync(`${BUILD_FOLDER}/index.html`, buffer, {flag: 'w+'});
+};
+
+function zipBuildStep(filename)
+{
+    console.log(`Zipping...`);
+    const ect = '../../../node_modules/ect-bin/vendor/win32/ect.exe';
+    const args = ['-9', '-strip', '-zip', `../${PROGRAM_NAME}.zip`, 'index.html', ...dataFiles];
+    child_process.spawnSync(ect, args, {stdio: 'inherit', cwd: BUILD_FOLDER});
+};
diff --git a/examples/js13k/game.js b/examples/js13k/game.js
@@ -0,0 +1,107 @@
+/*
+    LittleJS Hello World Starter Game
+*/
+
+'use strict';
+
+// sound effects
+const sound_click = new Sound([1,.5]);
+
+// game variables
+let particleEmitter;
+
+// webgl can be disabled to save even more space
+//glEnable = false;
+
+///////////////////////////////////////////////////////////////////////////////
+function gameInit()
+{
+    // create tile collision and visible tile layer
+    initTileCollision(vec2(32, 16));
+    const pos = vec2();
+    const tileLayer = new TileLayer(pos, tileCollisionSize);
+
+    // get level data from the tiles image
+    const imageLevelDataRow = 1;
+    mainContext.drawImage(tileImage, 0, 0);
+    for (pos.x = tileCollisionSize.x; pos.x--;)
+    for (pos.y = 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 = randInt(4)
+            const mirror = randInt(2);
+            const color = randColor();
+            const data = new TileLayerData(tileIndex, direction, mirror, color);
+            tileLayer.setData(pos, data);
+            setTileCollisionData(pos, 1);
+        }
+    }
+    tileLayer.redraw();
+
+    // move camera to center of collision
+    cameraPos = tileCollisionSize.scale(.5);
+
+    // enable gravity
+    gravity = -.01;
+
+    // create particle emitter
+    particleEmitter = new ParticleEmitter(
+        vec2(16), 0,                            // emitPos, emitAngle
+        1, 0, 500, 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, PI,        // damping, angleDamping, gravityScale, cone
+        .05, .5, 1, 1         // fadeRate, randomness, collide, additive
+    );
+    particleEmitter.elasticity = .3; // bounce when it collides
+    particleEmitter.trailScale = 2;  // stretch in direction of motion
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameUpdate()
+{
+    if (mouseWasPressed(0))
+    {
+        // play sound when mouse is pressed
+        sound_click.play(mousePos);
+
+        // change particle color and set to fade out
+        particleEmitter.colorStartA = new Color;
+        particleEmitter.colorStartB = randColor();
+        particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1,0);
+        particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1,0);
+    }
+
+    // move particles to mouse location if on screen
+    if (mousePosScreen.x)
+        particleEmitter.pos = mousePos;
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameUpdatePost()
+{
+
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameRender()
+{
+    // draw a grey square in the background without using webgl
+    drawRect(cameraPos, tileCollisionSize.add(vec2(5)), new Color(.2,.2,.2), 0, 0);
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameRenderPost()
+{
+    // draw to overlay canvas for hud rendering
+    drawTextScreen('LittleJS JS13K Project', vec2(mainCanvasSize.x/2, 80), 80);
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// Startup LittleJS Engine
+engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, 'tiles.png');
diff --git a/examples/js13k/game.zip b/examples/js13k/game.zip
diff --git a/examples/js13k/index.html b/examples/js13k/index.html
@@ -0,0 +1,18 @@
+<head><title>LittleJS JS13K Project</title></head>
+
+<!-- LittleJS Engine -->
+<script src=../../src/engineDebug.js?169></script>
+<script src=../../src/engineUtilities.js?169></script>
+<script src=../../src/engineSettings.js?169></script>
+<script src=../../src/engineObject.js?169></script>
+<script src=../../src/engineDraw.js?169></script>
+<script src=../../src/engineInput.js?169></script>
+<script src=../../src/engineAudio.js?169></script>
+<script src=../../src/engineTileLayer.js?169></script>
+<script src=../../src/engineParticles.js?169></script>
+<script src=../../src/engineMedals.js?169></script>
+<script src=../../src/engineWebGL.js?169></script>
+<script src=../../src/engine.js?169></script>
+
+<!-- Add your game scripts here -->
+<script src=game.js?169></script>
diff --git a/examples/js13k/tiles.png b/examples/js13k/tiles.png
diff --git a/examples/module/index.html b/examples/module/index.html
@@ -1,4 +1,4 @@
-<html><head>
+<!DOCTYPE html><head>
 <title>Little JS Module Demo</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>

diff --git a/examples/particles/index.html b/examples/particles/index.html
@@ -1,4 +1,4 @@
-<html><head>
+<!DOCTYPE html><head>
 <title>Little JS Particle System Designer</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>

diff --git a/examples/platformer/index.html b/examples/platformer/index.html
@@ -1,4 +1,4 @@
-<html><head>
+<!DOCTYPE html><head>
 <title>Little JS Platforming Game Demo</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>

diff --git a/examples/puzzle/index.html b/examples/puzzle/index.html
@@ -1,4 +1,4 @@
-<html><head>
+<!DOCTYPE html><head>
 <title>Little Puzzle Game Demo</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>

diff --git a/examples/starter/build.js b/examples/starter/build.js
@@ -2,11 +2,6 @@
 
 /** 
  * LittleJS Build System
- * - Combine input files
- * - Run custom build steps
- * - Check for errors
- * - Output to build folder
- * @namespace Build
  */
 
 const PROGRAM_NAME = 'game';
@@ -28,10 +23,6 @@ const startTime = Date.now();
 const fs = require('node:fs');
 const child_process = require('node:child_process');
 
-// rebuild engine
-child_process.execSync(`npm run build`, { stdio: 'inherit' });
-console.log('');
-
 // remove old files and setup build folder
 fs.rmSync(BUILD_FOLDER, { recursive: true, force: true });
 fs.rmSync(`${PROGRAM_NAME}.zip`, { force: true });
@@ -45,10 +36,12 @@ Build
 (
     `${BUILD_FOLDER}/index.js`,
     sourceFiles,
-    [closureCompilerStep, uglifyBuildStep, roadrollerBuildStep, htmlBuildStep, zipBuildStep]
+    [closureCompilerStep, uglifyBuildStep, htmlBuildStep, zipBuildStep]
 );
 
+console.log('');
 console.log(`Build Completed in ${((Date.now() - startTime)/1e3).toFixed(2)} seconds!`);
+console.log(`Size of ${PROGRAM_NAME}.zip: ${fs.statSync(`${PROGRAM_NAME}.zip`).size} bytes`);
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -85,18 +78,12 @@ function uglifyBuildStep(filename)
     child_process.execSync(`npx uglifyjs ${filename} -c -m -o ${filename}`, {stdio: 'inherit'});
 };
 
-function roadrollerBuildStep(filename)
-{
-    console.log(`Running roadroller...`);
-    child_process.execSync(`npx roadroller ${filename} -o ${filename}`, {stdio: 'inherit'});
-};
-
 function htmlBuildStep(filename)
 {
     console.log(`Building html...`);
 
     // copy files into a buffer
-    let buffer = '';
+    let buffer = '<!DOCTYPE html>';
     buffer += '<script>';
     buffer += fs.readFileSync(filename) + '\n';
     buffer += '</script>';

diff --git a/examples/starter/index.html b/examples/starter/index.html
@@ -1,4 +1,4 @@
-<html><head>
+<!DOCTYPE html><head>
 <title>Little JS Starter Project</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>

diff --git a/examples/stress/index.html b/examples/stress/index.html
@@ -1,4 +1,4 @@
-<html><head>
+<!DOCTYPE html><head>
 <title>Little JS Stress Test</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>

diff --git a/examples/typescript/build.js b/examples/typescript/build.js
@@ -2,11 +2,6 @@
 
 /** 
  * LittleJS Build System
- * - Combine input files
- * - Run custom build steps
- * - Check for errors
- * - Output to build folder
- * @namespace Build
  */
 
 const PROGRAM_NAME = 'game';