• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Losowanie w javascript bez powtórzeń.

VPS Starter Arubacloud
0 głosów
2,115 wizyt
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

+2 głosów
odpowiedź 4 lutego 2018 przez Tomek Sochacki Ekspert (227,510 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

0 głosów
odpowiedź 4 lutego 2018 przez thryndl Nałogowiec (30,470 p.)
Najprościej będzie chyba wylosowany element usunąć z tablicy.

Podobne pytania

0 głosów
3 odpowiedzi 769 wizyt
pytanie zadane 28 czerwca 2018 w JavaScript przez Tomasz Ozi Orzech Początkujący (300 p.)
0 głosów
1 odpowiedź 396 wizyt
pytanie zadane 9 października 2018 w C i C++ przez Gadzic Nowicjusz (170 p.)
0 głosów
2 odpowiedzi 458 wizyt
pytanie zadane 14 stycznia 2018 w C i C++ przez Maciej3206 Użytkownik (570 p.)

92,452 zapytań

141,262 odpowiedzi

319,078 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...