Widget:RogueMapTemplate

实现详见Rogue传奇/大地图

<script>const mapData = JSON.parse(document.getElementById('rogue-map-template-data').innerText)

function getTileTypeColor(type) {
  switch (type) {
    case 'spawn': return '#FFFFFF'
    case 'finalboss': return '#000000'

    case 'path': return '#D6C62C'
    case 'bridge': return '#0000FF'
    case 'battle': return '#FF2400'

    case 'chest': return '#FFD700'
    case 'merchant': return '#00FF80'
    case 'fire': return '#888888'

    case 'minigame': return '#9400D3'
    case 'miniboss': return '#EE82EE'
  }
  return '#000000'
}

function drawMap(name) {
  let e = document.createElement('canvas')
  const minX = Math.min(...mapData[name].map(function (v, i, arr) {
    return v.x
  }))
  const minY = Math.min(...mapData[name].map(function (v, i, arr) {
    return v.y - 0.5 * (v.x % 2)
  }))
  const maxX = Math.max(...mapData[name].map(function (v, i, arr) {
    return v.x
  }))
  const maxY = Math.max(...mapData[name].map(function (v, i, arr) {
    return v.y - 0.5 * (v.x % 2)
  }))
  mapData[name].sort(function (a, b) {
    if (a.shuffle === b.shuffle) return 0
    return a.shuffle ? 1 : -1
  })
  e.width = (maxX - minX + 2) * 30
  e.height = Math.ceil(((maxY - minY) / Math.sqrt(3) * 2 + 2) * 30)

  let ctx = e.getContext('2d')
  mapData[name].forEach(function (v, i, arr) {
    const p = {
      "x": (v.x - minX + 1) * 30,
      "y": ((maxY - v.y + 0.5 * (v.x % 2)) / Math.sqrt(3) * 2 + 1) * 30, // 需要上下翻转
      "shuffle": v.shuffle,
      "tileType": v.tileType,
    }
    drawHexagon(ctx, p, 20)
  })
  return e
}

function drawHexagon(ctx, point, radius) {
  ctx.beginPath();

  for (let i = 0; i < 6; i++) {
    const angle = (i * 60) * Math.PI / 180;
    const x = point.x + radius * Math.cos(angle);
    const y = point.y + radius * Math.sin(angle);

    if (i === 0) {
      ctx.moveTo(x, y);
    } else {
      ctx.lineTo(x, y);
    }
  }

  ctx.closePath();

  ctx.fillStyle = getTileTypeColor(point.tileType);
  ctx.strokeStyle = point.shuffle ? '#FF0000' : '#000000';
  ctx.lineWidth = 2;
  ctx.fill();
  ctx.stroke();
}

const containers = document.getElementsByClassName('rogue-map-template')

for (let i = 0; i < containers.length; i++) {
  let e = drawMap(containers[i].dataset.template)
  containers[i].append(e)
}
</script>