Spot the Difference Game: Test Your Observation Skills
<html>
<head>
<title>Spot the Difference Game: Test Your Observation Skills</title>
<style>
body {
background-color: #000000;
}
#container {
width: 600px;
margin: auto;
background-color: #FFFFFF;
padding: 20px;
text-align: center;
}
#img1, #img2 {
width: 300px;
height: 200px;
}
#differences {
margin-top: 20px;
font-size: 20px;
color: #000000;
}
</style>
</head>
<body>
<div id="container">
<h2>Spot the Difference!</h2>
<p>You have 10 seconds to spot the differences in the two images below</p>
<img id="img1" src="https://www.randomimage.net/images/nature/autumn/autumn-tree-leaves-1.jpg" />
<img id="img2" src="https://www.randomimage.net/images/nature/autumn/autumn-tree-leaves-2.jpg" />
<div id="differences">
<p>Differences: <span id="numDifferences">0</span></p>
</div>
</div>
<script>
// Get the images
var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');
var numDifferences = document.getElementById('numDifferences');
<pre><code> // Start our timer
var timeLeft = 10;
var timer = setInterval(countdown, 1000);
// Keep track of the number of differences found
var differencesFound = 0;
// This function will run every second
function countdown() {
// Decrement our timer
timeLeft--;
if (timeLeft <= 0) {
// End game if time is up
clearInterval(timer);
alert('Time's up! You found ' + differencesFound + ' difference(s).');
}
}
// Listen for clicks on the images
img1.addEventListener('click', checkDifference);
img2.addEventListener('click', checkDifference);
// Check if the two images have the same pixels
function checkDifference(e) {
var x = e.offsetX;
var y = e.offsetY;
var imgData1 = getImageData(img1, x, y);
var imgData2 = getImageData(img2, x, y);
if (imgData1 != imgData2) {
// Update the number of differences found if these pixels are different
differencesFound++;
numDifferences.innerHTML = differencesFound;
}
}
// Get the image data for a specific pixel
function getImageData(img, x, y) {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
return ctx.getImageData(x, y, 1, 1).data;
}
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lnu0 著作权归作者所有。请勿转载和采集!