split up game code using new es5 syntax or whatever

common/game_basic.js

@@ -0,0 +1,24 @@
+class GameBasic {
+    constructor() {
+        let player = new Player(true);
+        let entities = [player];
+
+        for (let i = 0; i < 50; i++) {
+            entities.push(new Player())
+        }
+
+        this.player = player;
+        this.entities = entities;
+    }
+    main() {
+        let { entities } = this;
+
+        for (let ent of entities) {
+            ent.handleTick(this);
+        }
+    }
+    init() {
+        let that = this;
+        setInterval(function () { that.main() }, 1000 / 60);
+    }
+}

index.js

@@ -4,6 +4,8 @@ import expressW from "express-ws";
 var app = express();
 expressW(app);
 
+
+app.use('/js',express.static('./common'));
 app.use(express.static('./static'));
 
 app.ws('/', function (ws, req) {

static/index.html

@@ -21,6 +21,7 @@
 		</div>
 	</section>
 	<script src='js/player.js'></script>
+	<script src='js/game_basic.js'></script>
 	<script src='js/index.js'></script>
 </body>
 

static/js/index.js

@@ -4,96 +4,80 @@ const assets = [
     'assets/head.svg',
 ];
 
-function Game() {
-    let assetsIn = {};
+class Game extends GameBasic {
+    constructor() {
+        super();
     
-    for (let asset in assets) {
-        assetsIn[asset] = new Image();
-        assetsIn[asset].src = assets[asset];
+        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;
     }
+    render () {
+        let { ctx, assetsIn, entities, player } = this;
     
-    let canvas = document.querySelector("#canvas");
-    let player = new Player(true);
-    let entities = [player];
+        ctx.clearRect(0, 0, cs, cs);
     
-    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) {
         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);
+        }
     }
+    ui() {
+        document.querySelector('.ui-text').textContent = `HP: ${this.player.health}`
+    }
+    click() {
+        let { player } = this;
     
-    ctx.restore();
+        if (player.health <= 0) {
+            game = new Game();
+        } else {
+            player.bump();
+        }
+    }
+    init(){
+        super.init();
     
-    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();
+        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();