game-engine/modules/game-objects/debug.js

import { COLS, ROWS, TILE_SIZE } from "../constants.js";
import { createCanvas } from "../utils.js";
import { GameObject } from "./game-object.js";

export class Debug extends GameObject {
  constructor({ debug = false }) {
    super();
    this.debug = debug;
    this.fps = 0;
  }

  toggle() {
    this.debug = !this.debug;
  }

  update(delta) {
    this.fps = Math.floor(1 / delta);
  }

  get grid() {
    if (this._grid) {
      return this._grid;
    }
    const { ctx, canvas } = createCanvas(COLS * TILE_SIZE, ROWS * TILE_SIZE);
    for (let row = 0; row < ROWS; row++) {
      for (let col = 0; col < COLS; col++) {
        ctx.strokeRect(col * TILE_SIZE, row * TILE_SIZE, TILE_SIZE, TILE_SIZE);
      }
    }
    return (this._grid = canvas);
  }

  render(ctx) {
    if (!this.debug) {
      return;
    }
    ctx.drawImage(this.grid, 0, 0);
    ctx.fillStyle = "Red";
    ctx.font = "normal 16pt Arial";
    ctx.fillText(this.fps + " fps", 10, 26);
  }

  onMouseClick(elementId) {
    if (elementId === "debug") {
      this.toggle();
    }
  }
}