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

No:36589

←

Prev Next

→

Solitario Game
Developer User16822｜Date and time 24/1/18 0:03:32
Build time 17.49 sec｜Game capacity 3.445KB｜

Script

Solitario Game

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Solitario Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #F5F5F5;
    }

h1 {
      text-align: center;
    }

#board {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      width: 350px;
      height: 350px;
      margin: 0 auto;
      border: 1px solid #000;
      background-color: #FFF;
    }

.card {
      width: 60px;
      height: 80px;
      margin: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #000;
      background-color: #F5F5F5;
    }

.hidden {
      background-color: #000;
    }

.hidden img {
      visibility: hidden;
    }

.shown img {
      visibility: visible;
    }
  </style>
</head>
<body>
  <h1>Solitario Game</h1>

// Create a deck of cards
    const deck = [];

for (let i = 0; i < 16; i++) {
      let cardData = {
        id: i,
        pictogram: pictograms[Math.floor(i / 2)]
      };

deck.push(cardData);
    }

// Shuffle the deck
    for (let i = deck.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [deck[i], deck[j]] = [deck[j], deck[i]];
    }

// Create the HTML elements for the cards
    const board = document.getElementById("board");

deck.forEach(card => {
      const cardElement = document.createElement("div");
      cardElement.classList.add("card", "hidden");
      
      const cardImage = document.createElement("img");
      cardImage.src = card.pictogram;
      
      cardElement.appendChild(cardImage);
      board.appendChild(cardElement);
    });

let selectedCard = null;
    let flippedCards = 0;

// Handle card click event
    function cardClick(event) {
      const cardElement = event.target;

if (cardElement === selectedCard || cardElement.classList.contains("shown")) {
        return;
      }

cardElement.classList.remove("hidden");
      cardElement.classList.add("shown");

if (selectedCard !== null) {
        const previousCard = selectedCard;
        selectedCard = null;

if (previousCard.firstChild.src === cardElement.firstChild.src) {
          flippedCards += 2;

if (flippedCards === deck.length) {
            setTimeout(() => {
              alert("¡Felicidades, has ganado el juego!");
            }, 500);
          }
        } else {
          setTimeout(() => {
            previousCard.classList.remove("shown");
            previousCard.classList.add("hidden");

cardElement.classList.remove("shown");
            cardElement.classList.add("hidden");
          }, 500);
        }
      } else {
        selectedCard = cardElement;
      }
    }

// Attach click event listener to each card
    const cards = document.querySelectorAll(".card");

cards.forEach(card => {
      card.addEventListener("click", cardClick);
    });
  </script>
</body>
</html>