开发找Waldo应用：窗口尺寸变更后获取固定点击坐标的方案

你的思路确实有问题——固定像素坐标行不通，因为窗口尺寸调整、滚动操作，甚至图片的响应式缩放都会让点击的像素位置和Waldo的实际位置脱节。下面给你两种实用的解决方案：

方案一：基于图片真实尺寸的百分比坐标 #

核心是用相对于图片本身的百分比标记Waldo的位置，不管窗口怎么变，百分比对应图片的位置是固定的。

实现步骤： #

1. 先确定Waldo在原图中的百分比位置：
   • 打开原图，用图片编辑工具（比如PS、系统画图）找到Waldo左上角的像素坐标（比如(1408, 2508)），再除以原图的宽高（比如原图宽4000px、高4000px），得到百分比：1408/4000=35.2%，2508/4000=62.7%，这就是目标位置。
2. 前端代码中计算点击位置的百分比：

   const img = document.querySelector('.waldo-image');
   // 提前存好Waldo的目标百分比位置
   const targetX = 35.2;
   const targetY = 62.7;
   // 允许的误差范围（避免用户必须点得丝毫不差）
   const tolerance = 1;
   
   img.addEventListener('click', (e) => {
     // 获取图片的真实尺寸（不是页面显示的缩放尺寸）
     const realWidth = img.naturalWidth;
     const realHeight = img.naturalHeight;
     // 获取图片在视口中的实时位置，排除滚动和窗口偏移的影响
     const rect = img.getBoundingClientRect();
     // 计算点击点相对于图片左上角的像素偏移
     const clickX = e.clientX - rect.left;
     const clickY = e.clientY - rect.top;
     // 转成百分比
     const clickXPercent = (clickX / realWidth) * 100;
     const clickYPercent = (clickY / realHeight) * 100;
     // 判断是否命中
     const isFound = Math.abs(clickXPercent - targetX) <= tolerance && 
                     Math.abs(clickYPercent - targetY) <= tolerance;
     if (isFound) {
       alert('找到Waldo啦！');
     }
   });
   

方案二：SVG热区叠加（更简便直观） #

直接在图片上方叠加一个SVG，用百分比定义Waldo所在区域的热区，点击热区就判定为找到，不用手动计算坐标。

实现代码： #

<!-- 容器设置相对定位，让SVG可以叠加在图片上 -->
<div class="waldo-container" style="position: relative; overflow: auto;">
  <img src="waldo.jpg" class="waldo-image" style="display: block;" />
  <!-- SVG和图片同尺寸，用百分比定位热区 -->
  <svg style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;">
    <!-- 用rect定义Waldo的区域，x/y是百分比，width/height根据Waldo的大小调整 -->
    <rect 
      x="35.2%" y="62.7%" width="2%" height="2%"
      style="fill: transparent; pointer-events: auto; cursor: pointer;"
      onclick="alert('找到Waldo啦！')"
    />
    <!-- 如果Waldo形状不规则，用path代替rect，坐标同样用百分比 -->
  </svg>
</div>

这个方案的好处是不用写复杂的坐标计算，热区会跟着容器自动适配窗口大小，滚动也不影响。如果需要更精准的区域，还可以用<path>绘制和Waldo轮廓一致的热区。

关于滚动的影响 #

两种方案都能自动处理滚动：方案一中的getBoundingClientRect()会实时计算图片在视口中的位置，减去后得到的是相对于图片的偏移；方案二中的SVG和容器绑定，滚动时会跟着图片一起移动，热区始终覆盖Waldo的位置。

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