AI game creator

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

No:41709

←

Prev Next

→

Object Match
Developer User18699｜Date and time 24/2/9 12:28:49
Build time 11.11 sec｜Game capacity 3.439KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Object Match Game</title>
    <style>
      * {
        box-sizing: border-box;
      }
      
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
      }
      
      .container {
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      
      .game-board {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 400px;
      }
      
      .card {
        width: 80px;
        height: 80px;
        margin: 10px;
        border: 1px solid gray;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 60px;
        cursor: pointer;
      }
    </style>
  </head>
  
  <body>
    <div class="container">
      <div class="game-board"></div>
    </div>
    
    <script>
      // Array of pictograms
      const pictograms = ['🌞','🍎','🎉','🌈','🐶','🚗','👑','🎸','⚽️','❤️'];
      
      // Create a new set of cards
      const cards = pictograms.concat(pictograms);
      
      // Shuffle the cards
      cards.sort(() => Math.random() - 0.5);
      
      // Store the index of the clicked cards
      let flippedCards = [];
      
      // Function to flip a card and check for a match
      function flipCard(index) {
        // Check if the card is already flipped or matched
        if (flippedCards.includes(index)) return;
        
        // Flip the card
        document.getElementsByClassName('card')[index].classList.add('flipped');
        
        // Add the index to the flippedCards array
        flippedCards.push(index);
        
        // Check if two cards are flipped
        if (flippedCards.length === 2) {
          // Get the two flipped cards
          const card1 = flippedCards[0];
          const card2 = flippedCards[1];
          
          // Check if the cards match
          if (cards[card1] === cards[card2]) {
            // Remove the flipped and matched cards
            document.getElementsByClassName('card')[card1].classList.add('matched');
            document.getElementsByClassName('card')[card2].classList.add('matched');
            
            // Clear the flippedCards array
            flippedCards = [];
          } else {
            // Delay flipping back the non-matching cards
            setTimeout(() => {
              document.getElementsByClassName('card')[card1].classList.remove('flipped');
              document.getElementsByClassName('card')[card2].classList.remove('flipped');
              
              // Clear the flippedCards array
              flippedCards = [];
            }, 1000);
          }
        }
      }
      
      // Create and render the cards on the game board
      function renderCards() {
        const gameBoard = document.querySelector('.game-board');
        
        for (let i = 0; i < cards.length; i++) {
          const card = document.createElement('div');
          card.classList.add('card');
          card.innerHTML = cards[i];
          
          card.addEventListener('click', () => {
            flipCard(i);
          });
          
          gameBoard.appendChild(card);
        }
      }
      
      // Start the game
      renderCards();
    </script>
  </body>
</html>