split up game code using new es5 syntax or whatever

static/js/index.js

@@ -4,96 +4,80 @@ const assets = [
     'assets/head.svg',
 ];
 
-function Game() {
-    let assetsIn = {};
-
-    for (let asset in assets) {
-        assetsIn[asset] = new Image();
-        assetsIn[asset].src = assets[asset];
+class Game extends GameBasic {
+    constructor() {
+        super();
+    
+        let assetsIn = {};
+    
+        for (let asset in assets) {
+            assetsIn[asset] = new Image();
+            assetsIn[asset].src = assets[asset];
+        }
+    
+        let canvas = document.querySelector("#canvas");
+    
+        canvas.width = canvas.height = cs;
+    
+        this.canvas = canvas;
+        this.ctx = canvas.getContext("2d");
+        this.assetsIn = assetsIn;
     }
-
-    let canvas = document.querySelector("#canvas");
-    let player = new Player(true);
-    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.handleTick(this);
-    }
-}
-
-// 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) {
+    render () {
+        let { ctx, assetsIn, entities, player } = this;
+    
+        ctx.clearRect(0, 0, cs, cs);
+    
         ctx.save();
-
-        ctx.translate(ent.pos.x, ent.pos.y);
-        ctx.rotate(ent.rot);
-        ctx.drawImage(assetsIn[1], -64 / 2, -128, 64, 128);
-
+    
+        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();
-
-        ctx.drawImage(assetsIn[0], ent.pos.x - 64 / 2, ent.pos.y - 64 / 2, 64, 64);
+    
+        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);
+        }
     }
-
-    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();
+    ui() {
+        document.querySelector('.ui-text').textContent = `HP: ${this.player.health}`
+    }
+    click() {
+        let { player } = this;
+    
+        if (player.health <= 0) {
+            game = new Game();
+        } else {
+            player.bump();
+        }
+    }
+    init(){
+        super.init();
+    
+        setInterval(function () { game.render() }, 1000 / 60);
+        setInterval(function () { game.ui() }, 1000 / 10);
     }
 }
 
 var game = new Game();
 
-setInterval(function () { game.main() }, 1000 / 60);
-setInterval(function () { game.render() }, 1000 / 60);
-setInterval(function () { game.ui() }, 1000 / 10);
+game.init();
 
 game.canvas.onclick = () => game.click();

static/js/player.js

@@ -1,71 +0,0 @@
-function Player(you) {
-    let pos = { x: Math.random() * 5000 - 50, y: Math.random() * 5000 - 50 };
-    let camera = { x: -pos.x, y: -pos.y };
-    let vel = { x: 0, y: 0 };
-
-    this.camera = camera;
-    this.pos = pos;
-    this.vel = vel;
-    this.rot = 0;
-    this.dir = 1;
-    this.ticks = 0;
-
-    this.health = 100;
-
-    this.you = you;
-}
-
-Player.prototype.bump = function () {
-    let player = this;
-
-    if (player.ticks < 10) {
-        player.dir *= -1;
-    }
-
-    player.vel.x *= 0.3;
-    player.vel.y *= 0.3;
-
-    player.vel.x += Math.sin(player.rot) * 12;
-    player.vel.y -= Math.cos(player.rot) * 12;
-
-    player.ticks = 0;
-}
-
-Player.prototype.handleTick = function(game) {
-    let { player } = game;
-
-    let ent = this;
-
-    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.you) return;
-
-    if (Math.random() < -dp && Math.random() > 3 / (ent.ticks+2)) {
-        ent.bump();
-    }
-
-    if (Math.sqrt(dist) < 96 / 2) {
-        player.health --;
-    }
-}