weixin_33716154 2016-11-26 16:34 采纳率: 0%
浏览 31

JavaScript水平微调器

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?

  • 写回答

1条回答 默认 最新

  • weixin_33735077 2016-11-27 01:17
    关注

    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!

    评论

报告相同问题?