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

No:13391

103

←

Prev Next

→

Zoo
Developer User5868｜Date and time 23/8/28 4:12:54
Build time 14.671 sec｜Game capacity 4.25KB｜

Script

Sure, here's an example of a simple zoo game implemented as a single HTML file with embedded JavaScript:

Zoo Game

In this game, you have a Zoo containing two animals (lion and elephant). You can feed the animals by clicking the "Feed Animals" button, and play with them by clicking the "Play with Animals" button. The animals' hunger and happiness levels are displayed below their pictograms. Please note that the pictogram images (lion.png and elephant.png) should be placed in the same directory as the HTML file for them to be displayed correctly.

←

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 zoo game implemented as a single HTML file with embedded JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Zoo Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        
        .button {
            display: inline-block;
            padding: 10px 20px;
            background-color: #f44336;
            color: white;
            text-align: center;
            text-decoration: none;
            font-size: 18px;
            cursor: pointer;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>Zoo Game</h1>
    <div id="imageContainer"></div>
    <div id="message"></div>
    <button id="feedButton" class="button">Feed Animals</button>
    <button id="playButton" class="button">Play with Animals</button>
    
    <script>
        // Animal class
        class Animal {
            constructor(name, pictogram) {
                this.name = name;
                this.pictogram = pictogram;
                this.hunger = 0;
                this.happiness = 0;
            }

feed() {
                this.hunger--;
                if (this.hunger < 0) {
                    this.hunger = 0;
                }
            }

play() {
                this.happiness++;
            }
            
            getHunger() {
                return this.hunger;
            }

getHappiness() {
                return this.happiness;
            }
        }

// Zoo class
        class Zoo {
            constructor() {
                this.animals = [];
            }

addAnimal(animal) {
                this.animals.push(animal);
            }

feedAnimals() {
                this.animals.forEach(animal => {
                    animal.feed();
                });
            }

playWithAnimals() {
                this.animals.forEach(animal => {
                    animal.play();
                });
            }

getAnimalStatus() {
                let status = "";
                this.animals.forEach(animal => {
                    status += `<img src="${animal.pictogram}" alt="${animal.name}" width="100">`;
                    status += `<p>${animal.name} - Hunger: ${animal.getHunger()} - Happiness: ${animal.getHappiness()}</p>`;
                });

return status;
            }
        }

// Create zoo and animals
        const zoo = new Zoo();
        const lion = new Animal("Lion", "lion.png");
        const elephant = new Animal("Elephant", "elephant.png");
        
        // Add animals to zoo
        zoo.addAnimal(lion);
        zoo.addAnimal(elephant);
        
        // Update the image container with animal status
        function updateImageContainer() {
            const imageContainer = document.getElementById('imageContainer');
            imageContainer.innerHTML = zoo.getAnimalStatus();
        }
        
        // Update the message div with given text
        function updateMessage(text) {
            const messageDiv = document.getElementById('message');
            messageDiv.innerHTML = text;
        }
        
        // Event listeners for buttons
        document.getElementById('feedButton').addEventListener('click', function() {
            zoo.feedAnimals();
            updateImageContainer();
            updateMessage('Animals fed!');
        });
        
        document.getElementById('playButton').addEventListener('click', function() {
            zoo.playWithAnimals();
            updateImageContainer();
            updateMessage('Animals played with!');
        });
        
        // Initialize the game
        updateImageContainer();
    </script>
</body>
</html>
```

Please note that the pictogram images (lion.png and elephant.png) should be placed in the same directory as the HTML file for them to be displayed correctly.