From 873102a92704d701d5067849264c04b6de9af3a8 Mon Sep 17 00:00:00 2001 From: biglyderv Date: Mon, 25 Nov 2024 14:14:20 -0500 Subject: [PATCH] KO and HP above user --- common/game_basic.js | 4 +-- common/player.js | 48 +++++++++++++++++++++----------- game.js | 22 +++++++++++++++ static/index.html | 3 -- static/js/index.js | 65 ++++++++++++++++++++++++++------------------ 5 files changed, 95 insertions(+), 47 deletions(-) create mode 100644 game.js diff --git a/common/game_basic.js b/common/game_basic.js index d7c1e6e..7cee28c 100644 --- a/common/game_basic.js +++ b/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; diff --git a/common/player.js b/common/player.js index 0396490..1f72ca1 100644 --- a/common/player.js +++ b/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) { - let { player } = game; +Player.prototype.handleTick = function (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)) - - (Math.cos(ent.rot) * (ent.pos.y - player.pos.y)); + let dist = distF(ent, target); - 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)) { - ent.bump(); - } - - if (Math.sqrt(dist) < 96 / 2) { - player.health --; + if (target.health == 0) { + ent.headCount++; + } + } } } \ No newline at end of file diff --git a/game.js b/game.js new file mode 100644 index 0000000..04202cf --- /dev/null +++ b/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; \ No newline at end of file diff --git a/static/index.html b/static/index.html index 099e061..3d05439 100644 --- a/static/index.html +++ b/static/index.html @@ -16,9 +16,6 @@
-
- placeholder -
diff --git a/static/js/index.js b/static/js/index.js index 45fc5bf..29e3c73 100644 --- a/static/js/index.js +++ b/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(); \ No newline at end of file