KO and HP above user

common/game_basic.js

@@ -1,10 +1,10 @@
 class GameBasic {
     constructor() {
-        let player = new Player(true);
+        let player = new Player(false,true);
         let entities = [player];
 
         for (let i = 0; i < 50; i++) {
-            entities.push(new Player())
+            entities.push(new Player(false,false))
         }
 
         this.player = player;

common/player.js

@@ -1,4 +1,14 @@
-function Player(you) {
+function distF(ent, target) {
+    return ((ent.pos.x - target.pos.x) ** 2) + ((ent.pos.y - target.pos.y) ** 2)
+}
+
+function uuidv4() {
+    return "#000000-000000".replace(/[018]/g, c =>
+        (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)
+    );
+}
+
+function Player(you, isPlayer) {
     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 };
@@ -12,7 +22,11 @@ function Player(you) {
 
     this.health = 100;
 
-    this.you = you;
+    this.you = you || uuidv4();
+
+    this.isPlayer = isPlayer;
+
+    this.headCount = 0;
 }
 
 Player.prototype.bump = function () {
@@ -31,11 +45,13 @@ Player.prototype.bump = function () {
     player.ticks = 0;
 }
 
-Player.prototype.handleTick = function(game) {
+Player.prototype.handleTick = function (game) {
-    let { player } = game;
+    let { entities } = game;
 
     let ent = this;
 
+    if (ent.health <= 0) return;
+
     ent.pos.x += ent.vel.x;
     ent.pos.y += ent.vel.y;
 
@@ -50,22 +66,22 @@ Player.prototype.handleTick = function(game) {
 
     ent.ticks++;
 
-    let dist = ((ent.pos.x - player.pos.x) ** 2) + ((ent.pos.y - player.pos.y) ** 2);
+    for (let target of entities) {
+        if (target.you == ent.you) continue;
 
-    let dp = (Math.sin(ent.rot) * (ent.pos.x - player.pos.x))
+        let dist = distF(ent, target);
-        - (Math.cos(ent.rot) * (ent.pos.y - player.pos.y));
 
-    dp /= dist;
+        let dp = (Math.sin(ent.rot) * (ent.pos.x - target.pos.x))
+            - (Math.cos(ent.rot) * (ent.pos.y - target.pos.y));
 
-    dp *= 10;
+        dp /= Math.sqrt(dist + 0.1);
 
-    if (ent.you) return;
+        if (Math.sqrt(dist) < 128 && 1 / dp < -0.2) {
+            target.health--;
 
-    if (Math.random() < -dp && Math.random() > 3 / (ent.ticks+2)) {
+            if (target.health == 0) {
-        ent.bump();
+                ent.headCount++;
-    }
+            }
-
+        }
-    if (Math.sqrt(dist) < 96 / 2) {
-        player.health --;
     }
 }

game.js

@@ -0,0 +1,22 @@
+import GameBasic from "./common/game_basic.js";
+
+class Game extends GameBasic {
+    constructor() {
+        super();
+    }
+    createPlayer(user) {
+        
+    }
+    sync() {
+        
+    }
+    init() {
+        super.init();
+
+        let that = this;
+
+        setInterval(function () { that.sync() }, 1000 / 10);
+    }
+}
+
+export default Game;

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);
+        let that = this;
-        setInterval(function () { game.ui() }, 1000 / 10);
+
+        setInterval(function () { that.render() }, 1000 / 60);
+
+        game.canvas.onclick = () => that.click();
     }
 }
 
 var game = new Game();
 
 game.init();
-
-game.canvas.onclick = () => game.click();