1.1.6

See: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/stroke#Re-stroking_paths

.eslintignore

@@ -0,0 +1,2 @@
+projects
+examples

.eslintrc.js

@@ -0,0 +1,33 @@
+module.exports = {
+	"env": {
+		"browser": true,
+		"commonjs": true,
+		"es6": true
+	},
+	"extends": "eslint:recommended",
+	"globals": {
+		"Atomics": "readonly",
+		"SharedArrayBuffer": "readonly"
+	},
+	"parserOptions": {
+		"ecmaVersion": 2018
+	},
+	"rules": {
+		"indent": [
+			"error",
+			"tab"
+		],
+		"linebreak-style": [
+			"error",
+			"unix"
+		],
+		"quotes": [
+			"error",
+			"double"
+		],
+		"semi": [
+			"error",
+			"always"
+		]
+	}
+};

README.md

@@ -1,12 +1,48 @@
+![asdf-games](https://gitea.arnweb.nl/arne/asdf-games/raw/branch/master/res/asdf-logo.png "asdf-games logo")
 # asdf-games
 
-Me making games using HTML5 Games: Novice to Ninja by Sitepoint. 
+My attempt at making the framework featured in the book HTML5 Games: Novice to Ninja. 
 [You can find the book here.](https://www.sitepoint.com/premium/books/html5-games-novice-to-ninja)
 
-The projects here are very similar to those featured in the book, and it will take some time before I get to make my own game.
+I turned the framework featured in the book into an npm package for use with browserify or Electron. 
+If you are on Github or Gitea now, you can find the npm package [here](https://www.npmjs.com/package/asdf-games).
+
+## Installation
+To use asdf framework in your projects, you need to:
+* Install npm on your device (if you don't have it already)
+* Run ```npm install asdf-games```
+* Use the snippet below to start off or check out one of the examples, keep in mind that the examples are not comepletely up to date. 
+* Thanks to my friend [Job](https://jobbel.nl/), this project supports TypeScript typings. Make sure your editor supports them to make your life easier.
+
+
+## Example usage
+```javascript
+// Require asdf
+const asdf = require("asdf-games");
+
+// Add whatever classes you need here
+const [ Game, Sprite, Texture, KeyControls ] = asdf; 
+
+// Game(width, height, disable pixel smoothening)
+var game = new Game(720, 480, true);
+
+// Any picture URL used in new Texture() must be relative to the location of the HTML file
+const playerTexture = new Texture('player.png');
+
+var player = new Sprite(texture);
+player.pos = {
+    x: (game.w / 2) - (player.w / 2),
+    y: (game.h / 2) - (player.h / 2)
+}
+
+// Add your entities to the game's scene
+game.scene.add(player);
+
+game.run(() => {
+    // Game loop
+});
+
+```
+
 
-To try out asdf library and the projects for yourself, you need to:
-* TODO
 
-Releases will be featured on 
-[ARNweb Games](https://arnweb.nl/games/)

lib/AnimManager.js

@@ -0,0 +1,65 @@
+class Anim {
+	constructor(frames, rate) {
+		this.frames = frames;
+		this.rate = rate;
+		this.reset();
+	}
+  
+	reset() {
+		this.frame = this.frames[0];
+		this.curFrame = 0;
+		this.curTime = 0;
+	}
+  
+	update(dt) {
+		const { rate, frames } = this;
+		if ((this.curTime += dt) > rate) {
+			this.curFrame++;
+			this.frame = frames[this.curFrame % frames.length];
+			this.curTime -= rate;
+		}
+	}
+}
+  
+class AnimManager {
+	constructor(e = { x: 0, y: 0 }) {
+		this.anims = {};
+		this.running = false;
+		this.frameSource = e.frame || e;
+		this.current = null;
+	}
+  
+	add(name, frames, speed) {
+		this.anims[name] = new Anim(frames, speed);
+		return this.anims[name];
+	}
+  
+	update(dt) {
+		const { current, anims, frameSource } = this;
+		if (!current) {
+			return;
+		}
+		const anim = anims[current];
+		anim.update(dt);
+  
+		// Sync the tileSprite frame
+		frameSource.x = anim.frame.x;
+		frameSource.y = anim.frame.y;
+	}
+  
+	play(anim) {
+		const { current, anims } = this;
+		if (anim === current) {
+			return;
+		}
+		this.current = anim;
+		anims[anim].reset();
+	}
+  
+	stop() {
+		this.current = null;
+	}
+}
+  
+module.exports = AnimManager;
+  

lib/Camera.js

@@ -0,0 +1,54 @@
+const Container = require("./Container");
+const math = require("./utilities/math");
+
+class Camera extends Container {
+	constructor(subject, viewport, worldSize = viewport) {
+		super();
+		this.w = viewport.w;
+		this.h = viewport.h;
+		this.worldSize = worldSize;
+		this.setSubject(subject);
+	}
+
+	setSubject(e) {
+		this.subject = e ? e.pos || e : this.pos;
+		this.offset = { x: 0, y: 0 };
+
+		// Center on the entity
+		if (e && e.w) {
+			this.offset.x += e.w / 2;
+			this.offset.y += e.h / 2;
+		}
+		if (e && e.anchor) {
+			this.offset.x -= e.anchor.x;
+			this.offset.y -= e.anchor.y;
+		}
+		this.focus();
+	}
+
+	focus() {
+		const { pos, w, h, worldSize, subject, offset } = this;
+
+		const centeredX = subject.x + offset.x - w / 2;
+		const maxX = worldSize.w - w;
+		const x = -math.clamp(centeredX, 0, maxX);
+
+		const centeredY = subject.y + offset.y - h / 2;
+		const maxY = worldSize.h - h;
+		const y = -math.clamp(centeredY, 0, maxY);
+
+		pos.x = x;
+		pos.y = y;
+	}
+
+	update(dt, t) {
+		super.update(dt, t);
+
+		if (this.subject) {
+			this.focus();
+		}
+	}
+}
+
+
+module.exports = Camera;

lib/Game.js

@@ -1,5 +1,5 @@
 var Container = require("./Container"),
-    CanvasRenderer = require('./renderer/CanvasRenderer')
+	CanvasRenderer = require("./renderer/CanvasRenderer")
 ;
 
 const STEP = 1 / 60;
@@ -17,6 +17,7 @@ class Game {
 		}
 
 		this.scene = new Container();
+		this.paused = false;
 	}
 
 	run(gameUpdate = () => { }) {
@@ -29,9 +30,11 @@ class Game {
 			dt = Math.min(t - last, FRAME_MAX);
 			last = t;
 
+			if (!this.paused) {
 				this.scene.update(dt, t);
 				gameUpdate(dt, t);
 				this.renderer.render(this.scene);
+			}
 		};
 		requestAnimationFrame(loop);
 	}

lib/Line.js

@@ -0,0 +1,9 @@
+class Line {
+	constructor(x1, y1, x2, y2, style = "#000000") {
+		this.pos = { x: x1, y: y1 };
+		this.target = { x: x2, y: y2 };
+		this.style = style;
+	}
+}
+
+module.exports = Line;

lib/Rect.js

@@ -0,0 +1,10 @@
+class Rect {
+	constructor(w, h, style = { fill: "#333" }) {
+		this.pos = { x: 0, y: 0 };
+		this.w = w;
+		this.h = h;
+		this.style = style;
+	}
+}
+  
+module.exports = Rect;

lib/Sprite.js

@@ -4,6 +4,7 @@ class Sprite {
 		this.pos = { x: 0, y: 0 };
 		this.anchor = { x: 0, y: 0 };
 		this.scale = { x: 1, y: 1 };
+		this.pivot = { x: 0, y: 0 };
 		this.rotation = 0;
 	}
 }

lib/SpriteSheetXML.js

@@ -6,7 +6,7 @@ class SpriteSheetXML {
 
 	fetchXMLtoArray(url) {
 		var xhr = new XMLHttpRequest();
-        xhr.open('GET', url, false);
+		xhr.open("GET", url, false);
 		xhr.send(null);
 
 		if (xhr.status === 200) {
@@ -22,7 +22,7 @@ class SpriteSheetXML {
 				});
 			}
 		} else {
-            console.error('XML file cannot be loaded!')
+			console.error("XML file cannot be loaded!");
 		}
 	}
 

lib/State.js

@@ -0,0 +1,29 @@
+class State {
+	constructor(state) {
+		this.set(state);
+	}
+
+	set(state) {
+		this.last = this.state;
+		this.state = state;
+		this.time = 0;
+		this.justSetState = true;
+	}
+
+	update(dt) {
+		this.first = this.justSetState;
+		this.justSetStrate = false;
+
+		this.time += this.first ? 0 : dt;
+	}
+
+	is(state) {
+		return this.state === state;
+	}
+
+	isIn(...states) {
+		return states.some(s => this.is(s));
+	}
+}
+
+module.exports = State;

lib/TileMap.js

@@ -20,6 +20,54 @@ class TileMap extends Container {
 			return s;
 		});
 	}
+
+	pixelToMapPos(pos) {
+		const { tileW, tileH } = this;
+		return {
+			x: Math.floor(pos.x / tileW),
+			y: Math.floor(pos.y / tileH)
+		};
+	}
+
+	mapToPixelPos(mapPos) {
+		const { tileW, tileH } = this;
+		return {
+			x: mapPos.x * tileW,
+			y: mapPos.y * tileH
+		};
+	}
+
+	tileAtMapPos(mapPos) {
+		return this.children[mapPos.y * this.mapW + mapPos.x];
+	}
+
+	tileAtPixelPos(pos) {
+		return this.tileAtMapPos(this.pixelToMapPos(pos));
+	}
+
+	setFrameAtMapPos(mapPos, frame) {
+		const tile = this.tileAtMapPos(mapPos);
+		tile.frame = frame;
+		return tile;
+	}
+
+	setFrameAtPixelPos(pos, frame) {
+		return this.setFrameAtMapPos(this.pixelToMapPos(pos), frame);
+	}
+
+	tilesAtCorners(bounds, xo = 0, yo = 0) {
+		return [
+			[bounds.x, bounds.y], // Top-left
+			[bounds.x + bounds.w, bounds.y], // Top-right
+			[bounds.x, bounds.y + bounds.h], // Bottom-left
+			[bounds.x + bounds.w, bounds.y + bounds.h] // Bottom-right
+		].map(([x, y]) =>
+			this.tileAtPixelPos({
+				x: x + xo,
+				y: y + yo
+			})
+		);
+	}
 }
 
 module.exports = TileMap;

lib/TileMapXML.js

@@ -20,6 +20,54 @@ class TileMapXML extends Container {
 			return s;
 		});
 	}
+	
+	pixelToMapPos(pos) {
+		const { tileW, tileH } = this;
+		return {
+			x: Math.floor(pos.x / tileW),
+			y: Math.floor(pos.y / tileH)
+		};
+	}
+
+	mapToPixelPos(mapPos) {
+		const { tileW, tileH } = this;
+		return {
+			x: mapPos.x * tileW,
+			y: mapPos.y * tileH
+		};
+	}
+
+	tileAtMapPos(mapPos) {
+		return this.children[mapPos.y * this.mapW + mapPos.x];
+	}
+
+	tileAtPixelPos(pos) {
+		return this.tileAtMapPos(this.pixelToMapPos(pos));
+	}
+
+	setFrameAtMapPos(mapPos, frame) {
+		const tile = this.tileAtMapPos(mapPos);
+		tile.frame = frame;
+		return tile;
+	}
+
+	setFrameAtPixelPos(pos, frame) {
+		return this.setFrameAtMapPos(this.pixelToMapPos(pos), frame);
+	}
+
+	tilesAtCorners(bounds, xo = 0, yo = 0) {
+		return [
+			[bounds.x, bounds.y], // Top-left
+			[bounds.x + bounds.w, bounds.y], // Top-right
+			[bounds.x, bounds.y + bounds.h], // Bottom-left
+			[bounds.x + bounds.w, bounds.y + bounds.h] // Bottom-right
+		].map(([x, y]) =>
+			this.tileAtPixelPos({
+				x: x + xo,
+				y: y + yo
+			})
+		);
+	}
 }
 
 module.exports = TileMapXML;

lib/TileSprite.js

@@ -1,4 +1,5 @@
-var Sprite = require("./Sprite");
+var Sprite = require("./Sprite"),
+	AnimManager = require("./AnimManager");
 
 class TileSprite extends Sprite {
 	constructor(texture, w, h) {
@@ -6,6 +7,19 @@ class TileSprite extends Sprite {
 		this.tileW = w;
 		this.tileH = h;
 		this.frame = { x: 0, y: 0 };
+		this.anims = new AnimManager(this);
+	}
+  
+	update(dt) {
+		this.anims.update(dt);
+	}
+  
+	get w() {
+		return this.tileW * Math.abs(this.scale.x);
+	}
+  
+	get h() {
+		return this.tileH * Math.abs(this.scale.y);
 	}
 }
 

lib/TileSpriteXML.js

@@ -1,12 +1,26 @@
-var Sprite = require("./Sprite");
+var Sprite = require("./Sprite"),
+	AnimManager = require("./AnimManager");
 
 class TileSpriteXML extends Sprite {
 	constructor(texture, xml, index) {
 		super(texture);
 		var src = xml.array[index];
-        this.imgPos = { x: src['x'], y: src['y'] };
-        this.width = src['width'];
-        this.height = src['height'];
+		this.imgPos = { x: src["x"], y: src["y"] };
+		this.width = src["width"];
+		this.height = src["height"];
+		this.anims = new AnimManager(this);
+	}
+  
+	update(dt) {
+		this.anims.update(dt);
+	}
+  
+	get w() {
+		return this.width * Math.abs(this.scale.x);
+	}
+  
+	get h() {
+		return this.height * Math.abs(this.scale.y);
 	}
 }
 

lib/controls/KeyControls.js

@@ -1,7 +1,8 @@
 class KeyControls {
   
-  constructor() {
+	constructor(listen = true) {
 		this.keys = {};
+		if (listen) {
 			// Bind event handlers
 			document.addEventListener("keydown", e => {
 				if ([37, 38, 39, 40].indexOf(e.which) >= 0) {
@@ -9,16 +10,32 @@ class KeyControls {
 				}
 				this.keys[e.which] = true;
 			}, false);
-    document.addEventListener('keyup', e => {
+			document.addEventListener("keyup", e => {
 				this.keys[e.which] = false;
 			}, false);
 		}
+	}
 
 	get action() {
 		// Spacebar
 		return this.keys[32];
 	}
 
+	get ctrl() {
+		// Control
+		return this.keys[17];
+	}
+
+	get shift() {
+		// Shift
+		return this.keys[16];
+	}
+
+	get escape() {
+		// Escape
+		return this.keys[27];
+	}
+
 	get x() {
 		// Arrow Left or A (WASD)
 		if (this.keys[37] || this.keys[65]) {

lib/controls/MouseControls.js

@@ -1,15 +1,19 @@
 class MouseControls {
-  constructor(container) {
+	constructor(container, listen = true) {
 		this.el = container || document.body;
 		// State
 		this.pos = { x: 0, y: 0 };
 		this.isDown = false;
 		this.pressed = false;
 		this.released = false;
+
+		if (listen) {
 			// Handlers
-    document.addEventListener('mousemove', this.move.bind(this), false);
-    document.addEventListener('mousedown', this.down.bind(this), false);
-    document.addEventListener('mouseup', this.up.bind(this), false);
+			document.addEventListener("mousemove", this.move.bind(this), false);
+			document.addEventListener("mousedown", this.down.bind(this), false);
+			document.addEventListener("mouseup", this.up.bind(this), false);
+		}
+
 	}
 
 	mousePosFromEvent({ clientX, clientY }) {

lib/index.d.ts

@@ -2,6 +2,11 @@ export as namespace asdf;
 
 type Coordinates = {x: number, y: number};
 
+class Renderable {
+  visible?: boolean;
+  dead?: boolean
+}
+
 /**
  * TileSpriteXML class
  */
@@ -87,6 +92,52 @@ export class TileMap extends Container<TileSprite> {
    * @param texture Texture instance of source image file
    */
   constructor(tiles: Coordinates[], mapW: number, mapH: number, tileW: number, tileH: number, texture: Texture);
+
+  /**
+   * Calculates in which tile a pixel is located.
+   * @param pos The position of the pixel.
+   */
+  pixelToMapPos(pos: Coordinates): Coordinates
+
+  /**
+   * Calculates the pixel position of a tile in a map.
+   * @param pos The position of the tile in the map.
+   */
+  mapToPixelPos(pos: Coordinates): Coordinates
+
+  /**
+   * Returns the TileSprite at a given map position.
+   * @param mapPos the tile of a given position.
+   */
+  tileAtMapPos(mapPos: Coordinates): TileSprite
+
+  /**
+   * Returns the TileSprite at a given pixel position.
+   * @param pos The pixel position of the tile
+   */
+  tileAtPixelPos(pos: Coordinates): TileSprite
+
+  /**
+   * Changes the frame attribute of the TileSprite at the given mapPos.
+   * @param mapPos the map position of the tile.
+   * @param frame the new value for the frame attribute.
+   */
+  setFrameAtMapPos(mapPos: Coordinates, frame: Coordinates): TileSprite
+
+  /**
+   * Changes the frame attribute of the TileSprite at the given pixel position.
+   * @param mapPos the pixel position of the tile.
+   * @param frame the new value for the frame attribute.
+   */
+  setFrameAtPixelPos(pos: Coordinates, frame: Coordinates): TileSprite
+
+  /**
+   * Returns the tiles at the corner of the bounds.
+   * @param bounds a rectangle which defines what the corner are.
+   * @param xo offset to the x values.
+   * @param yo offset to the y values.
+   */
+  tilesAtCorners(bounds: {x: number, y: number, w: number, h: number}, xo?: number, yo?: number): TileSprite[]
 }
 
 /**
@@ -103,27 +154,29 @@ export class Texture {
   constructor(url: string);
 }
 
+interface TextStyleOptions {
+  font?: string,
+  fill?: string | CanvasGradient | CanvasPattern,
+  align?: CanvasTextAlign
+}
+  
 /**
  * Text class
  */
-export class Text {
+export class Text extends Renderable {
 
   pos: Coordinates;
   text: string;
   visible: boolean;
   update?: (dt?: number, t?: number) => void;
-  style: {
-    font?: string,
-    fill?: string | CanvasGradient | CanvasPattern,
-    align?: CanvasTextAlign
-  };
+  style: TextStyleOptions;
 
     /**
    * Prints styled text on canvas 
    * @param text Text to print
    * @param style Styles to apply to text
    */
-  constructor(text: string, style: {});
+  constructor(text: string, style: TextStyleOptions);
 }
 
 /**
@@ -171,15 +224,13 @@ export class SpriteSheetXML {
 /**
  * Sprite class
  */
-export class Sprite {
+export class Sprite extends Renderable {
   texture: Texture;
   pos: Coordinates;
   anchor: Coordinates;
   scale: Coordinates;
   pivot: Coordinates;
-  visible: boolean;
   rotation: number;
-  dead: boolean;
 
   update?: (dt?: number, t?: number) => void;
 
@@ -198,6 +249,7 @@ export class Game {
   h: number;
   renderer: CanvasRenderer;
   scene: Container<unknown>;
+  paused: boolean;
 	
   /**
    * Set the games parameters
@@ -212,14 +264,14 @@ export class Game {
    * Start game loop
    * @param gameUpdate Function to run next to scene updates such as debug logging, etc.
    */
-  run(gameUpdate: (dt?: number, t?: number) => void): void;
+  run(gameUpdate?: (dt?: number, t?: number) => void): void;
 }
 
 /**
  * Container class
  */
 export class Container<T> {
-  pos: {x: number, y: number};
+  pos: Coordinates;
   children: T[];
 
   constructor();
@@ -249,9 +301,9 @@ export class Container<T> {
    * Updates all children when called
    * @param dt Delta time 
    * @param t Total time
-   * @returns Returns if the child is dead or not
+   * @returns Returns anything
    */
-  update(dt: number, t: number): boolean;
+  update(dt: number, t: number): any;
 }
 
 /**
@@ -321,6 +373,24 @@ export class KeyControls {
    */
   get action(): boolean;
 
+  /**
+   * Returns value of ctrl key.
+   * @returns Key value
+   */
+  get ctrl(): boolean;
+
+  /**
+   * Returns value of shift key.
+   * @returns Key value
+   */
+  get shift(): boolean;
+
+  /**
+   * Returns value of escape key.
+   * @returns Key value
+   */
+  get escape(): boolean;
+
   /**
    * Returns -1 on Arrow Left or A
    * 
@@ -343,10 +413,10 @@ export class KeyControls {
    * @param value Value to set to key
    * @return Value of key
    */
-  key(key: number, value: boolean): boolean;
+  key(key: number, value?: boolean): boolean;
 
   /**
-   * Resets default value to all keys
+   * Resets default value (false) to all keys
    */
   reset(): void;
 }
@@ -381,7 +451,275 @@ export class CanvasRenderer {
   render(container: Container<unknown>, clear?: boolean): void
 }
 
+/**
+ * Anim represents a single animation.
+ */
+declare class Anim {
+
+  curTime: number;
+  frames: Coordinates[];
+  rate: number;
+  curFrame: number;
+  frame: Coordinates;
+
+  /**
+   * Constructor for an animation.
+   * @param frames A collection of coordinates for each frame in the texture file.
+   * @param rate The rate at which the animation plays.
+   */
+  constructor(frames: Coordinates[], rate: number);
+
+  /**
+   * Resets the animation to the first frame.
+   */
+  reset(): void;
+
+  /**
+   * Causes the animation to update based on dt.
+   * @param dt Delta time
+   */
+  update(dt: number): void;
+}
+
+/**
+ * The AnimManager class
+ */
+export class AnimManager {
+
+  anims: {
+    [name: string]: Anim
+  }
+  running: boolean;
+  frameSource: Coordinates;
+  current: string | null;
+
+  constructor(e: Coordinates);
+
+  /**
+   * Adds an animation to the AnimManager
+   * @param name The name for the animation
+   * @param frames Where each frame is located in the texture
+   * @param speed The speed at which the animation plays.
+   */
+  add(name: string, frames: Coordinates[], speed: number): Anim;
+
+  /**
+   * Updates the current animation.
+   * @param dt delta time
+   */
+  update(dt: number): void;
+
+  /**
+   * Starts playing an animation.
+   * @param anim The name of the animation
+   */
+  play(anim: string): void;
+
+  /**
+   * Stops playing any animation
+   */
+  stop(): void;
+}
+
+/**
+ * The Rect class
+ */
+export class Rect {
+
+  pos: Coordinates
+  w: number;
+  h: number;
+  style: {
+    fill: string
+  }
+
+  /**
+   * Constructs a rectangle.
+   * @param w The width of the rectangle
+   * @param h The height of the rectangle
+   * @param style The styles of the rectangle
+   */
+  constructor(w: number, h: number, style: { fill: string })
+}
+
+export class Camera extends Container<unknown> {
+
+  w: number;
+  h: number;
+  worldSize: {w: number, h: number};
+  offset: Coordinates;
+  subject: Coordinates;
+
+  /**
+   * Constructs a camera object. This can be fed into the main scene: `scene.add(camera);`
+   * @param subject The entity on which should be focused
+   * @param viewport the size of the viewport - how much should be visible.
+   * @param worldSize the size of the whole map.
+   */
+  constructor(subject: NumericalEntity | Coordinates, viewport: {w: number, h: number}, worldSize: {w: number, h: number})
+
+  /**
+   * Sets the subject of the camera.
+   * @param e The entity that needs to be set as subject.
+   */
+  setSubject(e: NumericalEntity | Coordinates): void;
+
+  /**
+   * Moves the camera to the subject
+   */
+  focus(): void;
+
+  /**
+   * update function for the container.
+   * @param t the elapsed time
+   * @param dt delta time
+   */
+  update(t: number, dt: number): void;
+}
+
+interface SoundOptions {
+  loop?: boolean,
+  volume?: number
+}
+
+export class Sound {
+
+  src: string;
+  options: SoundOptions;
+
+  /**
+   * Initiates HTML5 audio element for source audio file with control methods
+   * @param src Source audio file
+   * @param options Play settings
+   */
+  constructor(src: string, options?: SoundOptions);
+
+  /**
+   * Starts playing the audio file
+   * @param overrides sets options for playing the sound using different setting as defined in `constructor()`
+   */
+  play(overrides?: SoundOptions): void;
+
+  /**
+   * Stops playing the audio file
+   */
+  stop(): void;
+}
+
+interface NumericalEntityBase {pos: Coordinates}
+interface NumericalSprite {w: number, h: number}
+interface NumericalTileSprite {tileW: number, tileH: number}
+
+type NumericalEntity = NumericalSprite | NumericalTileSprite
+
+type NumericalEntityWithHitbox = {hitBox: NumericalEntity} & NumericalEntity
+
+export namespace deadInTracks {
+  /**
+   * This functions checks whether ent walks against a non-walkable object and whether it should move in the x and y position and how much.
+   * The difference with wallslide is that deadInTracks stops the entity entirely when it touches a non-walkable surface.
+   * wallslide will move the entity in x or y if possible.
+   * @param ent The entity that is moving.
+   * @param map The TileMap the entity moves on.
+   * @param x The maximal movement on the x. default is 0
+   * @param y The maximal movement on the y. default is 0
+   * @returns Coordinates of how much the entity walks in x and y.
+   */
+  export function deadInTracks(ent: NumericalEntity | NumericalEntityWithHitbox, map: TileMap, x?: number, y?: number): Coordinates;
+}
+
+export namespace wallslide {
+  /**
+   * This functions checks whether ent walks against a non-walkable object and whether it should move in the x and y position and how much.
+   * The difference with wallslide is that deadInTracks stops the entity entirely when it touches a non-walkable surface.
+   * wallslide will move the entity in x or y if possible.
+   * @param ent The entity that is moving.
+   * @param map The TileMap the entity moves on.
+   * @param x The maximal movement on the x. default is 0
+   * @param y The maximal movement on the y. default is 0
+   * @returns Coordinates of how much the entity walks in x and y.
+   */
+  export function wallslide(ent: NumericalEntity | NumericalEntityWithHitbox, map: TileMap, x?: number, y?: number): Coordinates;
+}
+
+export namespace entity {
+
+  /**
+   * addDebug adds a red border around the hitboxes of an entity.
+   * @param e The entity.
+   */
+  export function addDebug<T extends Container<unknown> | NumericalEntityWithHitbox>(e: T): T;
+
+  /**
+   * This function checks if an entity hits anything in a container.
+   * @param entity The entity.
+   * @param container The container.
+   * @param hitCallback The callback that is executed when an entity hits something in the container.
+   */
+  export function hits<T extends NumericalEntityWithHitbox | NumericalEntity>(entity: NumericalEntityWithHitbox | NumericalEntity, container: Container<T>, hitCallback: (e2: T) => any): void;
+
+  /**
+   * This functions calculates whether two entities hit each other.
+   * @param e1 The first entity.
+   * @param e2 The second entity.
+   */
+  export function hit(e1: NumericalEntityWithHitbox | NumericalEntity, e2: NumericalEntityWithHitbox | NumericalEntity): boolean;
+
+  /**
+   * This function calculates the angle relative to the x-axis between the centers of two entities.
+   * @param a The first entity.
+   * @param b The second entity.
+   * @returns the angle in radians.
+   */
+  export function angle(a: NumericalEntity, b: NumericalEntity): number;
+
+  /**
+   * This function calculates the full hitbox of an entity.
+   * @param entity The enitity
+   */
+  export function bounds(entity: NumericalEntityWithHitbox | NumericalEntity): {x: number, y: number, w: number, h: number};
+
+  /**
+   * This function calculates the distance between the centers of two entities.
+   * @param a The first entity.
+   * @param b The second entity.
+   */
+  export function distance(a: NumericalEntity, b: NumericalEntity): number;
+
+  /**
+   * This function calculates the center of an entity.
+   * @param entity The entity to calculate the center of.
+   */
+  export function center(entity: NumericalEntity): number;
+
+}
+
 export namespace math {
+
+  /**
+   * This function calculates the angle relative from the x-axis between two points.
+   * @param a The first point.
+   * @param b The second point.
+   * @returns The angle in radians.
+   */
+  export function angle(a: Coordinates, b: Coordinates): number;
+
+  /**
+   * This function calculates if x is between min and max.
+   * @param x A numerical value
+   * @param min A numerical value
+   * @param max A numerical value
+   * @returns x if x is between min and max.
+   */
+  export function clamp(x: number, min: number, max: number): number;
+
+  /**
+   * Calculates the distance between two points
+   * @param a The first point.
+   * @param b The second point.
+   */
+  export function distance(a: Coordinates, b: Coordinates): number;
+
   /**
  * Returns random integer between min and max
  * @param min Minimum value 

lib/index.js

@@ -1,7 +1,16 @@
-var Container = require("./Container.js"),
+var AnimManager = require("./AnimManager.js"),
+	Camera = require("./Camera.js"),
+	Container = require("./Container.js"),
 	CanvasRenderer = require("./renderer/CanvasRenderer.js"),
 	Game = require("./Game.js"),
 	math = require("./utilities/math.js"),
+	entity = require("./utilities/entity.js"),
+	wallslide = require("./movement/wallslide.js"),
+	deadInTracks = require("./movement/deadInTracks.js"),
+	State = require("./State.js"),
+	Sound = require("./sound/Sound.js"),
+	Rect = require("./Rect.js"),
+	Line = require("./Line.js"),
 	KeyControls = require("./controls/KeyControls.js"),
 	MouseControls = require("./controls/MouseControls.js"),
 	Sprite = require("./Sprite.js"),
@@ -15,10 +24,19 @@ var Container = require("./Container.js"),
 ;
 
 module.exports = {
+	AnimManager,
 	CanvasRenderer,
+	Camera,
 	Container,
 	Game,
 	math,
+	entity,
+	wallslide,
+	deadInTracks,
+	State,
+	Sound,
+	Rect,
+	Line,
 	KeyControls,
 	MouseControls,
 	Sprite,

lib/movement/deadInTracks.js

@@ -0,0 +1,16 @@
+const entity = require("../utilities/entity");
+
+function deadInTracks(ent, map, x = 0, y = 0) {
+	const bounds = entity.bounds(ent);
+	const tiles = map.tilesAtCorners(bounds, x, y);
+	const walks = tiles.map(t => t && t.frame.walkable);
+	const blocked = walks.some(w => !w);
+	if (blocked) {
+		x = 0,
+		y = 0;
+	}
+	return { x, y };
+}
+module.exports = {
+	deadInTracks
+};

lib/movement/wallslide.js

@@ -0,0 +1,51 @@
+const entity = require("../utilities/entity.js");
+
+function wallslide(ent, map, x = 0, y = 0) {
+	let tiles;
+	let tileEdge;
+	const bounds = entity.bounds(ent);
+
+	// Final amounts of movement to allow
+	let xo = x;
+	let yo = y;
+
+	// Check vertical movement
+	if (y !== 0) {
+		tiles = map.tilesAtCorners(bounds, 0, yo);
+		const [tl, tr, bl, br] = tiles.map(t => t && t.frame.walkable);
+
+		// Hit your head
+		if (y < 0 && !(tl && tr)) {
+			tileEdge = tiles[0].pos.y + tiles[0].h;
+			yo = tileEdge - bounds.y;
+		}
+		// Hit your feet
+		if (y > 0 && !(bl && br)) {
+			tileEdge = tiles[2].pos.y - 1;
+			yo = tileEdge - (bounds.y + bounds.h);
+		}
+	}
+
+	// Check horizontal movement
+	if (x !== 0) {
+		tiles = map.tilesAtCorners(bounds, xo, yo);
+		const [tl, tr, bl, br] = tiles.map(t => t && t.frame.walkable);
+
+		// Hit left edge
+		if (x < 0 && !(tl && bl)) {
+			tileEdge = tiles[0].pos.x + tiles[0].w;
+			xo = tileEdge - bounds.x;
+		}
+		// Hit right edge
+		if (x > 0 && !(tr && br)) {
+			tileEdge = tiles[1].pos.x - 1;
+			xo = tileEdge - (bounds.x + bounds.w);
+		}
+	}
+	// xo & yo contain the amount we're allowed to move by.
+	return { x: xo, y: yo };
+}
+
+module.exports = {
+	wallslide
+};

lib/renderer/CanvasRenderer.js

@@ -10,11 +10,11 @@ class CanvasRenderer {
 	}
 
 	setPixelated() {
-    this.ctx['imageSmoothingEnabled'] = false;       /* standard */
-    this.ctx['mozImageSmoothingEnabled'] = false;    /* Firefox */
-    this.ctx['oImageSmoothingEnabled'] = false;      /* Opera */
-    this.ctx['webkitImageSmoothingEnabled'] = false; /* Safari */
-    this.ctx['msImageSmoothingEnabled'] = false;     /* IE */
+		this.ctx["imageSmoothingEnabled"] = false;       /* standard */
+		this.ctx["mozImageSmoothingEnabled"] = false;    /* Firefox */
+		this.ctx["oImageSmoothingEnabled"] = false;      /* Opera */
+		this.ctx["webkitImageSmoothingEnabled"] = false; /* Safari */
+		this.ctx["msImageSmoothingEnabled"] = false;     /* IE */
 	}
 
 	render(container, clear = true) {
@@ -79,6 +79,24 @@ class CanvasRenderer {
 					} else {
 						ctx.drawImage(img, 0, 0);
 					}
+				} else if (child.style && child.w && child.h) {
+					ctx.fillStyle = child.style.fill;
+					ctx.fillRect(0, 0, child.w, child.h);
+				} else if (child.style && child.radius) {
+					var gradient = ctx.createRadialGradient(0, 0, 50, 0, 0, 50);
+					gradient.addColorStop(0, child.style.start);
+					gradient.addColorStop(1, child.style.stop);
+
+					ctx.arc(0, 0, child.radius, 0, 2 * Math.PI);
+					ctx.fillStyle = gradient;
+
+					ctx.fill();
+				} else if (child.style && child.target) {
+					ctx.beginPath();
+					ctx.moveTo(0,0);
+					ctx.lineTo(child.target.x, child.target.y);
+					ctx.strokeStyle = child.style;
+					ctx.stroke();
 				}
 
 				// Handle children with children
@@ -86,7 +104,7 @@ class CanvasRenderer {
 					renderRec(child);
 				}
 				ctx.restore();
-      })
+			});
 		}
 		if (clear) {
 			ctx.clearRect(0, 0, this.w, this.h);

lib/sound/Sound.js

@@ -0,0 +1,53 @@
+class Sound {
+	constructor(src, options = {}) {
+		this.playing = false;
+		this.src = src;
+		this.options = Object.assign({ volume: 1 }, options);
+  
+		// Configure audio element
+		const audio = new Audio();
+		audio.src = src;
+		if (options.loop) {
+			audio.loop = true;
+		}
+		audio.addEventListener(
+			"error",
+			() => {
+				throw Error(`Error loading audio: ${src}`);
+			},
+			false
+		);
+		audio.addEventListener(
+			"ended",
+			() => {
+				this.playing = false;
+			},
+			false
+		);
+		this.audio = audio;
+	}
+  
+	play(overrides) {
+		const { audio, options } = this;
+		const opts = Object.assign({ time: 0 }, options, overrides);
+		audio.volume = opts.volume;
+		audio.currentTime = opts.time;
+		audio.play();
+		this.playing = true;
+	}
+  
+	stop() {
+		this.audio.pause();
+		this.playing = false;
+	}
+  
+	get volume() {
+		return this.audio.volume;
+	}
+  
+	set volume(volume) {
+		this.options.volume = this.audio.volume = volume;
+	}
+}
+  
+module.exports = Sound;

lib/utilities/entity.js

@@ -0,0 +1,96 @@
+const math = require("./math");
+const Rect = require("../Rect");
+
+function addDebug(e) {
+	e.children = e.children || [];
+	const bb = new Rect(e.w, e.h, { fill: "rgba(255, 0, 0, 0.3)" });
+	e.children.push(bb);
+	if (e.hitBox) {
+		const { x, y, w, h } = e.hitBox;
+		const hb = new Rect(w, h, { fill: "rgba(255, 0, 0, 0.5)" });
+		hb.pos.x = x;
+		hb.pos.y = y;
+		e.children.push(hb);
+	}
+	return e;
+}
+
+function angle(a, b) {
+	return math.angle(center(a), center(b));
+}
+
+function bounds(entity) {
+	let pos, w, h, hitBox;
+	// Object.prototype.hasOwnProperty.call is needed because of eslint
+	if (Object.prototype.hasOwnProperty.call(entity, "tileW") && Object.prototype.hasOwnProperty.call(entity, "tileH")) {
+		({pos, w, h} = {pos: entity.pos, w: entity.tileW, h: entity.tileH});
+	} else {
+		({pos, w, h} = entity);
+	}
+
+	if (entity.hitBox) hitBox = entity.hitBox;
+
+	const hit = hitBox || { x: 0, y: 0, w, h };
+	return {
+		x: hit.x + pos.x,
+		y: hit.y + pos.y,
+		w: hit.w - 1,
+		h: hit.h - 1
+	};
+}
+
+function center(entity) {
+	let pos, w, h;
+
+	// Object.prototype.hasOwnProperty.call is needed because of eslint
+	if (Object.prototype.hasOwnProperty.call(entity, "tileW") && Object.prototype.hasOwnProperty.call(entity, "tileH")) {
+		({pos, w, h} = {pos: entity.pos, w: entity.tileW, h: entity.tileH});
+	} else {
+		({pos, w, h} = entity);
+	}
+	
+	return {
+		x: pos.x + w / 2,
+		y: pos.y + h / 2
+	};
+}
+
+function distance(a, b) {
+	return math.distance(center(a), center(b));
+}
+
+function hit(e1, e2) {
+	const a = bounds(e1);
+	const b = bounds(e2);
+	return (
+		a.x + a.w >= b.x &&
+    a.x <= b.x + b.w &&
+    a.y + a.h >= b.y &&
+    a.y <= b.y + b.h
+	);
+}
+
+function hits(entity, container, hitCallback) {
+	const a = bounds(entity);
+	container.map(e2 => {
+		const b = bounds(e2);
+		if (
+			a.x + a.w >= b.x &&
+      a.x <= b.x + b.w &&
+      a.y + a.h >= b.y &&
+      a.y <= b.y + b.h
+		) {
+			hitCallback(e2);
+		}
+	});
+}
+
+module.exports = {
+	addDebug,
+	angle,
+	bounds,
+	center,
+	distance,
+	hit,
+	hits
+};

lib/utilities/math.js

@@ -1,3 +1,22 @@
+function angle(a, b) {
+	const dx = a.x - b.x;
+	const dy = a.y - b.y;
+	const angle = Math.atan2(dy, dx);
+
+	return angle;
+}
+
+function clamp(x, min, max) {
+	return Math.max(min, Math.min(x, max));
+}
+
+function distance (a, b) {
+	const dx = a.x - b.x;
+	const dy = a.y - b.y;
+
+	return Math.sqrt(dx * dx + dy * dy);
+}
+
 function rand(min, max) {
 	return Math.floor(randf(min, max));
 }
@@ -19,6 +38,9 @@ function randOneIn(max = 2) {
 }
 
 module.exports = {
+	angle,
+	clamp,
+	distance,
 	rand,
 	randf,
 	randOneFrom,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "asdf-games",
-  "version": "1.0.0",
+  "version": "1.1.6",
   "description": "Javascript gaming framework, based upon the framework made in the book HTML5 Games: Novice to Ninja by Sitepoint.",
   "main": "lib/index.js",
   "repository": {
@@ -17,5 +17,11 @@
     "name": "Arne van Iterson",
     "url": "https://gitea.arnweb.nl/arne/"
   },
-  "license": "ISC"
+  "license": "ISC",
+  "devDependencies": {
+    "eslint": "^6.8.0"
+  },
+  "dependencies": {
+    "easystarjs": "^0.4.3"
+  }
 }