Sphera Project

sphera.js

class Sphera {
	constructor({
		x = 0,
		y = 0,
		radius = 10,
		color = Sphera.colors[parseInt(Math.random() * Sphera.colors.length)],
		speed = 1,
		angle = 0,
		text = '',
		border = 0,
		borderColor = 'gray',
		useGravity = false,
		bounciness = 1,
		followMouse = false
	}) {
		this.canvas = document.querySelector("canvas");
		this.ctx = this.canvas.getContext('2d');
		this.x = x;
		this.y = y;
		this.radius = radius;
		this.color = color;
		this.speed = speed;
		this.text = text;
		this.angle = angle;
		this.border = border;
		this.borderColor = borderColor;
		this.useGravity = useGravity;
		this.followMouse = followMouse;

		this.vx = this.speed * Math.cos(this.angle);
		this.vy = this.speed * Math.sin(this.angle);

		if (followMouse) {
			this.mouseOverEventId = this.canvas.addEventListener('mousemove', (ev) => {
				this.angle = Math.atan2(ev.clientY - this.y, ev.clientX - this.x);
				this.vx = this.speed * Math.cos(this.angle);
				this.vy = this.speed * Math.sin(this.angle);
			});
		}
	}
	draw() {
		let ctx = this.ctx;

		ctx.beginPath();
		ctx.fillStyle = this.color;
		ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
		ctx.fill();

		if (this.border > 0) {
			ctx.strokeStyle = this.borderColor;
			ctx.lineWidth = this.border;
			ctx.stroke();
		}

		ctx.save();
		ctx.translate(this.x, this.y);
		ctx.rotate(this.angle);
		ctx.textAlign = 'center';
		ctx.fillStyle = 'white';
		ctx.font = '20px Georgia';
		ctx.fillText(this.text, 0, 0 + 5);
		ctx.restore();
	}
	setDirection(deg) {
		let rad = Math.PI * deg / 180;
		this.vx = this.speed * Math.cos(rad);
		this.vy = this.speed * Math.sin(rad);
	}
	setSpeed(sp) {
		this.speed = sp;
	}
	move() {
		if (this.useGravity) {
			this.vy += Sphera.gravity;
		}
		this.x += this.vx;
		this.y += this.vy;
		this.angle += 1 * this.radius / 3000 * (this.vx > 0 ? 1 : -1);
	}
	moveInCanvas() {
		this.move();
		if (this.x < this.radius) {
			this.x = this.radius;
			this.vx = Math.abs(this.vx);
		}
		if (this.y < this.radius) {
			this.y = this.radius;
			this.vy = Math.abs(this.vy);
		}
		if (this.x > this.canvas.width - this.radius) {
			this.x = this.canvas.width - this.radius;
			this.vx = -Math.abs(this.vx);
		}
		if (this.y > this.canvas.height - this.radius) {
			this.y = this.canvas.height - this.radius;
			this.vy = -Math.abs(this.vy);
		}
	}
	collided(other) {
		let minD = (this.radius + other.radius) * (this.radius + other.radius);
		let actualD = (this.x - other.x) * (this.x - other.x) + (this.y - other.y) * (this.y - other.y);
		return actualD <= minD;
	}
}
Sphera.gravity = 0.8;
Sphera.colors = [ 'lightgreen', 'skyblue', 'orange', 'pink', 'salmon', 'emerald', 'dodgerblue' ];
Sphera.setupFullscreenGame = () => {
    const body = document.querySelector("body");
    const canvas = document.createElement("canvas");
    body.style.margin = "0";
    canvas.style.display = "block";
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    body.appendChild(canvas);
    return canvas;
}