JS13K Games Competition: https://js13kgames.com/
This template targets the compo's Mobile and Web Monetization categories.
Run npm install
to install build dependencies.
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.
--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 is done in the package.json
. Variables you have to modify:
- name
- version
- description
- keywords
- monetization - be sure to provide your own monetization wallet pointer. More info: https://js13kgames.com/webmonetization
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.
Lightweight libraries prepared for js13kGames JavaScript coding competition.
https://www.foumartgames.com/dev/js13kGames/js_libraries/
https://www.foumartgames.com/dev/js13kGames/js_libraries/SoundFXGenerator/
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/
- Square
- Sawtooth
- Triangle
- Sine
- SoundFX.jump()
- SoundFX.pew()
- SoundFX.zap()
- SoundFX.bounce()
- SoundFX.stuck()
- SoundFX.explosion()
- SoundFX.blow()
- SoundFX.shot()
- SoundFX.coin()
Set the master volume to the number provided (float:0-1)
Get the master volume
Web Audio API reference: https://www.w3.org/TR/webaudio/
Basic DOM element style tweener.
Check TweenFX in action: https://www.foumartgames.com/dev/js13kGames/js_libraries/TweenFX/
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});
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);
Stop the tweens of an element:
TweenFX.stop(element);
Stop all tweens currently in progress:
TweenFX.stop();
Extracts the "left" property floating number from an element's style:
TweenFX.getValue(element, "left");
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);
- {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
- {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}
Lightweight Font < 1.5kb - uses canvas to draw glyphs
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);
Follow this Twitter tags to get news about the Compo: #js13k ; #js13kgames
For updates follow me on Twitter: @FoumartGames