Spot the Difference Game

This is a simple HTML game where you have to spot the differences between two images.

Instructions

1. Look closely at the two images side by side.
2. Click on the differences you see in the second image.
3. Each correct click will give you points and each incorrect click will deduct points.
4. You have a limited amount of time to find all the differences.

Game

Insert the images you want to use for the game here, side by side. Make sure they are the same size and resolution.

Score

Your score: 0

Timer

You have 'insert time limit here' seconds to find all the differences.

Script

Here's the script you can use to make the game work:

<script>
let score = 0;
let timeLeft = 'insert time limit here';

document.getElementById('score').innerHTML = 'Your score: ' + score;

let differences = document.querySelectorAll('img:nth-of-type(2) .difference');

for (let i = 0; i < differences.length; i++) {
  differences[i].addEventListener('click', function() {
    differences[i].classList.add('found');
    score += 10;
    document.getElementById('score').innerHTML = 'Your score: ' + score;
  });
}

let countdown = setInterval(function() {
  timeLeft--;
  document.getElementById('timer').innerHTML = 'Time left: ' + timeLeft + 's';

  if (timeLeft <= 0) {
    clearInterval(countdown);
    document.getElementById('timer').innerHTML = 'Time's up!';
    document.querySelector('img:nth-of-type(2)').removeEventListener('click', function() {});
    for (let i = 0; i < differences.length; i++) {
      differences[i].classList.add('found');
    }
  }
}, 1000);
</script>

Styling

Here's some basic CSS you can use to style the game:

img {
  max-width: 45%;
}

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

.found {
  opacity: 0.5;
}

Conclusion

That's it! You now have a simple HTML game where users can spot the differences between two images. Have fun!