Play Spot the Difference Game Online - Find All 6 Differences - 常规

<!DOCTYPE HTML>
<html>
	<head>
		<title>Spot the Difference</title>
		<style type="text/css">
			#container {
				width: 600px;
				height: 600px;
				margin: auto;
				background-color: #000;
				position: relative;
			}
			#image1 {
				position: absolute;
				top: 0px;
				left: 0px;
				width: 300px;
				height: 600px;
			}
			#image2 {
				position: absolute;
				top: 0px;
				right: 0px;
				width: 300px;
				height: 600px;
			}
			.difference {
				position: absolute;
				width: 40px;
				height: 40px;
				background-color: #0f0;
				cursor: pointer;
			}
		</style>
		<script type="text/javascript">
			//  Variables
			var differencesFound = 0;
			var totalDifferences = 6;
<pre><code>		//  Function to check if all differences are found
		function checkWin() {
			if(differencesFound == totalDifferences) {
				alert('You win!');
			}
		}
		
		//  Function to set up the differences
		function setup() {
			//  Difference 1
			var difference1 = document.createElement('div');
			difference1.className = 'difference';
			difference1.style.top = '100px';
			difference1.style.left = '120px';
			difference1.onclick = function() {
				this.style.display = 'none';
				differencesFound++;
				checkWin();
			}
			document.getElementById('container').appendChild(difference1);
			
			//  Difference 2
			var difference2 = document.createElement('div');
			difference2.className = 'difference';
			difference2.style.top = '140px';
			difference2.style.left = '180px';
			difference2.onclick = function() {
				this.style.display = 'none';
				differencesFound++;
				checkWin();
			}
			document.getElementById('container').appendChild(difference2);
			
			//  Difference 3
			var difference3 = document.createElement('div');
			difference3.className = 'difference';
			difference3.style.top = '200px';
			difference3.style.left = '60px';
			difference3.onclick = function() {
				this.style.display = 'none';
				differencesFound++;
				checkWin();
			}
			document.getElementById('container').appendChild(difference3);
			
			//  Difference 4
			var difference4 = document.createElement('div');
			difference4.className = 'difference';
			difference4.style.top = '250px';
			difference4.style.left = '250px';
			difference4.onclick = function() {
				this.style.display = 'none';
				differencesFound++;
				checkWin();
			}
			document.getElementById('container').appendChild(difference4);
			
			//  Difference 5
			var difference5 = document.createElement('div');
			difference5.className = 'difference';
			difference5.style.top = '400px';
			difference5.style.left = '150px';
			difference5.onclick = function() {
				this.style.display = 'none';
				differencesFound++;
				checkWin();
			}
			document.getElementById('container').appendChild(difference5);
			
			//  Difference 6
			var difference6 = document.createElement('div');
			difference6.className = 'difference';
			difference6.style.top = '460px';
			difference6.style.left = '50px';
			difference6.onclick = function() {
				this.style.display = 'none';
				differencesFound++;
				checkWin();
			}
			document.getElementById('container').appendChild(difference6);
		}
		
		//  Add the event listener to call setup on page load
		window.addEventListener('load', setup);
	&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;div id='container'&gt;
		&lt;img id='image1' src='image1.jpg'&gt;
		&lt;img id='image2' src='image2.jpg'&gt;
	&lt;/div&gt;
&lt;/body&gt;
</code></pre>
</html>