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

No:35244

68

The Race. The Animal Touch the Color Blue, He'll G..ALL
Developer User16469｜Date and time 24/1/13 17:50:03
Build time 15.597 sec｜Game capacity 4.573KB｜

Here's a simple game implementation based on your requirements:

The Race: Animal Transformation

Touch the color blue to turn animals into cars, shoot yo-yos, and zebras!

Dog

Horse

Cow

Elephant

To play the game, you would need to have image files of the animals (dog, horse, cow, elephant), as well as for the transformed elements (car, yo-yo, zebra). Ensure the image files are in the same directory as the HTML file and correctly referenced in the JavaScript code (e.g., "emozi_all/play.png", "emozi_all/car.png", etc.). The game starts with the animals (represented by pictograms) displayed on the screen. When you touch the color blue (assuming you tap on the screen or have a blue background), you can click on the dog to transform it into a car. If you touch the color blue again, clicking on any animal will shoot a yo-yo next to it. Otherwise, if the background color is not blue, clicking on an animal will turn it into a zebra. The game continues until all animals have been transformed either into cars or zebras. Once that happens, a "Game Over" message will appear on the screen. Note: This implementation assumes the availability of the necessary image files and some CSS styling for the appearance. You may need to adjust the code accordingly and provide your own image files to match your specific requirements.

→ 　

0　

0　

[PR]現在の欲しいゲームランキング

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

(C)2023 HisashiApp

Here's a simple game implementation based on your requirements:

```html
<!DOCTYPE html>
<html>
<head>
  <title>The Race: Animal Transformation</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    
    #game-container {
      padding: 50px;
    }
    
    #message {
      font-size: 24px;
      margin-bottom: 20px;
    }
    
    #animals {
      display: flex;
      justify-content: space-around;
      margin-top: 20px;
    }
    
    .animal {
      cursor: pointer;
      transition: transform 0.3s;
    }
    
    .animal:hover {
      transform: scale(1.1);
    }
    
    .car {
      width: 100px;
    }
    
    .yo-yo {
      width: 80px;
    }
    
    .zebra {
      width: 120px;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <h1>The Race: Animal Transformation</h1>
    <p id="message">Touch the color blue to turn animals into cars, shoot yo-yos, and zebras!</p>
    <div id="animals">
      <img class="animal" id="dog" src="dog.png" alt="Dog">
      <img class="animal" id="horse" src="horse.png" alt="Horse">
      <img class="animal" id="cow" src="cow.png" alt="Cow">
      <img class="animal" id="elephant" src="elephant.png" alt="Elephant">
    </div>
  </div>

<script>
    // Game logic
    var animals = ["dog", "horse", "cow", "elephant"];
    var currentAnimalIndex = 0;
    var gameOver = false;

function handleAnimalClick() {
      if (gameOver) {
        return;
      }

if (this.id === "dog" && isBlueColor()) {
        transformAnimalIntoCar(this);
      } else if (isBlueColor()) {
        shootYoYo(this);
      } else {
        shootZebra(this);
      }
    }

function transformAnimalIntoCar(animal) {
      animal.src = "car.png";
      animal.classList.add("car");
      animal.removeEventListener("click", handleAnimalClick);
      nextAnimal();
    }

function shootYoYo(animal) {
      var yoYo = document.createElement("img");
      yoYo.src = "yo-yo.png";
      yoYo.classList.add("yo-yo");
      animal.insertAdjacentElement("afterend", yoYo);
      nextAnimal();
      checkGameOver();
    }

function shootZebra(animal) {
      animal.src = "zebra.png";
      animal.classList.add("zebra");
      animal.removeEventListener("click", handleAnimalClick);
      nextAnimal();
      checkGameOver();
    }

function nextAnimal() {
      currentAnimalIndex++;
      if (currentAnimalIndex >= animals.length) {
        currentAnimalIndex = 0;
      }
    }

function checkGameOver() {
      var transformedAnimals = document.querySelectorAll(".car, .zebra");
      if (transformedAnimals.length === animals.length) {
        gameOver = true;
        showMessage("Game Over! All animals transformed.");
      }
    }

function showMessage(text) {
      document.getElementById("message").textContent = text;
    }

function isBlueColor() {
      var rgb = window.getComputedStyle(document.body).getPropertyValue("background-color");
      var components = rgb.match(/\d+/g);
      var r = parseInt(components[0]);
      var g = parseInt(components[1]);
      var b = parseInt(components[2]);
      return (r === 0 && g === 0 && b === 255);
    }

// Event listeners
    var animalElements = document.getElementsByClassName("animal");
    Array.prototype.forEach.call(animalElements, function (animal) {
      animal.addEventListener("click", handleAnimalClick);
    });
  </script>
</body>
</html>
```

To play the game, you would need to have image files of the animals (dog, horse, cow, elephant), as well as for the transformed elements (car, yo-yo, zebra). Ensure the image files are in the same directory as the HTML file and correctly referenced in the JavaScript code (e.g., "dog.png", "car.png", etc.).

The game starts with the animals (represented by pictograms) displayed on the screen. When you touch the color blue (assuming you tap on the screen or have a blue background), you can click on the dog to transform it into a car. If you touch the color blue again, clicking on any animal will shoot a yo-yo next to it. Otherwise, if the background color is not blue, clicking on an animal will turn it into a zebra.

The game continues until all animals have been transformed either into cars or zebras. Once that happens, a "Game Over" message will appear on the screen.

Note: This implementation assumes the availability of the necessary image files and some CSS styling for the appearance. You may need to adjust the code accordingly and provide your own image files to match your specific requirements.