25枚の神経衰弱's game

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

No:39998

←

Prev Next

→

25枚の神経衰弱
Developer User8917｜Date and time 24/1/31 17:07:34
Build time 16.208 sec｜Game capacity 2.947KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>神経衰弱</title>
  <style>
    body {
      font-family: "Arial", sans-serif;
      text-align: center;
    }
    .card {
      display: inline-block;
      width: 50px;
      height: 50px;
      font-size: 30px;
      margin: 5px;
      border: 1px solid #ccc;
      cursor: pointer;
    }
    .card.flipped {
      background-color: #ccc;
      border: none;
    }
    .card.matched {
      visibility: hidden;
      width: 0;
      height: 0;
      border: none;
    }
    #message {
      font-size: 20px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div id="cards"></div>
  <div id="message"></div>

const cardsContainer = document.getElementById("cards");
    const messageContainer = document.getElementById("message");

let flippedCount = 0;
    let firstFlippedCard, secondFlippedCard;

function shuffle(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]];
      }
    }

function createCards() {
      shuffle(symbols);
      
      for (let i = 0; i < symbols.length; i++) {
        const card = document.createElement("div");
        card.classList.add("card");
        card.dataset.symbol = symbols[i];
        cardsContainer.appendChild(card);
        
        card.addEventListener("click", handleCardClick);
      }
    }

function handleCardClick() {
      if (flippedCount < 2 && !this.classList.contains("flipped") && !this.classList.contains("matched")) {
        this.classList.add("flipped");
        
        flippedCount++;

if (flippedCount === 1) {
          firstFlippedCard = this;
        } else if (flippedCount === 2) {
          secondFlippedCard = this;

if (firstFlippedCard.dataset.symbol === secondFlippedCard.dataset.symbol) {
            setTimeout(matchFound, 500);
          } else {
            setTimeout(resetCards, 1000);
          }
        }
      }
    }

function matchFound() {
      firstFlippedCard.classList.add("matched");
      secondFlippedCard.classList.add("matched");
      flippedCount = 0;

if (document.querySelectorAll(".card.matched").length === symbols.length) {
        messageContainer.textContent = "Congratulations! You won!";
      }
    }

function resetCards() {
      firstFlippedCard.classList.remove("flipped");
      secondFlippedCard.classList.remove("flipped");
      flippedCount = 0;
    }

createCards();
  </script>
</body>
</html>