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

No:13169

172

←

Prev Next

→

Family tree, sandbox game
Developer User5784｜Date and time 23/8/27 7:06:53
Build time 15.624 sec｜Game capacity 3.937KB｜

Script

Jogo da Árvore Genealógica

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Jogo da Árvore Genealógica</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        .button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            font-size: 16px;
            border: none;
            cursor: pointer;
            margin-top: 10px;
        }
        .person {
            display: inline-block;
            text-align: center;
            margin: 10px;
        }
        .person img {
            width: 100px;
            height: 100px;
        }
        .person p {
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <h1>Jogo da Árvore Genealógica</h1>

// Define Family Member class
        class FamilyMember {
            constructor(name, role, iconUrl) {
                this.name = name;
                this.role = role;
                this.iconUrl = iconUrl;
            }
        }

// Create family members
        const father = new FamilyMember('Pai', 'Pai', fatherIcon);
        const mother = new FamilyMember('Mãe', 'Mãe', motherIcon);
        const son = new FamilyMember('Filho', 'Filho', sonIcon);
        const daughter = new FamilyMember('Filha', 'Filha', daughterIcon);
        const unknown = new FamilyMember('Desconhecido', 'Desconhecido', unknownIcon);

// Setup initial family tree
        const familyTree = [
            {
                person: father,
                children: [
                    {
                        person: son,
                        children: []
                    },
                    {
                        person: daughter,
                        children: []
                    }
                ]
            },
            {
                person: mother,
                children: [
                    {
                        person: son,
                        children: []
                    },
                    {
                        person: daughter,
                        children: []
                    }
                ]
            }
        ];

// Render the family tree on the webpage
        function renderFamilyTree() {
            const familyTreeElement = document.getElementById('familyTree');
            familyTreeElement.innerHTML = '';
            renderFamilyTreeRecursive(familyTree, familyTreeElement);
        }

// Helper function to recursively render the family tree
        function renderFamilyTreeRecursive(tree, parentElement) {
            for (const node of tree) {
                const personElement = document.createElement('div');
                personElement.className = 'person';

const personImg = document.createElement('img');
                personImg.src = node.person.iconUrl;
                personElement.appendChild(personImg);

const personName = document.createElement('p');
                personName.textContent = node.person.name;
                personElement.appendChild(personName);

parentElement.appendChild(personElement);

if (node.children.length > 0) {
                    renderFamilyTreeRecursive(node.children, personElement);
                }
            }
        }

// Start the game by rendering the family tree
        renderFamilyTree();
    </script>
</body>
</html>