How to implement roulette?

Question

JavaScript

It became interesting how all these roulettes work on sites, as well as how all this is protected from substitution.

A banal example is a generated array of values.
For example, we have unique values: From them we form a unique array of values ​​for the game:
items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

items_for_game = [3, 4, 4, 7, 1, 9, 10, 1, 4, 7, 6, 2, 9, 8, 2, 2, 10, 3, 6, 4 6, 4, 8, 9, 10, 4, 3, 6, 2, 4]

On the site, we form a horizontal ribbon from them. Moreover, it is cyclical. This tape consists of a group hidden from the user's eyes:

<input type="radio" name="items" value="тут номер из массива выше">

By pressing the button, this tape starts spinning.
Every second, a value is subtracted from the starting speed, which causes the tape to stop.

And at this stage, three main questions are brewing:
1. How to implement scrolling of the ribbon? After all, a simple slide is clearly not enough here? Or is it still a banal slide?
2. Let's say we figured out the first point. How to identify an element? I mean how to identify the selected element? For example, the selected element is the one that was in the center of the block after the tape stopped.
3. How to get rid of fraud? I perfectly understand that everything that is in the HTML code can be easily edited by the user. Including those same IDs from the input radio. This eliminates the desire to use input radio - this is no longer necessary. In short, the third point is closely related to the second. How to implement it?

I can assume that instead of the items_for_game array, we create an items_for_game object, with keys from 0 to N. Next, we get a random number of the element to which we adjust the tape stop (this is no longer: "Some value is subtracted from the starting speed every second, which leads to tape stop.").

In general, experts, what do you say? :)

Answer 1

The server gives out the id of the picture and it decides which number will fall out, and torsion is just for beauty...

Answer 2

1. the server gives out the required number,
2. the roulette spins to the maximum and starts to rotate at maximum speed (it is even possible that it is very slow - this is not important),
3. the braking animation is positioned at the desired degree of the closed wheel so that at the moment of stopping it falls out ( as it were))) the desired number (which the server has already issued), and from that moment on, the roulette wheel starts to slowly stop according to the formula, falling exactly on this number.
4. Honesty: generating a series of numbers along with the order of the drop, hashing this sequence with a "salt", outputting the hash and the length of the series (number of spins) before the game starts. After the end of a series of spins - showing the "salt" and the whole series of numbers so that people can check according to the public, well-known hash formula.

Answer 3

The main question is "How to get rid of fraud?"
The answer to it is that all decisions must be made by the server and only on the basis of reliable data (which can only be changed by the server itself).
The rest is the implementation details of the interface.
And even in this case, you can find weaknesses if you try, for example, the dependence of the dropped numbers on the current time.