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

No:35192

Animal Race. Horse vs Lion vs Cow vs Elephant
Developer User16437｜Date and time 24/1/13 15:51:36
Build time 10.917 sec｜Game capacity 3.232KB｜

Script

Sure! Here's a sample implementation of the Animal Race game using JavaScript and HTML. The game involves a race between a horse, lion, cow, and elephant. It is designed to be played on a smartphone and uses pictograms to represent the animals.

Animal Race

In the above code, you'll need to replace the `src` attribute of the `<img>` tags with the actual file names of the pictograms (e.g., horse.png, lion.png, cow.png, elephant.png). Make sure to include those images in the same directory as the HTML file. When the page loads, the race starts automatically and each animal moves randomly on the race track. After 5 seconds, the race ends, and an alert message is displayed with the winner. Note that this implementation is a basic example and does not include detailed graphics or complex gameplay. Feel free to enhance it further according to your requirements.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Animal Race</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    .animal {
      width: 100px;
      height: 100px;
      margin: 20px;
    }
    #raceTrack {
      margin-top: 50px;
    }
  </style>
</head>
<body>
  <h1>Animal Race</h1>
  <div id="raceTrack">
    <img src="horse.png" alt="Horse" id="horse" class="animal">
    <img src="lion.png" alt="Lion" id="lion" class="animal">
    <img src="cow.png" alt="Cow" id="cow" class="animal">
    <img src="elephant.png" alt="Elephant" id="elephant" class="animal">
  </div>
  
  <script>
    // Function to move an animal randomly
    function moveAnimal(animalId) {
      var animal = document.getElementById(animalId);
      var trackWidth = document.getElementById('raceTrack').offsetWidth;
      var animalWidth = animal.offsetWidth;
      
      var newPosition = Math.floor(Math.random() * (trackWidth - animalWidth));
      animal.style.marginLeft = newPosition + "px";
    }
    
    // Function to start the race
    function startRace() {
      var horseInterval = setInterval(function() {
        moveAnimal('horse');
      }, 1000);
      
      var lionInterval = setInterval(function() {
        moveAnimal('lion');
      }, 1000);
      
      var cowInterval = setInterval(function() {
        moveAnimal('cow');
      }, 1000);
      
      var elephantInterval = setInterval(function() {
        moveAnimal('elephant');
      }, 1000);
      
      setTimeout(function() {
        clearInterval(horseInterval);
        clearInterval(lionInterval);
        clearInterval(cowInterval);
        clearInterval(elephantInterval);
        announceWinner();
      }, 5000);
    }
    
    // Function to announce the winner
    function announceWinner() {
      var animals = document.getElementsByClassName('animal');
      var winner = animals[0];
      
      for (var i = 1; i < animals.length; i++) {
        var currentPosition = animals[i].offsetLeft;
        var winnerPosition = winner.offsetLeft;
        
        if (currentPosition > winnerPosition) {
          winner = animals[i];
        }
      }
      
      var message = "The winner is the " + winner.alt;
      alert(message);
    }
    
    // Start the race when the page loads
    window.onload = startRace;
  </script>
</body>
</html>
```

When the page loads, the race starts automatically and each animal moves randomly on the race track. After 5 seconds, the race ends, and an alert message is displayed with the winner.

Note that this implementation is a basic example and does not include detailed graphics or complex gameplay. Feel free to enhance it further according to your requirements.