🏁 Emoji Car Race

index.html

<style>:root{color-scheme:dark}
div {
  margin-left: 100px;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
</style>
<h1>🏁 Emoji Car Race</h1>
A super simple racing simulation game for fun and learning.
<p id=o></p>
<script>
const CARS = [..."🚓🚕🚗🚙🛻🚚🚛🚒🚐🚑🚌🚜🚝🚃🚋"];
const RACE_DISTANCE = 200;
const SPEED = 2;
const racers = [];

// initialize
for (i = CARS.length; i--;) racers.push({
  emoji: CARS[i],
  distance: 0,
});

let winner = null;
const restart = () => {
  for (const racer of racers) racer.distance = 0;
  winner = null;
  loop();
};
const loop = () => {
  if (!winner) {
    for (const racer of racers) {
      racer.distance += Math.random() * SPEED;
    }
    for (const racer of racers) {
      if (racer.distance >= RACE_DISTANCE) winner = racer;
    }
    setTimeout(loop, 16);
  }
  o.innerHTML = (winner ? `<h2>${winner.emoji} Wins! <button onclick="restart()">🔄️ Restart</h2>` : "")
    + racers.map(({emoji, distance}) => `<div style="margin-left: ${RACE_DISTANCE - distance}px">${emoji}</div>`).join``;
};
loop();
</script>