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

No:20570

Make a game about cartoon and movie family trees
Developer User9094｜Date and time 23/10/10 5:45:24
Build time 15.415 sec｜Game capacity 3.763KB｜

Script

Sure! Here's an example of a simple game about cartoon and movie family trees implemented as a single HTML file:

Family Tree Game

In this game, the player is shown a list of family tree names represented by text on a canvas. The player needs to click on the correct family tree name to earn a point. The score is displayed on the canvas as well. After each selection, the canvas is cleared and the updated score is shown. The game continues indefinitely. This is just a simple example, but you can expand on it by adding more family trees, displaying visual pictograms instead of text, adding animations, or incorporating more complex gameplay mechanics.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple game about cartoon and movie family trees implemented as a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Family Tree Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Family Tree Game</h1>
    <canvas id="canvas" width="500" height="400"></canvas>
    <script>
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");
        let score = 0;
        
        // Family tree data
        const families = [
            { name: "The Simpsons", members: ["Homer", "Marge", "Bart", "Lisa", "Maggie"] },
            { name: "The Incredibles", members: ["Bob", "Helen", "Violet", "Dash", "Jack-Jack"] },
            { name: "The Addams Family", members: ["Gomez", "Morticia", "Wednesday", "Pugsley", "Uncle Fester"] }
            // Add more family trees as needed
        ];
        
        // Display family tree on canvas
        function displayFamilyTree() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.font = "16px Arial";
            ctx.fillStyle = "black";
            ctx.fillText("Select the correct family tree:", 20, 30);
            
            // Display family tree pictograms
            let xPos = 20;
            let yPos = 60;
            for (let i = 0; i < families.length; i++) {
                ctx.fillText(families[i].name, xPos, yPos);
                yPos += 20;
            }
            
            // Add click event listeners to pictograms
            canvas.addEventListener("click", selectFamilyTree);
        }
        
        // Handle user selection
        function selectFamilyTree(event) {
            const rect = canvas.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;
            
            let selectedFamilyIndex = -1;
            
            // Check which family tree was selected
            let xPos = 20;
            let yPos = 60;
            for (let i = 0; i < families.length; i++) {
                if (x > xPos && x < xPos + ctx.measureText(families[i].name).width && y > yPos - 16 && y < yPos) {
                    selectedFamilyIndex = i;
                    break;
                }
                yPos += 20;
            }
            
            // Increase score if selected correctly, else decrease score
            if (selectedFamilyIndex === 0) {
                score++;
            } else {
                score--;
            }
            
            // Remove click event listeners
            canvas.removeEventListener("click", selectFamilyTree);
            
            // Display updated score and continue playing
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillText("Score: " + score, 20, 30);
            setTimeout(displayFamilyTree, 1000);
        }
        
        // Start the game
        function startGame() {
            score = 0;
            displayFamilyTree();
        }
        
        // Call the startGame function to begin
        startGame();
    </script>
</body>
</html>
```

This is just a simple example, but you can expand on it by adding more family trees, displaying visual pictograms instead of text, adding animations, or incorporating more complex gameplay mechanics.