血染红旗 · 测试地图

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>血染红旗 · 测试地图</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body {
    height: 100%;
    background: #0a0d0a;
    overflow: hidden;
    font-family: system-ui, -apple-system, "PingFang SC", sans-serif;
  }
  .stage {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
  }
  canvas {
    width: min(100vw, 177.78vh);
    height: auto;
    display: block;
    touch-action: none;
  }
</style>
</head>
<body>
<div class="stage">
  <canvas id="map" width="960" height="540"></canvas>
</div>

<script>
(() => {
  'use strict';

  const canvas = document.getElementById('map');
  const ctx = canvas.getContext('2d');
  const W = 960, H = 540;

  const dpr = Math.min(window.devicePixelRatio || 1, 2);
  canvas.width = W * dpr;
  canvas.height = H * dpr;
  ctx.scale(dpr, dpr);

  const GRID = 40; // 每格 40 像素

  function draw() {
    // 深绿色底
    ctx.fillStyle = '#1a2e1a';
    ctx.fillRect(0, 0, W, H);

    // 主网格线
    ctx.strokeStyle = 'rgba(80, 180, 80, 0.25)';
    ctx.lineWidth = 1;
    for (let x = 0; x <= W; x += GRID) {
      ctx.beginPath();
      ctx.moveTo(x, 0);
      ctx.lineTo(x, H);
      ctx.stroke();
    }
    for (let y = 0; y <= H; y += GRID) {
      ctx.beginPath();
      ctx.moveTo(0, y);
      ctx.lineTo(W, y);
      ctx.stroke();
    }

    // 每 5 格加粗一条主线
    ctx.strokeStyle = 'rgba(100, 220, 100, 0.45)';
    ctx.lineWidth = 2;
    for (let x = 0; x <= W; x += GRID * 5) {
      ctx.beginPath();
      ctx.moveTo(x, 0);
      ctx.lineTo(x, H);
      ctx.stroke();
    }
    for (let y = 0; y <= H; y += GRID * 5) {
      ctx.beginPath();
      ctx.moveTo(0, y);
      ctx.lineTo(W, y);
      ctx.stroke();
    }

    // 交点小点
    ctx.fillStyle = 'rgba(120, 240, 120, 0.5)';
    for (let x = 0; x <= W; x += GRID) {
      for (let y = 0; y <= H; y += GRID) {
        ctx.beginPath();
        ctx.arc(x, y, 1.5, 0, Math.PI * 2);
        ctx.fill();
      }
    }
  }

  draw();
})();
</script>
</body>
</html>