时间戳

首页 > 解决方案 > 尝试使用随机数时功能不会切换图像

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

问题描述

我正在开发一个老虎机游戏，我在其中获取 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>

标签： javascripthtmlimagerandom

解决方案

您可以对代码进行一些改进：

  • 不要在你的标签中同时使用src和，因为这不起作用。content<script>
  • 您的getElementById调用应使用id属性中的值，而不是src.
  • 您可以在声明行中设置初始值。IEvar 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>

进一步的增强：

  • 请注意，警报会在图像更改之前显示，因为它是同步执行的。您可以延迟消息以获得更好的效果。
  • 图像在初始加载时需要一些时间才能显示，您可以预加载图像以避免这种情况。

推荐阅读