Multiplayer 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 Game</title>
    <style>

    </style>
  </head>
  <body>
    <div class="canvas-container">
      <canvas id="gridCanvas"></canvas>
      <canvas id="obstaclesCanvas"></canvas>
      <canvas id="unitsCanvas"></canvas>
    </div>
    <script>
      const iconSize = 80;
      const hexGridPadding = 30;
      const hexGridColor = 'lightgrey';
      const hexGridBorderColor = 'black';

      const players = {
        player1: { color: 'blue' },
        player2: { color: 'green' },
        player3: { color: 'yellow' },
      };

      const computed = {
        comp1: { color: 'red' },
        comp2: { color: 'purple' },
        comp3: { color: 'orange' },
      };

      const unitsData = {
        TANK: {
          title: 'Lightweight-Tank',
          type: 'army',
          color: 'green',
          pic: 'https://i.imgur.com/FVUrbn1.png'
        }
      };

      const obstaclesData = {
        FOREST: {
          title: 'forest',
          type: 'terrain',
          color: 'lightgreen',
          pic: 'https://i.imgur.com/yWF4P2J.png'
        },
        WATER: {
          title: 'water',
          type: 'terrain',
          color: 'lightblue',
          pic: 'https://i.imgur.com/yWF4P2J.png'
        },
        STONE: {
          title: 'stone',
          type: 'terrain',
          color: 'grey',
          pic: 'https://i.imgur.com/yWF4P2J.png'
        }
      };

      window.onload = () => {
        const rows = 19;
        const cols = 28;
        const hexSize = iconSize / 1.6;
        const spacing = 1;
        const hexWidth = 2 * hexSize * Math.cos(Math.PI / 6) + spacing;
        const hexHeight = hexSize * 1.5 + spacing;
        const gridWidth = (cols - 1) * hexWidth + hexWidth + (hexSize - spacing) + hexGridPadding * 2;
        const gridHeight = (rows - 1) * hexHeight + hexHeight +...

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 / 9;
   background: black;
     border-radius: 20px;    
}

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