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

No:35293

The Race. Horse vs Leopard (Cheetah)
Developer User16498｜Date and time 24/1/13 22:55:55
Build time 9.839 sec｜Game capacity 2.479KB｜

Script

Sure! Here's a simple HTML game called "The Race: Horse vs Leopard". It simulates a race between a horse and a leopard (cheetah) using pictograms. You can play the game by tapping on the horse or leopard to make them move forward. The first one to reach the finish line wins!

The Race: Horse vs Leopard

To play the game, simply copy and paste the code into a blank HTML file and open it on your smartphone's browser. The race track will be displayed with a horse and leopard (cheetah) icons. Tap on either icon to make them move forward. The first one to reach the red finish line will be declared the winner. Enjoy the race!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>The Race: Horse vs Leopard</title>

#horse,
    #leopard {
      width: 50px;
      height: 50px;
      background-image: url('https://image.flaticon.com/icons/png/512/79/79693.png');
      background-size: cover;
      position: absolute;
      left: 0;
    }

#leopard {
      background-image: url('https://image.flaticon.com/icons/png/512/1126/1126446.png');
    }

#finish-line {
      height: 200px;
      width: 5px;
      background-color: red;
      position: absolute;
      right: 0;
    }
  </style>
</head>
<body>
  <h1>The Race: Horse vs Leopard</h1>
  <div id="race-track">
    <div id="horse"></div>
    <div id="leopard"></div>
    <div id="finish-line"></div>
  </div>

horse.addEventListener('click', function() {
        moveElement(horse);
      });

leopard.addEventListener('click', function() {
        moveElement(leopard);
      });

function moveElement(element) {
        var currentPosition = element.offsetLeft;
        var newPosition = currentPosition + 50;

if (newPosition >= raceTrackWidth) {
          alert(element.id + " wins!");
          resetRace();
        } else {
          element.style.left = newPosition + "px";
        }
      }

function resetRace() {
        horse.style.left = '0';
        leopard.style.left = '0';
      }
    });
  </script>
</body>
</html>
```