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

No:35210

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

Script

Animal Placement Game

Drag and drop the animals to their correct habitats before the timer runs out!

Grass

Sea

Sky

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Animal Placement Game</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
      }
      #game-container {
        display: flex;
        justify-content: space-between;
        margin-top: 50px;
      }
      .dropzone {
        width: 200px;
        height: 200px;
        border: 2px dashed #ddd;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .animal {
        width: 80px;
        height: 80px;
        margin: 20px;
        cursor: pointer;
      }
      .animal img {
        max-width: 100%;
        max-height: 100%;
      }
      .success {
        background-color: #a3e4a3;
      }
      .failure {
        background-color: #f49191;
      }
      #countdown {
        margin-top: 10px;
        font-size: 20px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1>Animal Placement Game</h1>
    <p>
      Drag and drop the animals to their correct habitats before the timer runs
      out!
    </p>
    <div id="game-container">
      <div class="dropzone" id="grass">
        <h2>Grass</h2>
      </div>
      <div class="dropzone" id="sea">
        <h2>Sea</h2>
      </div>
      <div class="dropzone" id="sky">
        <h2>Sky</h2>
      </div>
    </div>
    <div id="countdown">30</div>

// Shuffle animal array
      const shuffledAnimals = shuffle(animals);

// Create animal elements
      shuffledAnimals.forEach((animal) => {
        const div = document.createElement("div");
        div.classList.add("animal");
        div.innerHTML = `<img src="animal.png" alt="${animal.name}" draggable="true">`;
        div.addEventListener("dragstart", dragStart);
        document.body.appendChild(div);
      });

// Drag start event handler
      function dragStart(event) {
        event.dataTransfer.setData("animal", event.target.alt);
      }

// Drop event handler
      function drop(event) {
        event.preventDefault();
        const animal = event.dataTransfer.getData("animal");
        const habitat = event.target.id;
        const isCorrect = checkPlacement(animal, habitat);
        event.target.classList.add(isCorrect ? "success" : "failure");
        setTimeout(() => {
          event.target.classList.remove("success", "failure");
        }, 1000);
      }

// Drag over event handler
      function allowDrop(event) {
        event.preventDefault();
      }

// Check if animal is correctly placed
      function checkPlacement(animal, habitat) {
        const correctHabitat = animals.find((a) => a.name === animal).habitat;
        return correctHabitat === habitat;
      }

// Timer countdown
      let countdown = 30;
      const countdownElement = document.getElementById("countdown");
      countdownElement.textContent = countdown;

const countdownInterval = setInterval(() => {
        countdown--;
        countdownElement.textContent = countdown;
        if (countdown === 0) {
          clearInterval(countdownInterval);
          endGame();
        }
      }, 1000);

// End game when timer runs out
      function endGame() {
        const animalElements = document.querySelectorAll(".animal");
        animalElements.forEach((element) => {
          element.draggable = false;
        });
        alert("Game Over! Time's up!");
      }

// Shuffle array function
      function shuffle(array) {
        for (let i = array.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          [array[i], array[j]] = [array[j], array[i]];
        }
        return array;
      }
    </script>
  </body>
</html>