The Race. The Animal touch the Blue Wins, The Animal touch the Red a Yo-Yo or a Zebra Appears. Dolhpin vs Shark vs Whale vs Octopus's game | AI game creator

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

No:35241

39

The Race. The Animal touch the Blue Wins, The Ani..ALL
Developer User16469｜Date and time 24/1/13 17:46:44
Build time 12.423 sec｜Game capacity 3.188KB｜

Sure! Here's an example of a simple game called "The Race" implemented as a single HTML file using JavaScript. The game involves animals racing, and if the player touches the blue area, they win. If they touch the red area, a yo-yo or a zebra appears. The game is designed for smartphone operation and uses pictograms for the animals.

🐬

🦈

🐋

🐙

Touch the blue area to win!

This HTML file creates a race track (`race-area`) with four animals represented by pictograms (`dolphin`, `shark`, `whale`, `octopus`). The blue area (`blue-area`) and the red area (`red-area`) are the trigger points for the game. When the blue area is touched, the player wins, and when the red area is touched, a random extra item (yo-yo or zebra) is shown. Please note that this implementation is basic and does not involve any actual race or animation. It's meant to demonstrate the logic and interaction within the game. You can further enhance the game by adding race animation or additional features as per your requirements.

→ 　

0　

0　

[PR]現在の人気グッズランキング

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

(C)2023 HisashiApp

Sure! Here's an example of a simple game called "The Race" implemented as a single HTML file using JavaScript. The game involves animals racing, and if the player touches the blue area, they win. If they touch the red area, a yo-yo or a zebra appears. The game is designed for smartphone operation and uses pictograms for the animals.

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    .race-area {
      width: 100%;
      height: 400px;
      background-color: lightgray;
      position: relative;
    }
    
    .animal {
      position: absolute;
      font-size: 40px;
    }
    
    .dolphin {
      left: 10px;
      top: 170px;
    }
    
    .shark {
      left: 10px;
      top: 250px;
    }
    
    .whale {
      left: 10px;
      top: 330px;
    }
    
    .octopus {
      left: 10px;
      top: 410px;
    }
    
    .blue-area {
      width: 100px;
      height: 400px;
      background-color: blue;
      position: absolute;
      right: 0;
      z-index: -1;
    }
    
    .red-area {
      width: 100px;
      height: 400px;
      background-color: red;
      position: absolute;
      left: 0;
      z-index: -1;
    }
    
    .message {
      font-size: 20px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div class="race-area">
    <div class="animal dolphin">🐬</div>
    <div class="animal shark">🦈</div>
    <div class="animal whale">🐋</div>
    <div class="animal octopus">🐙</div>
    <div class="blue-area"></div>
    <div class="red-area"></div>
  </div>
  <div class="message">Touch the blue area to win!</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
      var raceArea = document.querySelector(".race-area");
      raceArea.addEventListener("touchend", handleTouch);

function handleTouch(event) {
        var target = event.target;
        var animal = target.classList[1]; // class format: "animal dolphin"

if (target.classList.contains("blue-area")) {
          showWinMessage();
        } else if (target.classList.contains("red-area")) {
          showExtraItem();
        }
      }

function showWinMessage() {
        var message = document.querySelector(".message");
        message.textContent = "Congratulations! You won!";
      }

function showExtraItem() {
        var message = document.querySelector(".message");
        var randomItem = Math.random() < 0.5 ? "🪀 (Yo-Yo)" : "🦓 (Zebra)";
        message.textContent = "Oops! An extra item appeared: " + randomItem;
      }
    });
  </script>
</body>
</html>
```

This HTML file creates a race track (`race-area`) with four animals represented by pictograms (`dolphin`, `shark`, `whale`, `octopus`). The blue area (`blue-area`) and the red area (`red-area`) are the trigger points for the game. When the blue area is touched, the player wins, and when the red area is touched, a random extra item (yo-yo or zebra) is shown.

Please note that this implementation is basic and does not involve any actual race or animation. It's meant to demonstrate the logic and interaction within the game. You can further enhance the game by adding race animation or additional features as per your requirements.