Spaces:
Running
Running
File size: 6,734 Bytes
3affc70 8bca35a 3affc70 8bca35a 6ac9429 8bca35a 686bc78 8bca35a 686bc78 6ac9429 825befe 8bca35a 6ac9429 8bca35a c8a0841 686bc78 8bca35a c8a0841 8bca35a c8a0841 8bca35a c8a0841 8bca35a c8a0841 8bca35a 686bc78 8bca35a 686bc78 8bca35a c8a0841 8bca35a 2c5f6f1 8bca35a 686bc78 8bca35a 686bc78 8bca35a c8a0841 6ac9429 8bca35a 6ac9429 8bca35a 3affc70 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 | <!DOCTYPE html>
<html>
<head>
<title>FreeGuessr - DIY Version</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Load Leaflet (Free Map Library) -->
<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>
body { margin: 0; padding: 0; font-family: sans-serif; display: flex; flex-direction: column; height: 100vh; }
#game-container { display: flex; height: 100%; }
/* The Photo Area */
#photo-view {
width: 60%;
background-color: #222;
background-size: cover;
background-position: center;
position: relative;
}
/* The Map Area */
#map { width: 40%; height: 100%; cursor: crosshair; }
/* Overlay UI */
#ui-overlay {
position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
background: rgba(0,0,0,0.8); color: white; padding: 15px; border-radius: 10px;
text-align: center; z-index: 1000; display: none;
}
button {
padding: 10px 20px; font-size: 16px; background: #6a0dad; color: white; border: none; border-radius: 5px; cursor: pointer;
}
button:hover { background: #8a2be2; }
</style>
</head>
<body>
<div id="game-container">
<div id="photo-view">
<!-- UI Button to submit guess -->
<div style="position: absolute; bottom: 20px; right: 20px; z-index: 999;">
<button id="guess-btn" onclick="makeGuess()">GUESS</button>
<button id="next-btn" onclick="nextRound()" style="display:none; background: #28a745;">NEXT ROUND</button>
</div>
<div id="ui-overlay"></div>
</div>
<div id="map"></div>
</div>
<script>
// --- GAME DATA (You can add more locations here) ---
const locations = [
{
name: "Eiffel Tower, Paris",
lat: 48.8584, lng: 2.2945,
image: "https://images.unsplash.com/photo-1511739001486-6bfe10ce7859?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80"
},
{
name: "Times Square, NYC",
lat: 40.7580, lng: -73.9855,
image: "https://images.unsplash.com/photo-1534430480872-6e4308daee20?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80"
},
{
name: "Sydney Opera House",
lat: -33.8568, lng: 151.2153,
image: "https://images.unsplash.com/photo-1624138784181-dc7f5b75e52e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80"
},
{
name: "Santorini, Greece",
lat: 36.3932, lng: 25.4615,
image: "https://images.unsplash.com/photo-1570077188670-e3a8d69ac5ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80"
},
{
name: "Mount Fuji, Japan",
lat: 35.3606, lng: 138.7274,
image: "https://images.unsplash.com/photo-1490806843957-31f4c9a91c65?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80"
}
];
// --- SETUP ---
let currentRound = 0;
let currentMarker = null;
let actualMarker = null;
let polyline = null;
// Initialize Map
const map = L.map('map').setView([20, 0], 2);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Handle Click on Map
map.on('click', function(e) {
if (document.getElementById('next-btn').style.display === 'block') return; // Stop clicks after guess
if (currentMarker) {
map.removeLayer(currentMarker);
}
currentMarker = L.marker(e.latlng).addTo(map);
});
function loadRound() {
// Reset UI
document.getElementById('next-btn').style.display = 'none';
document.getElementById('guess-btn').style.display = 'inline-block';
document.getElementById('ui-overlay').style.display = 'none';
// Reset Map Markers
if (currentMarker) map.removeLayer(currentMarker);
if (actualMarker) map.removeLayer(actualMarker);
if (polyline) map.removeLayer(polyline);
map.setView([20, 0], 2);
currentMarker = null;
// Set Background Image
document.getElementById('photo-view').style.backgroundImage = `url('${locations[currentRound].image}')`;
}
function makeGuess() {
if (!currentMarker) {
alert("Place a pin on the map first!");
return;
}
const target = locations[currentRound];
const guessPos = currentMarker.getLatLng();
// Calculate Distance (Haversine Formula)
const distance = getDistanceFromLatLonInKm(target.lat, target.lng, guessPos.lat, guessPos.lng);
const score = Math.max(0, 5000 - Math.floor(distance * 2)); // Simple scoring logic
// Show Actual Location
actualMarker = L.marker([target.lat, target.lng]).addTo(map)
.bindPopup(`<b>${target.name}</b>`).openPopup();
// Draw Line
polyline = L.polyline([
[target.lat, target.lng],
[guessPos.lat, guessPos.lng]
], {color: 'red'}).addTo(map);
// Fit bounds to show both pins
map.fitBounds(polyline.getBounds(), {padding: [50, 50]});
// Update UI
document.getElementById('guess-btn').style.display = 'none';
document.getElementById('next-btn').style.display = 'inline-block';
const ui = document.getElementById('ui-overlay');
ui.innerHTML = `<h2>You were ${Math.floor(distance)} km away!</h2><p>Score: ${score} points</p>`;
ui.style.display = 'block';
}
function nextRound() {
currentRound++;
if (currentRound >= locations.length) {
alert("Game Over! Refresh to restart.");
currentRound = 0;
}
loadRound();
}
// Distance Calculator
function getDistanceFromLatLonInKm(lat1,lon1,lat2,lon2) {
var R = 6371; // Radius of the earth in km
var dLat = deg2rad(lat2-lat1);
var dLon = deg2rad(lon2-lon1);
var 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);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
return d;
}
function deg2rad(deg) {
return deg * (Math.PI/180)
}
// Start Game
loadRound();
</script>
</body>
</html> |