Gra

Kod HTML

Kod HTML to standardowy kontener DIV oraz dwa elementy FIGURE zawierające obraz i jako jego podpis oznaczenie gracza. Dla uatrakcyjnienia wyglądu w demonstracji dołączono także kod CSS, nie został on zaprezentowany, ponieważ nie ma wpływu na działanie kodu JavaScript. Aby odseparować działanie Javascript od innych elementów strony, kontener DIV otrzymał identyfikator (atrybut id).

<div id="gra">
	<figure>
	  <img src="karty/null.png" alt="Karta">
	  <figcaption>Gracz</figcaption>
	</figure>
	<figure>
	  <img src="karty/null.png" alt="Karta">
	  <figcaption>Komputer</figcaption>
	</figure>
	<p>Zagrasz?</p>
	<p><a href="#">Graj!</a></p>
</div>

Kod JavaScript

Sterowanie grą odbywa się za pomocą zdarzenia polegającego na kliknięciu znajdującego się w kontenerze gry odnośnika (wiersz nr 2). Dla ułatwienia implementacji, pliki graficzne poszczególnych kart otrzymały dające się łatwo porównywać nazwy. „9ka” oznacza dziewiątkę karo, „14tr” asa trefl. Jak wspomniano, w grze nie uwzględnia się hierarchii kolorów, jednak mogą one przydać się podczas tworzenia innej aplikacji, dodatkowo pliki muszą mieć unikalną nazwę.

W kolejnym bloku skryptu operacje realizowane oddzielnie dla gracza i dla komputera, co w efekcie ich dwukrotne wywoływanie w różnych kontekstach. Fabryczna metoda splice() obiektu Array posłużyła do usuwania elementów tablicy zawierającej karty. Zwraca ona usunięte elementy w postaci tablicy, w tym przypadku jest to tablica jednolelementowa, bo usuwa się tylko pojedynczy element (drugi argument metody to 1). Aby gra nie była przewidywalna, indeks karty do usunięcia jest losowany. Zwrócone przez metodę elementy zapisywane są w zmiennych a i b. Przy kolejnym kliknięciu wylosowane karty wracają do gry.

W kolejnej fazie osiągany jest efekt wizualny, na podstawie wylosowanych nazw na stronę wstawiane są odpowiednie pliki prezentujące karty. Metoda parseInt() przetwarza argument w postaci łańcucha znaków i zwraca liczbę całkowitą typu integer, w przypadku przyjętej w grze konwencji nazw po prostu „ucina” w nazwie litery. Otrzymane wartości numeryczne można z sobą porównać w celu ustalenia zwycięzcy. W końcowej fazie skryptu do kodu HTML wstawiany jest tekst informujący o rozstrzygnięciu rozgrywki i zwracana jest wartość false, ponieważ kliknięcie odnośnika nie powinno wywoływać jego standardowej funkcji.

window.onload = function() {
  document.getElementById('gra').getElementsByTagName('a')[0].onclick = function() {
  	var a,b,i,k;
	var k = [
		'9ka','9ki','9pi','9tr',
		'10ka','10ki','10pi','10tr',
		'11ka','11ki','11pi','11tr',
		'12ka','12ki','12pi','12tr',
		'13ka','13ki','13pi','13tr',
		'14ka','14ki','14pi','14tr'
	];

	a=k.splice(Math.floor(Math.random() * k.length),1)[0];
	b=k.splice(Math.floor(Math.random() * k.length),1)[0];

	document.getElementById('gra').getElementsByTagName('img')[0].src='karty/'+a+'.png';
	document.getElementById('gra').getElementsByTagName('img')[1].src='karty/'+b+'.png';

	a=parseInt(a);
	b=parseInt(b);

	if(a>b) k = 'Wygrałeś';
	else if(a<b) k = 'Przegrałeś';
	else if(a==b) k = 'Remis';

	document.getElementById('gra').getElementsByTagName('p')[0].innerHTML=k;
	return false;
  }
}

Możliwe usprawnienia gry

Prezentowana gra jest mało ciekawa, można ją trochę uatrakcyjnić, np.:

• zaimplementować liczniki i tury, dające możliwość ustalenia zwycięzcy dopiero po np. pięciu losowaniach;
• uwzględniając pierwszą ewentualną modyfikację, można zaimplementować dodatkowo tasowanie i trwałe usuwanie karty po wylosowaniu, wtedy można wykonać grę „Oczko”, „Blackjack” i podobne.
• uwzględniając poprzednie, można wykonać grę „Wojna” i podobne.

Jak widać, mimo swojej prostoty, prezentowana gra może być punktem wyjścia do otrzymania wielu gier karcianych.