pong-ml/js/Engine.js

class Engine {
	framerate = 60;
	canvas = null;
	context = null;
	viewport = {w:200, h: 160};
	constructor(containingElement) {
		this.canvas = document.createElement('canvas');
		this.canvas.width = this.viewport.w;
		this.canvas.height = this.viewport.h;
		this.context = this.canvas.getContext('2d');
		containingElement.appendChild(this.canvas);
	}

	attach(drawObject) {
		this.drawObject = drawObject;
		this.lastTime = new Date().getTime();
		window.requestAnimationFrame(this.draw);
	}

	draw = () => {
		let currentTime = new Date().getTime();
		let deltams = currentTime - this.lastTime;
		let expectedDelta = 1000/this.framerate;
		let delta = deltams / expectedDelta;
		this.drawObject.update(delta);
		

		this.context.save();
		this.context.setTransform(1, 0, 0, 1, 0, 0);
		this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
		this.context.restore();

		this.context.save();
		this.context.translate(0.5, 0.5);
		this.drawObject.draw(this.context);
		this.context.restore();
		this.lastTime = currentTime;
		window.requestAnimationFrame(this.draw);
	}
}