1.11

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>Perfectly Centered Hexagonal Grid with Units and Obstacles</title>
    <style>

      body {
        font-family: 'Arial', sans-serif;
        background: #f4f4f4;
        color: #333;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        overflow: hidden;
        flex-direction: column;
      }



      canvas {
        border: 3px solid darkblue;
        border-radius: 20px;
        background-color: grey;
        box-shadow: 0 4px 8px rgba(110, 110, 110, 0.5);
        width: 60%; /* Ensure proper scaling */
        height: auto;
        display: block; /* Helps in centering if within a flex container */
      }







      /* Hover effect for canvas */
      canvas:hover {
        cursor: pointer;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
      }

    </style>
    <script>
      // Configurable Data for Units and Obstacles
      const gridColor = '#f0f0f0';
      const gridBorderColor = '#cccccc';
      const usedHexColor = '#9c9c9c';
      const iconSize = 80;  // Size for icons on units
      const hexGridPadding = 30;

      // Unit and Obstacle Data (Example)
      const unitTypes = ['TANK', 'INFANTRY', 'MEDIC', 'TOWER'];
       // Colors for players and enemies
      const playerColors = { TANK: 'blue', INFANTRY: 'blue', MEDIC: 'blue', TOWER: 'blue' };
      const enemyColors = { TANK: 'red', INFANTRY: 'red', MEDIC: 'red', TOWER: 'red' };
      
      
      const unitData = {
  TANK: { 
    title: 'Lightweight-Tank', 
    color: 'green', 
    bgColor: 'transparent', // Added to keep consistency with obstacles
    capacity: 0, 
    energy: 10, 
    armory: 10, 
    health: 10, 
    skill: 5, 
    weapons: [], 
    pic: 'https://i.imgur.com/FVUrbn1.png' 
  },
  INFANTRY: { 
    title: 'Heavy-Infantry', 
    color:...