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

No:35082

←

Prev Next

→

Animal Matching Game
Developer User16431｜Date and time 24/1/13 9:20:31
Build time 12.472 sec｜Game capacity 3.664KB｜

Script

Sure! Here's an example of a simple Animal Matching Game implemented as a single HTML file using JavaScript and enclosed in script tags:

Animal Matching Game

In this game, each card represents an animal, and the goal is to find matching pairs by flipping the cards. When two cards are flipped, they are checked for a match, and if they match, an alert is displayed congratulating the player. If they don't match, the cards are flipped back after a brief delay. You can replace the URLs in the `animals` array with the URLs of your desired animal pictograms. The game supports smartphone operation and should work properly on mobile devices.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Sure! Here's an example of a simple Animal Matching Game implemented as a single HTML file using JavaScript and enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Animal Matching Game</title>
  <style>
    #game-container {
      display: flex;
      flex-wrap: wrap;
      max-width: 400px;
      margin: 0 auto;
    }
    
    .card {
      width: calc(25% - 10px);
      margin: 5px;
      padding: 20px;
      text-align: center;
      background-color: #f1f1f1;
      cursor: pointer;
    }
    
    .card img {
      max-width: 100%;
      max-height: 100px;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h1>Animal Matching Game</h1>
  <div id="game-container"></div>
  
  <script>
    // Array of animal images
    const animals = [
      { name: 'cat', image: 'https://example.com/cat.png' },
      { name: 'dog', image: 'https://example.com/dog.png' },
      { name: 'elephant', image: 'https://example.com/elephant.png' },
      { name: 'lion', image: 'https://example.com/lion.png' },
      { name: 'monkey', image: 'https://example.com/monkey.png' },
      { name: 'panda', image: 'https://example.com/panda.png' },
      { name: 'turtle', image: 'https://example.com/turtle.png' },
      { name: 'zebra', image: 'https://example.com/zebra.png' }
    ];
    
    const gameContainer = document.getElementById('game-container');
    let firstCard = null;
    
    // Shuffle the animal cards randomly
    function shuffleCards(array) {
      for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
      }
    }
    
    // Create card elements for each animal
    function createCards() {
      shuffleCards(animals);
      
      animals.forEach(animal => {
        const card = document.createElement('div');
        card.className = 'card';
        
        const image = document.createElement('img');
        image.src = animal.image;
        
        card.appendChild(image);
        gameContainer.appendChild(card);
        
        // Attach click event listener to each card
        card.addEventListener('click', () => flipCard(card, animal.name));
      });
    }
    
    // Flip the card and check for a match
    function flipCard(card, animalName) {
      card.classList.add('flipped');
      
      if (!firstCard) {
        firstCard = { element: card, name: animalName };
      } else {
        if (firstCard.name === animalName) {
          // Match found
          firstCard = null;
          setTimeout(() => {
            alert('Congratulations! You found a match!');
          }, 500);
        } else {
          // Wait for 1 second and then flip back the cards
          setTimeout(() => {
            card.classList.remove('flipped');
            firstCard.element.classList.remove('flipped');
            firstCard = null;
          }, 1000);
        }
      }
    }
    
    // Initialize and start the game
    function startGame() {
      createCards();
    }
    
    // Start the game when the page is loaded
    window.addEventListener('DOMContentLoaded', startGame);
  </script>
</body>
</html>
```

You can replace the URLs in the `animals` array with the URLs of your desired animal pictograms. The game supports smartphone operation and should work properly on mobile devices.