Hey there! Let's tackle your map-based game features using just HTML and JavaScript—no keyboard input needed, just mouse clicks. I'll walk you through both detecting exact click positions and placing markers, with working code examples you can copy-paste and tweak.

First, we need to get coordinates relative to the map itself, not the entire browser window. Here's how to do it:

Step-by-Step Breakdown #

• Wrap your map image in a container (this helps with positioning markers later)
• Add a click event listener to the map
• Calculate the map's position on the screen using getBoundingClientRect()
• Subtract the map's offset from the click's global coordinates to get relative x/y values

Code Snippet for Click Detection #

<div id="map-container" style="position: relative; width: 800px; height: 600px;">
  <img id="game-map" src="your-map-image.png" style="width: 100%; height: 100%; object-fit: contain;" alt="World Map">
</div>

<script>
const map = document.getElementById('game-map');
const mapContainer = document.getElementById('map-container');

map.addEventListener('click', (e) => {
  // Get the map's position and size relative to the viewport
  const rect = map.getBoundingClientRect();
  
  // Calculate coordinates relative to the map's top-left corner
  const relativeX = e.clientX - rect.left;
  const relativeY = e.clientY - rect.top;
  
  // If your map is scaled (e.g., using CSS width/height), adjust for scaling:
  const scaleX = map.naturalWidth / rect.width;
  const scaleY = map.naturalHeight / rect.height;
  const actualX = relativeX * scaleX;
  const actualY = relativeY * scaleY;
  
  // Now you can use actualX/actualY for game logic (e.g., saving to a database or checking regions)
  console.log(`Clicked at map coordinates: X=${actualX.toFixed(2)}, Y=${actualY.toFixed(2)}`);
});
</script>

Pro tip: The naturalWidth/naturalHeight gives you the original size of the image, so multiplying by the scale factor ensures you get coordinates matching the actual map image, not the scaled display size.

Once you have the click coordinates, you can add visual markers. There are two easy ways to do this—using DOM elements (simple for small numbers of markers) or Canvas (better for lots of markers).

Option 1: DOM Element Markers (Simple & Flexible) #

We'll create small, positionable divs to act as markers. Since the map container is position: relative, markers will be positioned relative to it.

<!-- Add this to your HTML (inside the map container) -->
<style>
.marker {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #ff4444;
  border-radius: 50%;
  border: 2px solid white;
  transform: translate(-50%, -50%); /* Centers the marker on the click point */
  cursor: pointer;
}
</style>

<script>
// Add this inside your click event listener (after calculating actualX/actualY)
function addMarker(x, y) {
  const marker = document.createElement('div');
  marker.classList.add('marker');
  
  // Convert actual map coordinates back to scaled display coordinates
  const rect = map.getBoundingClientRect();
  const displayX = (x / map.naturalWidth) * rect.width;
  const displayY = (y / map.naturalHeight) * rect.height;
  
  marker.style.left = `${displayX}px`;
  marker.style.top = `${displayY}px`;
  
  // Optional: Add a tooltip or click handler for the marker
  marker.title = `Marker at X=${x.toFixed(2)}, Y=${y.toFixed(2)}`;
  
  mapContainer.appendChild(marker);
  
  // Save the marker data for later game use (e.g., store in an array)
  return { x, y, element: marker };
}

// Call this in your click handler:
const newMarker = addMarker(actualX, actualY);
</script>

Option 2: Canvas Markers (Better for Performance) #

If you plan to have dozens/hundreds of markers, using a Canvas element is more efficient. Here's a quick implementation:

<canvas id="map-canvas" width="800" height="600"></canvas>

<script>
const canvas = document.getElementById('map-canvas');
const ctx = canvas.getContext('2d');
const mapImage = new Image();
mapImage.src = 'your-map-image.png';

// Store markers in an array
const markers = [];

mapImage.onload = () => {
  // Draw the map on the canvas
  ctx.drawImage(mapImage, 0, 0, canvas.width, canvas.height);
  
  // Add click listener
  canvas.addEventListener('click', (e) => {
    const rect = canvas.getBoundingClientRect();
    const x = (e.clientX - rect.left) * (mapImage.naturalWidth / canvas.width);
    const y = (e.clientY - rect.top) * (mapImage.naturalHeight / canvas.height);
    
    // Add marker to array
    markers.push({ x, y });
    
    // Redraw map and markers
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(mapImage, 0, 0, canvas.width, canvas.height);
    drawMarkers();
  });
};

function drawMarkers() {
  ctx.fillStyle = '#ff4444';
  ctx.strokeStyle = 'white';
  ctx.lineWidth = 2;
  
  markers.forEach(marker => {
    const displayX = (marker.x / mapImage.naturalWidth) * canvas.width;
    const displayY = (marker.y / mapImage.naturalHeight) * canvas.height;
    
    ctx.beginPath();
    ctx.arc(displayX, displayY, 6, 0, Math.PI * 2);
    ctx.fill();
    ctx.stroke();
  });
}
</script>

Both methods let you save marker coordinates to an array or object, which you can later use for game logic (like triggering events when the user clicks a marker, or displaying info about the point).

内容的提问来源于stack exchange，提问作者user8203070