The Run. You Are a Zebra, Watch Out for the Lion, The Elephant and The Giraffe Protects You, Find 10 Rocks to Win's game

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

No:35376

←

Prev Next

→

The Run. You Are a Zebra, Watch Out for the Lion, ..ALL
Developer User16498｜Date and time 24/1/14 9:22:55
Build time 15.653 sec｜Game capacity 4.962KB｜

Script

Sure! Here's a simple game implemented as a single HTML file using JavaScript:

Please make sure to replace the image file names (zebra.png, lion.png, elephant.png, giraffe.png, rock.png) with your own images if you have them. This code will display the zebra on the screen, and the player can move it using the arrow keys. The objective is to collect 10 rocks while avoiding collisions with the lion, elephant, and giraffe. If the player is caught by any of these animals, they lose, and if they collect all 10 rocks, they win. Please note that you would need to provide your own images and update the image URLs accordingly for the game to work properly.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

Sure! Here's a simple game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Zebra's Adventure</title>
  <style>
    #game {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
  </style>
</head>
<body>
  <div id="game">
    <img id="zebra" src="zebra.png" alt="Zebra" width="100" height="100">
  </div>

// Function to check if two elements collide
    function checkCollision(elem1, elem2) {
      const rect1 = elem1.getBoundingClientRect();
      const rect2 = elem2.getBoundingClientRect();
      return (
        rect1.left < rect2.right &&
        rect1.right > rect2.left &&
        rect1.top < rect2.bottom &&
        rect1.bottom > rect2.top
      );
    }

// Function to handle zebra movement
    function handleMovement(event) {
      const zebra = document.getElementById("zebra");
      const keyCode = event.keyCode;

let x = parseInt(zebra.style.left) || 0;
      let y = parseInt(zebra.style.top) || 0;

if (keyCode === 37) { // Left
        x -= 10;
      } else if (keyCode === 38) { // Up
        y -= 10;
      } else if (keyCode === 39) { // Right
        x += 10;
      } else if (keyCode === 40) { // Down
        y += 10;
      }

// Update zebra's position
      zebra.style.left = x + "px";
      zebra.style.top = y + "px";

// Check for collisions with other animals
      const animals = document.getElementsByClassName("animal");
      for (const animal of animals) {
        if (checkCollision(zebra, animal)) {
          alert("Game Over! You were caught by an animal.");
          location.reload();
          break;
        }
      }

// Check if zebra collected 10 rocks to win
      const rocks = document.getElementsByClassName("rock");
      if (rocks.length === 10) {
        alert("Congratulations! You collected 10 rocks and won the game.");
        location.reload();
      }
    }

// Create the animals and rocks on the screen
    window.onload = function() {
      const game = document.getElementById("game");

// Create lion
      const lion = document.createElement("img");
      lion.src = "lion.png";
      lion.alt = "Lion";
      lion.width = 100;
      lion.height = 100;
      lion.classList.add("animal");
      lion.style.position = "absolute";
      lion.style.top = getRandomPosition().y + "px";
      lion.style.left = getRandomPosition().x + "px";
      game.appendChild(lion);

// Create elephant
      const elephant = document.createElement("img");
      elephant.src = "elephant.png";
      elephant.alt = "Elephant";
      elephant.width = 100;
      elephant.height = 100;
      elephant.classList.add("animal");
      elephant.style.position = "absolute";
      elephant.style.top = getRandomPosition().y + "px";
      elephant.style.left = getRandomPosition().x + "px";
      game.appendChild(elephant);

// Create giraffe
      const giraffe = document.createElement("img");
      giraffe.src = "giraffe.png";
      giraffe.alt = "Giraffe";
      giraffe.width = 100;
      giraffe.height = 100;
      giraffe.classList.add("animal");
      giraffe.style.position = "absolute";
      giraffe.style.top = getRandomPosition().y + "px";
      giraffe.style.left = getRandomPosition().x + "px";
      game.appendChild(giraffe);

// Create rocks (goal)
      for (let i = 0; i < 10; i++) {
        const rock = document.createElement("img");
        rock.src = "rock.png";
        rock.alt = "Rock";
        rock.width = 50;
        rock.height = 50;
        rock.classList.add("rock");
        rock.style.position = "absolute";
        rock.style.top = getRandomPosition().y + "px";
        rock.style.left = getRandomPosition().x + "px";
        game.appendChild(rock);
      }

// Handle zebra movement on arrow key press
      document.addEventListener("keydown", handleMovement);
    };
  </script>
</body>
</html>
```

Please note that you would need to provide your own images and update the image URLs accordingly for the game to work properly.