javascript - 随机循环按计划工作，但在几次调用后卡在特定的随机数上

Question

我使用 css 和 html 创建了 13 个看起来像盒子的对象，每个对象都有独特的背景颜色。然后使用 javascript 添加了一些随机颜色更改功能。

我想要发生的事情:单击 13 个框中的任何一个后，每个框都会变成"new"颜色。这种"new"颜色将从每个盒子最初固定的颜色中随机选择。这将永远持续下去。

发生了什么:当点击框时，它们确实会像我想要的那样改变颜色，但仅点击 ~5-10 次后，它们就会变成完全相同的颜色。

如何让函数继续运行而不是停在某种颜色处？

我可能搞砸了 for 循环/所有 javascript 但无法弄清楚。非常感谢任何帮助。

这是我的完整代码:https://codepen.io/zaemees/pen/roGgGV

部分代码:

html:

<div class="aqua1 specs"></div>
<div class="chartreuse1 specs"></div>
<div class="deeppink1 specs"></div>
<div class="dodgerblue1 specs"></div>
<div class="gold1 specs"></div>
<div class="indigo1 specs"> </div>
<div class="lightpink1 specs"></div>
<div class="mediumpurple1 specs"></div>
<div class="coral1 specs"></div>
<div class="springgreen1 specs"></div>
<div class="red1 specs"></div>
<div class="peachpuff1 specs"></div>
<div class="deepskyblue1 specs"></div>

js:

var bloop = document.getElementsByClassName('specs');

for (var i = 0; i < bloop.length; i++){
  bloop[i].onclick = function() {
    for (var i = 0; i < bloop.length; i++){
   bloop[i].style.backgroundColor = window.getComputedStyle(bloop[Math.floor(Math.random()*13)]).getPropertyValue('background-color');
  }
 }
}

Answer 1

您的代码的主要问题是您没有阻止多次选择相同的颜色。当您第一次运行它时，很可能至少有一种颜色会被选择两次。可以把它想象成只是随机选择 1 到 10 之间的一个数字。随机选择一个不同的数字十次并且永不重复是非常困难的。

因此，当您再次运行您的函数时，您已经更改了每个框的 backgroundColor 属性，其中一些将具有相同的颜色，即您不再有 13 种不同的颜色可供选择。这意味着您的函数第二次运行时，您的选择更少，这种情况会一直持续下去，直到您最终只能选择一种或两种可能的颜色，并且每个框最终都具有相同的颜色。

防止这种情况的一种方法是将您的选择排列成一个数组，并在您选择它时从数组中删除您的选择。这将防止重复，这也是大多数发牌程序的工作方式，因此两个人不会同时发到红心皇后。试试这个例子:

var bloop = document.getElementsByClassName('specs');

for (var i = 0; i < bloop.length; i++) {
  bloop[i].onclick = function() {
    var colours = ['aqua','chartreuse','deeppink','dodgerblue','gold','indigo','lightpink','mediumpurple','coral','springgreen','red','peachpuff','deepskyblue'];
    for (var i = 0; i < bloop.length; i++) {
      var rando = Math.floor(Math.random()*colours.length)
      bloop[i].style.backgroundColor = colours[rando];
      colours.splice(rando, 1);
    }
  }
}

.specs{
  display:inline-block;
	height:100px;
	width:100px;
	border:3px solid white;
}

.aqua1{
	background-color:aqua;
}

.chartreuse1{
	background-color:chartreuse;
}

.deeppink1{
	background-color:deeppink;
}

.dodgerblue1{
	background-color:dodgerblue;
}

.gold1{
	background-color:gold;
}

.indigo1{
	background-color:indigo;
}

.lightpink1{
	background-color:lightpink;
}

.mediumpurple1{
	background-color:mediumpurple;
}

.coral1{
	background-color:coral;
}

.springgreen1{
	background-color:springgreen;
}

.red1{
	background-color:red;
}

.peachpuff1{
	background-color:peachpuff;
}

.deepskyblue1{
	background-color:deepskyblue;
}

<div class="aqua1 specs">
	
</div>

<div class="chartreuse1 specs">
	
</div>

<div class="deeppink1 specs">
	
</div>

<div class="dodgerblue1 specs">
	
</div>

<div class="gold1 specs">
	
</div>

<div class="indigo1 specs">
	
</div>

<div class="lightpink1 specs">
	
</div>

<div class="mediumpurple1 specs">
	
</div>

<div class="coral1 specs">
	
</div>

<div class="springgreen1 specs">
	
</div>

<div class="red1 specs">
	
</div>

<div class="peachpuff1 specs">
	
</div>
<div class="deepskyblue1 specs">
	
</div>