aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorJuan J. Martinez <jjm@usebox.net>2023-12-29 00:41:57 +0000
committerJuan J. Martinez <jjm@usebox.net>2023-12-29 00:41:57 +0000
commit71e1111a4574fc751238b97690ec1b928025da05 (patch)
tree9533f31c6aa7c6ffeca1ed5bb45a9a26f4d2d2be /js
parent72b0ebea8bbeaf895343284b990e1643ba540f6e (diff)
downloadjs-canvas-2023-71e1111a4574fc751238b97690ec1b928025da05.tar.gz
js-canvas-2023-71e1111a4574fc751238b97690ec1b928025da05.zip
Use CSS transforms
Diffstat (limited to 'js')
-rw-r--r--js/game.js62
1 files 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;
}
}