Клиентская часть организации игры «Рулетка»

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