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

No:34569

Tienda de pinguino (tiene diseño azul)
Developer User16286｜Date and time 24/1/11 4:03:56
Build time 13.754 sec｜Game capacity 3.63KB｜

Script

Tienda de pingüinos

¡Bienvenido a la Tienda de pingüinos! Elige tu pingüino favorito para adoptar.

Pingüinos disponibles:

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Tienda de pingüinos</title>
    <style>
        body {
            background-color: blue;
        }
        
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            text-align: center;
            color: white;
            font-family: Arial, sans-serif;
        }
        
        .penguin-img {
            width: 200px;
            height: 200px;
            margin-bottom: 20px;
        }
        
        .button {
            background-color: white;
            color: blue;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Tienda de pingüinos</h1>
        <img class="penguin-img" src="penguin.png" alt="Pingüino">
        <p>¡Bienvenido a la Tienda de pingüinos! Elige tu pingüino favorito para adoptar.</p>
        
        <h2>Pingüinos disponibles:</h2>
        <div id="penguins"></div>
        
        <button class="button" onclick="adoptPenguin()">¡Adoptar!</button>
    </div>
    
    <script>
        // Array of available penguins
        var penguins = [
            { name: "Pingüino Azul", image: "blue_penguin.png" },
            { name: "Pingüino Rojo", image: "red_penguin.png" },
            { name: "Pingüino Verde", image: "green_penguin.png" }
        ];
        
        // Function to render penguins on the page
        function renderPenguins() {
            var penguinsContainer = document.getElementById("penguins");
            
            // Loop through each penguin and create a penguin card
            for (var i = 0; i < penguins.length; i++) {
                var penguin = penguins[i];
                
                var penguinCard = document.createElement("div");
                var penguinName = document.createElement("h3");
                var penguinImage = document.createElement("img");
                
                penguinCard.classList.add("penguin-card");
                penguinName.textContent = penguin.name;
                penguinImage.src = penguin.image;
                penguinImage.alt = penguin.name;
                penguinImage.classList.add("penguin-img");
                
                penguinCard.appendChild(penguinName);
                penguinCard.appendChild(penguinImage);
                
                penguinsContainer.appendChild(penguinCard);
            }
        }
        
        // Function to adopt a penguin
        function adoptPenguin() {
            var penguinCards = document.querySelectorAll(".penguin-card");
            
            // Loop through each penguin card and remove it
            for (var i = 0; i < penguinCards.length; i++) {
                var penguinCard = penguinCards[i];
                penguinCard.remove();
            }
            
            // Show adoption confirmation
            var penguinsContainer = document.getElementById("penguins");
            var confirmationMessage = document.createElement("p");
            confirmationMessage.textContent = "¡Felicidades! Has adoptado un pingüino.";
            penguinsContainer.appendChild(confirmationMessage);
            
            // Disable adopt button
            var adoptButton = document.querySelector(".button");
            adoptButton.disabled = true;
        }
        
        // Render penguins when the page loads
        window.onload = function() {
            renderPenguins();
        };
    </script>
</body>
</html>