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

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

VPS Starter Arubacloud
+1 głos
470 wizyt
pytanie zadane 9 stycznia 2019 w JavaScript przez Iksdew Nowicjusz (200 p.)

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;
}

 

2 odpowiedzi

0 głosów
odpowiedź 9 stycznia 2019 przez m4sk1n Pasjonat (16,750 p.)
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…
komentarz 25 grudnia 2022 przez VBService Ekspert (255,500 p.)

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

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

brzydkiego wymieniania ... elementów

i

tablicy…

0 głosów
odpowiedź 21 grudnia 2022 przez direeX Nowicjusz (140 p.)
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);
komentarz 21 grudnia 2022 przez Great Stary wyjadacz (12,660 p.)

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.

komentarz 21 grudnia 2022 przez VBService Ekspert (255,500 p.)

To naiwny algorytm.   smiley

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

[ on-line ]

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

 

Podobne pytania

0 głosów
1 odpowiedź 206 wizyt
pytanie zadane 19 grudnia 2016 w PHP przez Zoltan054 Nowicjusz (220 p.)
+1 głos
0 odpowiedzi 144 wizyt
pytanie zadane 23 października 2018 w HTML i CSS przez madmi121 Użytkownik (760 p.)
0 głosów
2 odpowiedzi 488 wizyt
pytanie zadane 18 października 2016 w JavaScript przez niezalogowany

92,851 zapytań

141,792 odpowiedzi

320,879 komentarzy

62,183 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.

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...