<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>日本の山県ピンゲーム</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<style>
#map { height: 600px; }
#info { margin-bottom: 10px; }
#timer { margin-bottom: 10px; }
</style>
</head>
<body>
<div id="info">山が名前に含まれる県にピンを打ってください。残り: <span id="remaining"></span></div>
<div id="timer">経過時間: 0分0秒</div>
<div id="map"></div>
<script>
const mountainPrefectures = [
{name: "山形県", lat: 38.2404, lon: 140.3633},
{name: "山梨県", lat: 35.6639, lon: 138.6388},
{name: "岡山県", lat: 34.6618, lon: 133.9344},
{name: "山口県", lat: 34.1859, lon: 131.4706},
{name: "富山県", lat: 36.6958, lon: 137.2137},
{name: "和歌山県", lat: 34.2261, lon: 135.1675}
];
const map = L.map('map').setView([36.2048, 138.2529], 5);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
let remainingPrefectures = [...mountainPrefectures];
let startTime = Date.now();
let penaltyTime = 0;
updateRemaining();
updateTimer();
const timerInterval = setInterval(updateTimer, 1000);
map.on('click', function(e) {
const clickedLat = e.latlng.lat;
const clickedLon = e.latlng.lng;
let closestPref = null;
let minDistance = Infinity;
for (let pref of remainingPrefectures) {
const distance = calculateDistance(clickedLat, clickedLon, pref.lat, pref.lon);
if (distance < minDistance) {
minDistance = distance;
closestPref = pref;
}
}
if (closestPref && minDistance < 100) { // 100km以内なら正解とする
L.marker([closestPref.lat, closestPref.lon]).addTo(map)
.bindPopup(closestPref.name).openPopup();
remainingPrefectures = remainingPrefectures.filter(p => p !== closestPref);
updateRemaining();
} else {
penaltyTime += 10000; // 他の県にピンを打つと10秒加算
alert("間違った場所にピンを打ちました！10秒ペナルティが加算されます。");
}
if (remainingPrefectures.length === 0) {
clearInterval(timerInterval);
const totalTime = Math.floor((Date.now() - startTime + penaltyTime) / 1000);
const minutes = Math.floor(totalTime / 60);
const seconds = totalTime % 60;
alert(`クリア！総プレイ時間: ${minutes}分${seconds}秒`);
}
});
function updateRemaining() {
document.getElementById('remaining').textContent = remainingPrefectures.length;
}
function updateTimer() {
const elapsedTime = Math.floor((Date.now() - startTime + penaltyTime) / 1000);
const minutes = Math.floor(elapsedTime / 60);
const seconds = elapsedTime % 60;
document.getElementById('timer').textContent = `経過時間: ${minutes}分${seconds}秒`;
}
function calculateDistance(lat1, lon1, lat2, lon2) {
const R = 6371; // 地球の半径（km）
const dLat = deg2rad(lat2 - lat1);
const dLon = deg2rad(lon2 - lon1);
const a =
Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
Math.sin(dLon/2) * Math.sin(dLon/2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
return R * c;
}
function deg2rad(deg) {
return deg * (Math.PI/180);
}
</script>
</body>
</html>
