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

Overview

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
You might also like...
A Vue component for including inline SVG icons from different popular icon packs easily.

Oh, Vue Icons! English | 中文说明 A Vue component for including inline SVG icons from different popular icon packs easily. Features Tree-shakable, which a

A website to get information on covid cases, deaths and recovered cases.Responsive over different screen sizes.
A website to get information on covid cases, deaths and recovered cases.Responsive over different screen sizes.

covid-tracker As it is hosted on free to use service Glitch, it can take about 10-15 seconds for the website to wake up. A website to view covid cases

Cheat Facebook Algorithms is a tool that tries to simulate arabic chars shape with different unicode to cheat Facebook Algorithms.

Cheat Facebook Algorithms is a tool that tries to simulate arabic chars shape with different unicode to cheat Facebook Algorithms.

Lingtrain Alignment Studio is the ML based app for accurate texts alignment on different languages.
Lingtrain Alignment Studio is the ML based app for accurate texts alignment on different languages.

Lingtrain Alignment Studio is an ML based app for texts alignment on different languages. It can produce parallel corpora and parallel books.

A Vue component for importing inline SVG icons from different popular icon packs easily.

A Vue component for importing inline SVG icons from different popular icon packs easily.

Different UI for laravel/breeze.
Different UI for laravel/breeze.

Different UI for laravel/breeze.

 A Speckle app to compare different commits and visualize the results
A Speckle app to compare different commits and visualize the results

Speckle | AEC Tech Masterclass A Speckle app to compare different commits and visualize the results Speckle is data infrastructure for the AEC industr

Best laptops, phones and earphones suggestions in different price ranges for india

best-products Build Setup # install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for production and la

Clocks: simple site that allow you to save clocks from different timezones
Clocks: simple site that allow you to save clocks from different timezones

Clocks Clocks - simple site that allow you to save clocks from different timezones. Features Custom name for timezone Find timezone relative to your c

An elegant way to convert quantities between different units.

convert-units A handy utility for converting between quantities in different units. Installation npm install convert-units --save # beta builds are al

A chrome extension that allows a YouTube watcher to 'bookmark' different parts of a video so that they could come back to it later
A chrome extension that allows a YouTube watcher to 'bookmark' different parts of a video so that they could come back to it later

A chrome extension that allows a YouTube watcher to 'bookmark' different parts of a video so that they could come back to it later. This is a personal project for fun and learning.

A generic player for playing different types of content (questions, etc.) in a mobile-friendly webapp

Content Set Player A generic player for playing different types of content (questions, etc.) in a mobile-friendly webapp. Table of Contents Project Se

A generic player for playing different types of content (questions, etc.) in a mobile-friendly webapp

Question Set Player A generic player for playing different types of questions (mcq, subjective, images, audio etc.) in a mobile-friendly webapp. Table

Full-stack @Linkedin clone but this one is a little different 👨🏻‍💻
Full-stack @Linkedin clone but this one is a little different 👨🏻‍💻

Linkedout Running project $ docker-compose up Accessing the linkedout from a browser The starter linkedout works with a load balancer that binds to po

This project contains the main feature that can demonstrate the typing effect, using different HTML tags.

This project contains the main feature that can demonstrate the typing effect, using different HTML tags. It was inspired when I was creating my own project and need writing animation, but the components that I found, it is creating spans and I need to manage the text as a label, so my word doesn't seem cut in half.

You know there are too many JavaScript libraries when there is a game for it 🎯
You know there are too many JavaScript libraries when there is a game for it 🎯

JavaScript Guessing Game You know there are too many JavaScript libraries when there is a game for it Description React, Flux, Angular, Aurelia, TypeS

Multiplayer online chess game use Vue , Nodejs, Webpack, Em6, Socket.io, Mongodb, Express
Multiplayer online chess game use Vue , Nodejs, Webpack, Em6, Socket.io, Mongodb, Express

VueChess Users can create private or public games against other real-time player or against the computer by choosing color, time and type of starting,

Vue.js + Vue Router + Vuex in a simple Stock Trading game

Vue.js Stock Trader Game A simple game created for learning the Vue.js ecosystem. This project makes use of following: Modules: Vue.js - Framework Vue

Snake game on Vue.js without canvas
Snake game on Vue.js without canvas

vue-snake-game Snake game on Vue.js without canvas Click here to play online on GitHub pages Project setup yarn install Compiles and hot-reloads for

Owner
Abdullah KUŞ
Frontend Web Developer | Vue.js - React.js
Abdullah KUŞ
Minesweeper game built with Vue, Vuex, Vuetify, and SCSS

Minesweeper ?? Table of Contents About Screenshots Technology Install ?? About Minesweeper game built with Vue, Vuex, Vuetify, and SCSS. You can try i

Ahmed Ashraf 20 Apr 20, 2022
Real-time multiplayer game where you place colored pixels on a giant paintings

⚡ Vite + Vue 3 + Tailwind CSS ✔ This starter template includes: Vite Vue 3 Tailwind CSS v3 Vue Router v4 Inter var font (self-hosted, woff2, v3.19, wi

Tina Wang 4 Oct 11, 2022
This project is the Vue.js Bootcamp graduation project organized by Protein-Patika. The application is a real-time race of horses running in 8 different lanes on a straight route.

Protein Vue.js Bootcamp Final Case Protein Vue.js Bootcamp Final Case ??️ Built With ✨ Live Version You can see the live version here. ??️ About This

Emircan DEMİR 3 Nov 25, 2022
Labyrinth is a family board game. This project aims to recreate the game as a online multiplayer game, develop understanding of the game's complexity and implement practical search algorithms.

Labyrinth Labyrinth is a family board game. This project aims to recreate the game as a online multiplayer game, develop understanding of the game's c

Julian Arz 7 Jun 4, 2022
MemoRandom is a card game in which cards are laid face down on a surface and cards are flipped face up over each turn. The object of the game is to turn over pairs of matching cards.

MemoRandom - Halloween 2021 DressCode.ing Challenge MemoRandom is a card game in which cards are laid face down on a surface and cards are flipped fac

Mladen Draganović 2 May 18, 2022
Spy Fall (Game) Website - A game of Spyfall is made up of several short rounds

A game of Spyfall is made up of several short rounds. In each round the players find themselves in a certain location with a specific role assigned to each player. One player is always a spy who doesn't know where they are.

Áom | Siriwat J. 3 Aug 23, 2022
An exemplary real-world application built with Vue.js, Vuex, axios and different other technologies. This is a good example to discover Vue for beginners.

Vue.js codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API. Project demo is availa

Thinkster 4k Nov 24, 2022
Play your own videos in background responsively in different resolutions.

Responsive Video Background Player for Vue 2 & 3 ⚡️ If you are looking to play videos in the background, you have found the best Vue package for it ??

Avido Food 230 Nov 20, 2022
A plugin for formatting currency for different countries in Vue

v-currency A plugin for formatting currency in Vue.js Usage Vue.use(Currency, { "type": "USD", "thousandSeparator": true, }); In order to use i

Brian Greig 25 Oct 20, 2022
Vue composition-api composable components. i18n, validation, pagination, fetch, etc. +50 different composables

vue-composable Out-of-the-box ready to use composables ?? TreeShakable ??‍♂️ Fully Typescript ?? Vue 3 and 2 support ?? Vue Devtools support Introduct

Carlos Rodrigues 1k Nov 20, 2022