From a63e44ed6ac7b35bdcbcceb295d28a07801e5e4e Mon Sep 17 00:00:00 2001 From: onezDerv Date: Fri, 27 Sep 2024 21:42:21 -0400 Subject: [PATCH] entities test, scaling --- index.html | 3 +- js/index.js | 88 ++++++++++++++++++++++++++++------------------------ js/player.js | 11 +++++++ 3 files changed, 60 insertions(+), 42 deletions(-) create mode 100644 js/player.js diff --git a/index.html b/index.html index 3be3f15..f9a1e67 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@
-

OneKey

+

UniButton

@@ -17,6 +17,7 @@ placeholder
+ diff --git a/js/index.js b/js/index.js index f61ed2c..63f5a0f 100644 --- a/js/index.js +++ b/js/index.js @@ -5,82 +5,88 @@ const assets = [ ]; function Game() { + let assetsIn = {}; + + for (let asset in assets) { + assetsIn[asset] = new Image(); + assetsIn[asset].src = assets[asset]; + } + let canvas = document.querySelector("#canvas"); + let player = new Player(); + let entities = [player]; - let ctx = canvas.getContext("2d"); - - let camera = { x: 0, y: 0 }; - let pos = { x: 0, y: 0 }; - let vel = { x: 0, y: 0 }; + for (let i = 0; i < 15; i++) { + entities.push(new Player()) + } canvas.width = canvas.height = cs; this.canvas = canvas; - this.ctx = ctx; - this.camera = camera; - this.pos = pos; - this.vel = vel; - this.rot = 0; - this.dir = 1; + this.ctx = canvas.getContext("2d"); this.ticks = 1; - this.assetsIn = { - - }; - - for (let asset in assets) { - this.assetsIn[asset] = new Image(); - this.assetsIn[asset].src = assets[asset]; - } + this.assetsIn = assetsIn; + this.player = player; + this.entities = entities; } Game.prototype.main = function () { - this.pos.x += this.vel.x; - this.pos.y += this.vel.y; - - this.vel.x *= 0.9; - this.vel.y *= 0.9; - - this.rot += 0.08 * this.dir; - this.rot = this.rot % (Math.PI * 10); + let { entities } = this; this.ticks++; - this.camera.x = -this.pos.x * 0.1 + this.camera.x * 0.9; - this.camera.y = -this.pos.y * 0.1 + this.camera.y * 0.9; + for (let player of entities) { + player.pos.x += player.vel.x; + player.pos.y += player.vel.y; + + player.vel.x *= 0.8; + player.vel.y *= 0.8; + + player.rot += 0.03 * player.dir; + player.rot = player.rot % (Math.PI * 10); + + player.camera.x = -player.pos.x * 0.1 + player.camera.x * 0.9; + player.camera.y = -player.pos.y * 0.1 + player.camera.y * 0.9; + } } // todo: move into its own file Game.prototype.render = function () { - let { ctx, assetsIn, pos, camera } = this; + let { ctx, assetsIn, entities, player } = this; ctx.clearRect(0, 0, cs, cs); ctx.save(); - ctx.translate(camera.x + cs / 2, camera.y + cs / 2); + ctx.translate(player.camera.x + cs / 2, player.camera.y + cs / 2); - ctx.save(); + for (let ent of entities) { + ctx.save(); - ctx.translate(pos.x, pos.y); - ctx.rotate(this.rot); - ctx.drawImage(assetsIn[1], -64 / 2, -128, 64, 128); + ctx.translate(ent.pos.x, ent.pos.y); + ctx.rotate(ent.rot); + ctx.drawImage(assetsIn[1], -64 / 2, -128, 64, 128); - ctx.restore(); + ctx.restore(); - ctx.drawImage(assetsIn[0], pos.x - 64 / 2, pos.y - 64 / 2, 64, 64); + ctx.drawImage(assetsIn[0], ent.pos.x - 64 / 2, ent.pos.y - 64 / 2, 64, 64); + } ctx.restore(); } Game.prototype.click = function () { - let { rot } = this; + let { player } = this; if (this.ticks < 10) { - this.dir *= -1; + player.dir *= -1; } - this.vel.x += Math.sin(rot) * 25; - this.vel.y -= Math.cos(rot) * 25; + player.vel.x *= 0.6; + player.vel.y *= 0.6; + + player.vel.x += Math.sin(player.rot) * 25; + player.vel.y -= Math.cos(player.rot) * 25; this.ticks = 0; } diff --git a/js/player.js b/js/player.js new file mode 100644 index 0000000..d9ebe46 --- /dev/null +++ b/js/player.js @@ -0,0 +1,11 @@ +function Player() { + let pos = { x: Math.random() * 1000 - 50, y: Math.random() * 1000 - 50 }; + let camera = { x: -pos.x, y: -pos.y }; + let vel = { x: 0, y: 0 }; + + this.camera = camera; + this.pos = pos; + this.vel = vel; + this.rot = 0; + this.dir = 1; +} \ No newline at end of file