Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

Javascript: Tasowanie kart

piątek,

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.

Trzy miesiące temu na naszej stronie…

Artykuł: Intel Core i9

Intel Core i9

Artykuł: Święto Lotnictwa Polskiego

Święto Lotnictwa Polskiego

Artykuł: Quiz: Robert Lewandowski

Quiz: Robert Lewandowski

Artykuł: Bogumił Nowotny

Bogumił Nowotny

Artykuł: Stanisław Wyspiański

Stanisław Wyspiański

Artykuł: Polska Marynarka Wojenna w okresie Pierwszej Rzeczpospolitej

Polska Marynarka Wojenna w okresie Pierwszej Rzeczpospolitej

Artykuł: Utworzenie Marynarki Wojennej

Utworzenie Marynarki Wojennej

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły