Wingless Birds

This is a game where horses compete in 8 different lanes.

Check out the live example.

General Features

  • Custom horse names
  • Live leaderboard
  • Results list with lane number and horse name

Components

RaceTrack

  • It is where the race takes place.
  • When the race starts, the horses complete the race by progressing between 0.01-1 within every 50 milliseconds.

RaceTrack

Horse Names

  • Where horses are named.
  • It checks if any horse’s name is empty and disables the start (button) according to the starting status of the race.

Horse Names

Leaderboard

  • It is the interface shown at the time of the race.
  • Sorts the horses with their names within the 100 position and instantly according to these values.

Leaderboard

Result

  • At the end of the race, it shows the results and provides a restart (button) to bring the race to the starting position.
  • It prints the horse’s name and lane number on the screen according to the order of finishing the race.

Result

Technologies

  • Vue.js
  • Pinia
  • Scss

GitHub

View Github