Create a Virtual Roulette Game: HTML & JS Guide

Hey there, fellow coders!
Ever found yourself stuck making a decision in a group? Or maybe you’re looking for a fun, interactive game for your next party? Say no more! Today, I’m going to walk you through building a Virtual Roulette Game using HTML, CSS, and JavaScript. 🎉

By the end, I’ll share the full code on GitHub for you to explore and customize.

Here’s what we’re making:
A spinning roulette wheel where players enter their names, spin the wheel, and let the arrow decide the winner!

Step 1: Setting Up the HTML

We’ll start by creating the structure for our game.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Virtual Roulette Game | Chriskript</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Virtual Roulette</h1>
  <p>Virtual Roulette is an interactive game where players spin a virtual arrow on a roulette-style circle to determine the winner. Perfect for group games, parties, or decision-making. Simply enter players' names, spin the wheel, and let the arrow decide!</p>
  <div id="controls">
    <textarea id="player-names" rows="5" placeholder="Enter player names, one per line"></textarea>
    <br>
    <button id="start-btn">Start</button>
    <button id="reset-btn">Reset</button>
    <button id="mute-btn">Mute Sound</button>
    <div id="winner-announcement" aria-live="polite"></div>
  </div>
  <canvas id="gameCanvas"></canvas>
  <script src="app.js"></script>
</body>
</html>

What’s Happening?

The <textarea> allows users to input player names.
Buttons (Start, Reset, Mute Sound) provide controls for the game.
A <canvas> element serves as the roulette board where all the action happens.

Step 2: Adding Style with CSS

Next, we’ll style the game for a polished look.

body {
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: #f8f9fa;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 36px;
  margin-top: 20px;
  color: #28a745;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  letter-spacing: 2px;
}

p {
  font-size: 16px;
  padding: 10px 20px;
}

canvas {
  margin-top: 20px;
  background-color: #fff;
}

#controls {
  margin-top: 20px;
}
...

Key Elements:

Canvas Styling: Ensures the roulette board is clean and centered.
Button Hover Effects: Gives feedback when users interact with buttons.
Responsive Design: Adjusts styles for smaller screens to keep the UI user-friendly.

Step 3: The JavaScript Magic

Here’s where the fun begins! We’ll use JavaScript to:

Draw the roulette circle and players’ sections.
Spin the arrow.
Handle user interactions.

Let’s break this into parts:

1. Setting Up the Canvas

const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

function resizeCanvas() {
  const size = Math.min(window.innerWidth * 0.8, 500);
  canvas.width = size;
  canvas.height = size;
}
resizeCanvas();

Dynamically adjusts the canvas size to fit any screen.
Uses canvas.getContext("2d") to enable 2D drawing.

2. Drawing the Circle

function drawGameCircle(players) {
  const radius = canvas.width / 2 - 10;
  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;
  const sliceAngle = (2 * Math.PI) / players.length;

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  players.forEach((player, index) => {
    const startAngle = index * sliceAngle;
    const endAngle = startAngle + sliceAngle;
    ...
  });
}

Divides the circle into sections, each representing a player.
Alternates colors for better visibility.

3. Spinning the Arrow

function spinArrow() {
  const duration = 4000; // Spin for 4 seconds
  const endAngle = Math.random() * 2 * Math.PI + 10 * Math.PI;

  function animate() {
    const elapsedTime = Date.now() - startTime;
    if (elapsedTime < duration) {
      arrowAngle = ((elapsedTime / duration) * endAngle) % (2 * Math.PI);
      drawGameCircle(players);
      requestAnimationFrame(animate);
    } else {
      isGameRunning = false;
    }
  }
  animate();
}

Uses requestAnimationFrame for smooth spinning.
Randomly calculates the arrow’s stopping point.

Step 4: Adding Final Touches

We’ll handle:

Starting and resetting the game.
Muting/unmuting the sound.
Displaying the winner.

Final Code on GitHub

The complete source code is available on my GitHub repository:
👉 Virtual Roulette Game on GitHub

Feel free to fork, star, or share it with friends!

And that’s it! You now have a fully functional Virtual Roulette Game. This project is a fantastic way to learn HTML canvas, CSS styling, and JavaScript animations. Play around with the code to make it your own—add themes, animations, or even sound effects.

What will you build next? Share your thoughts in the comments below!

How to Build a Virtual Roulette Game with HTML, CSS, and JavaScript

Table of contents