Click here for free DL of the app version that can save data.

No:6381

216

←

Prev Next

→

Make a game where you need to find a random item b..ALL
Developer User3710｜Date and time 23/7/2 11:18:42
Build time 33.856 sec｜Game capacity 3.974KB｜

Script

Sure! Here's a sample game where the player needs to find a random item among other items. Unfortunately, I cannot provide pictograms within the text-based reply, but you can copy the code below and save it as an HTML file to play the game:

Find the Item Game

Click on the correct item to win!

To play the game, copy the code above and save it as an HTML file (e.g., `find_item_game.html`). Then, open the HTML file with a web browser (on your smartphone or computer) to start playing. The game will display a set of items, with one being randomly selected as the correct item. Click on the item you think is correct, and the game will display a message indicating if you found the correct item. You can click the "Restart" button to start a new round.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

Click here for free DL of the app version that can save data.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Find the Item Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    .game-container {
      width: 300px;
      margin: 0 auto;
      padding-top: 20px;
    }
    .item {
      display: inline-block;
      width: 50px;
      height: 50px;
      background-color: #EEEEEE;
      border: 1px solid #CCCCCC;
      margin: 5px;
      text-align: center;
      line-height: 50px;
      cursor: pointer;
    }
    .item.selected {
      background-color: #FFCC00;
    }
  </style>
</head>
<body>
  <div class="game-container">
    <h1>Find the Item Game</h1>
    <h3>Click on the correct item to win!</h3>
    <div id="items"></div>
    <button id="restart-btn">Restart</button>
  </div>

let selectedItemId; // ID of the selected item

// Generate random items and display them on the page
    function generateItems() {
      const itemsContainer = document.getElementById('items');
      itemsContainer.innerHTML = '';

// Pick a random item from the items array
      selectedItemId = Math.floor(Math.random() * items.length);
      
      for (let i = 0; i < items.length; i++) {
        const item = document.createElement('div');
        item.classList.add('item');

// Update the item's text content with an item from the items array
        item.textContent = items[i];

// Add click event listener to the item
        item.addEventListener('click', selectItem);

itemsContainer.appendChild(item);
      }
    }

// Event listener for when the player selects an item
    function selectItem(event) {
      const selectedItem = event.target;
      
      // Check if the selected item's ID matches the randomly generated selectedItemId
      if (selectedItemId === Array.from(selectedItem.parentNode.children).indexOf(selectedItem)) {
        selectedItem.classList.add('selected');
        showMessage('Congratulations! You found the correct item.');
      } else {
        showMessage('Oops! Try again.');
      }

// Remove the click event listener from all items to prevent further selections
      const items = document.getElementsByClassName('item');
      for (let i = 0; i < items.length; i++) {
        items[i].removeEventListener('click', selectItem);
      }
    }

// Display a message on the page
    function showMessage(message) {
      const messageElement = document.createElement('h4');
      messageElement.textContent = message;
      document.getElementById('items').appendChild(messageElement);
    }

// Event listener for restarting the game
    document.getElementById('restart-btn').addEventListener('click', function() {
      // Clear the items container
      document.getElementById('items').innerHTML = '';

// Remove any existing messages
      const messages = document.getElementsByTagName('h4');
      for (let i = 0; i < messages.length; i++) {
        messages[i].remove();
      }

// Generate new items
      generateItems();
    });

// Start the game when the page loads
    window.onload = generateItems;
  </script>
</body>
</html>
```