[英]How to show only selected number of elements in array?
I developed a party-game just for fun, and can't solve this problem. 我开发了一个派对游戏只是为了娱乐,无法解决这个问题。 So, at first I ask user "How many clothes you want to see?". 因此,首先我问用户“您想看几件衣服?”。 I set that data to local storage, and use on other page. 我将该数据设置为本地存储,并在其他页面上使用。 So my problem is: I want to show only user selected number of elements in array (I'm so sorry for my bad english, I really need your help). 所以我的问题是:我只想显示用户选择的数组中的元素个数(对不起我的英语不好,我真的很需要您的帮助)。 Here are my codes: 这是我的代码:
index.html 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 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 game.html
<div class="small-container">
<p id="text">Your random clothes: </p>
<img id="img" />
</div>
script2.js 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";
});
}
});
};
So every time user clicks the button, clothes are changing. 因此,每当用户单击按钮时,衣服都在变化。 For example, if user was chosen 4 as count, I want to show him/her only 4 clothes, and they must see before every click just one image on their pages. 例如,如果用户选择4作为计数,我只想给他/她展示4件衣服,那么他们在每次点击之前必须只能看到他们页面上的一张图像。
If i understood ur question correctly, your issue was that you didnt know how to stop the game once the good amount of clothes has been shown 如果我正确理解了您的问题,那么您的问题是,一旦显示了足够的衣服,您就不知道如何停止游戏
Here is a solution 这是一个解决方案
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`);
}
});
But with that code its still possible that the same cloth is picked several times. 但是有了该代码,仍然有可能多次拾取同一块布。 To avoid that, while keeping the code in pure javascript, I guess you could use "hidden" inputs to store the clothes that have been shown, or other localStorage variables. 为了避免这种情况,在将代码保留为纯JavaScript的同时,我想您可以使用“隐藏”输入来存储已显示的衣服或其他localStorage变量。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.