Lucky Spin Wheel Game in JavaScript:

Abstract

Lucky Spin Wheel is a browser game where you bet play-money coins, spin a prize wheel, and get paid based on where it stops. The wheel has eight segments, from 0x (you lose the bet) up to a 50x jackpot. The landing spot comes from weighted random selection, so the odds are exact numbers you can calculate and defend in a viva.

Every player gets a profile with a wallet, transaction history and career stats. All profiles feed one leaderboard. The whole thing lives in a single index.html file. No framework, no backend, no build step.

What This Project Actually Does

You open the page and type a name. New name? You start with 100 coins. Existing name? You pick up where you left off, because everything is saved in the browser's localStorage.

Then you set a bet (minimum 10 coins) and hit Spin. The bet leaves your wallet, the wheel spins for about four seconds, and it slows down on a segment. Land on 2x with a 50-coin bet and you get 100 back. Land on 0x and the coins are gone. A popup shows the bet, the segment and your net profit or loss.

One detail examiners tend to like: the result is decided before the animation starts. The spinning is only a show of a result that already exists, so animation timing can never affect fairness.

Key Features

Wallet and players

• Name-based profiles, case-insensitive, so "Ali" and "ali" are the same person.
• Several players can share one device, and Switch Player keeps everyone's progress intact.
• Add Coins accepts any whole amount up to 1,000,000, or you can tap +50, +100 or +500.
• The balance sits in a sticky header and bumps with a small animation whenever it changes.

Betting and the wheel

• Bet chips for 10, 50, 100, 500 and Max, plus validation messages like "Not enough coins, add more."
• A canvas-drawn wheel with a gold rim, decorative bulbs and a fixed pointer, sharp even on high-DPI phone screens.
• A 4-second spin with ease-out motion and 5 to 6 full turns before it settles.
• Every control locks while the wheel is moving, so nobody can double-spin by mashing a button.

Feedback and stats

• Confetti on any payout of 50 coins or more, with a bigger burst for the jackpot.
• Sound effects generated in code with the Web Audio API (whoosh, peg ticks, win arpeggio, a sad "wah" on a loss). There are zero audio files to manage.
• Personal stats: spins, wins, losses, total won, total lost, net profit, biggest win.
• A leaderboard ranked by net profit, with ties broken by number of spins.

How the Wheel Decides (The Part Your Examiner Will Ask About)

Each segment has an integer weight, and the weights add up to 1000. The code rolls a random number between 0 and 1000, then walks through the segments subtracting weights until the roll goes negative. That's cumulative roulette-wheel selection. The 0x segment has weight 300, so it comes up 30% of the time. The jackpot has weight 2, so 0.2%.

From those numbers you can work out the expected return: 870 / 1000, about 87%. In plain words, the game gives back roughly 87 coins for every 100 wagered over the long run. That one calculation fills a surprising amount of report space, in a good way.

The Honest Bit: What's Hard and What's Easy

The hard part is the angle maths. Landing the wheel on a chosen segment means working in radians, starting from 3 o'clock, with the pointer at the top (minus pi over 2). You compute a target angle inside the winning slice, add a bit of random jitter so the stop looks natural, then add extra full turns. Read the code twice and it clicks. Read it once and it looks like witchcraft.

The easy part? Running it. Double-click index.html and it works. You don't need Node, npm, a database or an API key.

Real-World Applications

• A starter for a "spin to win" reward screen in a quiz or learning app, where the segments become discount coupons or bonus points.
• A classroom demo for probability: weighted random selection, expected value and house edge with a live example.
• A quick prototype for game designers to test how odds and multipliers feel before building a bigger game.
• An icebreaker or raffle-style game at college fests, played with fake coins on a shared laptop.

Play money only, by the way. Nothing here touches real payments, and you shouldn't adapt it to real money without proper licensing and legal review.

Tech Behind It

HTML5 for structure, CSS3 for the dark glassmorphism look (custom properties, grid, flexbox, keyframe animations), and vanilla JavaScript for everything else. The wheel and confetti are drawn on the Canvas 2D API, animation runs on requestAnimationFrame, sound comes from oscillators and gain nodes in the Web Audio API, and data persists in localStorage under one key.

Player names are written with textContent, never innerHTML, so a sneaky name can't inject script into the page. Small thing, but it's a good security talking point.

Who Should Buy This

If you're a student who needs a working project for your college submission, final-year project, semester project, internship, or academic demonstration, this is for you. Whether you're studying BCA, B.Tech, MCA, M.Tech, Computer Science, IT, AI, Data Science, or another related field, you can choose a project that fits your requirements. If you need the source code, project report, documentation, or help setting up and running the project, CodeAj gives you the resources and support to get started faster.

Look, one honest note. This is a front-end project with no database or server. For a BCA mini project or semester submission it's a great fit. For a major final year project, most colleges expect more depth, so plan to extend it. A Node and Express backend with a real global leaderboard is the obvious upgrade, and it makes a strong story for your viva.

Why CodeAj

You get the full source code, a project report written for college submission, and setup support if something refuses to run at 11 PM the night before your review. We'd rather you understand what you're submitting than just own it.

Explore More Projects

Want something similar? Browse more HTML and CSS projects with source code, check the game development project category, or see our mini project ideas for final year students if you need something quick.

Known Limitations

• The leaderboard is per device and per browser. Without a server, players on different phones can't see each other.
• Balances live in localStorage, so anyone with developer tools can edit them. Fine for play money, useless for competition.
• Refresh in the middle of a spin and that bet is lost, because the payout only lands when the animation ends.

Mention these in your report yourself. Examiners trust students who know their project's weak spots.