Показать элемент кости, соответствующий случайному числу, сгенерированному при клике - PullRequest
Новая
       14

Показать элемент кости, соответствующий случайному числу, сгенерированному при клике

0 голосов
/ 27 сентября 2018

Я пытался сделать кости случайными, и я создал разные грани с помощью HTML и CSS.Теперь я не могу их скрыть.Я хочу показать только одно лицо кубика за раз.Как я могу назвать одно лицо на случайные числа от 1 до 6, и в javascript я попытался нажать кнопку, чтобы изменить цвет границы.Как связать CSS, HTML и javascript, чтобы при нажатии на них отображалось лицо, созданное с помощью CSS?

HTML 

function roll() {
  var die = Math.floor(Math.random() * 6) + 1;
  $('#die').removeAttr('class').addClass('die' + die);
}
#die {
  width: 30px;
  border: 5px solid black;
  padding: 25px;
  margin: 25px;
}

#die.die1 {
  width: 30px;
  border: 5px solid green;
  padding: 25px;
  margin: 25px;
}

#die.die2 {
  width: 30px;
  border: 5px solid pink;
  padding: 25px;
  margin: 25px;
}

#die.die3 {
  width: 30px;
  border: 5px solid violet;
  padding: 25px;
  margin: 25px;
}

#die.die4 {
  width: 30px;
  border: 5px solid yellow;
  padding: 25px;
  margin: 25px;
}

#die.die5 {
  width: 30px;
  border: 5px solid red;
  padding: 25px;
  margin: 25px;
}

#die.die6 {
  width: 30px;
  border: 5px solid blue;
  padding: 25px;
  margin: 25px;
}

.dice {
  border: solid 3px #aaa;
  border-radius: 3px;
  display: block;
  width: 100px;
  height: 100px;
  margin: 7px auto;
  box-sizing: border-box;
  padding: 10px;
  position: relative;
}

.dice .dot {
  border-radius: 50%;
  position: absolute;
  width: 15px;
  height: 15px;
  background: #000;
}

.dice:first-child .dot {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.dice:nth-child(2) .dot:first-child {
  top: 20px;
  left: 20px;
}

.dice:nth-child(2) .dot:last-child {
  bottom: 20px;
  right: 20px;
}

.dice:nth-child(3) .dot:first-child {
  top: 15px;
  left: 15px;
}

.dice:nth-child(3) .dot:nth-child(2) {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.dice:nth-child(3) .dot:last-child {
  bottom: 15px;
  right: 15px;
}

.dice:nth-child(4) .dot:first-child {
  top: 15px;
  left: 15px;
}

.dice:nth-child(4) .dot:nth-child(2) {
  top: 15px;
  right: 15px;
}

.dice:nth-child(4) .dot:nth-child(3) {
  bottom: 15px;
  left: 15px;
}

.dice:nth-child(4) .dot:last-child {
  bottom: 15px;
  right: 15px;
}

.dice:nth-child(5) .dot:first-child {
  top: 15px;
  left: 15px;
}

.dice:nth-child(5) .dot:nth-child(2) {
  top: 15px;
  right: 15px;
}

.dice:nth-child(5) .dot:nth-child(3) {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.dice:nth-child(5) .dot:nth-child(4) {
  bottom: 15px;
  left: 15px;
}

.dice:nth-child(5) .dot:last-child {
  bottom: 15px;
  right: 15px;
}

.dice:nth-child(6) .dot:first-child {
  top: 15px;
  left: 15px;
}

.dice:nth-child(6) .dot:nth-child(2) {
  top: 15px;
  right: 15px;
}

.dice:nth-child(6) .dot:nth-child(3) {
  top: 0;
  bottom: 0;
  left: 15px;
  margin: auto;
}

.dice:nth-child(6) .dot:nth-child(4) {
  top: 0;
  right: 15px;
  bottom: 0;
  margin: auto;
}

.dice:nth-child(6) .dot:nth-child(5) {
  bottom: 15px;
  left: 15px;
}

.dice:nth-child(6) .dot:last-child {
  bottom: 15px;
  right: 15px;
}

.content {
  left: 80%;
}
<!DOCTYPE HTML>
<html>

<head>
  <link rel="stylesheet" href="dice.css" type="text/css" />
  <script src="dice.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>

  <div id="die">
  </div>
  <button type="button" onclick="roll()">Click me!</button>
  <div class="container">
    <div class="dice">
      <div class="dot"></div>
    </div>
    <div class="dice">
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <div class="dice">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <div class="dice">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <div class="dice">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <div class="dice">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
  </div>
</body>

</html>

1 Ответ

0 голосов
/ 27 сентября 2018

Вместо того, чтобы скрывать, показывать и перемещать созданные вами элементы костей, вы можете просто создать нужный элемент по щелчку (с некоторыми изменениями CSS, чтобы воспользоваться преимуществами генерации случайных чисел, чтобы помочь расположить точки).Кроме того, здесь нет реальной необходимости в jquery, но он используется в примере, поскольку вы использовали его в своем первоначальном подходе.

js создает прослушиватель события click для кнопки #roll.При каждом нажатии кнопки переменная num устанавливается на случайное число от 1 до 6. Переменная cls устанавливает префикс для различных классов, которые определяют расположение точек на матрице - она ​​предполагает бросокявляется нечетным числом, а затем корректируется, если оно четное.Затем мы удаляем все дочерние элементы из #die с помощью empty() (поэтому все точки из предыдущего броска удаляются перед добавлением новых).Наконец, мы используем цикл для добавления того же количества точек к #die, которое сгенерировано в нашей переменной num.В то же время мы добавляем пронумерованный класс для каждой точки (поэтому мы назвали наши классы odd-1, 'even-1` и т. Д.).Например: 

$('#roll').click(() => {
  let num = Math.floor(Math.random() * 6) + 1;
  let cls = 'odd-'
  if (num % 2 === 0) {
    cls = 'even-'
  }
  $('#die').empty();
  for (let i = 1; i <= num; i++) {
    $('#die').append('<div class="dot ' + cls + i + '"></div>');
  }
});
.dice {
  position: relative;
  margin: 8px;
  border: solid 3px #aaa;
  border-radius: 3px;
  width: 100px;
  height: 100px;
}

.dice .dot {
  position: absolute;
  background: #000;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-8px, -8px);
}

.odd-1 {
  top: 50%;
  left: 50%;
}

.even-1,
.odd-2 {
  top: 25%;
  left: 25%;
}

.even-2,
.odd-3 {
  top: 75%;
  left: 75%;
}

.even-3,
.odd-4 {
  top: 75%;
  left: 25%;
}

.even-4,
.odd-5 {
  top: 25%;
  left: 75%;
}

.even-5 {
  top: 50%;
  left: 75%;
}

.even-6 {
  top: 50%;
  left: 25%;
}
<div>
  <button id="roll" type="button">Click to roll</button>
  <div id="die" class="dice">
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
...