JavaScript水平微调器

Question

I am making a fun little site for a few of my friends and on thing I wanted to implement was a simple roulette spinner. I started to make some of the assets such as this spinner, but have no idea how to make it look like it is spinning and also land on a specific location.

This is the order in which everything should happen:

1. Every 5 Seconds
   a. Ping server with AJAX including the users amount of points to put in.
   b. Server replies with JSON, two types, {position:"number",win:"true/false",amount:"points lost or gained"}, or {error:"nospin"}
   c. This tells us where the roulette table should end at or if it is too early/late to spin

So it will continue to ping until the server tells us that a pick has been made, it will then spin the table to the winning spot and be able to tell the user that, "You lost 1 point!" or "You won 1 point"

Can someone help me accomplish this?

Answer 1

Idea: set the roulette image as a background-image of a <div> and make the roulette spin by changing the background-position of the div every few milliseconds.

It took me a while, but here you go:

Working JSFiddle!

Works nicely, but you probably want to change a few things to make it more realistic. Good luck!