New Feature: Implement Vanilla JS Roulette Game #195
Description
Project slug (e.g., snake, todo)
No response
Summary
Create a functional European-style roulette game using only Vanilla JS, HTML, and CSS. The app needs a visual wheel and table, betting logic, and a complete game loop (bet, spin, payout).
Core Features
[ ] UI Structure:
[ ] Create a visual roulette wheel (0-36, correct colors).
[ ] Create a clickable betting table grid (numbers, sections, etc.).
[ ] Add UI elements for:
Player balance.
Chip selection ($5, $10, $25, $100).
"Spin" and "Clear Bets" buttons.
A message area for results (e.g., "Winner is 14 Red!").
[ ] Betting Logic:
[ ] Initialize player balance (e.g., $1000).
[ ] Allow player to select a chip and click the table to place a bet.
[ ] Subtract bet amount from balance immediately.
[ ] Store all active bets in an array/object.
[ ] "Clear Bets" button refunds active bets and clears them from the table.
[ ] Game Loop (Spin & Payout):
[ ] "Spin" button:
Disables further betting.
Generates a random winning number (0-36).
Animates the wheel spinning to the winning number.
[ ] After spin:
Display the winner in the message area.
Place a "marker" on the winning number on the table.
Check all placed bets against the winning number.
Calculate and add payouts to the player's balance (e.g., 1:1 for color, 35:1 for single number).
After a short delay, clear the board and re-enable betting.
Details / Acceptance criteria
No response
Scope
- UI changes
- Logic changes
- Accessibility
- Tests (manual)