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

No:16297

←

Prev Next

→

Lava themed card game
Developer User7216｜Date and time 23/9/17 2:02:10
Build time 36.952 sec｜Game capacity 4.055KB｜

Script

Sure, here's an example of a lava-themed card game implemented as a single HTML file using JavaScript:

Lava Card Game

In this example, the game consists of flipping cards by clicking on them to find matching pairs. The cards are represented by pictograms related to the lava theme. The goal is to match all the cards and a message is displayed when the game is successfully completed. The game works on a smartphone or any other device with a web browser.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Sure, here's an example of a lava-themed card game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Lava Card Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #FFD700;
    }
    
    h1 {
      text-align: center;
      color: #8B0000;
      margin-top: 30px;
    }
    
    .card {
      width: 150px;
      height: 200px;
      background-color: #FFF;
      border: 1px solid #8B0000;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 10px;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
      cursor: pointer;
      transition: transform 0.3s;
    }
    
    .card img {
      width: 100px;
      height: 100px;
    }
    
    .card:hover {
      transform: scale(1.05);
    }
    
    #game-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 30px;
    }
    
    #message {
      text-align: center;
      color: #8B0000;
      font-weight: bold;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>Lava Card Game</h1>
  
  <div id="game-container">
    <div class="card" onclick="flipCard(0)">
      <img src="lava1.png">
    </div>
    <div class="card" onclick="flipCard(1)">
      <img src="lava2.png">
    </div>
    <div class="card" onclick="flipCard(2)">
      <img src="lava3.png">
    </div>
    <div class="card" onclick="flipCard(3)">
      <img src="lava4.png">
    </div>
    <div class="card" onclick="flipCard(4)">
      <img src="lava1.png">
    </div>
    <div class="card" onclick="flipCard(5)">
      <img src="lava2.png">
    </div>
    <div class="card" onclick="flipCard(6)">
      <img src="lava3.png">
    </div>
    <div class="card" onclick="flipCard(7)">
      <img src="lava4.png">
    </div>
  </div>
  
  <div id="message"></div>
  
  <script>
    let cards = [
      { id: 0, src: 'lava1.png', isFlipped: false },
      { id: 1, src: 'lava2.png', isFlipped: false },
      { id: 2, src: 'lava3.png', isFlipped: false },
      { id: 3, src: 'lava4.png', isFlipped: false },
      { id: 4, src: 'lava1.png', isFlipped: false },
      { id: 5, src: 'lava2.png', isFlipped: false },
      { id: 6, src: 'lava3.png', isFlipped: false },
      { id: 7, src: 'lava4.png', isFlipped: false }
    ];
    let flippedCards = [];
    let matchedCards = 0;
    let message = document.getElementById('message');
    
    function flipCard(index) {
      if (!cards[index].isFlipped && flippedCards.length < 2) {
        cards[index].isFlipped = true;
        flippedCards.push(cards[index]);
        document.getElementsByClassName('card')[index].innerHTML = `<img src="${cards[index].src}">`;

if (flippedCards.length === 2) {
          setTimeout(checkForMatch, 1000);
        }
      }
    }
    
    function checkForMatch() {
      if (flippedCards[0].id === flippedCards[1].id) {
        matchedCards += 2;
        flippedCards = [];

if (matchedCards === cards.length) {
          message.innerText = 'Congratulations! You matched all the cards!';
        }
      } else {
        cards.forEach(card => {
          if (card.isFlipped) {
            card.isFlipped = false;
          }
        });
        
        setTimeout(flipBackCards, 1000);
      }
    }
    
    function flipBackCards() {
      flippedCards.forEach(card => {
        card.isFlipped = false;
      });
      flippedCards = [];
      
      document.querySelectorAll('.card').forEach((card, index) => {
        setTimeout(() => {
          card.innerHTML = '';
        }, index * 100);
      });
    }
  </script>
</body>
</html>
```