Это краткое описание того, как разработать интерфейс игры «Рулетка» или 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.
