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

No:35209

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

Script

Sure! Here's a simple game where you need to drag and drop animals to their respective habitats. Since you mentioned using pictograms, I'll use simple shapes to represent the animals. Please keep in mind that this implementation is just a basic example and can be expanded upon to make it more interactive and engaging. Here's the code:

Animal Habitat Game

🦒

🦍

🦎

🦁

🐠

🐳

🐦

🐺

🐝

To play the game, simply open the HTML file in your web browser, and you'll see the animal shapes (pictograms) displayed on the screen. You can click and drag any animal to its respective habitat by dropping it onto the grass, sea, or sky. The animals will snap to the correct habitat once dropped. Note: This is a basic implementation, and there are many ways you can enhance the game, such as adding score tracking, time limits, and more interactive features.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

Here's the code:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Animal Habitat Game</title>
  <style>
    #game {
      width: 600px;
      height: 400px;
      border: 1px solid #000;
      margin: 0 auto;
      position: relative;
    }

.animal {
      width: 50px;
      height: 50px;
      position: absolute;
      cursor: pointer;
    }

#grass {
      background-color: green;
    }

#sea {
      background-color: blue;
    }

#sky {
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <h1>Animal Habitat Game</h1>

const animals = document.querySelectorAll('.animal');

animals.forEach(animal => {
      animal.addEventListener('dragstart', dragStart);
      animal.addEventListener('dragend', dragEnd);
    });

grass.addEventListener('dragover', dragOver);
    grass.addEventListener('dragenter', dragEnter);
    grass.addEventListener('dragleave', dragLeave);
    grass.addEventListener('drop', drop);

sea.addEventListener('dragover', dragOver);
    sea.addEventListener('dragenter', dragEnter);
    sea.addEventListener('dragleave', dragLeave);
    sea.addEventListener('drop', drop);

sky.addEventListener('dragover', dragOver);
    sky.addEventListener('dragenter', dragEnter);
    sky.addEventListener('dragleave', dragLeave);
    sky.addEventListener('drop', drop);

function dragStart() {
      this.className += ' hold';
      setTimeout(() => (this.className = 'invisible'), 0);
    }

function dragEnd() {
      this.className = 'animal';
    }

function dragOver(e) {
      e.preventDefault();
    }

function dragEnter(e) {
      e.preventDefault();
      this.className += ' hovered';
    }

function dragLeave() {
      this.className = 'animal';
    }

function drop() {
      this.className = 'animal';
      this.append(document.querySelector('.hold'));
    }
  </script>
</body>
</html>
```

Note: This is a basic implementation, and there are many ways you can enhance the game, such as adding score tracking, time limits, and more interactive features.