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

No:13367

Créer un générateur de drapeau à partir 12 options..ALL
Developer User5869｜Date and time 23/8/28 3:47:22
Build time 12.33 sec｜Game capacity 2.99KB｜

Script

Voici un exemple d'implémentation d'un générateur de drapeau en HTML et JavaScript, utilisant des pictogrammes pour les options. Le jeu comprend 12 options et 3 étapes.

Générateur de drapeau

Étape 1 : Choisissez une option

Étape 2 : Choisissez une autre option

Étape 3 : Votre drapeau

Notez que vous devrez remplacer les noms des fichiers d'image (`emozi_bear.png`, `emozi_chicken.png`, etc.) par les noms réels de vos pictogrammes. Dans cet exemple, les options d'étape 1 sont représentées par leurs versions pictographiques. Une fois que vous avez sélectionné les 3 options, le drapeau est généré et affiché dans la section "Votre drapeau".

←

Prev　Next

→ 　

Back　

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

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

Voici un exemple d'implémentation d'un générateur de drapeau en HTML et JavaScript, utilisant des pictogrammes pour les options. Le jeu comprend 12 options et 3 étapes.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Générateur de drapeau</title>
    <style>
        /* Styles pour les options de drapeau */
        .flag-option {
            display: inline-block;
            margin: 5px;
            padding: 10px;
            border: 1px solid #ccc;
            cursor: pointer;
        }
        .flag-option:hover {
            background-color: #eee;
        }
        .flag-option.selected {
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <h1>Générateur de drapeau</h1>
    
    <h2>Étape 1 : Choisissez une option</h2>
    <div id="step1Options">
        <div class="flag-option" onclick="selectOption(1)">
            <img src="pictogram1.png" alt="Option 1">
        </div>
        <div class="flag-option" onclick="selectOption(2)">
            <img src="pictogram2.png" alt="Option 2">
        </div>
        
    </div>
    
    <h2>Étape 2 : Choisissez une autre option</h2>
    <div id="step2Options">
        
    </div>
    
    <h2>Étape 3 : Votre drapeau</h2>
    <div id="flag"></div>
    
    <script>
        var selectedOptions = []; // Contient les options sélectionnées
        
        function selectOption(option) {
            selectedOptions.push(option); // Ajoute l'option sélectionnée
            
            // Affiche les options sélectionnées de l'étape 1
            var step2Options = document.getElementById("step2Options");
            step2Options.innerHTML = ""; // Réinitialise le contenu
            for (var i = 0; i < selectedOptions.length; i++) {
                var optionDiv = document.createElement("div");
                optionDiv.classList.add("flag-option");
                optionDiv.innerHTML = "<img src='pictogram" + selectedOptions[i] + ".png' alt='Option " + selectedOptions[i] + "'>";
                step2Options.appendChild(optionDiv);
            }
            
            // Vérifie si toutes les étapes sont terminées
            if (selectedOptions.length >= 3) {
                generateFlag();
            }
        }
        
        function generateFlag() {
            // Générer le drapeau en fonction des options sélectionnées
            var flag = document.getElementById("flag");
            flag.innerHTML = "Votre drapeau est prêt !";
        }
    </script>
</body>
</html>
```

Notez que vous devrez remplacer les noms des fichiers d'image (`pictogram1.png`, `pictogram2.png`, etc.) par les noms réels de vos pictogrammes. Dans cet exemple, les options d'étape 1 sont représentées par leurs versions pictographiques. Une fois que vous avez sélectionné les 3 options, le drapeau est généré et affiché dans la section "Votre drapeau".