Play Spot the Difference Game Online - Free HTML Game - 常规

<html>
<head>
<title>Spot the Difference Game - Free Online HTML Game</title>
</head>
<body>
<h1>Spot the Difference!</h1>
<h3>Instructions: Spot the five differences between the two images.</h3>
<div>
<img src='image1.jpg' alt='Image 1' width='400' height='400'>
<img src='image2.jpg' alt='Image 2' width='400' height='400'>
</div>
<p>Once you spot a difference, click on it to mark it off your list.</p>
<script>
// JavaScript code goes here

// Get the images
let img1 = document.querySelector('img[alt='Image 1']');
let img2 = document.querySelector('img[alt='Image 2']');

// Create an array to store the differences
let differences = [];

// Loop through the images and compare each pixel
for (let x = 0; x < img1.width; x++) {
 for (let y = 0; y < img1.height; y++) {
  let imageData1 = img1.getContext('2d').getImageData(x, y, 1, 1).data;
  let imageData2 = img2.getContext('2d').getImageData(x, y, 1, 1).data;
  // Compare the pixels and store the differences
  if (imageData1[0] !== imageData2[0] || imageData1[1] !== imageData2[1] || imageData1[2] !== imageData2[2] || imageData1[3] !== imageData2[3]) {
   differences.push([x, y]);
  }
 }
}

// Draw circles over each of the differences
for (let i = 0; i < differences.length; i++) {
 let x = differences[i][0];
 let y = differences[i][1];
 let ctx = img2.getContext('2d');
 ctx.beginPath();
 ctx.arc(x, y, 10, 0, Math.PI * 2);
 ctx.fillStyle = 'red';
 ctx.fill();
 ctx.closePath();
 // When clicked, remove the circle
 ctx.addEventListener('click', function(e) {
  if (e.offsetX >= x - 10 && e.offsetX <= x + 10 && e.offsetY >= y - 10 && e.offsetY <= y + 10) {
   ctx.clearRect(x - 10, y - 10, 20, 20);
  }
 });
}
</script>
</body>
</html>