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

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

Вам также может понравиться

Об авторе WebSofter

Web - технологии

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...