当前位置：首页 > JavaScript

js实现找茬

2026-03-02 07:04:59JavaScript

实现找茬游戏的基本思路

找茬游戏的核心是让玩家在两幅看似相同的图片中找出差异点。使用JavaScript实现这类游戏需要处理图片加载、差异点标记、交互反馈等关键环节。

图片加载与展示

使用HTML的<img>标签或Canvas来展示两张对比图片。确保图片尺寸一致，并排或重叠显示。

<div id="game-container">
  <img src="image1.jpg" id="img1">
  <img src="image2.jpg" id="img2">
</div>

差异点坐标存储

预先定义好差异点的坐标位置，存储为数组形式。每个差异点可以包含x、y坐标和半径。

js实现找茬

const differences = [
  { x: 100, y: 200, radius: 20 },
  { x: 300, y: 150, radius: 15 }
];

点击事件处理

为图片容器添加点击事件监听器，判断玩家点击位置是否接近预设的差异点。

document.getElementById('game-container').addEventListener('click', function(e) {
  const rect = this.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;

  checkDifference(x, y);
});

差异点验证

比较点击位置与所有差异点的距离，如果在容错范围内则视为找到正确差异。

js实现找茬

function checkDifference(x, y) {
  for (let diff of differences) {
    const distance = Math.sqrt(Math.pow(x - diff.x, 2) + Math.pow(y - diff.y, 2));
    if (distance <= diff.radius) {
      markDifference(diff);
      return;
    }
  }
}

标记已找到的差异

找到差异后，在对应位置添加可视标记，并从待查找数组中移除该点。

function markDifference(diff) {
  const marker = document.createElement('div');
  marker.className = 'difference-marker';
  marker.style.left = `${diff.x - diff.radius}px`;
  marker.style.top = `${diff.y - diff.radius}px`;
  marker.style.width = `${diff.radius * 2}px`;
  marker.style.height = `${diff.radius * 2}px`;
  document.getElementById('game-container').appendChild(marker);

  differences = differences.filter(d => d !== diff);
}

游戏状态管理

跟踪已找到的差异数量，当所有差异都被找到时显示胜利消息。

if (differences.length === 0) {
  alert('恭喜！你找到了所有差异！');
}

样式设计

使用CSS增强游戏视觉效果，如差异标记的样式、图片布局等。

#game-container {
  position: relative;
  display: flex;
}

.difference-marker {
  position: absolute;
  border: 2px solid red;
  border-radius: 50%;
  pointer-events: none;
}