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; for (let ent of entities) { ent.pos.x += ent.vel.x; ent.pos.y += ent.vel.y; ent.vel.x *= 0.8; ent.vel.y *= 0.8; 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 dp = (Math.sin(ent.rot) * (ent.pos.x - player.pos.x)) - (Math.cos(ent.rot) * (ent.pos.y - player.pos.y)); dp /= ((ent.pos.x - player.pos.x) ** 2) + ((ent.pos.y - player.pos.y) ** 2); dp *= 30; if (Math.random() < -dp && Math.random() > 5 / (ent.ticks+2)) { ent.bump(); } } } // 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(); } Game.prototype.click = function () { let { player } = this; player.bump(game); } var game = new Game(); setInterval(function () { game.main() }, 1000 / 60); setInterval(function () { game.render() }, 1000 / 60); game.canvas.onclick = () => game.click();