From 71e1111a4574fc751238b97690ec1b928025da05 Mon Sep 17 00:00:00 2001 From: "Juan J. Martinez" Date: Fri, 29 Dec 2023 00:41:57 +0000 Subject: Use CSS transforms --- js/game.js | 62 ++++++++++++++++++++++---------------------------------------- 1 file changed, 22 insertions(+), 40 deletions(-) diff --git a/js/game.js b/js/game.js index 6ed44bd..f87b8a9 100644 --- a/js/game.js +++ b/js/game.js @@ -1,12 +1,9 @@ class Game { constructor(canvas, width, height) { - this.buffer = document.createElement("canvas"); - this.buffer.width = width; - this.buffer.height = height; - this.ctx = this.buffer.getContext("2d"); this.canvas = canvas; - this.width = width; - this.height = height; + this.canvas.width = width; + this.canvas.height = height; + this.ctx = this.canvas.getContext("2d"); // override this with your data to be loaded: // @@ -33,8 +30,6 @@ class Game { 88: "b" }; - this.scale = 1; - // will store the resouces indexed by id this.res = {}; this.resSize = 0; @@ -84,16 +79,20 @@ class Game { _draw() {} resize() { - this.scale = Math.floor(window.innerHeight / this.height); - this.canvas.width = this.width * this.scale; - this.canvas.height = this.height * this.scale; + const scale = Math.floor(window.innerHeight / this.canvas.height); + this.canvas.style.imageRendering = "pixelated"; + this.canvas.style.transformOrigin = "top"; + this.canvas.style.transform = `scale(${scale})`; } loop(now) { let dt = Math.min(1 / this.minFps, now - this.then); this._update(dt); + this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); + this.ctx.save(); this._draw(); + this.ctx.restore(); this.then = now; requestAnimationFrame((now) => { @@ -159,32 +158,25 @@ class Game { // won't use drawStart/drawEnd because may render regular fonts drawLoading() { // height of the loading bar - const h = 20; - - let ctx = this.canvas.getContext("2d"); - - ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); - ctx.save(); + const h = 6; if (this.loadingError == true) { - ctx.fillStyle = "rgb(255, 128, 128)"; - ctx.font = "caption"; - ctx.fillText( + this.ctx.fillStyle = "rgb(255, 128, 128)"; + this.ctx.font = "8px monospace"; + this.ctx.fillText( "ERROR Loading Resources", - Math.floor(ctx.canvas.width * 0.1), - Math.floor(ctx.canvas.height / 2 - h - h / 2) + Math.floor(this.ctx.canvas.width * 0.1), + Math.floor(this.ctx.canvas.height / 2 - h - h / 2) ); } - ctx.fillStyle = "rgb(128, 128, 128)"; - ctx.fillRect(Math.floor(ctx.canvas.width * 0.1), Math.floor(ctx.canvas.height / 2) - h, ctx.canvas.width - Math.floor(ctx.canvas.width * 0.2), h); - ctx.fillStyle = "rgb(255, 255, 255)"; - ctx.fillRect(Math.floor(ctx.canvas.width * 0.1), Math.floor(ctx.canvas.height / 2) - h, ( - Math.floor(ctx.canvas.resSize * (ctx.canvas.width - Math.floor(ctx.canvas.width * 0.2)) / ctx.canvas.dataSize) + this.ctx.fillStyle = "rgb(128, 128, 128)"; + this.ctx.fillRect(Math.floor(this.ctx.canvas.width * 0.1), Math.floor(this.ctx.canvas.height / 2) - h, this.ctx.canvas.width - Math.floor(this.ctx.canvas.width * 0.2), h); + this.ctx.fillStyle = "rgb(255, 255, 255)"; + this.ctx.fillRect(Math.floor(this.ctx.canvas.width * 0.1), Math.floor(this.ctx.canvas.height / 2) - h, ( + Math.floor(this.ctx.canvas.resSize * (this.ctx.canvas.width - Math.floor(this.ctx.canvas.width * 0.2)) / this.ctx.canvas.dataSize) ), h); - ctx.restore(); - // we don't do this on update because we want // the progress bar to finish drawing if (this.resSize == this.dataSize) { @@ -199,17 +191,7 @@ class Game { this.init(); this._update = this.update; - this._draw = () => { - this.ctx.clearRect(0, 0, this.width, this.height); - this.draw(); - let ctx = this.canvas.getContext("2d"); - ctx.save(); - ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); - ctx.imageSmoothingEnabled = false; - ctx.scale(this.scale, this.scale); - ctx.drawImage(this.buffer, 0, 0); - ctx.restore(); - }; + this._draw = this.draw; } } -- cgit v1.2.3