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

• Project Description
• Live Demo
• Installation
  • Technologies
  • Color Palette
  • Horses
• Game
  • Bet Screen
    • Bet Values
  • Race Screen
    • Sections
    • Race
    • Bet Win

Live Demo

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

Name: Gulbatur, Color: Red, Racing Line: 1
Name: Sahbatur, Color: Yellow, Racing Line: 2
Name: Boldpilot, Color: Light Green, Racing Line: 3
Name: Yagiz, Color: Light Turquoise, Racing Line: 4
Name: Yadigar, Color: Blue, Racing Line: 5
Name: Sipahi, Color: Purple, Racing Line: 6
Name: Elkizi, Color: Black, Racing Line: 7
Name: 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.

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

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

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

Bet Win

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