piątek, 2020-11-06

Javascript: Tasowanie kart

Podczas tworzenia gry karcianej trzeba zmierzyć się z koniecznością potasowania kart.

Demonstracja działania skryptu

Kod HTML

Aby odseparować obszar działania skryptu od innych elementów strony, zastosowano znacznik DIV opatrzony atrybutem id. Tasowanie kart można wywołać kliknięciem odnośnika. Przy otwarciu strony wyświetlane są koszulki kart.

<div id="gra-1254">
  <p><a href="#gra-1254">tasuj karty</a></p>
  <div id="cards">
	<img src="karty/null.png" alt="">
	<img src="karty/null.png" alt="">
	<!-- kolejne karty -->
	<img src="karty/null.png" alt="">
</div>

Kod CSS

Zastosowano niewielką ilość kodu CSS, dotyczy on wyglądu odnośnika i nie ma znaczenia dla działania skryptu.

#gra-1254 a{color:#000;background: #fc0;
		text-decoration: none;padding:10px 30px;}
	#gra-1254 a:hover{background: #ccc;}

Kod Javascript

Większość poniższego kodu została objaśniona w materiale „Prosta gra”. Główna różnica, która pojawia się podczas tasowania kart, to umieszczanie nazwy wylosowanej karty w drugiej tablicy. W efekcie po przejściu pętli for wszystkie karty ułożone w losowej kolejności trafiają do nowej tablicy. Dodatkowo w pętli for generowany jest kod HTML, który następnie dołączany jest do strony, tak aby użytkownik widział potasowane karty. Jeśli jest taka potrzeba, można zrezygnować z dodatkowej tablicy i losować losową kartę podczas generowania kodu HTML. Utworzenie tablicy, daje możliwość operowania na jej elementach w przypadku tworzenia gry.

window.onload = function() {
 document.getElementById('gra-1254').getElementsByTagName('a')[0].onclick = function() {
  var b,i;
  var images = '';
  var karty = [];

  var talia = [
    '9ka','9ki','9pi','9tr',
    '10ka','10ki','10pi','10tr',
    '11ka','11ki','11pi','11tr',
    '12ka','12ki','12pi','12tr',
    '13ka','13ki','13pi','13tr',
    '14ka','14ki','14pi','14tr'
  ];

  b = talia.length;

  for(i=0; i<b; i++) {
    karty[i]=talia.splice(Math.floor(Math.random() * talia.length),1)[0];	
    images += '<img src="karty/' + karty[i] + '.png">';
  }
  document.getElementById('cards').innerHTML = images;
  return false;
 }
}

Możesz pobrać kod źródłowy przykładu.