Live time horse race game. Random speeds, the winner always depends on your chance. Select your horse and see who wins.

Overview

Patika Protein Vuejs Bootcamp Final Project

Project Description

In this project, I developed a live-time horse race game that ran 8 horses and 8 straight lines. Before the race starts, you must select a horse and enter the bet amount. If you are out of cash, you can start the game from the beginning by pressing the restart button. After pressing the start button, 3 seconds countdown counts when finished the horses start running. During the run, the speed of the horses is determined randomly at specific intervals. This way, who will win is always determined by the luck factor. There is a leaderboard that changes instantly depending on the position of the horses during the race. The race that starts before all horses cross the line is not over. When the last horse crosses the finish line and the race ends, there is a restart button shows and when it is clicked, the race is ready to start again.

Table of Contents

Live Demo

Netlify Status
Live Demo Link

Installation

  • npm install
  • npm run dev

Technologies

  • Vite - Vue
  • SASS
  • Tailwind CSS

Color Palette

- 'btnprimary':'#473e3a',
- 'bgprimary': '#7b584e',
- 'bgsecondary': '#9b6753',
- 'bggreen': '#328827f0',
- 'blackdark':'#9b6753',

Horses

horse Name: Gulbatur, Color: Red, Racing Line: 1
horseName: Sahbatur, Color: Yellow, Racing Line: 2
horseName: Boldpilot, Color: Light Green, Racing Line: 3
horseName: Yagiz, Color: Light Turquoise, Racing Line: 4
horseName: Yadigar, Color: Blue, Racing Line: 5
horseName: Sipahi, Color: Purple, Racing Line: 6
horseName: Elkizi, Color: Black, Racing Line: 7
horseName: Unicorn, Color: Beige, Racing Line: 8

Game

Bet Screen

Before the race start, you can select the horse that you think wins. You can't set the bet amount to more than your balance. Follow the commands below to select your horse and set your bet.

Bet Values

  1. Select your horse
  2. Set the bet amount
    1. Bet rate is 10x
    2. You can see the possible reward
  3. Click the accept button
  4. Accept the bet if you agree the values are correct.

betgif

If you are out of cash, you can restart the game clicking the restart icon. In this way, the game will be restarted again.

restart


Race Screen

Sections

Top of the screen you can see the leaderboard. At the bottom side, your bet shows. After clicking the start button 3 seconds countdown starts and the race begins.

1- You can follow the race from the live time leaderboard.

2- These are the race lines. You can see the horses.

3- Start button. Click it and the race starts.

4- Your bet screen. You can see the bet options.

race

Race

After finishing the race you can see the finish times and final leaderboard. You can click the restart button to start the race again.

racegif

Bet Win

If your selected horse win the race, you can see how much money you won! GOOD LUCK!

betwin

You might also like...
Vuejs3-solana-boilerplate - An open-source boilerplate to connect your frontend to the Solana network using VueJS 3 with Typescript 0xAliRaza.github.io - A deployment ready web app to showcase your coding portfolio
0xAliRaza.github.io - A deployment ready web app to showcase your coding portfolio

Codefolio as 0xAliRaza.github.io Live Demo | Deployment | About | Features | Con

🗡️ Discover our curated list of creative tools to supercharge your next project.
🗡️ Discover our curated list of creative tools to supercharge your next project.

Tech Stack Tools tech-stack.tools is a curated list of creative tools. Preview Features Discover our curated list of creative tools to supercharge you

The best place to start your Nuxt Theme.

Create Nuxt theme with this GitHub template.

This project provides a good start for most web applications that require authentication and authorization, it uses JWT and role base authorization, if you need a backend check my reposirories I have one that works out of the box Mongo-Express-JWT Boilerplate
A VueJS 3 starter to create Vue applications easily and quickly with Vue Router, Snowpack, TypeScript and SCSS

VueJS 3 Starter ✨ A VueJS 3 starter to create Vue applications easily and quickly with Vue Router, Snowpack, TypeScript and SCSS Architecture ├─ publi

Generate the files and directory structure for a new Sails app using webpack and vue.js

sails generate new Generate the files and directory structure for a new Sails app using webpack and vue.js. installation npm install sails-generate-ne

Gluing Python web frameworks and Vue.js with a set of scripts... basically a wrapper :smile:

Python and Vue.js gule UPDATE At the moment project is not supported anymore, due to the rapid evolving of the JavaScript ecosystem. It was born like

A Vue.js starter kit that lets you focus on more programming and less configuration.

vue-starter A Vue.js starter kit that lets you focus on more programming and less configuration. A full-featured Webpack setup with hot-reload, lint-o

Owner
Alihan
Front-End Developer
Alihan
Starter template for parallax effects & smooth scrolling experience. Empower your Nuxt project in no time.

Starter template for parallax effects & smooth scrolling experience. Empower your Nuxt project in no time.

Ivo Dolenc 39 Nov 24, 2022
A full-fledge Vue 3 + NUI boilerplate to get you developing beautiful and responsive UI's in no time!

A full-fledge Vue 3 + NUI boilerplate to get you developing beautiful and responsive UI's in no time!

Bryce Canyon County Scripts 4 Oct 25, 2022
A song guessing game using the Spotify API. This project is created for a software engineering course at CSUF.

Songuessr The Song Clip Guessing Game This game has three different game modes to test how well someone's music knowledge is based off a small clip of

null 2 Sep 15, 2022
Shamim Hossain 52 Nov 15, 2022
Home-recipes-ui - Manage and search your recipes - UI edition

my-project Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Run

Ryan Benson 0 Jan 8, 2022
Your next vue.js package!

Quickly scaffold a new Vue 2.x package (with @vue/composition-api) without all the headache of setting it up from scratch Preview Usage npx janak <you

Vinayak Kulkarni 25 Nov 27, 2022
📦 Yeoman generator to build your own Vue.js components

generator-vue-component ?? Yeoman generator to build your own Vue.js components Support Vue.js 2 => [email protected]>=2.0.0 [master] Vue.js 1

Nacho Anaya 32 Aug 7, 2019
Vue3 + Vite + WindiCSS (Tailwind) Boilerplate for quick starting your Vue3 app with full support for tailwind

Use this boilerplate to quickly start your Vue3 project with WindiCSS (TailwindCSS), using vite as the build tool. Run the development server git clon

Hasin Hayder 9 Aug 2, 2022
A web app that can improve your study experience in University of Manchester

UoM Assistant An all-in-one productivity tool to help coordinate uni work. Designed for you. Development This project is still under development. Plea

AxtonYao 17 Aug 8, 2022
🪝 Minimalist starting point for your next Vue Composable

?? vue-composable-starter A minimalist starting point for your next Vue composable. ?? TypeScript by default ??️‍♀️ Vue as peer dependency (minimal bu

Yaël Guilloux 48 Oct 16, 2022