unibutton/js/index.js

const cs = 1024;
const assets = [
    'assets/player.svg',
    'assets/head.svg',
];

function Game() {
    let assetsIn = {};

    for (let asset in assets) {
        assetsIn[asset] = new Image();
        assetsIn[asset].src = assets[asset];
    }

    let canvas = document.querySelector("#canvas");
    let player = new Player();
    let entities = [player];

    for (let i = 0; i < 50; i++) {
        entities.push(new Player())
    }

    canvas.width = canvas.height = cs;

    this.canvas = canvas;
    this.ctx = canvas.getContext("2d");
    this.assetsIn = assetsIn;
    this.player = player;
    this.entities = entities;
}

Game.prototype.main = function () {

    let { entities, player } = this;

    if (player.health <= 0) {
		return;
	}

    for (let ent of entities) {
        ent.pos.x += ent.vel.x;
        ent.pos.y += ent.vel.y;

        ent.vel.x *= 0.9;
        ent.vel.y *= 0.9;

        ent.rot += 0.03 * ent.dir;
        ent.rot = ent.rot % (Math.PI * 10);

        ent.camera.x = -ent.pos.x * 0.1 + ent.camera.x * 0.9;
        ent.camera.y = -ent.pos.y * 0.1 + ent.camera.y * 0.9;

        ent.ticks++;

        let dist = ((ent.pos.x - player.pos.x) ** 2) + ((ent.pos.y - player.pos.y) ** 2);

        let dp = (Math.sin(ent.rot) * (ent.pos.x - player.pos.x))
            - (Math.cos(ent.rot) * (ent.pos.y - player.pos.y));

        dp /= dist;

        dp *= 10;

        if (ent == player) continue;

        if (Math.random() < -dp && Math.random() > 3 / (ent.ticks+2)) {
            ent.bump();
        }

        if (Math.sqrt(dist) < 96 / 2) {
            player.health --;
        }
    }
}

// todo: move into its own file
Game.prototype.render = function () {
    let { ctx, assetsIn, entities, player } = this;

    ctx.clearRect(0, 0, cs, cs);

    ctx.save();

    ctx.translate(player.camera.x + cs / 2, player.camera.y + cs / 2);

    for (let ent of entities) {
        ctx.save();

        ctx.translate(ent.pos.x, ent.pos.y);
        ctx.rotate(ent.rot);
        ctx.drawImage(assetsIn[1], -64 / 2, -128, 64, 128);

        ctx.restore();

        ctx.drawImage(assetsIn[0], ent.pos.x - 64 / 2, ent.pos.y - 64 / 2, 64, 64);
    }

    ctx.restore();

    if (player.health <= 0) {
		ctx.fillStyle = 'rgba(0,0,0,0.5)';
        ctx.fillRect(0,0,cs,cs);
        ctx.fillStyle = 'rgb(255,255,255)';
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.font = "bold 48px sans-serif";
        ctx.fillText('You died! Click to respawn',cs/2,cs/2);
	}
}

Game.prototype.ui = function() {
    document.querySelector('.ui-text').textContent = `HP: ${this.player.health}`
}

Game.prototype.click = function () {
    let { player } = this;

    if (player.health <= 0) {
        game = new Game();
    } else {
        player.bump(game);
    }
}

var game = new Game();

setInterval(function () { game.main() }, 1000 / 60);
setInterval(function () { game.render() }, 1000 / 60);
setInterval(function () { game.ui() }, 1000 / 10);

game.canvas.onclick = () => game.click();