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

No:35208

Place the Elephant, Zebra, Giraffe and Lion to the..ALL
Developer User16437｜Date and time 24/1/13 16:08:03
Build time 11.532 sec｜Game capacity 2.751KB｜

Script

Sure! Here's a simple game that you can play as a finished game. It uses pictograms and is designed for smartphone operation. The game requires you to place animals in their respective environments - Elephant, Zebra, Giraffe, and Lion in the grass, Fish, Shark, and Whale in the sea, and Bird, Bat, and Bee in the sky. To play the game, simply drag and drop the animal pictograms to their correct locations. Here's the code you can use:

Animal Placement Game

Grass

Sea

Sky

Animal Inventory

Note: Make sure you replace the image file paths (`emozi_all/elephant.png`, `emozi_all/zebra.png`, etc.) within the code with the actual paths to the pictogram images you want to use. You can also customize the CSS styles to match your design preferences.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

To play the game, simply drag and drop the animal pictograms to their correct locations. Here's the code you can use:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Animal Placement Game</title>
  <style>
    #grass, #sky, #sea {
      width: 300px;
      height: 300px;
      border: 1px solid black;
      margin-bottom: 10px;
    }
    
    .animal {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      margin: 5px;
      display: inline-block;
      cursor: move;
    }
  </style>
</head>
<body>
  <h1>Animal Placement Game</h1>
  
  <h2>Grass</h2>
  <div id="grass" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  
  <h2>Sea</h2>
  <div id="sea" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  
  <h2>Sky</h2>
  <div id="sky" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  
  <h2>Animal Inventory</h2>
  <div>
    <img class="animal" src="elephant.png" draggable="true" ondragstart="drag(event)">
    <img class="animal" src="zebra.png" draggable="true" ondragstart="drag(event)">
    <img class="animal" src="giraffe.png" draggable="true" ondragstart="drag(event)">
    <img class="animal" src="lion.png" draggable="true" ondragstart="drag(event)">
    <img class="animal" src="fish.png" draggable="true" ondragstart="drag(event)">
    <img class="animal" src="shark.png" draggable="true" ondragstart="drag(event)">
    <img class="animal" src="whale.png" draggable="true" ondragstart="drag(event)">
    <img class="animal" src="bird.png" draggable="true" ondragstart="drag(event)">
    <img class="animal" src="bat.png" draggable="true" ondragstart="drag(event)">
    <img class="animal" src="bee.png" draggable="true" ondragstart="drag(event)">
  </div>
  
  <script>
    function allowDrop(event) {
      event.preventDefault();
    }
    
    function drag(event) {
      event.dataTransfer.setData("text", event.target.src);
    }
    
    function drop(event) {
      event.preventDefault();
      var src = event.dataTransfer.getData("text");
      var img = document.createElement("img");
      img.src = src;
      img.className = "animal";
      event.target.appendChild(img);
    }
  </script>
</body>
</html>
```

Note: Make sure you replace the image file paths (`elephant.png`, `zebra.png`, etc.) within the code with the actual paths to the pictogram images you want to use. You can also customize the CSS styles to match your design preferences.