@lukasz.developerHTML5 w tworzeniu gier (cz. 1) wersja zaktualizowana

HTML5 w tworzeniu gier (cz. 1) wersja zaktualizowana

27.12.2010 22:42, aktualizacja: 30.12.2010 23:07

Hej,

jakiś czas temu zainteresowałem się HTML5, a w szczególności znanym już i lubianym ;) elementem Canvas, który w połączeniu z JavaScriptem wydaje się być znośnym narzędziem do tworzenia interaktywnych elementów, a nawet prostych gier. Wobec szumu, który przez jakiś czas trwał (i być może cały czas trwa) wokół HTML5, jego możliwości i konkurencyjności dla technologii Flash, wygląda to na temat, któremu warto się przyjrzeć.

W kilku częściach tego tutoriala postaram się pokazać jak stworzyć proste gry lub dema ilustrujące poszczególne możliwości HTML5. Do implementacji odpowiedniego zachowania strony użyję języka JavaScript. Można więc ten artykuł potraktować jako minitutorial obu z wyżej wymienionych.

Już na wstępie chcę zaznaczyć, że nie zamierzam wykazywać wyższości tego rozwiązania nad Flashem. Uważam, że HTMLowi jeszcze trochę brakuje, żeby mógł z nim konkurować, więc obie technologie mogą współistnieć jeszcze przez dość długi czas. Nie o tym będzie ten artykuł (a przynajmniej jego dalsza część :P).

Element Canvas

Zacznijmy od podstaw sprawdzając czym właściwie jest ów element Canvas, którego zamierzamy użyć. Według specyfikacji HTML5 ze strony organizacji w3 :

... The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly. ...

Canvas jest więc elementem, dzięki któremu skrypty mają do dyspozycji powierzchnię o określonej rozdzielczości, po której mogą rysować i dynamicznie zmieniać jego zawartość.

Szablon projektu

Na początku powinniśmy stworzyć stronę, na której umieszczony będzie nasz Canvas. Dla większej przejrzystości kod naszej aplikacji umieścimy w oddzielnym pliku ze skryptami. W uproszczeniu plik strony może wyglądać tak:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="html5Scripts.js"></script>

<title>Zabawy z HTML5</title>
</head>
<body>
<canvas id="mojCanvas">
Twoja przeglądarka nie obsługuje elementu Canvas.
</canvas>
<script>
	inicjalizujGre(document.getElementById("mojCanvas"));
</script>
</body>
</html>

Warto zwrócić uwagę na DOCTYPE i sposób określenia języka, znacznie skrócone względem wcześniejszej wersji :). Nie ma tu szczególnie skomplikowanych fragmentów: podłączamy nasz plik ze skryptami, umieszczamy nasz canvas i przekazujemy go do funkcji inicjalizującej. Dodatkowo wewnątrz znacznika canvas umieszczamy tekst, który zostanie wyświetlony, jeśli przeglądarka nie obsługuje tego elementu.

Główna pętla gry

Jeśli gra ma posiadać elementy zmieniające się w czasie, powinna posiadać pętlę główną. Możemy ją zaimplementować następująco w oparciu o funkcję wywoływaną w timerze co określoną liczbę milisekund. Plik html5Scripts.js będzie wówczas prezentował się następująco:


var canvasElement;

var szerokoscCanvas = 640;
var wysokoscCanvas = 480;

var context;

var dlugoscKlatki = 100;

function glownaPetla()
{
	
}

function inicjalizujGre(glownyCanvas)
{
	canvasElement = glownyCanvas;
	canvasElement.width = szerokoscCanvas;
	canvasElement.height = wysokoscCanvas;
	
	/* jeśli element canvas jest obsługiwany */
	if (canvasElement.getContext)
	{
		context = canvasElement.getContext("2d");
		
		/* uruchom glowna petle gry */
		setInterval(glownaPetla, dlugoscKlatki);
	}
	else
	{
		alert("Element Canvas nie jest obsługiwany przez twoją przeglądarkę.");
	}
}

Zimowy klimat

Mamy skrypt inicjalizujący część najważniejszych zmiennych dla obsługi gry, jednak w pętli głównej nic się nie dzieje. Na zakończenie tej części dopiszmy coś, żeby wczuć się w świąteczny klimat :). Przy okazji pokażę m. in. jak można "zasymulować" klasy w Java Script, w którym tak naprawdę klas nie ma :P.

Dodajmy kilka nowych linii na początku naszego pliku ze skryptami:


var dlugoscKlatki = 100;
var licznikKlatek = 0;
var liczbaPlatkowMax = 100;

//maksymalny promien platka
var rozmiarPlatkaMax = 5;
/* maksymalna liczba klatek, 
przez ktore platek moze leciec bez mozliwosc zmiany kierunku */
var dlugoscProstegoToruMax = 30;

function PlatekSniegu(startX, startY)
{
	//wspolrzedna x
	this.x = startX;
	//wspolrzedna y
	this.y = startY;
	//promien
	this.r = 5;
	//pozioma skladowa predkosci platka: -1 w lewo, 0 brak, 1 w prawo
	this.kierunek = 0; /* wartosc ze zbioru {-1, 0, 1} */
	//liczba klatek do nastepnego losowania skladowej poziomej kierunku
	this.dlugosc = 0;
}

var platki = [];

Dodaliśmy właśnie coś na kształt konstruktora klasy PlatekSniegu, który definiuje pola xy, r oraz dlugosc. Więcej o sposobach definiowania klas w jednym z kolejnych postów ;).

Następnie dodajmy jeden płatek do tablicy zanim główna pętla zostanie wywołana po raz pierwszy.


//w funkcji inicjalizujGre
...
		context = canvasElement.getContext("2d");
		
		platki[0] = new PlatekSniegu(100, 0);
		
		/* uruchom glowna petle gry */
		setInterval(glownaPetla, dlugoscKlatki);
...

Na koniec zmodyfikujmy główną pętlę w następujący sposób:


function glownaPetla()
{
	/* wyczysc ekran po poprzedniej klatce */
	context.fillStyle = "rgba(0, 0, 0, 1)";
	context.fillRect(0, 0, szerokoscCanvas, wysokoscCanvas);
	

	/* zaktualizuj zmienne i narysuj aktualna klatke */

	//co 10 klatek dodaj nowy platek sniegu az do osiagniecia maksymalnej ich liczby
	if (licznikKlatek++ == 10 && platki.length < liczbaPlatkowMax)
	{
		//dodaj nowy platek
		var nowyPlatek = new PlatekSniegu(Math.floor(Math.random()*szerokoscCanvas), 0);
		nowyPlatek.r = Math.floor(Math.random()*rozmiarPlatkaMax) + 1;
		nowyPlatek.dlugosc = Math.floor(Math.random()*dlugoscProstegoToruMax) + 1;
		platki[platki.length] = nowyPlatek;
		licznikKlatek = 0;
	}
	
	//dla kazego platka
	for(var j = 0; j < platki.length; j++)
	{
		//jesli platek jest poza canvasem
		if (platki[j].y > wysokoscCanvas + platki[j].r)
		{
			//przesun go na gore
			platki[j].y = 0;
		}
		
		//sprawdz czy wylosowac nowy kierunek lotu platka
		if (platki[j].dlugosc > 0)
		{
			platki[j].dlugosc--;
		}
		else
		{
			//losujemy liczbe calkowita z przedzialu [1;30]
			platki[j].dlugosc = Math.floor(Math.random()*dlugoscProstegoToruMax)+1;
			
			//losujemy liczbe ze zbioru {-1, 0, 1}
			platki[j].kierunek = Math.floor(Math.random()*3)-1; 
		}
		
		//aktualizuj pozycje platka
		platki[j].x += platki[j].kierunek;
		platki[j].y++;
		
		//rysuj platek
		context.fillStyle = "#fff";
		context.beginPath();
		context.arc(platki[j].x, platki[j].y, platki[j].r, 0, 2*Math.PI, true /* informacja w ktora strone rysowac luk */);
		context.closePath();
		context.fill();
	}
}

Po uruchomieniu naszym oczom powinien ukazać się padający śnieg :).

Przykład miał być krótki, ale trochę się rozrósł :P. Komentarze tłumaczą jakie zadanie realizują kolejne linie kodu. Jeśli coś nie działa, coś działa:P, coś nie jest jasne lub jest zbyt jasne i następnym razem nie muszę tak szczegółowo opisywać, piszcie :).

Mam nadzieję, że ten artykuł pomoże choć trochę osobom rozpoczynającym swoją przygodę z HTML5 lub/i językiem Java Script. W kolejnej części napiszę trochę m. in. o animacji i interakcji z użytkownikiem.

Pozdrawiam,

Łukasz

P.S. Przed publikacją tego posta zauważyłem, że niedawno pojawił się wpis o HTML5 pt. Gry w HTML5 autorstwa użytkownika deepone. Co prawda mój nie jest inspirowany tamtym, ale warto go przeczytać i zagrać w opisaną tam grę o piratach i stokrotkach :).

UPDATE

W kodzie przykładowym pojawiły się drobne błędy. Nie wątpię, że szybko je wykryliście, ale dla jasności tutoriala poprawiłem je :). Jeśli pojawią się jakieś problemy z uruchomieniem przykładu, piszcie.