Losowanie w javascript bez powtórzeń.

pytanie zadane 4 lutego 2018 w JavaScript przez Marcin Skarżyński Użytkownik (540 p.)

Może ktoś wie jak zrobić alby losowało obrazki bez duplikatów(bez powtórzeń).

var los = [];
los[0]="ciri.png";
los[1]="geralt.png";
los[2]="iorweth.png";
var card1=document.getElementById('c1');
var card2=document.getElementById('c2');
var card3=document.getElementById('c3');
card1.addEventListener("click", function(){ odkryj(1); });
card2.addEventListener("click", function(){ odkryj(2); });
card3.addEventListener("click", function(){ odkryj(3); });
function odkryj(nr)

 { 		 
 	
         var mk=[];
         for(var i=0;i<=3;i++)
         {
           var  los1=Math.floor(Math.random()*los.length);
           mk[i]=los[los1];
           for(var k=0;k<=i-1;k++)
           {
           	if(mk[k]==mk[i])
           	{
           		i--;
           	}
           }
           var m1="url(img/" + mk + ")";
	
	$('#c'+nr).css('background-image', m1);
         }   
 	     
 
	
   
}

<html lang="pl">
<head>
	<meta charset="utf-8"/>
	<title>Losowanie postaci</title>
	<link rel="stylesheet" type="text/css" href="style.css"/>
	<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet"/>
	</head>
	<body>
		<header>
			<h1>Zgadywanka</h1>

		</header>
		
		<main>
			<article>
				<div class="cards">
					<div class="card" id="c1"></div>
					<div class="card" id="c2"></div>
					<div class="card" id="c3"></div>
				</div>
			</article>

		</main>
				<script src="jquery-3.2.1.min.js"></script>

		<script src="los.js"></script>

	</body>
</html>

h1
{
	text-align: center;
	margin-top: 50px;
}
.cards
{
	margin-top: 300px;
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.card
{
	width: 125px;
	height: 125px;
	background-image: url("img/karta.png");
	display: inline-block;
	cursor: pointer;
	border: 4px solid #209781;
}

2 odpowiedzi

odpowiedź 4 lutego 2018 przez Tomek Sochacki Ekspert (227,490 p.)

Zainteresuj się metodą Array.prototype.splice, którą możesz usunąć z tablicy element o indeksie "i":

const images = ['a.jpg', 'b.jpg', 'c.jpg'];

images.splice(1,1); //["b.jpg"]
images;             //["a.jpg", "c.jpg"]

Trzeba tylko pamiętać o kilku kwestiach. Po pierwsze primo metoda splice modyfikuje tablicę bazową i to jest jedna z ważniejszych kwestii! Jeśli więc będziesz gdzieś dalej potrzebował tę pierwotną tablicę to losowane elementy trzymaj w jej kopii:

const images = ['a.jpg', 'b.jpg', 'c.jpg'];
const images2 = images.slice();

images2.splice(1,1); //["b.jpg"]
images2; //["a.jpg", "c.jpg"]
images;  //["a.jpg", "b.jpg", "c.jpg"]

Po drugie metoda splice zwraca usunięty element, co czasami bywa przydatne i pozwala np. w prosty sposób zaimplementować możliwość cofnięcia zmiany (wystarczy efekt działania metody splice przypisać do zmiennej).

I na koniec uwaga - metoda splice przyjmuje wiele parametrów. Poczytaj sobie o nich w załączonym linku. Ja w tym przykładzie użyłem zapisu splice(1,1), czyli rozpoczynam usuwanie od elementu znajdującego się na indeksie 1 (czyli drugi element bo liczymy od zera1) i następnie wskazuję, że od tego elementu metoda ma usunąć kolejny tylko jeden element (druga jedynka). Nie ma dalszych parametrów, które oznaczałyby elementy wprowadzane do tablicy w miejsce usuwanych. W konsekwencji więc z tablicy wyleci wskazany element.

Pamiętaj tylko, aby nigdy do usuwania elementów z tablicy nie używać instrukcji delete, co w tablicach tworzy nie do końca pożądane elementy:

images; //["a.jpg", "b.jpg", "c.jpg"]

delete images[1]; //true
images; //["a.jpg", empty, "c.jpg"]

images.length; //3 
images[1];     //undefined

A tak na marginesie to proponuję nadawać bardziej czytelne nazwy zmiennych - dobra nazwa zmiennej to często "automatyczna" dokumentacja kodu. Dodatkowo poczytaj o let/const i template string (ale to spokojnie w kolejnych projektach).

Pozdrawiam