Battle-Isle-Reborn 1.16

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


const militaryType = {
    Army: "Ground Forces",
    Airforce: "Air Forces",
    Navy: "Naval Forces"
};


const unitType = {
    Defense: ["Tower", "Fortification"],
    Support: ["Transporter", "Supply Truck"],
    Structure: ["Base", "Outpost"]
};

const vehicleType = {
    LightCombat: ["Light Tank", "Buggy", "Fast Attack Vehicle"],
    Recon: ["Reconnaissance Vehicle", "Scout Car"],
    HeavyCombat: ["Main Battle Tank", "Self-Propelled Artillery"],
    Support: ["Transport Truck", "Medical Vehicle"]
};

const combatType = {
    shortRange: ["Infantry", "Close Combat Vehicle"],
    longRange: ["Artillery", "Sniper"],
    support: ["Medic", "Engineer"],
    recon: ["Scout", "Recon Vehicle"],
    heavyStrike: ["Siege Cannon", "Demolition Tank"],
    frontline: ["Battle Tank", "Rapid Assault Vehicle"]
};

const combatType = {
    lightweight: ["Scout", "Recon Vehicle", "Buggy"],
    mediumWeight: ["Infantry", "Armored Car", "Transport Vehicle"],
    heavyWeight: ["Battle Tank", "Siege Cannon", "Heavy Artillery"],
    ultraHeavy: ["Fortified Base", "Mobile Fortress"]
};

const unitType = {
    facillity: ["Tower", "Bunker", "Base"],
    support: ["Medic", "Engineer", "Repair Drone"],
    combat: ["Tank", "Infantry", "Sniper"],
    transport: ["Transporter", "Cargo Vehicle"]
};


const unitType = {
    fortification: {
        tower: ["Watch Tower", "Sniper Tower", "Defense Tower", "Cannon Tower", "Laser Tower"],
        wall: ["Stone Wall", "Electric Fence", "Fortified Wall", "Spiked Barrier", "Energy Shield Wall"],
        base: ["Command Center", "Outpost", "Bunker", "Airfield", "Naval Dock"]
    },
    support: {
        medic: ["Field Medic", "Combat...