Это краткое описание того, как разработать интерфейс игры «Рулетка» или Programming Roulette Game Principle. В посте представлена принципиальная схема и код рабочей программы.
Схема работы
Для лучшего понимания хорошо бы рассмотреть схему того, что мы хотим проектировать
Опишем все параметры, которые участвуют в процессе:
- ni — исходный порядковый номер выигранной карты;
- m — число карт в видимой части галереи;
- gW — длина галереи;
- W — длина галереи, вычисленная исходя из помещающихся колод в видимой части;
- xW — длина колоды карт до выигранной карты;
- dW — разница между длиной до выигранной и длиной галереи;
- alignLeft — искомый параметр для перемещения, чтобы выигранная карта встала по центру.
Рулетка у нас будет иметь один входной параметр и один выходной параметр, т.е., выходной зависит от входного:
- ni — номер выигранной карты в списке;
- alignLeft — это то, насколько надо передвинуть весь список, чтобы выигранная карта оказалась в центре рулетки.
Примечание. ni — обычно генерируется на сервере и передается всем пользователям через сокет-сообщение. Генерацию получают случайными числами из всего списка. К примеру, есть массив всех карт и мы вычисляем общее количество карт в массиве и генерируем случайное число от 0 до количества карт. Серверную часть мы не рассматриваем, поэтому ограничимся этим кратким описанием.
alignLeft — это величина css — параметра align-left первой карты. По сути дела мы определяем с серверной части номер выигранной карты из всего списка и в клиентской части при помощи JS мы визуально показываем, что именно карта и выиграна, хотя, в необходимости такой бы не было, можно было бы просто номер выигранной карты показать, но тогда смысл назвать весь этот процесс игры «Рулеткой» потерялся бы.
Исходный код рулетки
Код HTML
<!DOCTYPE html> <title>Roulette</title> <body> <div id="container"> <div class="cardList"> <div class="card">1</div> <div class="card">14</div> <div class="card">2</div> <div class="card">13</div> <div class="card">3</div> <div class="card">12</div> <div class="card">4</div> <div class="card">0</div> <div class="card">11</div> <div class="card">5</div> <div class="card">10</div> <div class="card">6</div> <div class="card">9</div> <div class="card">7</div> <div class="card">8</div> <div class="card">1</div> <div class="card">14</div> <div class="card">2</div> <div class="card">13</div> <div class="card">3</div> <div class="card">12</div> <div class="card">4</div> <div class="card">0</div> <div class="card">11</div> <div class="card">5</div> <div class="card winner">10</div> <div class="card">6</div> <div class="card">9</div> <div class="card">7</div> <div class="card">8</div> </div> <div class="bts"> <span>Balance:</span> <span>*</span> <button id="spin" class="cooldown">Spin</button> </div> <span id="timer"></span> </div> </body>
Код JavaScript
var cardList = $('.cardList'); var cards = $('.card'); var cardWidth = $(cards).width(); var cardListWidth = $(cardList).width(); var winnerCard = ".winner"; //Класс, выигранной карты var winner = null; var speed = 3000; var winnerNumber = null; /**Вычислим номер с эти классом или можно без класса сразу указать номер*/ $.each(cards, function(i, value) { var isWinner = $(this).hasClass("winner"); if (isWinner) { winner = $(this); winnerNumber = (i + 1); } }); console.log("winNumber:" + winnerNumber + " winner" + winner.html()); //ni - порядковый номер выигранной карты //m - число карт в видимой части галереи //gW - длина галереи //xW - длина колоды карт до выигранной карты //dW - разница между длиной до выигранной и длиной галереи var ni = winnerNumber; // var m = cardListWidth / cardWidth; //Math.floor(cardListWidth/cardWidth); var gW = m * cardWidth; // var sW = gW / 2; var sw = cardWidth / 2 var xW = ni * cardWidth; var dW = xW - gW + sW + sw; // // var leftAlign = dW; $('#spin').click(function() { cards.first().css('margin-left', 0); cards.first().animate({ "margin-left": -leftAlign + "px" }, speed); return false; });
Код CSS
* { box-sizing: border-box; padding: 0; margin: 0; } .card:nth-child(odd) { background: red; } .card:nth-child(even) { background: blue; } .cardList { height: 100px; width: 100%; position: relative; margin: 10px; overflow: hidden; white-space: nowrap; } .card { display: inline-block; text-align: center; height: 100px; width: 100px; line-height: 100px; font-family: monospace; font-size: 2em; color: #fff; margin: 0 auto; } #container { text-align: center; background: #f7f7f7; } .cardcontainer {} .cardList::before, .cardList::after { content: ''; display: block; z-index: 100; width: 0px; height: 0px; transform: translateX(-50%); border-left: 8px solid transparent; border-right: 8px solid transparent; } .cardList::before { position: absolute; top: 0px; left: 50%; border-top: 12px solid #c3c3c3; } .cardList::after { position: absolute; bottom: 0px; left: 50%; border-bottom: 12px solid #c3c3c3; } .cardList { margin: 0 auto; } button { margin: 10px; padding: 8px; font-family: monospace; }
В коде мы указываем для выигришной карты класс winner и дальше в списке мы ищем порядковый номер карты с этим классом, но можно было бы указать сразу номер — тут как программу составить. В результате работы данного кода, при нажатии на кнопку рулетка переместится так, что карта, помеченная, как побежденная будет в центре между стрелками, что покажет пользователю, что она выиграла. Результат показан ниже на картинке
Полностью код можно скачать из репозитория проекта на GitHub.