I am trying to build a roulette wheel in javascript.

I found this example: but I find the look & feel not very terrible.

Since my roulette will have a limited number of option, I was thinking of using an image and then place text above with the proper angle. When spinning the wheel, I would just make the image and the text turn.

Is it a good approach? Are there some better approaches?

I am trying to build a roulette wheel in javascript.

I found this example: http://www.switchonthecode./tutorials/creating-a-roulette-wheel-using-html5-canvas but I find the look & feel not very terrible.

Since my roulette will have a limited number of option, I was thinking of using an image and then place text above with the proper angle. When spinning the wheel, I would just make the image and the text turn.

Is it a good approach? Are there some better approaches?

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jun 25, 2011 at 20:13 charlaxcharlax 26.1k1919 gold badges6363 silver badges7171 bronze badges 1

• I created a roulette wheel using Raphael at guesttime./members/ledlogic/roulette/index.html – ledlogic Commented Mar 3, 2013 at 17:12

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

You can also do that with css3 rotation but it will work only on newer browsers You can do even better. Make hole roulette wheel in SVG, it support animation and it can be programmed in javascript

Well I think the best approach in terms of creating something quickly and easily is to use an existing Javascript library for creating spinning prize/winning wheels.

I am the creator of a Javascript library called Winwheel.js which is specifically for this purpose. See http://www.dougtesting

One great feature about my Winwheel.js is that you can mix a graphically rich image for the face of the wheel with code-drawn text for the segment labels, so if you want the wheel to look really nice but have the flexibility of configurable text, you can.

Here is an example of the code needed to do this using Winwheel.js...

var myWheel = new Winwheel({
    'drawMode'        : 'image',
    'drawText'        : true,       // Set this to true for text to be rendered on image.
    'numSegments'     : 4,
    'textOrientation' : 'curved',   // Set text properties.
    'textAlignment'   : 'outer',
    'textMargin'      : 5,
    'textFontFamily'  : 'courier',
    'segments'        :             // Set segment text
    [
        {'text' : 'Television'},
        {'text' : 'Mobile Phone'},
        {'text' : 'Old Radio'},
        {'text' : 'Computer'}
    ]
});

var wheelImg = new Image();

wheelImg.onload = function()
{
    myWheel.wheelImage = wheelImg;
    myWheel.draw();
}

wheelImg.src = "wheel_image.png";

There is a full set of tutorials on my site explaining how to use Winwheel.js, but the particular one about Image wheels can be found here http://dougtesting/winwheel/docs/tut9_creating_with_an_image

Thanks, DouG

jQuery is not necessary. The example was done using the HTML5 Canvas element, which is probably the only (clean) way you could do it without Flash or Silverlight. You can customize the colors using the first array in the code, or any other nuance of it with a little tinkering.

You could use an SVG (Scalable vector graphics format) image and rotate it.

I actually implemented a similar mini-game on my site not too long ago. No canvas, no SVG, no jQuery.

I used a simple image for the board (more specifically as a background-image), then placed a <div> on it to be the ball.

<div id="board"><div></div></div>

CSS:

#board {
    width:256px;
    height:256px;
    background-image:url('gameboard.png');
    position:relative;
    transform-origin:50% 50%;
}
#board>div {
    position:absolute;
    margin-left:-7px;
    margin-top:-7px;
    border:7px outset #ccc;
    width:1px; height:1px;
    left:248px;
    top:128px;
}

Then this JavaScript is used to position the ball when spinning:

function placeBall(angle) {
    var board = document.getElementById("board"), ball = board.children[0];
    ball.style.left = (128+Math.cos(angle)*120)+"px";
    ball.style.top = (128-Math.sin(angle)*120)+"px";
    board.style.transform = "rotate(-"+angle+"rad)";
}

This will result in the ball spinning around the wheel in older browsers. In newer browsers, the ball will stay in place (but the border shading will spin) while the entire board rotates. You can of course use a bination of the two if you do something different on the transformation (for example, "rotate(-"+(angle/2)+"rad)")