Battle-Isle-Reborn 1.15

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>
  </head>
  <body>
    <div class="canvas-container">
      <canvas id="gridCanvas"></canvas>
      <canvas id="obstaclesCanvas"></canvas>
      <canvas id="unitsCanvas"></canvas>
    </div>

    <script>
      // Game Classes
      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 + this.hexSize + 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;
           ...

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: darkgrey
}

.canvas-container {
  position: relative;
  width: 70%;
  aspect-ratio: 16 / 10;
   background: black;
     border-radius: 20px;    
}

canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  
}

JavaScript

/*
- 3x-layered hexagrid
- class & object oriented
- multiplayer-capable
- computed-enemies --------------> MISSING !!!!!
- invinite units
- infinite unit-types
- automatic unit-img replacement
- automatic unit-color-recognition
- automatic unit-background-recognition
- automatic occupied-cell-recognition

*/