Simple HTML I Spy Game

Let's build a fun I Spy game using HTML, CSS, and JavaScript! This tutorial will guide you through creating a basic version where you need to find hidden objects within an image.

HTML Structure

We'll start with a basic HTML structure to hold our game elements.

<div id='game-container'>
  <img id='game-image' src='image.jpg'>
  <ul id='game-list'>
    <li>Object 1</li>
    <li>Object 2</li>
    <li>Object 3</li>
    <li>Object 4</li>
  </ul>
</div>

• game-container: This div acts as the main container for our game.
• game-image: The image where the player will search for objects. Replace 'image.jpg' with the actual path to your image.
• game-list: An unordered list (ul) to display the objects the player needs to find.

JavaScript Functionality

Now, let's add some JavaScript to make our game interactive.

// Array of objects to find
const objectsToFind = ['Object 1', 'Object 2', 'Object 3', 'Object 4'];

// Event listener for when the player clicks on the image
document.getElementById('game-image').addEventListener('click', function(event) {
  const x = event.offsetX;
  const y = event.offsetY;

  // Check if any objects are located at the clicked coordinates
  for (let i = 0; i < objectsToFind.length; i++) {
    const object = document.getElementById(`object-${i}`);
    const rect = object.getBoundingClientRect();
    if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
      // Object found, mark as found in array and update list on screen
      objectsToFind[i] = null;
      object.classList.add('found');
      const list = document.getElementById('game-list');
      const listItems = list.getElementsByTagName('li');
      listItems[i].classList.add('found');
    }
  }
});

1. Object Array: We create an array (objectsToFind) to hold the names of the objects the player needs to locate.
2. Click Event Listener: We attach an event listener to our image (game-image) to listen for clicks. This function gets the click coordinates (x, y).
3. Finding Objects: Inside the event listener, we loop through the objectsToFind array. We check if the clicked coordinates fall within the bounds of each object (assuming the objects have specific coordinates or areas defined in your game). If an object is found, we mark it as null in the array and update the corresponding list item to indicate it has been found.

CSS Styling

Finally, we'll add some CSS to style our game.

#game-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  justify-items: center;
  align-items: center;
  height: 100vh;
}

#game-image {
  max-width: 100%;
  height: auto;
}

#game-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#game-list li {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

#game-list li.found {
  background-color: #cfc;
}

• Container Styling: The game-container is styled using a grid layout to center the image and the list.
• Image Styling: The image is made responsive, adjusting its size while maintaining its aspect ratio.
• List Styling: The game-list is styled with a two-column grid layout, and the list items (li) are given basic styling. Found objects are highlighted with a green background.

You can now expand upon this basic structure to add more complex gameplay, such as:

• Multiple Levels: Create levels with different images and object lists.
• Timers and Scores: Include a timer and a scoring system to make the game more challenging.
• Sound Effects: Add sound effects for finding objects or completing levels.

Have fun building your own I Spy game!