GeoGuessr-like Game

GeoGuessr-like Game

#map-container { position: relative; width: 800px; /* Adjust as needed */ height: 600px; /* Adjust as needed */ overflow: hidden; } #map { width: 100%; height: auto; display: block; cursor: crosshair; /* Change cursor to indicate clickability */ } #target { position: absolute; width: 10px; height: 10px; background-color: red; border: 1px solid white; border-radius: 50%; pointer-events: none; /* Prevent target from interfering with clicks */ transform: translate(-50%, -50%); /* Center the target on the point */ display: none; /* Initially hidden */ } document.addEventListener('DOMContentLoaded', () => { const mapContainer = document.getElementById('map-container'); const mapImg = document.getElementById('map'); const targetMarker = document.getElementById('target'); const hintDiv = document.getElementById('hint'); const distanceDiv = document.getElementById('distance'); const newLocationButton = document.getElementById('new-location-button'); let targetLocation = null; function getRandomLocation() { const mapWidth = mapImg.naturalWidth; const mapHeight = mapImg.naturalHeight; const x = Math.random() * mapWidth; const y = Math.random() * mapHeight; return { x, y }; } function setTarget() { targetLocation = getRandomLocation(); targetMarker.style.display = 'none'; // Hide the target marker hintDiv.textContent = ''; // Clear previous hint distanceDiv.textContent = ''; // Clear previous distance } function getDistanceHint(distance) { if (distance > 500) { return "You are very far away."; } else if (distance > 200) { return "You are far away."; } else if (distance > 100) { return "You are getting warmer."; } else if (distance > 50) { return "You are warm."; } else if (distance > 20) { return "You are very warm."; } else { return "You are hot!"; } } function calculateDistance(point1, point2) { const mapWidth = mapImg.naturalWidth; const mapHeight = mapImg.naturalHeight; // Assuming map is roughly rectangular and distance is proportional to pixel distance const widthMiles = 3000; // Approximate width of USA in miles const heightMiles = 1500; // Approximate height of USA in miles const pixelDistanceX = point1.x - point2.x; const pixelDistanceY = point1.y - point2.y; const pixelToMileX = widthMiles / mapWidth; const pixelToMileY = heightMiles / mapHeight; const distanceMilesX = Math.abs(pixelDistanceX * pixelToMileX); const distanceMilesY = Math.abs(pixelDistanceY * pixelToMileY); const distance = Math.sqrt(distanceMilesX * distanceMilesX + distanceMilesY * distanceMilesY); return distance; } mapContainer.addEventListener('click', (event) => { if (!targetLocation) setTarget(); // Initialize if not already set const mapRect = mapImg.getBoundingClientRect(); const clickX = event.clientX - mapRect.left; const clickY = event.clientY - mapRect.top; const clickLocation = { x: (clickX / mapRect.width) * mapImg.naturalWidth, y: (clickY / mapRect.height) * mapImg.naturalHeight }; const distance = calculateDistance(clickLocation, targetLocation); hintDiv.textContent = getDistanceHint(distance); distanceDiv.textContent = `Distance: ${distance.toFixed(0)} miles`; }); newLocationButton.addEventListener('click', setTarget); setTarget(); // Initialize target location on page load });