Функция не будет переключать изображения при попытке использовать случайное число - PullRequest
Новая
       16

Функция не будет переключать изображения при попытке использовать случайное число

0 голосов
/ 29 октября 2018

Я работаю над игрой на игровых автоматах, где я беру 3 случайных числа и присваиваю их различным изображениям.

Однако я не могу отобразить мои изображения, когда вы нажимаете кнопку, чтобы начать игру.

У меня есть стоковые изображения, но когда вы нажимаете SPIN, они должны заменить их новыми изображениями на основе случайных чисел.

Как я могу получить новые изображения для отображения ?.

Мой код: 

    <html>
    <head>
      <title>Slots</title>
      <link href="../style.css" type="text/css" rel="stylesheet">
      <script type="text/javascript" src="random.js">
        function spinslots() {
          var lemon = document.getElementById('lemon.jpg');
          var donut = document.getElementById('donut.jpg');
          var cherry = document.getElementById('cherry.jpg');
          var bar = document.getElementById('bar.jpg');

          var random_1;
              random_1= Math.floor((Math.random()*4 )+ 1);
          var random_2;
              random_2 = Math.floor((Math.random()*4 )+ 1);
          var random_3;
              random_3 = Math.floor((Math.random()*4 )+ 1);

          if (random_1 == 1) {
            document.getElementById("slot_1").src = "lemon.jpg";
          }
          if (random_1 == 2) {
            document.getElementById("slot_1").src = "donut.jpg";
          }
          if (random_1 == 3) {
            document.getElementById("slot_1").src = "cherry.jpg";
          }
          if (random_1 == 4) {
            document.getElementById("slot_1").src = "bar.jpg";
          }

          if (random_2 == 1) {
            document.getElementById("slot_2").src = "lemon.jpg";
          }
          if (random_2 == 2) {
            document.getElementById("slot_2").src = "donut.jpg";
          }
          if (random_2 == 3) {
            document.getElementById("slot_2").src = "cherry.jpg";
          }
          if (random_2 == 4) {
            document.getElementById("slot_2").src = "bar.jpg";
          }

          if (random_3 == 1) {
            document.getElementById("slot_3").src = "lemon.jpg";
          }
          if (random_3 == 2) {
            document.getElementById("slot_3").src = "donut.jpg";
          }
          if (random_3 == 3) {
            document.getElementById("slot_3").src = "cherry.jpg";
          }
          if (random_3 == 4) {
            document.getElementById("slot_3").src = "bar.jpg";
          }

          if (random_1 == random_2 == random_3) {
            alert("Congradulations, you won!");
          }
        }     
      </script>
    </head>

    <body>
      <h1>Test your luck! Click the SPIN button</h1>
      <p><button value="Spin" onclick="spinslots();"> SPIN </button></p>
      <p>
        <div class="SlotDiv" id="div_1"><image id="slot_1" src="images/lemon.jpg"></image></div>
        <div class="SlotDiv" id="div_2"><image id="slot_2" src="images/cherry.jpg"></image></div>
        <div class="SlotDiv" id="div_3"><image id="slot_3" src="images/bar.jpg"></image></div>
      </p>

      <p>Credits: <div class="OutputBox" type="numeric" id="Credits" size="10">20</div></p>
    
  </body>
</html>

1 Ответ

0 голосов
/ 29 октября 2018

Несколько вещей, которые вы можете улучшить в коде:

  • Не используйте оба src и content в теге <script>, так как это не будет работать .
  • Ваши getElementById вызовы должны использовать значение из атрибута id, а не src.
  • Вы можете установить начальное значение в строке объявления. т.е. var random_1 = Math.floor(...
  • Используйте === для сравнения значений
  • a === b === c должно быть a === b && b === c (спасибо @ jonas-h)
  • Вы должны уменьшить дублирование кода, код повторяется несколько раз.
  • Вы должны использовать <img>, а не <image>, так как последний устарел
  • Поскольку элементы <img> не имеют содержимого, вы можете использовать короткую версию, чтобы закрыть их: <img src="..." />
  • <p> теги не могут содержать блочные (div) элементы внутри, вместо этого используйте div.

Пример измененного кода: 

function spinslots() {
  const images = [
    // lemon:
    'https://cdn.pixabay.com/photo/2012/04/03/15/07/lemon-25244_960_720.png',
    // donut:
    'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f0/Simpsons_Donut.svg/1024px-Simpsons_Donut.svg.png',
    //cherry:
    'https://cdn.pixabay.com/photo/2013/07/13/10/23/cherries-157113_960_720.png',
    //bar:
    'https://cdn.pixabay.com/photo/2012/04/26/20/00/jackpot-42993_960_720.png',
    ];
    const random_1 = Math.floor(Math.random() * 4);
    const random_2 = Math.floor(Math.random() * 4);
    const random_3 = Math.floor(Math.random() * 4);

    document.getElementById("slot_1").src = images[random_1];
    document.getElementById("slot_2").src = images[random_2];
    document.getElementById("slot_3").src = images[random_3];
   
    if (random_1 === random_2 && random_1 === random_3) {
      alert("Congratulations, you won!");
    }
  } 
.SlotDiv {
  display: inline-block;
  width: 100px;
  height: 100px;
}
.SlotDiv img {
  width: 100%;
}
<html>
<head>
  <title>Slots</title>
</head>

<body>
  <h1>Test your luck! Click the SPIN button</h1>
  <div>
    <button value="Spin" onclick="spinslots();"> SPIN </button>
  </div>
  <div>
    <div class="SlotDiv" id="div_1">
      <img id="slot_1" src="images/lemon.jpg" />
    </div>
    <div class="SlotDiv" id="div_2">
      <img id="slot_2" src="images/cherry.jpg" />
    </div>
    <div class="SlotDiv" id="div_3">
      <img id="slot_3" src="images/bar.jpg" />
    </div>
  </div>

  <p>Credits: <span class="OutputBox" type="numeric" id="Credits" size="10">20</span></p>
    
  </body>
</html>

Дальнейшие улучшения:

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