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

No:22017

←

Prev Next

→

Cards
Developer User10166｜Date and time 23/10/19 23:55:42
Build time 126.709 sec｜Game capacity 3.454KB｜

Script

Jogo de Cartas

Virar Carta

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Jogo de Cartas</title>
<style>
body {
  font-family: Arial, sans-serif;
  background-color: #F0F0F0;
  text-align: center;
}

h1 {
  color: #333333;
}

.cards {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.card {
  width: 30%;
  margin: 10px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.card img {
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
}

.btn {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 10px;
  cursor: pointer;
  border-radius: 4px;
}
</style>
</head>
<body>
  <h1>Jogo de Cartas</h1>
  
  <div class="cards">
    <div class="card" onclick="flipCard(0)">
      <img src="img/card.png" alt="Card">
      <p>Virar Carta</p>
    </div>
    <div class="card" onclick="flipCard(1)">
      <img src="img/card.png" alt="Card">
      <p>Virar Carta</p>
    </div>
    <div class="card" onclick="flipCard(2)">
      <img src="img/card.png" alt="Card">
      <p>Virar Carta</p>
    </div>
    <div class="card" onclick="flipCard(3)">
      <img src="img/card.png" alt="Card">
      <p>Virar Carta</p>
    </div>
    
  </div>
  
  <button class="btn" onclick="resetGame()">Reiniciar Jogo</button>
  
  <script>
    var cards = [
      { image: "img/card1.png", flipped: false },
      { image: "img/card2.png", flipped: false },
      { image: "img/card3.png", flipped: false },
      { image: "img/card4.png", flipped: false }
      // Add more card objects as needed
    ];
    
    var flippedCards = [];
    
    function flipCard(index) {
      if (!cards[index].flipped && flippedCards.length < 2) {
        cards[index].flipped = true;
        flippedCards.push(index);
        
        document.getElementsByClassName("card")[index].innerHTML = "<img src='" + cards[index].image + "' alt='Card'>";
        
        if (flippedCards.length === 2) {
          setTimeout(checkMatching, 1000);
        }
      }
    }
    
    function checkMatching() {
      var card1 = cards[flippedCards[0]];
      var card2 = cards[flippedCards[1]];
      
      if (card1.image === card2.image) {
        document.getElementsByClassName("card")[flippedCards[0]].style.backgroundColor = "#99ff99";
        document.getElementsByClassName("card")[flippedCards[1]].style.backgroundColor = "#99ff99";
      } else {
        document.getElementsByClassName("card")[flippedCards[0]].innerHTML = "<img src='img/card.png' alt='Card'><p>Virar Carta</p>";
        document.getElementsByClassName("card")[flippedCards[1]].innerHTML = "<img src='img/card.png' alt='Card'><p>Virar Carta</p>";
      }
      
      card1.flipped = false;
      card2.flipped = false;
      flippedCards = [];
    }
    
    function resetGame() {
      cards.forEach(function(card) {
        card.flipped = false;
      });
      flippedCards = [];
      var cardElements = document.getElementsByClassName("card");
      for (var i = 0; i < cardElements.length; i++) {
        cardElements[i].style.backgroundColor = "#ffffff";
        cardElements[i].innerHTML = "<img src='img/card.png' alt='Card'><p>Virar Carta</p>";
      }
    }
  </script>
</body>
</html>