2018js13k/system.js

function System() {
	var container = null;
	var canvas = null;
	var contextType = '2d';
	var contextAttributes = {};
	var context = null;

	var system = null;
	this.theater = null;
	var backgroundColor = "#D3D3D3";
	var framerate = 60;

	var lastTime = 0;

	this.keyboard = null;

	this.create = function(elementName, gameObject, defaultBackgroundColor) {
		system = this;
		system.theater = gameObject;
		backgroundColor = defaultBackgroundColor || backgroundColor;
		
		this.keyboard = new KeyboardInput();
		this.keyboard.attach();

		container = document.getElementById(elementName);
		canvas = document.createElement("canvas");
		container.appendChild(canvas);

		window.addEventListener('resize', system.handleResize);
		
		this.theater.init(system, canvas);
		system.handleResize(null);
		
		window.requestAnimationFrame(system.handleRequestAnimationFrame);
	};

	this.handleResize = function(event) {
		canvas.width = container.offsetWidth;
		canvas.height = container.offsetHeight;
		context = canvas.getContext(contextType, contextAttributes);
		context.translate(0.5, 0.5);
		system.theater.handleResize(canvas);
	};

	this.handleRequestAnimationFrame = function(event) {
		var currentTime = new Date().getTime();
		var delta = (currentTime - lastTime) / (1000 / framerate);
		if(delta > 100) {
			delta = (1000 / framerate);
		}
		system.theater.updateDelta(delta, canvas);
		lastTime = currentTime;

		context.fillStyle = backgroundColor;
		context.fillRect(0, 0, canvas.width, canvas.height);

		system.theater.draw(context);
		window.requestAnimationFrame(system.handleRequestAnimationFrame);
	};

	this.formatFloat = function(val) {
		if (Number.isNaN(parseFloat(val))) {
    		return 0;
  		}
		return parseFloat(val.toFixed(6));
	};

	this.distanceTo = function(source, target) {
		return this.formatFloat(Math.sqrt(Math.pow(target.x - source.x, 2) + Math.pow(target.y - source.y, 2)));
	}

	this.angleTo = function(source, target) {
		return this.formatFloat(Math.atan2(target.y - source.y , target.x - source.x));
	}
};