PERFECT-GRID 1.0

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 with Dynamic Aspect Ratio</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background: red;
      }

      .canvas-container {
        position: relative;
        border-radius: 20px;
      }

      canvas {
        position: absolute;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div class="canvas-container" id="canvasContainer"></div>

    <script>
      class Game {
        constructor(gameConfig, gridConfig) {
          this.rows = gameConfig.rows;
          this.cols = gameConfig.cols;
          this.hexGridSize = gridConfig.hexGridSize;
          this.hexGridPadding = gridConfig.hexGridPadding;
          this.hexGridColor = gridConfig.hexGridColor;
          this.hexGridBorderColor = gridConfig.hexGridBorderColor;
          this.hexGridBgColor = gridConfig.hexGridBgColor;
          // Hexagon dimensions
          this.cosPiOver6 = Math.cos(Math.PI / 6);
          this.hexWidth = 2 * this.hexGridSize * this.cosPiOver6;
          this.hexHeight = this.hexGridSize * 1.5;
          this.updateGridDimensions();
        }

        updateGridDimensions() {
          this.gridWidth = (this.cols - 1) * this.hexWidth + this.hexWidth + this.hexGridSize + this.hexGridPadding * 2;
          this.gridHeight = (this.rows - 1) * this.hexHeight + this.hexHeight + this.hexGridPadding * 2;
        }

        setupCanvas(id) {
          const canvas = document.createElement('canvas');
          canvas.id = id;
          canvas.width = this.gridWidth;
          canvas.height = this.gridHeight;
          document.getElementById('canvasContainer').appendChild(canvas);
          return canvas;
        }

        drawGrid(canvas) {
          const ctx =...

JavaScript

/*
game.placeUnits(unitsCanvas, 'player1', 'TANK', 5); // Example using player1
game.placeUnits(unitsCanvas, 'player2', 'INFANTRY', 5);
game.placeUnits(unitsCanvas, 'player3', 'MEDIC', 5); // Example using player3
game.placeUnits(unitsCanvas, 'player3', 'TOWER', 5); // Example using player3


game.placeObstacles(obstaclesCanvas, 10, 'FOREST');
*/