当前位置：首页 > JavaScript

js实现找茬

2026-01-31 15:58:14JavaScript

实现找茬游戏的基本思路

找茬游戏通常包含两张看似相同的图片，玩家需要找出其中的差异。使用JavaScript实现这类游戏，需要处理图片加载、差异区域标记、交互逻辑和计时等功能。

加载图片资源

准备两张相似但有差异的图片，确保它们尺寸相同。使用HTML的<img>标签加载图片，或通过JavaScript动态创建图像对象。

<div id="game-container">
    <img id="image1" src="image1.jpg" alt="Image 1">
    <img id="image2" src="image2.jpg" alt="Image 2">
</div>

标记差异区域

预先定义差异区域的坐标和大小，存储为一个数组。每个差异区域可以用对象表示，包含x、y、width和height属性。

js实现找茬

const differences = [
    { x: 100, y: 150, width: 30, height: 30 },
    { x: 250, y: 80, width: 40, height: 40 },
    // 更多差异区域...
];

添加点击事件监听

为图片容器添加点击事件监听，检测玩家点击位置是否在差异区域内。计算点击坐标与差异区域的重叠情况。

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

    differences.forEach(diff => {
        if (x >= diff.x && x <= diff.x + diff.width &&
            y >= diff.y && y <= diff.y + diff.height) {
            // 找到差异，标记为已找到
            markDifference(diff);
        }
    });
});

标记已找到的差异

发现差异后，在图片上添加标记（如圆圈或高亮框），并更新游戏状态。

js实现找茬

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

样式设计

使用CSS为差异标记和游戏界面添加样式，提升用户体验。

.difference-marker {
    position: absolute;
    border: 2px solid red;
    pointer-events: none;
}
#game-container {
    position: relative;
    display: inline-block;
}

添加计时和计分功能

记录玩家找到差异的时间和数量，提供游戏完成后的反馈。

let startTime = Date.now();
let foundDifferences = 0;

function checkGameCompletion() {
    foundDifferences++;
    if (foundDifferences === differences.length) {
        const timeTaken = (Date.now() - startTime) / 1000;
        alert(`恭喜！你找到了所有差异，用时 ${timeTaken} 秒。`);
    }
}