如何仅显示数组中选定数量的元素？

Question

我开发了一个派对游戏只是为了娱乐，无法解决这个问题。 因此，首先我问用户“您想看几件衣服？”。 我将该数据设置为本地存储，并在其他页面上使用。 所以我的问题是：我只想显示用户选择的数组中的元素个数（对不起我的英语不好，我真的很需要您的帮助）。 这是我的代码：

index.html

<div class="container">
      <div class="small-container">
        <p id="text">How many clothes you want to choose ?</p>
        <input type="number" placeholder="1 to 6" id="count" />
      </div>
      <button id="btn">Start</button>
</div>

script1.js

window.onload = function() {
        var btn = document.getElementById("btn");
        var count = document.getElementById("count");
        btn.addEventListener("click", function() {
          document.location.href = "random.html";
          localStorage.setItem("count", count.value);
        });
};

game.html

<div class="small-container">
        <p id="text">Your random clothes: </p>
        <img id="img" />
</div>

script2.js

    var options = [
          "T-Shirt",
          "Singlet",
          "Underwear",
          "Socks",
          "Shorts",
          "Shoes"
        ];
        var btn = document.getElementById("btn");
        var text = document.getElementById("text");
        var img = document.getElementById("img");
        btn.addEventListener("click", function() {
          var count = localStorage.getItem("count");

          var randomChoice = options.splice(Math.floor(Math.random() * options.length), 1);
          btn.innerHTML = "Shuffle";
          text.innerHTML = randomChoice;
          img.setAttribute("src", `img/${randomChoice}.png`);

          if (randomChoice >= options.length) {
            text.innerHTML = "End of game :)";
            btn.innerHTML = "Start again";
            img.removeAttribute("src");
            btn.addEventListener("click", function() {
              // document.location.href = "intro.html";
              document.location.href = "random.html";
            });
          }
        });
      };

因此，每当用户单击按钮时，衣服都在变化。 例如，如果用户选择4作为计数，我只想给他/她展示4件衣服，那么他们在每次点击之前必须只能看到他们页面上的一张图像。

Answer 1

如果我正确理解了您的问题，那么您的问题是，一旦显示了足够的衣服，您就不知道如何停止游戏

这是一个解决方案

        btn.addEventListener("click", function() {
          var count = localStorage.getItem("count");
          localStorage.setItem("count", count-1); //decreasing the value of count because one clothe is about to be shown on screen
          if (count == 0) { //if count is at 0, that means game is over
                text.innerHTML = "End of game :)";
                btn.innerHTML = "Start again";
                img.removeAttribute("src");
                btn.addEventListener("click", function() {
                  // document.location.href = "intro.html";
                  document.location.href = "random.html";
                });
          }

          else{ //we show a new cloth
              var randomChoice = options.splice(Math.floor(Math.random() * options.length), 1);
              btn.innerHTML = "Shuffle";
              text.innerHTML = randomChoice;
              img.setAttribute("src", `img/${randomChoice}.png`);
          }
        });

但是有了该代码，仍然有可能多次拾取同一块布。 为了避免这种情况，在将代码保留为纯JavaScript的同时，我想您可以使用“隐藏”输入来存储已显示的衣服或其他localStorage变量。