Project
Roulette

Bug Race

### Constraints - The developer will need to select the bug icons to be used in the game - The developer should randomly adjust the speed of each bug…

AdvancedWeb appGame16–38hAI-buildable 3/5no setup

In this project you will test your animation skills by creating a game that lets the user race bugs while trying to guess the winner. As part of this you'll need to provide the user with various controls that allow the game to be customized including bug icons, assigning names to the bugs, making a choice of who the winner might be, and bug speed. ### Constraints - The developer will need to select the bug icons to be used in the game - The developer should randomly adjust the speed of each bug before a race starts so they travel at different rates within the speed selected by the user (slow…

UI
Logic
Useful

Hosting · Free forever

Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.

Deploy it and share a link.

Core features · 14

  • User can see:
  • An input panel containing controls to configure the game's UI and
  • A race track consisting of four horizontal lanes the bugs will travel in
  • A radio button associated with each lane to allow the user to select a
  • A 'Start' button.
  • User can see the following controls in the input panel.
  • A list of race lane numbers with radio buttons for each showing
  • An Speed selection control with three radio buttons - Slow, Normal, Fast
  • User can click a radio button to select the bug icon to be assigned
  • User can see an warning message if the same icon is selected for more
  • User can enter a name for the bug in each lane.
  • User can see an error message if the same name is repeated for more than
  • User can select the bug speed by clicking one of the Speed radio buttons
  • User can select a potential winner by clicking on the radio button on

Once it works

  • User can see race metrics for each bug showing the number of races
  • User can see the winning bug bounce when it wins a race
  • User can see loosing bugs flip on their backs when they loose a race
  • User can hear unique sounds played when the race starts and ends.

Suggested stack

reacttypescripttailwindthree.jsreact-hook-formframer-motion

Track it