Losowa kolejność zdjęć w Js

Question

Witam, Jeśli temat gdzieś tu był to proszę o podanie linku do niego . Znalazłem stary film pana Mirosława "KURS JAVASCRIPT (#5) POZNAJEMY JQUERY. GRA W PAMIĘĆ"  i chciałem dodać losowanie zdjęć. Ale nie wiem jak losować zdjęcia z tablicy.

var cards = ["ciri.png", "geralt.png", "jaskier.png", "jaskier.png", "iorweth.png", "triss.png", "geralt.png", "yen.png", "ciri.png", "triss.png", "yen.png", "iorweth.png"];

var w = Math((Math.random() * (cards)));

Ale  po zakończeniu gry nie zmienia kolejności. Z góry dziękuje. 

Answer 1

Math.random() zawsze zwraca liczbę mniejszą niż 1, więc zrób tak:Math.floor(Math.random() * 11);.

math random() z math floor() wylosuje liczbę ujemną. 

I lepiej ucz się ze strony https://www.w3schools.com/js/default.asp, niż z przestarzałego kursu wideo

 

 

Answer 2

var w = cards[Math.floor(Math.random()*cards.length)]

Answer 3

Te dwa sposoby:

var w = cards[Math.floor(Math.random()*cards.length)];

i

Math.floor(Math.random() * 11);.

Nie działają.

Może zrobię 3 przyciski po wygranej z 3-ma różnymi ustawieniami?

Comments

to 11 to podałem przykładowo, zmień je na coś co będzie ci potrzebne do programu

Answer 4

Nic nie działa , może dam cały kod:

 

var cards = ["ciri.png", "geralt.png", "jaskier.png", "jaskier.png", "iorweth.png", "triss.png", "geralt.png", "yen.png", "ciri.png", "triss.png", "yen.png", "iorweth.png"];



//alert(cards[4]);

//console.log(cards);

var c0 = document.getElementById('c0');
var c1 = document.getElementById('c1');
var c2 = document.getElementById('c2');
var c3 = document.getElementById('c3');

var c4 = document.getElementById('c4');
var c5 = document.getElementById('c5');
var c6 = document.getElementById('c6');
var c7 = document.getElementById('c7');

var c8 = document.getElementById('c8');
var c9 = document.getElementById('c9');
var c10 = document.getElementById('c10');
var c11 = document.getElementById('c11');

c0.addEventListener("click", function() { revealCard(0); });
c1.addEventListener("click", function() { revealCard(1); });
c2.addEventListener("click", function() { revealCard(2); });
c3.addEventListener("click", function() { revealCard(3); });

c4.addEventListener("click", function() { revealCard(4); });
c5.addEventListener("click", function() { revealCard(5); });
c6.addEventListener("click", function() { revealCard(6); });
c7.addEventListener("click", function() { revealCard(7); });

c8.addEventListener("click", function() { revealCard(8); });
c9.addEventListener("click", function() { revealCard(9); });
c10.addEventListener("click", function() { revealCard(10); });
c11.addEventListener("click", function() { revealCard(11); });

var oneVisible = false;
var turnCounter = 0;
var visible_nr;
var lock = false;
var pairsLeft = 6;

function revealCard(nr)
{
	var opacityValue = $('#c'+nr).css('opacity');
	
	//alert('Opacity: '+opacityValue);
	
	if (opacityValue != 0 && lock == false)
	{
		lock = true;
		
		//alert(nr);
	
		var obraz = "url(img/" + cards[nr] + ")";
		
		$('#c'+nr).css('background-image', obraz);
		$('#c'+nr).addClass('cardA');
		$('#c'+nr).removeClass('card');
		
		if(oneVisible == false)
		{
			//first card
			
			oneVisible = true;
			visible_nr = nr;
			lock = false;
		}
		else
		{
			//second card
			
			if(cards[visible_nr] == cards[nr])
			{
				//alert("para");
				
				setTimeout(function() { hide2Cards(nr, visible_nr) }, 750);
				
			}
			else
			{
				//alert("pudło");
				
				setTimeout(function() { restore2Cards(nr, visible_nr) }, 1000);
			}
			
			turnCounter++;
			$('.score').html('Turn counter: '+turnCounter);
			oneVisible = false;
		}
		
	}
	
}

function hide2Cards(nr1, nr2)
{
	$('#c'+nr1).css('opacity', '0');
	$('#c'+nr2).css('opacity', '0');
	
	pairsLeft--;
	
	if(pairsLeft == 0)
	{
		$('.board').html('<h1>You win!<br>Done in '+turnCounter+' turns</h1><br><a href=""><h1>Play again!</h1></a>');
		
		Math.floor(Math.random() * 12);
		
		
		
		
	}
	
	lock = false;
}

function restore2Cards(nr1, nr2)
{
	$('#c'+nr1).css('background-image', 'url(img/karta.png)');
	$('#c'+nr1).addClass('card');
	$('#c'+nr1).removeClass('cardA');	

	$('#c'+nr2).css('background-image', 'url(img/karta.png)');
	$('#c'+nr2).addClass('card');
	$('#c'+nr2).removeClass('cardA');
	
	lock = false;
}

//second card
if(visible_nr != nr)
{
	if(cards[visible_nr] == cards[nr])
	{
	//alert("para");
	setTimeout(function(){ hide2Cards(nr, visible_nr)}, 750);

	}
	else
	{
	//alert("pudło");
	setTimeout(function(){ restore2Cards(nr, visible_nr)}, 1000);

	}

	turnCounter++;
	$('.score').html('Turn counter: '+turnCounter);
	oneVisible = false;
}
else
{
lock = false;
}

Tak jak mówiłem znalazłem ten film i chciałem jakoś się pobawić z tym losowym ułożeniem kard, szukałem w necie ale nie wiem jak. Poddaje się!