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,7 +4,10 @@ const assets = [
     'assets/head.svg',
 ];
 
-function Game() {
+class Game extends GameBasic {
+    constructor() {
+        super();
+    
         let assetsIn = {};
     
         for (let asset in assets) {
@@ -13,36 +16,14 @@ function Game() {
         }
     
         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;
     }
-
+    render () {
-    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);
@@ -67,20 +48,18 @@ Game.prototype.render = function () {
     
         if (player.health <= 0) {
             ctx.fillStyle = 'rgba(0,0,0,0.5)';
-        ctx.fillRect(0,0,cs,cs);
+            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.fillText('You died! Click to respawn', cs / 2, cs / 2);
         }
-}
+    }
-
+    ui() {
-Game.prototype.ui = function() {
         document.querySelector('.ui-text').textContent = `HP: ${this.player.health}`
-}
+    }
-
+    click() {
-Game.prototype.click = function () {
         let { player } = this;
     
         if (player.health <= 0) {
@@ -88,12 +67,17 @@ Game.prototype.click = function () {
         } 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);
+game.init();
-setInterval(function () { game.render() }, 1000 / 60);
-setInterval(function () { game.ui() }, 1000 / 10);
 
 game.canvas.onclick = () => game.click();