Javascript javascript中的轮盘赌

A roulette wheel in javascript

提问by charlax

I am trying to build a roulette wheel in javascript.

我正在尝试用 javascript 构建一个轮盘赌。

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

我找到了这个例子：http: //www.switchonthecode.com/tutorials/creating-a-roulette-wheel-using-html5-canvas但我发现外观和感觉不是很糟糕。

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?

这是一个好方法吗？有没有更好的方法？

采纳答案by redexp

You can also do that with css3 rotationbut 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

您也可以使用css3 旋转来做到这一点，但它仅适用于较新的浏览器您可以做得更好。用SVG制作孔轮盘，支持动画，可以用javascript编程

回答by Chris Laplante

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.

jQuery 不是必需的。该示例是使用 HTML5 Canvas 元素完成的，这可能是没有 Flash 或 Silverlight 的唯一（干净）方式。您可以使用代码中的第一个数组自定义颜色，或者稍加修改它的任何其他细微差别。

回答by Andrea

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

您可以使用 SVG（可缩放矢量图形格式）图像并旋转它。

回答by hendry

I wrote http://roulette.dabase.com/as an exercise which works on mobile browsers I've tried.

我写了http://roulette.dabase.com/作为练习，它适用于我尝试过的移动浏览器。

回答by Niet the Dark Absol

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

不久前，我实际上在我的网站上实现了一个类似的小游戏。没有画布，没有 SVG，没有 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.

我为棋盘使用了一个简单的图像（更具体地说是 a background-image），然后<div>在它上面放了一个作为球。

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

CSS:

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:

然后这个 JavaScript 用于在旋转时定位球：

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 combination of the two if you do something different on the transformation (for example, "rotate(-"+(angle/2)+"rad)")

这将导致球在旧浏览器中围绕轮盘旋转。在较新的浏览器中，当整个棋盘旋转时，球会保持原位（但边框阴影会旋转）。如果您对转换执行不同的操作（例如，"rotate(-"+(angle/2)+"rad)"），您当然可以使用两者的组合

回答by dougtesting.net

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.

好吧，我认为就快速轻松地创建某些东西而言，最好的方法是使用现有的 Javascript 库来创建旋转的奖品/获奖轮子。

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

我是一个名为Winwheel.js的 Javascript 库的创建者，它专门用于此目的。见http://www.dougtesting.net

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.

我的 Winwheel.js 的一个很棒的功能是，您可以将轮子表面的图形丰富的图像与段标签的代码绘制文本混合在一起，因此，如果您希望轮子看起来非常漂亮但具有可配置文本的灵活性， 你可以。

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

这是使用 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.net/winwheel/docs/tut9_creating_with_an_image

我的网站上有一整套教程解释了如何使用 Winwheel.js，但可以在此处找到有关图像轮的特定教程http://dougtesting.net/winwheel/docs/tut9_creating_with_an_image

Thanks, DouG

谢谢，道格