Question

我正在做一个老虎机游戏，我将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>

Answer 1

您可以在代码方面进行一些改进：

请勿在{{1}}标记中同时使用src和content作为FirebaseMessagingService。
您的<script>调用应使用getElementById属性中的值，而不是id。
您可以在声明行中设置初始值。即src
this won't work
var random_1 = Math.floor(...应该为a === b === c（感谢@ jonas-h）
您应该减少代码重复，因为代码具有相同的逻辑重复多次。
您应该使用a === b && b === c而不是<img>，因为后者是Use === for comparing values
由于<image>元素没有内容，因此您可以使用简短版本将其关闭：<img>
<img src="..." />标签中不能包含block（<p>）元素，请改用divs。

重构代码示例：

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%;
}

其他增强功能：

请注意，由于警报是同步执行的，因此警报会在图像更改之前显示。您可以延迟消息以取得更好的效果。
图像在初始加载中需要花费一些时间，您可以obsolete来避免这种情况。

尝试使用随机数时功能不会切换图像

1 个答案: