Skip to content

foumart/JS.13kGames

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

61 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

JS13kGames Progressive Web App starter pack

JS13K Games Competition: https://js13kgames.com/

This template targets the compo's Mobile and Web Monetization categories.

Installation

Run npm install to install build dependencies.

Tasks

npm build builds the game, reports archive size and serves locally with browser sync live reload enabled.

npm start quickly syncs changes and reloads the game, or starts the server if not currently running.

npm debug builds the game without any minifying for easier debugging. Includes detailed console logs.

Build task parameters

--pwa instructs to build a Progressive Web App - will add 864 bytes when zipped.

--mobile adds some html tags regarding mobile and iOS icons - increases the zip filesize with 45 bytes.

--social adds some html tags for SEO and social media (twitter) - will add around 100 bytes, depending on description length.

Setup

Setup is done in the package.json. Variables you have to modify:

Notes

Be aware that SVG icons are not supported well with PWA currently, because of an install prompt bug on Android: https://bugs.chromium.org/p/chromium/issues/detail?id=578122



The following are very old libraries written in <ES5 IFEEs in 2016 - only SoundFX has been revised relatively recently.

Less than 1kb libraries (old Readme)

Lightweight libraries prepared for js13kGames JavaScript coding competition.

SoundFX.js - sound controller with 9 predefined sound effects in 750 bytes

TweenFX.js - basic tweener for styles and transforms in 900 bytes

TypeFX.js - pixel font with a full glyph set (10x5px size) in 1250 bytes

Demos:

https://www.foumartgames.com/dev/js13kGames/js_libraries/

SoundFX Generator:

https://www.foumartgames.com/dev/js13kGames/js_libraries/SoundFXGenerator/


SoundFX

Basic sound effect controller utilizing the Web Audio API (AudioContext's Oscillator and Gain)

Check SoundFX in action: https://www.foumartgames.com/dev/js13kGames/js_libraries/SoundFX/

JSFiddle: https://jsfiddle.net/Foumart/1bdk8ks2/

Global Methods:

SoundFX.playSound(startFrequency, frequencyChange, delay, repeat, volume, type)

type:

  • Square
  • Sawtooth
  • Triangle
  • Sine

built in sounds:

  • SoundFX.jump()
  • SoundFX.pew()
  • SoundFX.zap()
  • SoundFX.bounce()
  • SoundFX.stuck()
  • SoundFX.explosion()
  • SoundFX.blow()
  • SoundFX.shot()
  • SoundFX.coin()

SoundFX.setVolume(_volume:Number)

Set the master volume to the number provided (float:0-1)

SoundFX.getVolume()

Get the master volume

Web Audio API reference: https://www.w3.org/TR/webaudio/


TweenFX

Basic DOM element style tweener.

Check TweenFX in action: https://www.foumartgames.com/dev/js13kGames/js_libraries/TweenFX/

Global Methods:

TweenFX.to(element, duration, object, callback, arguments)

Example:

TweenFX.to(element, 10, {x:100, y:100});

Callback Example:

TweenFX.to(element, 10, {x:100, y:100}, onComplete, element);

Example of performing two consecutive tweens with a callback:

TweenFX.to(element, 10, {x:100, y:100}, TweenFX.to, element, 10, {x:0, y:0});

TweenFX.pause

Toggle pause ON / OFF:

TweenFX.pause();

Set pause to ON:

TweenFX.pause(true);

Set pause to OFF (unpause):

TweenFX.pause(false);

Simply gets the pause value

TweenFX.pause(null);

TweenFX.stop

Stop the tweens of an element:

TweenFX.stop(element);

Stop all tweens currently in progress:

TweenFX.stop();

TweenFX.getValue

Extracts the "left" property floating number from an element's style:

TweenFX.getValue(element, "left");	

TweenFX.getTransform

Extracts the "rotate" property angle degrees from an element's transform:

TweenFX.getTransform(element, "rotate");

Get an object populated with scaleX, scaleY and rotate

TweenFX.getTransform(element);

Tweenable styles:

  • {opacity} - num - tweens style.opacity, also recognized as {alpha}
  • {left} - px - tweens style.left, also recognized as {x}
  • {top} - px - tweens style.top, also recognized as {y}
  • {right} - px - tweens style.right
  • {bottom} - px - tweens style.bottom
  • {width} - px - tweens style.width
  • {height} - px - tweens style.height

Tweenable transform properties:

  • {scale} - num - tweens style.transform(scaleX, scaleY);
  • {scaleX} - num - tweens style.transform(scaleX);
  • {scaleY} - num - tweens style.transform(scaleY);
  • {rotate} - deg - tweens style.transform(rotate), also recognized as {rotation}

TypeFX

Lightweight Font < 1.5kb - uses canvas to draw glyphs

Global Methods:

TypeFX.drawText(element, text, size, leading, color)

Example:

var text = "This is a test string\rWith line break.";
var element = document.createElement("div");
document.body.appendChild(element);
TypeFX.drawText(element, text, 5);

TypeFX.drawDiggit(element, charCode or a glyph string, size, color)

Follow this Twitter tags to get news about the Compo: #js13k ; #js13kgames

For updates follow me on Twitter: @FoumartGames

About

Progressive Web App starter pack for JS13k games

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published