7

What's the best way to emulate a spinning roulette wheel in HTML5?

The wheel spinning should be controllable by some input (i.e., speed of spinning based on some user input). The wheel labels should blur as the wheel spins fast, but as the spinning slows, the labels on the wheel become more and more readable.

Are there HTML5 libraries that support this, or do the animations need to be programmed by hand?

This also needs to be supported on iOS devices.

Crashalot
  • 33,605
  • 61
  • 269
  • 439

3 Answers3

16

It can be done in a few lines of CSS.

Blurring is an optical effect, it doesn't need to be simulated.

katspaugh
  • 17,449
  • 11
  • 66
  • 103
  • 1
    Thanks! One question we didn't ask, though, was what's the best way to determine which number was "landed on?" Is there a simple way for doing this? One approach we can think of is to keep the wheel still and make a pointer inside the wheel spin around. Based on how the pointer lands, we can determine which number was landed on. Not ideal, but it would be functional. – Crashalot Oct 05 '11 at 22:18
  • 1
    If the pointer is zero degrees north of the wheel, and a number section angle equals, say, 10 degrees, then if you spin the wheel by 400 degrees you point at the 4th number (`(400 - 360) / 10`). – katspaugh Oct 05 '11 at 22:23
10

If anyone is interested in doing this using Javascript and HTML5 canvas, see http://www.dougtesting.net/winwheel/index.html for an example. Cool thing is the code is available for download too.

Zarock
  • 101
  • 1
  • 2
  • 1
    That's a great demo. It might be useful to provide a snippet from that here in the event you move or delete that demo page at some time in the future. – Marvo Nov 23 '12 at 23:48
  • 4
    Welcome to Stack Overflow! Thanks for posting your answer! Please be sure to read the [FAQ on Self-Promotion](http://stackoverflow.com/faq#promotion) carefully. Also note that it is *required* that you post a disclaimer every time you link to your own site/product. – Andrew Barber Nov 24 '12 at 00:01
2

You can use jfortune, it is a jquery plugin. https://github.com/tehsis/jfortune

And I know that this could be a bit different from a round/wheel roulette perspective... but fancy-jqyery-plugin looks very interesting and customizable.

http://www.jqueryscript.net/animation/Fancy-jQuery-Plugin-For-Roulette-Image-roulette-js.html

mario.ecc
  • 150
  • 1
  • 8