AI game creator

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

No:41250

←

Prev Next

→

Family tree
Developer User18493｜Date and time 24/2/6 16:28:02
Build time 9.217 sec｜Game capacity 2.376KB｜

Script

Sure, below is a simple implementation of a family tree game using JavaScript embedded within a single HTML file. The game allows the user to navigate through a family tree using pictograms and displays information about each family member.

In this example, I have provided a basic structure for the family tree game. You can add more family members within the `family` array including their names, ages, and occupations. Replace the placeholder `src` attributes of the `<img>` tags with the actual paths to your pictogram images. When a user clicks on a pictogram, the `showInfo()` function is called and it displays the corresponding family member's details in the `<div>` with the `info-container` id. Please make sure to replace the placeholder pictograms and customize the content to fit your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Family Tree Game</title>
    <style>
        #tree-container {
            max-width: 500px;
            margin: 0 auto;
            text-align: center;
        }
        
        #tree-container img {
            width: 50px;
            height: 50px;
            margin: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="tree-container">
        <img src="pictogram1.png" id="person1" onclick="showInfo(1)">
        <img src="pictogram2.png" id="person2" onclick="showInfo(2)">
        <img src="pictogram3.png" id="person3" onclick="showInfo(3)">
        
    </div>

function showInfo(index) {
            var person = family[index - 1];
            document.getElementById("person-name").textContent = "Name: " + person.name;
            document.getElementById("person-age").textContent = "Age: " + person.age;
            document.getElementById("person-occupation").textContent = "Occupation: " + person.occupation;
        }
    </script>
</body>
</html>
```

When a user clicks on a pictogram, the `showInfo()` function is called and it displays the corresponding family member's details in the `<div>` with the `info-container` id.

Please make sure to replace the placeholder pictograms and customize the content to fit your requirements.