Генератор случайных чисел с кнопкой для имитации броска кубика

Затеяли мы сделать для нашего клиента онлайн-версию настольной игры. И для неё нам нужно было реализовать возможность броска кубика. Причём, кубика не стандартного 6-значного, а 9-значного, 20-значного и ещё одного — «плюс / минус».

Сразу решили, что не будем пытаться нарисовать кубики и заанимировать их, поэтому использовали простейший генератор случайных чисел на JavaScript.

Код для цифровых кубиков

HTML. К тегу, в котором будет выводиться число добавляем идентификатор.

<div id="dice-9">•</div>

<div id="dice-20">•</div>

Диапазон значений кубика задаётся в кнопке — getRndInteger().

<button id="dice-9" onclick="document.getElementById('dice-9').innerHTML = getRndInteger(0,9)">Бросить кубик</button>

<button id="dice-20" onclick="document.getElementById('dice-20').innerHTML = getRndInteger(1,20)">Бросить кубик</button>

JavaScript. Чтобы хоть немного анимировать изменение выпадающего числа, я обернул вывод результата в <span> с классом dice.

<script>
  function getRndInteger(min, max) {
  return '<span class="dice">' + (Math.floor(Math.random() * (max - min + 1)) + min) + '</span>';
  }
</script>

CSS. Анимировал свойство opacity.

.dice {
  animation: fade-in .4s ease-in-out
}

Код для кубика «+ / –»

Стили для «моргания» будут идентичными, а вот скрипт отличается.

HTML

<div id="dice">•</div>

<button onclick="document.getElementById('dice').innerHTML = dice()">Бросить кубик</button>

JavaScript. В переменной possible вписываем без пробелов все необходимые значения. В моём случае это «+», «—» и «•», которая обозначает пустую сторону кубика. Ну а дальше скрипт случайным образом отдаёт одно из значений. В принципе, этот же скрипт можно использовать и для других кубиков, вписав в переменную цифры.

<script>
function dice() {
  var text = "";
  var possible = "+–•";

  for (var i = 0; i < 1; i++)
  text += possible.charAt(Math.floor(Math.random() * possible.length));
  return '<span class="dice">' + text + '</span>';
}
</script>

Вот, что получилось в результате. В коде выше я не стал описывать стили для кнопок и разметки, т. к. они в каждом случае будут свои.