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

No:42247

←

Prev Next

→

Dont break the vase
Developer User18846｜Date and time 24/2/11 7:29:27
Build time 10.182 sec｜Game capacity 2.981KB｜

Script

Le Jeu du Vase

Cliquez sur les pictogrammes pour remettre les objets dans le vase sans le casser.

(Vous pouvez également utiliser les touches directionnelles gauche et droite du smartphone)

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Le Jeu du Vase</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }

#game-container {
            margin: 50px auto;
        }

#instructions {
            font-size: 18px;
            margin-bottom: 20px;
        }

#hint {
            font-size: 16px;
            color: gray;
            margin-top: -20px;
        }

#message {
            font-size: 24px;
            margin-bottom: 20px;
        }

img {
            width: 80px;
            height: 80px;
            cursor: pointer;
            margin: 10px;
        }

#vase {
            position: relative;
            width: 200px;
            height: 280px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <h1>Le Jeu du Vase</h1>
    <div id="game-container">
        <p id="instructions">Cliquez sur les pictogrammes pour remettre les objets dans le vase sans le casser.</p>
        <p id="hint">(Vous pouvez également utiliser les touches directionnelles gauche et droite du smartphone)</p>
        <div id="vase">
            <img src="pictogram1.png" alt="Pictogramme 1" onclick="moveObject(1)" />
            <img src="pictogram2.png" alt="Pictogramme 2" onclick="moveObject(2)" />
            <img src="pictogram3.png" alt="Pictogramme 3" onclick="moveObject(3)" />
            <img src="pictogram4.png" alt="Pictogramme 4" onclick="moveObject(4)" />
        </div>
        <p id="message"></p>
    </div>

// Gestionnaire de clics pour déplacer les objets dans le vase
        function moveObject(objectId) {
            var object = document.querySelector("img[src='pictogram" + objectId + ".png']");
            
            if (!objectsInVase[objectId]) {
                object.style.top = "calc(100% - " + (object.height + 40) + "px)";
                object.style.left = "calc(50% - " + (object.width / 2) + "px)";
                object.style.transform = "rotateZ(360deg)";
                objectsInVaseCount++;
                objectsInVase[objectId] = true;
            }

if (objectsInVaseCount === 4) {
                showMessage("Vous avez gagné ! Félicitations !");
            }
        }

// Affiche un message dans l'élément message
        function showMessage(message) {
            document.getElementById("message").textContent = message;
        }

// Écouteur d'événements pour les touches directionnelles gauche et droite
        window.addEventListener("keydown", function(event) {
            if (event.key === "ArrowLeft") {
                moveObject(1);
            } else if (event.key === "ArrowRight") {
                moveObject(2);
            }
        });
    </script>
</body>
</html>