KO and HP above user

static/index.html

@@ -16,9 +16,6 @@
 		<div>
 			<canvas id='canvas'></canvas>
 		</div>
-		<div class='ui-text'>
-			placeholder
-		</div>
 	</section>
 	<script src='js/player.js'></script>
 	<script src='js/game_basic.js'></script>

static/js/index.js

@@ -7,45 +7,59 @@ const assets = [
 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;
     }
-    render () {
+    render() {
         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) {
+            if (ent.health <= 0) continue;
+
             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.fillStyle = ent.you.split('-')[0];
+            ctx.strokeStyle = "rgb(255,255,255)";
+            ctx.lineWidth = "8";
+            ctx.textAlign = "center";
+            ctx.textBaseline = "bottom";
+            ctx.font = "bold 16px sans-serif";
+
+            let args = [`HP: ${ent.health} KO: ${ent.headCount}`, ent.pos.x, ent.pos.y - 64 / 2];
+
+            ctx.strokeText(...args);
+            ctx.fillText(...args);
         }
-    
+
         ctx.restore();
-    
+
         if (player.health <= 0) {
             ctx.fillStyle = 'rgba(0,0,0,0.5)';
             ctx.fillRect(0, 0, cs, cs);
@@ -56,28 +70,27 @@ class Game extends GameBasic {
             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;
-    
+
         if (player.health <= 0) {
-            game = new Game();
+            this.player = new Player(false, true);
+            this.entities.push(this.player);
         } else {
             player.bump();
         }
     }
-    init(){
+    init() {
         super.init();
-    
-        setInterval(function () { game.render() }, 1000 / 60);
-        setInterval(function () { game.ui() }, 1000 / 10);
+
+        let that = this;
+
+        setInterval(function () { that.render() }, 1000 / 60);
+
+        game.canvas.onclick = () => that.click();
     }
 }
 
 var game = new Game();
 
 game.init();
-
-game.canvas.onclick = () => game.click();