Колесо рулетки в JavaScript

Question

Я пытаюсь построить колесо рулетки в javascript.

Я нашел этот пример: http://www.switchonthecode.com/tutorials/creating-a-roulette-wheel-using-html5-canvas, но я нахожу внешний вид и чувствую себя не очень ужасно.

Так как мойУ рулетки будет ограниченное количество опций, я думал об использовании изображения, а затем разместил текст выше под правильным углом.При вращении колеса я просто поворачивал изображение и текст.

Это хороший подход?Есть ли лучшие подходы?

Answer 1

Вы также можете сделать это с css3 вращением , но это будет работать только в новых браузерах. Вы можете сделать еще лучше.Сделайте колесо рулетки с отверстием в SVG , оно поддерживает анимацию и может быть запрограммировано в javascript

Answer 2

jQuery не требуется. Пример был сделан с использованием элемента HTML5 Canvas, который, вероятно, является единственным (чистым) способом, которым вы можете сделать это без Flash или Silverlight. Вы можете настроить цвета, используя первый массив в коде, или любой другой его нюанс с небольшим изменением.

Answer 3

Что ж, я думаю, что лучший подход с точки зрения создания чего-то быстрого и легкого - использовать существующую библиотеку Javascript для создания вращающихся призовых / выигрышных колес.

Я являюсь создателем библиотеки Javascript под названием Winwheel.js , который специально для этой цели.См. 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, но конкретный пример с колесами изображений можно найти здесь http://dougtesting.net/winwheel/docs/tut9_creating_with_an_image

Спасибо, DouG

Answer 4

Я недавно внедрил похожую мини-игру на своем сайте. Нет холста, нет 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 5

Я написал http://roulette.dabase.com/ как упражнение, которое работает на мобильных браузерах, которые я пробовал.

Answer 6

Вы можете использовать изображение SVG (масштабируемый векторный графический формат) и поворачивать его.