diff --git a/fog.js b/fog.js index 00e197e..27e94ce 100644 --- a/fog.js +++ b/fog.js @@ -5,8 +5,8 @@ // ===== 設定 ===== const START_POS = [38.891, 139.824]; - const FOG_RADIUS = 40; // 霧解除半径(m) - const REVEAL_INTERVAL = 25; // この距離以上動いたら霧解除(m) + const FOG_RADIUS = 40; // 見える半径(m) + const GRID_SIZE = 20; // 解除単位(m) // ===== DOM ===== const titleEl = document.getElementById("title"); @@ -20,7 +20,9 @@ let fogLayer = null; const revealedHoles = []; - let lastRevealLatLng = null; + + // 解除済みグリッド + const revealedGrid = new Set(); // ===== 初期化 ===== function initMap() { @@ -37,13 +39,13 @@ createFogLayer(); - // PC検証用クリック移動 + // PC検証用 map.on("click", (e) => { updateLocation(e.latlng); }); } - // ===== 世界全体を覆う霧 ===== + // ===== 世界を覆う霧 ===== function createFogLayer() { const world = [ [-90, -180], @@ -52,10 +54,11 @@ [ 90, -180] ]; + if (fogLayer) map.removeLayer(fogLayer); + fogLayer = L.polygon( [world, ...revealedHoles], { - color: "#000", fillColor: "#000", fillOpacity: 0.85, weight: 0 @@ -63,10 +66,28 @@ ).addTo(map); } - // ===== 霧解除(穴追加)===== + // ===== グリッドID計算 ===== + function gridId(latlng) { + const latSize = GRID_SIZE / 111320; + const lngSize = GRID_SIZE / (111320 * Math.cos(latlng.lat * Math.PI / 180)); + + const gx = Math.floor(latlng.lng / lngSize); + const gy = Math.floor(latlng.lat / latSize); + + return `${gx}_${gy}`; + } + + // ===== 霧解除 ===== function revealFog(latlng) { + const id = gridId(latlng); + + // すでに解除済み → 何もしない + if (revealedGrid.has(id)) return; + + revealedGrid.add(id); + const points = []; - const steps = 16; // 円の分割数(軽量化) + const steps = 16; for (let i = 0; i < steps; i++) { const angle = (i / steps) * Math.PI * 2; @@ -80,9 +101,6 @@ } revealedHoles.push(points); - - // 再描画 - map.removeLayer(fogLayer); createFogLayer(); } @@ -91,17 +109,10 @@ map.panTo(latlng); playerMarker.setLatLng(latlng); - // 一定距離以上動いたときだけ霧解除 - if ( - !lastRevealLatLng || - map.distance(latlng, lastRevealLatLng) > REVEAL_INTERVAL - ) { - revealFog(latlng); - lastRevealLatLng = latlng; - } + revealFog(latlng); playerMarker - .setPopupContent("探索中…霧を解除しています") + .setPopupContent("探索中…") .openPopup(); } @@ -133,13 +144,9 @@ navigator.geolocation.clearWatch(watchId); watchId = null; titleEl.textContent = "STOP"; - playerMarker - .setPopupContent("探索を停止しました") - .openPopup(); } } - // ===== イベント ===== startBtn.addEventListener("click", startWatch); stopBtn.addEventListener("click", stopWatch);