JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hexagonal Grid Game</title>
    <style>

    </style>

    <script>
      // Game Class
      class Game {
        constructor(config) {
          this.config = config;
          this.hexSize = config.iconSize;
          this.hexWidth = 2 * this.hexSize * Math.cos(Math.PI / 6);
          this.hexHeight = this.hexSize * 1.5;
          this.gridWidth = (config.cols - 1) * this.hexWidth + this.hexWidth + config.hexGridPadding * 2;
          this.gridHeight = (config.rows - 1) * this.hexHeight + this.hexHeight + config.hexGridPadding * 2;
          this.occupiedPositions = new Set(); // Track occupied cells globally
        }

        setupCanvas(id, width, height) {
          const canvas = document.getElementById(id);
          canvas.width = width;
          canvas.height = height;
          return canvas;
        }

        drawGrid(canvas) {
          const ctx = canvas.getContext('2d');
          const gridLeft = this.hexWidth / 2 + this.config.hexGridPadding;
          const gridTop = this.hexHeight / 2 + this.config.hexGridPadding;
          for (let row = 0; row < this.config.rows; row++) {
            for (let col = 0; col < this.config.cols; col++) {
              const x = col * this.hexWidth + (row % 2 === 0 ? 0 : this.hexWidth / 2) + gridLeft;
              const y = row * this.hexHeight + gridTop;
              this.drawHexagon(ctx, x, y, this.hexSize, this.config.hexGridColor);
            }
          }
        }

        drawHexagon(ctx, x, y, hexSize, color) {
          ctx.beginPath();
          for (let i = 0; i < 6; i++) {
            const angle = Math.PI / 3 * i + Math.PI / 6;
            const px = x + hexSize * Math.cos(angle);
            const py = y + hexSize * Math.sin(angle);
            if (i === 0) ctx.moveTo(px, py);
            else ctx.lineTo(px, py);
          }
         ...