diff --git a/fog.js b/fog.js index 7e9d0a6..1a10b0a 100644 --- a/fog.js +++ b/fog.js @@ -14,8 +14,8 @@ let playerMarker; let watchId = null; - // 解除済みエリア - const revealedLayers = L.layerGroup(); + let fogLayer = null; + const revealedHoles = []; function initMap() { map = L.map("locationmap", { tap: true }) @@ -26,27 +26,56 @@ '© OpenStreetMap contributors' }).addTo(map); - revealedLayers.addTo(map); - playerMarker = L.marker(map.getCenter()).addTo(map); playerMarker.bindPopup("STARTを押して探索開始").openPopup(); - // PC検証用:クリックで移動 + createFogLayer(); + + // PC検証用 map.on("click", (e) => { updateLocation(e.latlng); }); } - function revealFog(latlng) { - const circle = L.circle(latlng, { - radius: FOG_RADIUS, - color: "#4fc3f7", - fillColor: "#4fc3f7", - fillOpacity: 0.4, - weight: 1 - }); + // 世界全体を覆う霧を作る + function createFogLayer() { + const world = [ + [-90, -180], + [-90, 180], + [ 90, 180], + [ 90, -180] + ]; - revealedLayers.addLayer(circle); + fogLayer = L.polygon( + [world, ...revealedHoles], + { + color: "#000", + fillColor: "#000", + fillOpacity: 0.85, + weight: 0 + } + ).addTo(map); + } + + function revealFog(latlng) { + const points = []; + const steps = 24; + + for (let i = 0; i < steps; i++) { + const angle = (i / steps) * Math.PI * 2; + const dx = (FOG_RADIUS / 111320) * Math.cos(angle); + const dy = (FOG_RADIUS / 111320) * Math.sin(angle); + + points.push([ + latlng.lat + dy, + latlng.lng + dx + ]); + } + + revealedHoles.push(points); + + map.removeLayer(fogLayer); + createFogLayer(); } function updateLocation(latlng) { @@ -56,7 +85,7 @@ revealFog(latlng); playerMarker - .setPopupContent("探索中… 霧を解除しています") + .setPopupContent("探索中…霧を解除しています") .openPopup(); }