Skip to content

New Feature: Implement Vanilla JS Roulette Game #195

Description

@Hrishikesh-Dalal

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)

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions