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

No:16943

←

Prev Next

→

Roblox
Developer User7490｜Date and time 23/9/22 0:03:51
Build time 32.206 sec｜Game capacity 3.335KB｜

Script

Jeu du Pictogramme

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Jeu du Pictogramme</title>
</head>
<body>
    <h1>Jeu du Pictogramme</h1>
    <div id="gameboard"></div>

// Mélanger les pictogrammes
        pictogrammes.sort(function() {
            return 0.5 - Math.random();
        });

// Afficher les pictogrammes sur le plateau de jeu
        var gameboard = document.getElementById("gameboard");
        pictogrammes.forEach(function(pictogramme) {
            var card = document.createElement("div");
            card.className = "card";
            card.innerHTML = "<div class='front'>" + pictogramme.symbole + "</div><div class='back'>?</div>";
            gameboard.appendChild(card);
        });

// Fonction pour retourner les cartes sélectionnées
        function flipCards() {
            var cards = document.getElementsByClassName("card");
            for (var i = 0; i < cards.length; i++) {
                cards[i].classList.toggle("flipped");
            }
        }

// Gérer le clic sur une carte
        var cards = document.getElementsByClassName("card");
        Array.prototype.forEach.call(cards, function(card) {
            card.addEventListener("click", function() {
                this.classList.toggle("flipped");

// Vérifier si toutes les cartes sont retournées
                if (document.getElementsByClassName("flipped").length === cards.length) {
                    alert("Félicitations, vous avez retourné toutes les cartes !");
                }
            });
        });
    </script>

.card {
            width: 80px;
            height: 80px;
            margin: 10px;
            perspective: 800px;
            cursor: pointer;
        }

.card.flipped .front {
            transform: rotateY(180deg);
        }

.card.flipped .back {
            transform: rotateY(0deg);
        }

.front, .back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
        }

.front {
            background-color: #F9E493;
            color: #000;
            font-size: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

.back {
            background-color: #333;
            color: #fff;
            font-size: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            transform: rotateY(180deg);
        }
    </style>
</body>
</html>