Java Script podmiana obrazków w losowej kolejności Gwent odc 5

Question

Witam, mam problem z generowaniem z 5 odcinka w grze gwent obrazków w losowej kolejności. szukałem po google i na forum jednak nie znalazłem wiec zadaje pytanie... wklejam kod.

Pozdrawiam Iksdew :D

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');
	
	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('Licznik rund: '+turnCounter);
			oneVisible = false;
			
			
		}
	}
	
	
}

function hide2Cards(nr1,nr2)
{
	$('#c'+nr1).css('opacity', '0');
	$('#c'+nr2).css('opacity', '0');
	pairsLeft--;
	
	if(pairsLeft == 0)
	{
		$('.board').html('<h1>Wygrałeś<br>Nieźle, w ' +turnCounter+'  turze!</h1'+'<br><br/><span class="reset" onclick="location.reload()">JESZCZE RAZ? </span>');
		
	}
	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;
}

 

Answer 1

Prostym sposobem byłoby utworzenie tablicy liczb od 1 do 12, wymieszanie jej i poukładanie kodów na podstawie tego. No i pozbądź się tego brzydkiego wymieniania wszystkich elementów, użyj tablicy…

Comments

No i pozbądź się tego brzydkiego wymieniania wszystkich elementów, użyj tablicy…

można też zastosować Event Delegation, żeby się pozbyć  

brzydkiego wymieniania ... elementów

i

tablicy…

Answer 2

Może przyda się komuś:
let cards = ["obraz1.png", "obraz2.png", ...]

const card_list = [...cards.keys()];

function shuffleCards(deck) {

  for (let i = 0; i < cards.length; i++) {

    let tempCard = deck[i];

    let randomIndex = Math.floor(Math.random() * card_list.length);

    deck[i] = deck[randomIndex];

    deck[randomIndex] = tempCard;

  }

}

shuffleCards(cards);

console.log(cards);

Comments

To naiwny algorytm. Jeżeli chcesz mieć pewność, że algorytm generuje każdą permutacje talii mniej więcej taką samą liczbę razy użyj Fisher–Yates.

---

To naiwny algorytm.   

skoro mowa o naiwnych sposobach shuffle-wania tablic, to zastosować, można też

[ on-line ]

card_list.sort(() => Math.random() - 0.5);