Question

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

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

由于我的轮盘赌选项数量有限，我考虑使用图像然后以适当的角度放置文本。旋转方向盘时，我只会将图像和文本转动。

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

Answer 1

您也可以使用css3 rotation执行此操作，但它仅适用于较新的浏览器你可以做得更好。在SVG制作孔轮盘，它支持动画，可以用javascript编程

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

我实际上在不久前在我的网站上实现了类似的迷你游戏。没有画布，没有SVG，没有jQuery。

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

<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;
}

然后这个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)";
}

这会导致球在旧版浏览器中转动。在较新的浏览器中，当整个电路板旋转时，球将保持在原位（但边框阴影将旋转）。如果你在转换上做了不同的事情，你当然可以使用两者的组合（例如，"rotate(-"+(angle/2)+"rad)"）

Answer 6

我认为在快速轻松地创建内容方面最好的方法是使用现有的Javascript库来创建旋转奖品/获奖轮。

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

关于我的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";

我的网站上有一整套教程解释如何使用Winwheel.js，但有关Image轮的特定内容可以在http://dougtesting.net/winwheel/docs/tut9_creating_with_an_image

找到

谢谢，道格

javascript中的轮盘赌轮

6 个答案: