eyeofmidas.com/htdocs/js/asteroidtoy.js

import { Ship } from "./ship.js";

export class AsteroidToy {
	constructor(container) {
		this.container = container;
		this.lastTime = 0;
		this.canvas = null;
		this.context = null;
		this.updateIntervalId = 0;

		this.ships = [];
		this.mousePosition = { x: 0, y: 0 };

		this.debug = false;
	}

	init() {
		//add dom
		this.canvas = document.getElementById(this.container);
		this.context = this.canvas.getContext("2d");
		//attach listeners
		window.addEventListener("resize", this.onResize);
		window.addEventListener("mousedown", this.onMouseDown);
		window.addEventListener("mousemove", this.onMouseMove);
		window.addEventListener("mouseup", this.onMouseUp);
		window.addEventListener("contextmenu", this.onRightClick);

		window.addEventListener("touchstart", this.onTouchStart);
		window.addEventListener("touchmove", this.onTouchMove);
		window.addEventListener("touchend", this.onTouchEnd);

		this.lastTime = new Date().getUTCMilliseconds();
		this.updateIntervalId = setInterval(() => {
			let currentTime = new Date().getUTCMilliseconds();
			this.tick(1 + ((currentTime - this.lastTime) / 1000));
			this.lastTime = currentTime;
		}, 16);

		this.onResize();

		//populate game objects
		let canvasBounds = this.canvas.getBoundingClientRect();
		this.mousePosition.x = canvasBounds.width / 2;
		this.mousePosition.y = canvasBounds.height / 2;

		this.ships = [];
		this.ships.push(new Ship(this.canvas, canvasBounds.width / 2 + 50, canvasBounds.height / 2 + 50, "crimson"));
		this.ships.push(new Ship(this.canvas, canvasBounds.width / 2 + 50, canvasBounds.height / 2 - 50, "limegreen"));
		this.ships.push(new Ship(this.canvas, canvasBounds.width / 2 - 50, canvasBounds.height / 2 + 50, "cornflowerblue"));
		this.ships.push(new Ship(this.canvas, canvasBounds.width / 2 - 50, canvasBounds.height / 2 - 50, "magenta"));

		//start animation
		this.animate();
	}

	animate = () => {
		this.clearFrame(this.context);
		this.draw(this.context);
		requestAnimationFrame(this.animate);
	}

	tick(delta) {
		this.update(delta);
	}

	update(delta) {
		this.ships.forEach(ship => ship.setTarget(this.mousePosition.x, this.mousePosition.y));
		this.ships.forEach(ship => ship.update(delta));
		// for (let i = 1; i < this.ships.length; i++) {
		// 	this.ships[i].setTarget(this.ships[i - 1].position.x, this.ships[i - 1].position.y);
		// }
	}

	clearFrame(context) {
		context.clearRect(0, 0, this.canvas.width, this.canvas.height);
	}

	draw(context) {
		this.clearFrame(context);

		if (this.debug) {
			context.fillStyle = "blue";
			context.beginPath();
			context.arc(this.mousePosition.x, this.mousePosition.y, 4, 0, 2 * Math.PI);
			context.fill();
		}

		this.ships.forEach(ship => ship.draw(context));
	}

	getPixelRatio(context) {
		let dpr = window.devicePixelRatio || 1;
		let bsr = context.webkitBackingStorePixelRatio ||
			context.mozBackingStorePixelRatio ||
			context.msBackingStorePixelRatio ||
			context.oBackingStorePixelRatio ||
			context.backingStorePixelRatio || 1;

		return dpr / bsr;
	}

	onResize = () => {
		let ratio = this.getPixelRatio(this.context);
		let canvasBounds = this.canvas.getBoundingClientRect();
		this.canvas.width = canvasBounds.width * ratio;
		this.canvas.height = canvasBounds.height * ratio;
		this.context.scale(ratio, ratio);
	}

	onMouseMove = event => {
		// this.ships[0].setTarget(event.clientX, event.clientY);
		this.mousePosition.x = event.clientX;
		this.mousePosition.y = event.clientY;

		let canvasBounds = this.canvas.getBoundingClientRect();
		if (this.mousePosition.x < canvasBounds.x ||
			this.mousePosition.x > canvasBounds.x + canvasBounds.width ||
			this.mousePosition.y < canvasBounds.y ||
			this.mousePosition.y > canvasBounds.y + canvasBounds.height) {
			this.mousePosition.x = canvasBounds.width / 2;
			this.mousePosition.y = canvasBounds.height / 2;
		}
	}
}