DEV Community

Dakshim Chhabra
Dakshim Chhabra

Posted on

Building a Spin Wheel - Part 1, Random Digits in Javascript: Crypto.getRandomValues()

#javascript #beginners

When building a Lucky draw system, whether it's a Jackpot machine, spin wheel, or roulette, the key ingredient is unpredictable randomness.

Most developers are naturally inclined to use Math.random(). Why? Awareness

  • It is one of the methods that is taught in every JavaScript class.
  • Many of us are not aware that it is not truly random and is predictable.

It's based on a pseudo‑random number generator (like xorshift128+), which means its sequence can be predicted. That's why secure systems, such as token generators, hashing methods, OTPs avoid it.

While creating a SpinWheel last week, I hit the same challenge, If not Math.random(), then how to get real randomness?

The answer : window.crypto.getRandomValues()

This API provides cryptographically strong random values, far more secure than Math.random(). It takes a typed array as input and returns a new array of the same type and length, filled with unpredictable numbers.

Usage

Getting the random values

let trulyRandom = new Uint8Array([0]); 
window.crypto.getRandomValues(trulyRandom) 
console.log(trulyRandom[0])
Enter fullscreen mode Exit fullscreen mode

Getting random values from a set of values


// Example: Selecting from an array
let mySet = ['Try Again', '20% Discount', '30% Discount', '40% Discount', '50% Discount'];
let trulyRandomFromSet = new Uint8Array(1);
window.crypto.getRandomValues(trulyRandomFromSet);

// Map to index (0-4)
let randomIndex = trulyRandomFromSet[0] % mySet.length;
console.log(mySet[randomIndex])
Enter fullscreen mode Exit fullscreen mode

If you're building anything where fairness or security matters, skip Math.random(), crypto is your friend.

Next Challenge: Weighted Outcomes

To align the SpinWheel with campaign goals, equal probability isn't enough.

I wanted 50% of users to land on "Try Again" and the other 50% on "Discount."

There are two ways to achieve this:

  • Add more "Try Again" slots to the wheel.
  • Or, implement weighted randomness in the logic, so results follow the desired distribution.

If I choose to add more "Try Again",

then

What about the weightage of other outcomes?
What if I want that '50% Discount' should be reserved for only 1% of users?

It will not be future compatible solution.

In the next part, let's discuss how I can build a weighted randomness logic.

Top comments (0)