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

No:35085

Place 6 Horses to the Ground, Place 7 Birds to the..ALL
Developer anonymous｜Date and time 24/1/13 9:23:41
Build time unknown sec｜Game capacity 4.541KB｜

Script

Sure! Here's a simple game where you can place horses, birds, and sharks in different environments using pictograms. The game will be played on a smartphone.

Place the Animals

Drag and drop the animals to their respective environments

Ground

Sky

Sea

🐴

🐦

🦈

This HTML file contains JavaScript code inside the script tags that implements a simple drag-and-drop game. You can drag the horse, birds, and sharks and drop them in their respective environments: ground, sky, and sea. The game keeps track of how many animals are left to be placed, and once all the animals are placed correctly, a congratulatory message is displayed. The game is designed to be played on a smartphone and uses pictograms for animals.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Sure! Here's a simple game where you can place horses, birds, and sharks in different environments using pictograms. The game will be played on a smartphone.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Place the Animals</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        
        .environment {
            height: 150px;
            width: 150px;
            border: 2px solid #000;
            margin: 10px;
            display: inline-block;
            vertical-align: top;
        }
        
        .animal {
            height: 50px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <h1>Place the Animals</h1>
    <h3>Drag and drop the animals to their respective environments</h3>
    
    <div id="ground" class="environment">
        <h2>Ground</h2>
    </div>
    
    <div id="sky" class="environment">
        <h2>Sky</h2>
    </div>
    
    <div id="sea" class="environment">
        <h2>Sea</h2>
    </div>
    
    <div id="animalContainer">
        <div id="horses" class="animal" draggable="true">
            🐴
        </div>
        
        <div id="birds" class="animal" draggable="true">
            🐦
        </div>
        
        <div id="sharks" class="animal" draggable="true">
            🦈
        </div>
    </div>
    
    <script>
        var horseCount = 6;
        var birdCount = 7;
        var sharkCount = 2;
        
        var ground = document.getElementById('ground');
        var sky = document.getElementById('sky');
        var sea = document.getElementById('sea');
        var animalContainer = document.getElementById('animalContainer');
        
        // Drag and Drop Event Listeners
        animalContainer.addEventListener('dragstart', dragStart);
        ground.addEventListener('dragenter', dragEnter);
        ground.addEventListener('dragover', dragOver);
        ground.addEventListener('dragleave', dragLeave);
        ground.addEventListener('drop', drop);
        
        sky.addEventListener('dragenter', dragEnter);
        sky.addEventListener('dragover', dragOver);
        sky.addEventListener('dragleave', dragLeave);
        sky.addEventListener('drop', drop);
        
        sea.addEventListener('dragenter', dragEnter);
        sea.addEventListener('dragover', dragOver);
        sea.addEventListener('dragleave', dragLeave);
        sea.addEventListener('drop', drop);
        
        function dragStart(event) {
            event.dataTransfer.setData("text", event.target.id);
        }
        
        function dragEnter(event) {
            event.preventDefault();
            event.currentTarget.style.border = "2px dashed #000";
        }
        
        function dragOver(event) {
            event.preventDefault();
        }
        
        function dragLeave(event) {
            event.currentTarget.style.border = "2px solid #000";
        }
        
        function drop(event) {
            event.currentTarget.style.border = "2px solid #000";
            var data = event.dataTransfer.getData("text");
            var element = document.getElementById(data);
            
            if (element.parentNode.id !== event.currentTarget.id) {
                event.currentTarget.appendChild(element);
                
                if (event.currentTarget.id === "ground") {
                    horseCount--;
                } else if (event.currentTarget.id === "sky") {
                    birdCount--;
                } else if (event.currentTarget.id === "sea") {
                    sharkCount--;
                }
                
                checkGameStatus();
            }
        }
        
        function checkGameStatus() {
            if (horseCount === 0 && birdCount === 0 && sharkCount === 0) {
                var message = document.createElement("h2");
                message.textContent = "Congratulations! You placed all the animals correctly!";
                document.body.appendChild(message);
            }
        }
    </script>
</body>
</html>
```