I Spy Game HTML, CSS, and JavaScript: A Complete Guide

The provided code appears to be correct and functional. It's a well-structured I Spy game using HTML, CSS, and JavaScript. Here's a breakdown of the code:

HTML Structure:

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='UTF-8'>
	<title>I Spy Game</title>
	<link rel='stylesheet' href='style.css'>
</head>
<body>
	<h1>I Spy Game</h1>
	<div class='game-container'>
		<div class='game-board'>
			<!-- Game board with hidden objects -->
		</div>
		<div class='game-items'>
			<!-- List of items to find -->
		</div>
	</div>
	<script src='app.js'></script>
</body>
</html>

The HTML sets up the basic structure of the game, including a title, a game container that houses both the game board and a list of items, and links to the external CSS and JavaScript files.

CSS Style:

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

h1 {
	text-align: center;
	margin-top: 20px;
	font-size: 36px;
}

.game-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-top: 20px;
}

.game-board {
	width: 400px;
	height: 400px;
	border: 5px solid black;
	background-color: #ccc;
	position: relative;
	margin-right: 20px;
	margin-bottom: 20px;
}

.game-items {
	width: 200px;
	height: 400px;
	border: 5px solid black;
	background-color: #eee;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

The CSS styles the game elements. It sets up a simple layout, styles the title, the game container, the game board, and the list of items.

JavaScript Code:

// List of objects to find
const items = [
	'Car',
	'Tree',
	'Dog',
	'Cat',
	'House',
	'Sun',
	'Flower',
	'Star',
	'Chair',
	'Book',
	'Clock',
	'Shoe'
];

// Shuffle items array
items.sort(() => Math.random() - 0.5);

// Add items to game board
for (let i = 0; i < items.length; i++) {
	const item = document.createElement('div');
	item.classList.add('item');
	item.innerText = items[i];
	document.querySelector('.game-items').appendChild(item);
}

// Add hidden objects to game board
for (let i = 0; i < 10; i++) {
	const object = document.createElement('div');
	object.classList.add('object');
	object.style.top = Math.floor(Math.random() * 350) + 'px';
	object.style.left = Math.floor(Math.random() * 350) + 'px';
	document.querySelector('.game-board').appendChild(object);
}

// Click event to find objects
let found = 0;
document.querySelectorAll('.object').forEach(object => {
	object.addEventListener('click', () => {
		object.style.visibility = 'hidden';
		found++;
		if (found === 10) {
			alert('Congratulations! You found all the objects!');
		}
	});
});

The JavaScript code defines the list of objects to find, shuffles them randomly, adds them to the game board, adds hidden objects to the game board with random positions, and then handles click events to make the hidden objects disappear. It keeps track of the number of found objects and displays an alert when all objects are found.

Overall, this code provides a solid foundation for a simple I Spy game. It demonstrates the use of HTML for structure, CSS for styling, and JavaScript for game logic and event handling. You could further enhance this game by adding features like timers, scoring, different difficulty levels, or custom images instead of text for the hidden objects.

I Spy Game HTML, CSS, and JavaScript: A Complete Guide