Tytuł oryginału: HTML5 Games: Creating Fun with HTML5, CSS3, and WebGL

Tłumaczenie: Maciej Reszotnik

Projekt okładki: Jan PaluchMateriały graficzne na okładce zostały wykorzystane za zgodą Shutterstock Images LLC.

ISBN: 978-83-246-4480-3

© 2012 John Wiley and Sons, Ltd.

All Rights Reserved. Authorised translation from the English language edition published by John Wiley & Sons Limited. Responsibility for the accuracy of the translation rests solely with Helion S.A. and is not the responsibility of John Wiley & Sons Limited.

No part of this book may be reproduced in any form without the written permission of the original copyright holder, John Wiley & Sons Limited.

Translation copyright © 2012 by Helion S.A.

Wiley and the John Wiley & Sons, Ltd logo are trademarks or registered trademarks of John Wiley and Sons, Ltd and/ or its affiliates in the United States and/or other countries, and may not be used without written permission. All other trademarks are the property of their respective owners. John Wiley & Sons, Ltd is not associated with any product or vendor mentioned in the book.

All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher.

Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacjiw jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji.

Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli.

Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związanez tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartychw książce.

Wydawnictwo HELIONul. Kościuszki 1c, 44-100 GLIWICEtel. 32 231 22 19, 32 230 98 63e-mail: helion@helion.plWWW: http://helion.pl (księgarnia internetowa, katalog książek)

Drogi Czytelniku!Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/htm5tgMożesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.

Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/htm5tg.zip

Printed in Poland.

• Kup książkę• Poleć książkę • Oceń książkę

• Księgarnia internetowa• Lubię to! » Nasza społeczność

http://helion.pl/rt/htm5tghttp://helion.pl/rf/htm5tghttp://helion.pl/ro/htm5tghttp://helion.plhttp://ebookpoint.pl/r/4CAKF

Spis tre�ci Wst�p ....................................................................................................... 13

Cz��� I. Wst�p do gier w standardzie HTML5 ..................................... 17

Rozdzia� 1. Gry w sieci ................................................................................................. 19HTML5 — rys historyczny .............................................................................................20HTML5 a gry ..................................................................................................................20

Element canvas .........................................................................................................21D�wi�k .......................................................................................................................22

WebSocket .....................................................................................................................23Magazyn sieciowy ......................................................................................................24WebGL ......................................................................................................................24HTML5 (nie) jest pogromc� Flasha ...........................................................................25

Gwarantowanie wstecznej kompatybilno�ci ....................................................................25Wykrywanie w�asno�ci ...............................................................................................25U�ywanie biblioteki Modernizr ..................................................................................26Wype�nianie luk .........................................................................................................26

Konstruowanie gry .........................................................................................................27Podsumowanie ...............................................................................................................28

Rozdzia� 2. Pierwsze kroki ........................................................................................... 29Planowanie gry ...............................................................................................................30

Dopasowywanie brylantów .........................................................................................30Dopasowywanie .........................................................................................................30Etapy gry ....................................................................................................................31

Definiowanie warstw gry ................................................................................................31Ekran powitalny .........................................................................................................31Menu g�ówne .............................................................................................................31Gra .............................................................................................................................32Rekordowe wyniki ......................................................................................................32

Tworzenie szkieletu aplikacji ..........................................................................................33Struktura HTML .......................................................................................................34Nadawanie stylu ........................................................................................................34Wczytywanie skryptów ...............................................................................................36

6 HTML5. TWORZENIE GIER

Projektowanie ekranu powitalnego .................................................................................40U�ywanie fontów sieciowych .....................................................................................40Formatowanie ekranu powitalnego ............................................................................41

Podsumowanie ...............................................................................................................43

Rozdzia� 3. HTML i urz�dzenia mobilne ...................................................................... 45Tworzenie aplikacji sieciowych na urz�dzenia przeno�ne ..............................................46

Napisz raz a dobrze ....................................................................................................46Platformy mobilne — wyzwania .................................................................................47

Obs�uga sterowania na urz�dzeniu mobilnym ................................................................47Sterowanie za pomoc� klawiatury ..............................................................................47Mysz kontra dotyk ......................................................................................................48

Przystosowywanie gry do niskiej rozdzielczo�ci ...............................................................49Projektowanie skalowalnych uk�adów strony ..................................................................50

Kontrolowanie przestrzeni operacyjnej ......................................................................51Wy��czenie skalowania ..............................................................................................52

Tworzenie ró�nych widoków ..........................................................................................52Tworzenie g�ównego menu ........................................................................................53Dodawanie modu�ów ekranu .....................................................................................54CSS i zapytania medialne ..........................................................................................57Wykrywanie orientacji urz�dzenia .............................................................................58Dodawanie mobilnych arkuszy stylów ........................................................................59

Tworzenie gier na systemy iOS i Android .......................................................................61Umieszczanie aplikacji na ekranie g�ównym telefonu ................................................61Usuni�cie interfejsu przegl�darki ..............................................................................68

Debugowanie aplikacji mobilnych ..................................................................................71W��czanie debugera Safari ........................................................................................71Uzyskanie dost�pu do logów w Androidzie .................................................................73

Podsumowanie ...............................................................................................................73

Cz��� II. Tworzenie komponentów gry ................................................ 75

Rozdzia� 4. Konstruowanie gry .................................................................................... 77Tworzenie modu�u planszy .............................................................................................78

Inicjalizowanie stanu gry ...........................................................................................79Wype�nianie planszy ..................................................................................................81

Implementacja zasad .....................................................................................................83Walidacja ruchów gracza ...........................................................................................83Wykrywanie �a�cuchów .............................................................................................85Generowanie nowych klejnotów ................................................................................87Przyznawanie punktów ..............................................................................................88Ponowne wype�nianie siatki .......................................................................................89Dopasowywanie brylantów .........................................................................................92

Podsumowanie ...............................................................................................................93

Rozdzia� 5. Pracownicy i delegowanie zada� ............................................................... 95Pracownicy sieciowi ........................................................................................................96

Pracownicy — ograniczenia .......................................................................................96Mo�liwo�ci pracowników sieciowych ..........................................................................97

SPIS TRECI 7

Korzystanie z pracowników ............................................................................................98Wysy�anie wiadomo�ci ...............................................................................................98Otrzymywanie wiadomo�ci ........................................................................................99Przechwytywanie b��dów ...........................................................................................99Wspó�dzieleni pracownicy .......................................................................................100(Nie) Pierwszy przyk�ad ...........................................................................................101

Wykorzystywanie pracowników w grach .......................................................................103Tworzenie modu�u pracownika ................................................................................104Utrzymanie starego interfejsu ..................................................................................105

Podsumowanie .............................................................................................................110

Rozdzia� 6. Element canvas i grafika .......................................................................... 111Grafika w sieci ..............................................................................................................112

Obrazy bitmapowe ...................................................................................................112Grafika SVG .............................................................................................................112Element canvas .......................................................................................................113Element canvas — najlepsze rozwi�zanie? ..............................................................113

Rysowanie na elemencie canvas ..................................................................................114Rysowanie �cie�ek i figur .........................................................................................115

uki i okr�gi .............................................................................................................117Zaawansowane style wype�niania i konturowania ....................................................121Transformacje .........................................................................................................124Do��czanie tekstu, obrazu i cieni .............................................................................126Dodawanie tekstu ....................................................................................................127Zarz�dzanie stosem stanów .....................................................................................130Rysowanie logo HTML5 ...........................................................................................131Kompozycje ..............................................................................................................135

Manipulowanie danymi obrazu ....................................................................................136Odczytywanie warto�ci pikseli ..................................................................................136Uaktualnianie warto�ci pikseli .................................................................................137Eksport danych obrazu ............................................................................................139Bezpiecze�stwo i na�o�one ograniczenia .................................................................139Tworzenie efektów specjalnych na poziomie pikseli ................................................140

Podsumowanie .............................................................................................................141

Rozdzia� 7. Tworzenie szaty graficznej gry ................................................................. 143Wst�pne �adowanie plików ...........................................................................................144

Dopasowanie wielko�ci obrazów ..............................................................................144Modyfikowanie skryptu �adowania ...........................................................................145Pasek post�pu ..........................................................................................................149

Upi�kszanie t�a .............................................................................................................151Konstruowanie ekranu gry ...........................................................................................153

Nanoszenie planszy na p�ótno ..................................................................................154Definiowanie planszy bez u�ycia p�ótna ...................................................................160

Podsumowanie .............................................................................................................165

Rozdzia� 8. Interakcja w grze ...................................................................................... 167Identyfikowanie dzia�a� u�ytkownika ...........................................................................168

Zdarzenia obs�ugi myszy a ekrany dotykowe ............................................................168Wirtualna klawiatura ...............................................................................................168

8 HTML5. TWORZENIE GIER

Zdarzenia dotykowe .................................................................................................170Zdarzenia sterowania i p�ótna ..................................................................................174

Konstruowanie modu�u sterowania ..............................................................................176Obs�uga zdarze� sterowania ....................................................................................177Implementowanie mechaniki gry .............................................................................180Powi�zanie kontrolek z funkcjami gry ......................................................................184

Podsumowanie .............................................................................................................189

Rozdzia� 9. Animowanie grafiki w grze ....................................................................... 191Wdra�anie interakcji ....................................................................................................192

Synchronizacja animacji ..........................................................................................193Animowanie znacznika ............................................................................................196Animowanie dzia�a� w grze .....................................................................................197

Punkty i czas ................................................................................................................206Tworzenie elementów interfejsu u�ytkownika .........................................................207Tworzenie licznika czasu .........................................................................................210Przyznawanie punktów ............................................................................................211Koniec gry ................................................................................................................219

Podsumowanie .............................................................................................................222

Cz��� III. Efekty 3D i d�wi�k ............................................................. 223

Rozdzia� 10. Efekty d�wi�kowe w grach ..................................................................... 225HTML5 i d�wi�k ..........................................................................................................226

Wykrywanie obs�ugi audio .......................................................................................226Wojny formatów — przebieg konfliktu .....................................................................227Odnajdywanie efektów d�wi�kowych .......................................................................229

U�ywanie elementu audio ............................................................................................229Sterowanie odtwarzaniem .......................................................................................232D�wi�k a urz�dzenia mobilne ..................................................................................235

Dane audio ...................................................................................................................235Korzystanie z API danych Mozilla ............................................................................236Kilka przyk�adów ......................................................................................................237

Konstruowanie modu�u audio ......................................................................................241Przygotowanie do odtwarzania d�wi�ku ...................................................................242Odtwarzanie efektów d�wi�kowych ..........................................................................242Zatrzymywanie d�wi�ku ..........................................................................................244Sprz�tanie ...............................................................................................................244

Do��czanie efektów d�wi�kowych do gry ......................................................................245Odtwarzanie d�wi�ku w ekranie gry ........................................................................245

Podsumowanie .............................................................................................................247

Rozdzia� 11. WebGL i grafika 3D ................................................................................ 249Trzeci wymiar w sieci ...................................................................................................250

Wprowadzenie do WebGL .......................................................................................250Debugowanie w WebGL ..........................................................................................251Tworzenie modu�u pomocniczego ...........................................................................252

Shadery ........................................................................................................................252Zmienne i typy danych ............................................................................................252Shadery WebGL — praktyczne zastosowanie ..........................................................256

SPIS TRECI 9

Zmienne jednolite ...................................................................................................260Zmienne ró�norodne ...............................................................................................262

Renderowanie trójwymiarowych obiektów ....................................................................262Korzystanie z buforów wierzcho�ków .......................................................................263U�ywanie buforów indeksów ....................................................................................264Korzystanie z modeli, widoków i projekcji ................................................................265Macierz widoku modelu ...........................................................................................266Renderowanie ..........................................................................................................268

adowanie modeli Collada .......................................................................................271

Wykorzystywanie tekstur i o�wietlenia .........................................................................273Dodawanie o�wietlenia ............................................................................................273O�wietlenie pikselowe ..............................................................................................276Tworzenie tekstur ....................................................................................................278

Tworzenie modu�u wy�wietlania WebGL .....................................................................283

adowanie plików WebGL .......................................................................................284Przygotowanie modu�u WebGL ................................................................................285Renderowanie klejnotów ..........................................................................................287Animowanie klejnotów .............................................................................................292

Podsumowanie .............................................................................................................294

Cz��� IV. Magazyn lokalny i tryb gry dla wielu graczy ....................... 295

Rozdzia� 12. Magazyn lokalny i tryb cache’owania ..................................................... 297Magazynowanie danych — magazyn sieciowy ..............................................................298

U�ywanie interfejsu magazynu ................................................................................298Konstruowanie modu�u magazynu ...........................................................................301

Zapisywanie stanu gry na sta�e .....................................................................................303Zamkni�cie gry ........................................................................................................303Pauzowanie gry ........................................................................................................305Zapisywanie danych gry ...........................................................................................306

Tworzenie listy najlepszych wyników ...........................................................................308Konstruowanie ekranu wyników ..............................................................................309Przechowywanie rekordowych wyników ..................................................................311Wy�wietlanie rekordowych wyników ........................................................................312

Pami�� podr�czna aplikacji ..........................................................................................313Manifest pami�ci podr�cznej ...................................................................................313

Podsumowanie .............................................................................................................316

Rozdzia� 13. Technologia WebSocket i tryb wieloosobowy gry ................................... 317Korzystanie z technologii WebSocket ...........................................................................318

Nawi�zywanie po��czenia z serwerem .....................................................................318Komunikacja w standardzie WebSocket ..................................................................321

Stosowanie systemu Node.js po stronie serwera ...........................................................322Node.js — instalacja ................................................................................................323Konstruowanie serwera HTTP .................................................................................324Konstruowanie pokoju czatu w technologii WebSocket ...........................................326

Podsumowanie .............................................................................................................331

10 HTML5. TWORZENIE GIER

Rozdzia� 14. Dodatkowe zasoby .................................................................................. 333Korzystanie z oprogramowania po�rednicz�cego ..........................................................334

Box2D ......................................................................................................................334Impact .....................................................................................................................335Three.js ...................................................................................................................337

Przystosowywanie gier do dzia�ania na urz�dzeniach mobilnych ..................................338PhoneGap ................................................................................................................338Appcelerator Titanium ............................................................................................341

Dystrybucja gier ...........................................................................................................342Chrome Web Store ..................................................................................................342Zeewe ......................................................................................................................343

Google Play ...................................................................................................................344App Store .................................................................................................................344

Korzystanie z us�ug sieciowych .....................................................................................345TapJS .......................................................................................................................345Playtomic .................................................................................................................345

JoyentCloud Node ........................................................................................................346Podsumowanie .............................................................................................................346

Cz��� V. Dodatki ................................................................................. 349

Dodatek A. Element canvas — zbiór odwo�a� ............................................................. 351Element canvas ............................................................................................................352API kontekstu dwuwymiarowego ..................................................................................352

Zarz�dzanie stanem .................................................................................................352Transformacje .........................................................................................................353Figury i �cie�ki .........................................................................................................354Wype�nienia i linie ...................................................................................................356Cienie ......................................................................................................................357Obrazy .....................................................................................................................358Tekst ........................................................................................................................358Kompozycje ..............................................................................................................359Manipulowanie pikselami ........................................................................................360Dost�pno�� ..............................................................................................................361

Dodatek B. WebGL — zbiór odwo�a� .......................................................................... 363API WebGL — zbiór odwo�a� .......................................................................................364

Typy danych ............................................................................................................364Typy tablic ...............................................................................................................365Bufory ......................................................................................................................365Shadery ...................................................................................................................366Obiekty programów ..................................................................................................367Zmienne jednolite ...................................................................................................368Atrybuty wierzcho�ków .............................................................................................369Rysowanie ................................................................................................................370Tekstury ..................................................................................................................371Mieszanie i wtapianie ..............................................................................................373Bufor szablonu .........................................................................................................374Bufor g��bi ...............................................................................................................375

SPIS TRECI 11

Bufory renderowania ...............................................................................................376Bufory ramki ............................................................................................................377Inne funkcje ............................................................................................................378Parametry ................................................................................................................380

Dodatek C. OpenGL Shading Language .......................................................................385J�zyk GLSL ES — zbiór odwo�a� .................................................................................386

Typy danych ............................................................................................................386Funkcje wbudowane ................................................................................................387Wbudowane zmienne i sta�e ....................................................................................393

Skorowidz ................................................................................................ 395

12 HTML5. TWORZENIE GIER

ROZDZIA� 4Konstruowanie gry

W tym rozdziale:

� Tworzenie modu�u planszy

� Zapisywanie stanu gry

� Mechanizmy uk�adania klejnotów

� Wdra�anie regu�

� Reagowanie na zmian� po�o�enia klejnotów

78 HTML5. TWORZENIE GIER

W tym rozdziale poka��, w jaki sposób mo�na zaimplementowa� regu�y i mechanik�, które b�d� ste-rowa� dzia�aniem gry. Przedstawi� Ci kod niezb�dny do stworzenia planszy, z któr� pozosta�e ele-menty programu b�d� mog�y prowadzi� interakcj�. Zaprezentuj� te� metod� zachowania stanu grypoprzez odr�bny modu�, który pozwoli na modyfikacj� planszy w pewnych �ci�le okre�lonych warun-kach. Dodatkowo poprowadz� Ci� przez konstrukcj� kodu, który w odpowiedzi na dopasowania b�dzieodpowiednio zmienia� po�o�enie pozosta�ych klejnotów.

Przedstawi� równie� kilka problemów wynikaj�cych z zastosowania przez u�ytkownika ró�nychurz�dze� steruj�cych rozgrywk�. Gra dla jednej osoby dzia�a w oparciu o lokalny kod uruchamiany postronie klienta, który opisano w tym rozdziale. Zadbamy jednak tak�e o serwerow� implementacj�tych samych regu�.

Tworzenie modu�u planszyKluczowa mechanika gry jest oddzielona od elementów wy�wietlania i sterowania aplikacj�. Modu�planszy, który b�d� omawia� w tym rozdziale, jest modelem danych stanu gry — a dok�adniej: obecnegouk�adu klejnotów. Modu� ten ods�ania metody, które mog� zosta� u�yte przez inne modu�y (g�ówniemodu� ekranu gry) do interakcji ze stanem rozgrywki. Plansza ma s�u�y� jako zaplecze ekranu gry,dlatego kod w tym rozdziale nie b�dzie zawiera� �adnych nowych elementów wizualnych.

Jak sama nazwa wskazuje, modu� planszy jest logiczn� reprezentacj� samej planszy z klejnotami.Udost�pnia ona innym modu�om tylko dwie funkcje — funkcj� zapyta�, która s�u�y do uzyskaniadost�pu do klejnotów, i funkcj� umo�liwiaj�c� przemieszczanie brylantów. Funkcja przemieszczaniazamienia miejscami tylko par� klejnotów, gdy� wed�ug zasad klejnoty mog� by� przesuwane tylkozgodnie z ustalonymi regu�ami gry. Przemieszczenie klejnotów ma swoje konsekwencje: w jego wy-niku klejnoty mog� zosta� usuni�te, co spowoduje pojawienie si� nowych. To w�a�nie modu� planszyb�dzie odpowiedzialny za automatyczne spe�nianie wszelkich warunków i ró�ne zachowania. Zosta�on zapisany w pliku board.js w folderze scripts. Listing 4.1 przedstawia jego pierwsz� wersj�.

Listing 4.1. Modu� planszyjewel.board = (function() { /* funkcje gry */ return { /* odsłonięte metody */ };})();

Odwo�aj si� teraz do pliku board.js w skrypcie loader.js, tak jak pokazano na listingu 4.2.

Listing 4.2. adowanie modu�u planszy// Ładowanie — etap 2.if (Modernizr.standalone) { Modernizr.load([ { load : [ "scripts/screen.main-menu.js", "scripts/board.js" ] } ]);}

Na tym etapie podstawowy modu� planszy nie daje nam �adnych opcji. Dlatego te� nadszed� czas,by�my go usprawnili i zaj�li si� jego pierwsz� metod�.

ROZDZIA 4. KONSTRUOWANIE GRY 79

Inicjalizowanie stanu gryKod planszy definiuje kilka ustawie�, w tym: liczb� wierszy i kolumn, typy klejnotów itd. Tego ro-dzaju opcje najlepiej jest odseparowa� od samego kodu gry, tak by mo�na by�o je �atwo zmieni� bezpotrzeby analizowania ca�ego skryptu linijka po linijce. Listing 4.3 przedstawia nowy obiekt — settings— dodany do przestrzeni nazw w skrypcie loader.js.

Listing 4.3. Dodawanie obiektu settingsvar jewel = { screens : {}, settings : { rows : 8, cols : 8, baseScore : 100, numJewelTypes : 7 }};

Parametry rows i cols definiuj� rozmiar — odpowiednio — wierszy i kolumn. Plansza w Brylantowymwojowniku powsta�a na planie siatki 8×8, która bezproblemowo mie�ci si� na ma�ym ekranie. Z koleiustawienie baseScore okre�la liczb� punktów, jak� gracz otrzymuje po usuni�ciu jednego klejnotuz �a�cucha. Wynik ten jest mno�ony w przypadku �a�cuchów, w których znajduj� si� wi�cej ni� trzyklejnoty. Ja ustawi�em podstawow� liczb� punktów na 100, ale nie ma przeciwwskaza�, by� j� zmieni�,je�li zale�y Ci na uzyskaniu wy�szych lub ni�szych wyników. Ostatnie nowe ustawienie — numJewelTypes— wskazuje liczb� typów klejnotów. Warto�� ta odpowiada równie� liczbie sprite’ów (dwuwymiarowychobrazków) przedstawiaj�cych kamienie.

Nowe parametry s� udost�pniane pozosta�ej cz��ci gry i, co wa�niejsze (przynajmniej na razie),modu�owi planszy.

Inicjalizowanie planszyUsprawnianie modu�u zaczniemy od opracowania funkcji ustawiaj�cej i inicjuj�cej plansz�. Nimw�a�ciwa gra si� rozpocznie, plansza jest wype�niana losowymi klejnotami. Listing 4.4 prezentujezawarto�� funkcji initialize() w skrypcie board.js.

Listing 4.4. Funkcja inicjalizuj�cajewel.board = (function() { var settings, jewels, cols, rows, baseScore, numJewelTypes;

function initialize() { settings = jewel.settings; numJewelTypes = settings.numJewelTypes, baseScore = settings.baseScore, cols = settings.cols; rows = settings.rows; fillBoard(); }

function print() {

80 HTML5. TWORZENIE GIER

var str = ""; for (var y = 0; y < rows; y++) { for (var x = 0; x < cols; x++) { str += getJewel(x, y) + " "; } str += "\r\n"; } console.log(str); }

return { initialize : initialize, print : print };})();

W listingu 4.4 z pewno�ci� Twoj� uwag� przyku�y deklaracje zmiennych. Pierwsza zmienna impor-tuje modu� ustawie�, którego zawarto�� b�dzie nam za chwil� potrzebna. Druga zmienna — jewels— jest tablic� tablic, czyli dwuwymiarow� tablic� reprezentuj�c� stan planszy. W tablicy ka�dy klej-not jest reprezentowany przez liczb� ca�kowit�, która wskazuje jego typ. Wykorzystanie struktury ta-blicy upraszcza dost�p do konkretnych kamieni, w naturalny sposób tworz�c system wspó�rz�dnych.Przyk�adowo poni�szy fragment kodu pobiera klejnot z kratki o wspó�rz�dnych x=3, y=2:

var type = jewels[3][2];

Listing prezentuje równie� kilka zmiennych, których warto�ci wywodz� si� z modu�u settings. Opi-suj� je w nast�pnym rozdziale. Funkcja print(), któr� stworzy�em z my�l� o debugowaniu, zwracadane z planszy do analizy w konsoli JavaScript. Modu� planszy zainicjalizujesz, wpisuj�c nast�puj�c�komend� w okno konsoli:

jewel.board.initialize()

Je�li za� b�dziesz chcia� sprawdzi� generowane dane, wystarczy, �e wprowadzisz nast�puj�c� in-strukcj�, która wy�wietli je w konsoli:

jewel.board.print()

Korzystanie z funkcji asynchronicznychNim przejd� do obja�niania kolejnej funkcji, wprowad�my wspólnie ma�� modyfikacj� w funkcjiinitialize() — tak na przysz�o��. W rozdziale 5. wy�o�� Ci, jak u�y� pracowników (ang. web workers),aby przemie�ci� wykonywanie kodu do oddzielnego w�tku poprzez skonstruowanie modu�u udo-st�pniaj�cego te same metody co stworzone w tym rozdziale. Pracownicy komunikuj� si� z reszt�aplikacji poprzez asynchroniczny interfejs programowania, a to oznacza, �e równie� wszystkie meto-dy publiczne odkryte przez modu� planszy musz� dzia�a� asynchronicznie.

Podobnie gdyby� doda� modu� planszy, który korzysta�by z kodu po stronie serwera, odpowiedzialne-go za weryfikacj� i walidacj� danych, musia�by� wysy�a� asynchroniczne wywo�ania na serwer przyu�yciu technologii Ajax. Ka�da funkcja, która modyfikuje stan gry, wymaga�aby nawi�zania dwukie-runkowej komunikacji z serwerem, z tym �e odpowied� nie musia�aby by� równoznaczna z otrzyma-niem wyniku. Innymi s�owy, sam fakt, �e funkcja otrzymuje wywo�anie zwrotne, nie oznacza, �e wy-nik operacji jest gotowy.

Problem opó�nionej odpowiedzi mo�na rozwi�za� na kilka sposobów, w tym u�ywaj�c samodzielnieopracowanego systemu przydzielania zdarze� lub mechanizmu obiecanych obiektów (ang. pro-mise objects) znanego z bibliotek CommonJS i Node.js. Jednak najprostszym rozwi�zaniem jest za-pewnienie wywo�ania zwrotnego w formie argumentu dla w�a�ciwej metody, która wywo�a funkcj�

ROZDZIA 4. KONSTRUOWANIE GRY 81

zwrotn� po zako�czeniu operacji. Prawdopodobnie znasz ju� taki wzorzec deklarowania z cz�stou�ywanych funkcji JavaScriptu w rodzaju window.setTimeout() lub addEventListener() dla ele-mentów DOM. Funkcje te jako parametr przyjmuj� inne funkcje, które s� wywo�ywane w pewnymmomencie w trakcie wykonywania zadania. Listing 4.5 przedstawia zmodyfikowan� funkcj� initialize()w skrypcie board.js.

Listing 4.5. Inicjalizowanie funkcji zwrotnejjewel.board = (function() { ... function initialize(callback) { numJewelTypes = settings.numJewelTypes; baseScore = settings.baseScore; cols = settings.cols; rows = settings.rows; fillBoard(); callback(); } ....})();

Aby zainicjalizowa� plansz� poprzez konsol� JavaScript, u�yj komendy:

jewel.board.initialize(function(){})

Od tej pory wszystkie dzia�ania w funkcji initialize() b�d� wykonywane natychmiastowo, tak �erezultat b�dzie ten sam bez wywo�ywania funkcji zwrotnej. Ró�nica polega na tym, �e wszelkie do-konane zmiany u�atwi� pó�niejsz� integracj� modu�u pracownika.

Wype�nianie planszyFunkcja fillBoard() z listingu 4.5 generuje siatk� pól wed�ug warto�ci zmiennych cols i rows i wy-pe�nia j� klejnotami. Listing 4.6 pokazuje jej zawarto�� po dodaniu do skryptu board.js.

Listing 4.6. Wype�nianie planszy klejnotamijewel.board = (function() { ... function fillBoard() { var x, y; jewels = []; for (x = 0; x < cols; x++) { jewels[x] = []; for (y = 0; y < rows; y++) { jewels[x][y] = randomJewel(); } } } ...})();

Typ klejnotu jest wybierany przy u�yciu funkcji randomJewel(), która po prostu zwraca liczb� ca�kowit�mieszcz�c� si� pomi�dzy 0 a (numJewelTypes — 1). Listing 4.7 przedstawia funkcj� randomJewel().

82 HTML5. TWORZENIE GIER

Listing 4.7. Tworzenie losowego klejnotujewel.board = (function() { ... function randomJewel() { return Math.floor(Math.random() * numJewelTypes); } ...})();

Podstawowy algorytm wype�niania planszy jest ju� gotowy. Przygotowane przez nas rozwi�zanie jestjednak zawodne i nie gwarantuje przydatno�ci otrzymanej planszy. Kamienie s� wybierane losowo,wi�c istnieje szansa, �e na planszy pojawi� si� jeden lub dwa gotowe �a�cuchy. W fazie pocz�tkowejgra nie powinna ich jednak zawiera�, poniewa� gracz móg�by zosta� nagrodzony punktami za nic.Aby zagwarantowa�, �e taka sytuacja nigdy nie b�dzie mia�a miejsca, funkcja fillBoard() musiuk�ada� klejnoty tak, �eby nie formowa�y si� w rz�dy wi�cej ni� dwóch takich samych kamieni.

Algorytm wype�niania ustawia brylanty, zaczynaj�c od górnego lewego rogu i ko�cz�c na dolnymprawym. Oznacza to, �e w trakcie wype�niania wzgl�dem dowolnego kamienia inne klejnoty poja-wiaj� si� u góry i po jego lewej stronie. a�cuch sk�ada si� z trzech identycznych kamieni, a tosprawia, �e u�o�ony w�a�nie brylant nie mo�e mie� tej samej barwy co dwa u góry lub dwa po jegolewej stronie. Dla niewielkiej planszy, takiej jak w Brylantowym wojowniku, takie proste rozwi�za-nie wystarczy. Listing 4.8 ilustruje zmiany w funkcji fillBoard().

Listing 4.8. Usuwanie pocz�tkowych �a�cuchówjewel.board = (function() { ... function fillBoard() { var x, y, type; jewels = []; for (x = 0; x < cols; x++) { jewels[x] = []; for (y = 0; y < rows; y++) { type = randomJewel(); while ((type === getJewel(x-1, y) && type === getJewel(x-2, y)) || (type === getJewel(x, y-1) && type === getJewel(x, y-2))) { type = randomJewel(); } jewels[x][y] = type; } } } ...})();

Algorytm zawiera kilka p�tli, które wybieraj� typ klejnotu, tak �eby nie powsta� �aden �a�cuch. W wi�k-szo�ci przypadków losowo wybrany klejnot nie stworzy �a�cucha, ale gdyby jednak tak si� sta�o, zo-staje on zast�piony innym.

Bez mechanizmu sprawdzania granicy p�tli ta z listingu 4.8 spróbowa�aby uzyska� dost�p do kamienispoza planszy, co spowodowa�oby b��d. Dlatego te� zamiast generowa� brylanty bezpo�rednio, pro-cedura fillBoard() korzysta z funkcji pomocniczej getJewel(), która zapobiega tego rodzaju uchy-bieniom. Listing 4.9 prezentuje zawarto�� tej funkcji.

ROZDZIA 4. KONSTRUOWANIE GRY 83

Listing 4.9. Odczytywanie typu kamienia poprzez podanie jego wspó�rz�dnychjewel.board = (function() { ... function getJewel(x, y) { if (x < 0 || x > cols-1 || y < 0 || y > rows-1) { return -1; } else { return jewels[x][y]; } } ...})();

Funkcja getJewel() zwraca cyfr� -1, je�li którakolwiek ze wspó�rz�dnych wykracza poza graniceplanszy, tj. gdy warto�� wspó�rz�dnej na osi x lub y jest mniejsza od zera lub wi�ksza od, odpowiednio,(rows-1) i (cols-1). Wszystkie prawid�owe typy kamieni mieszcz� si� w zakresie [0; numTypes-1],a to gwarantuje, �e zwracana warto�� nigdy nie b�dzie wskazywa� typu klejnotu, który uformowa�by�a�cuch.

Implementacja zasadTeraz, gdy wst�pna plansza jest gotowa, mo�emy przej�� do mechaniki przemieszczania klejnotów.Nasz modu� zawiera metod� swap, która przyjmuje dwa zestawy wspó�rz�dnych jako parametry —po to, by zamieni� miejscami klejnoty, na które one wskazuj�. Wszystkie zamiany miejsc, które niespe�niaj� regu� gry, s� uznawane za niewa�ne. Zaczniemy od wdra�ania mechanizmu walidacji ru-chów gracza.

Walidacja ruchów graczaZamiana klejnotów miejscami jest wa�na jedynie, je�li jeden z nich uformuje �a�cuch z�o�ony z trzechlub wi�cej identycznych kamieni. W celu sprawdzenia poprawno�ci zamian przygotowa�em funkcj�checkChain(), która analizuje, czy w nowym miejscu klejnot stanie si� cz��ci� �a�cucha. Ca�a pro-cedura sprawdzania polega na okre�leniu typu klejnotu na wskazanej pozycji, po czym przyrówna-niu go do innych kamieni po lewej i po prawej, wraz z policzeniem, ile kamieni tego samego rodzajuznajdzie si� w bezpo�rednim s�siedztwie. Podobne przeszukiwanie odbywa si� dla kierunków w gór�i w dó�. Je�li suma wszystkich klejnotów w pionie lub poziomie b�dzie wi�ksza ni� 2 (lub 3, je�liw gr� w chodzi �rodkowy klejnot �a�cucha), dopasowanie zostanie uznane za wa�ne. Listing 4.10przedstawia dok�adn� tre�� funkcji checkChain() w pliku board.js.

Listing 4.10. Sprawdzanie �a�cuchówjewel.board = (function() { ... // Zwraca liczbę w najdłuższym łańcuchu, // który zawiera kamień o współrzędnych (x,y). function checkChain(x, y) { var type = getJewel(x, y), left = 0, right = 0, down = 0, up = 0;

// Sprawdza kamienie po prawej. while (type === getJewel(x + right + 1, y)) { right++; }

84 HTML5. TWORZENIE GIER

// Sprawdza kamienie po lewej. while (type === getJewel(x - left - 1, y)) { left++; }

// Sprawdza kamienie u góry. while (type === getJewel(x, y + up + 1)) { up++; }

// Sprawdza kamienie u dołu. while (type === getJewel(x, y - down - 1)) { down++; } return Math.max(left + 1 + right, up + 1 + down); } ...})();

Zwró� uwag� na to, �e funkcja checkChain() nie zwraca warto�ci typu boolean, lecz liczb� klejnotówznalezionych w najd�u�szym �a�cuchu. Te wyniki daj� nam troch� wi�cej danych na temat klejno-tów, które mo�na b�dzie wykorzysta� podczas punktowania ruchu. Teraz, gdy ju� wiemy, jak si� wy-krywa �a�cuchy, okre�lenie, czy ruch jest wa�ny, b�dzie wzgl�dnie �atwe. Pierwszym warunkiem jestto, �e oba brylanty musz� znajdowa� si� obok siebie. Tylko s�siaduj�ce klejnoty mog� zosta� zamie-nione miejscami. Je�li tak jest, gra powinna pozwoli� na dokonanie tymczasowej zamiany. Zgodniez wcze�niejszymi ustaleniami, je�eli ruch zostanie uznany za wa�ny, funkcja checkChain() zwróciliczb� wi�ksz� ni� 2 dla jednego lub dwóch wymiarów. Wystarczy wi�c przesun�� kamienie i zwróci�warto�� wywo�ania checkChain(). Listing 4.11 pokazuje funkcj� canSwap() zawart� w skrypcie board.js,która wdra�a ten mechanizm walidacji.

Listing 4.11. Walidacja ruchujewel.board = (function() { ... // Zwraca wartość true, jeśli klejnot (x1,y1) może zostać zamieniony miejscem // z (x2,y2), tworząc dopasowanie. function canSwap(x1, y1, x2, y2) { var type1 = getJewel(x1,y1), type2 = getJewel(x2,y2), chain;

if (!isAdjacent(x1, y1, x2, y2)) { return false; } // Tymczasowo zamienia miejscami wybrane kamienie. jewels[x1][y1] = type2; jewels[x2][y2] = type1;

chain = (checkChain(x2, y2) > 2 || checkChain(x1, y1) > 2);

// Ustawia klejnoty na poprzednie miejsce. jewels[x1][y1] = type1; jewels[x2][y2] = type2;

return chain;

ROZDZIA 4. KONSTRUOWANIE GRY 85

} return { canSwap : canSwap, ... }})();

W listingu 4.8 wprowadzono now� funkcj� pomocnicz�: isAdjacent(). Funkcja zwraca warto��true, je�li dwa podane zestawy wspó�rz�dnych wskazuj� na s�siednie komórki, i false, je�eli tak niejest. Ich ustawienie wzgl�dem siebie jest wyliczane na podstawie tzw. dystansu manhatta�skiego.Je�li dwie komórki przylegaj� do siebie, suma odleg�o�ci musi wynosi� 1. W listingu 4.12 znajdziesztre�� funkcji isAdjacent().

Listing 4.12. Sprawdzanie s�siedztwajewel.board = (function() { ... // Zwraca wartość true, jeśli klejnot (x1,y1) sąsiaduje z kamieniem (x2,y2). function isAdjacent(x1, y1, x2, y2) { var dx = Math.abs(x1 - x2), dy = Math.abs(y1 - y2); return (dx + dy === 1); } ...}

Dzia�anie funkcji canSwap() przetestujesz w konsoli JavaScript po zainicjalizowaniu modu�u planszy.Wykorzystaj te� funkcj� print() do sprawdzenia danych z planszy i upewnienia si�, �e kod dzia�a pra-wid�owo, poprzez wpisywanie w konsoli instrukcji typu jewel.board.canSwap(4,3,4,2).

Wykrywanie �a�cuchówPo dokonaniu zamiany gra przeszuka plansz� w poszukiwaniu �a�cucha i go usunie. Po wykonaniuruchu zniknie zaledwie kilka klejnotów. Pojedynczy �a�cuch powstaje w wyniku zamiany miejscamidwóch klejnotów. Je�eli w wyniku ruchu jakie� klejnoty zostan� usuni�te, w ich miejsce wejd� ka-mienie ponad nimi, a u góry planszy pojawi� si� nowe brylanty. Oznacza to, �e nale�y sprawdzi�obecno�� �a�cuchów na planszy raz jeszcze — teraz jednak zadanie to nie b�dzie wcale takie proste.Jedyn� opcj� jest przeszukanie ca�ej tablicy. Je�li wykorzystasz do tego funkcj� checkChain(), oka�esi�, �e nie jest to takie skomplikowane. Listing 4.13 przedstawia funkcj� getChains(), która prze-chodzi w p�tli przez wszystkie kamienie w poszukiwaniu �a�cuchów.

Listing 4.13. Przeszukiwanie planszyjewel.board = (function() { ... // Zwraca dwuwymiarową mapę długości łańcuchów. function getChains() { var x, y, chains = []; for (x = 0; x < cols; x++) { chains[x] = []; for (y = 0; y < rows; y++) { chains[x][y] = checkChain(x, y); } }

86 HTML5. TWORZENIE GIER

return chains; } ...})();

Zwrócona przez funkcj� getChains() zmienna chains jest dwuwymiarow� map� planszy. Zamiastdanych o typach kamieni mapa ta zawiera informacje o �a�cuchach, na które sk�adaj� si� klejnoty.Ka�da komórka na planszy jest sprawdzana poprzez wywo�anie metody checkChain(), co skutkujedopasowaniem odpowiedniej komórki na mapie do zwracanej przez funkcj� warto�ci.

Usuwanie �a�cuchów klejnotówSamo odnalezienie �a�cucha nie wystarczy. Gra musi równie� wykorzysta� otrzyman� informacj�.Dok�adniej rzecz ujmuj�c, �a�cuchy musz� zosta� usuni�te, a klejnoty ponad nimi powinny opa��na ich miejsce. Mapa �a�cuchów jest przetwarzana w funkcji check() widocznej w listingu 4.14.

Listing 4.14. Przetwarzanie �a�cuchówjewel.board = (function() { ... function check() { var chains = getChains(), hadChains = false, score = 0, removed = [], moved = [], gaps = [];

for (var x = 0; x < cols; x++) { gaps[x] = 0; for (var y = rows-1; y >= 0; y--) { if (chains[x][y] > 2) { hadChains = true; gaps[x]++; removed.push({ x : x, y : y, type : getJewel(x, y) }); } else if (gaps[x] > 0) { moved.push({ toX : x, toY : y + gaps[x], fromX : x, fromY : y, type : getJewel(x, y) }); jewels[x][y + gaps[x]] = getJewel(x, y); } } } } ...})();

Funkcja ta usuwa klejnoty z planszy i przesuwa w ich miejsce nowe. Poza zmodyfikowaniem planszyfunkcja check() zbiera informacje o usuni�tych i przesuni�tych kamieniach w dwóch tablicach —removed i moved. Dane te s� wa�ne, gdy� przydaj� si� pó�niej np. przy animowaniu zmian na ekranie.

Wykorzystuj�c zagnie�d�one p�tle, funkcja check() przechodzi przez wszystkie komórki na planszy.Je�li dana komórka zosta�a oznaczona na mapie warto�ci� wi�ksz� ni� 2, informacja o umiejscowie-niu i typie klejnotu zostaje zapisana w tablicy removed z wykorzystaniem litera�u obiektu. Kamie�,

ROZDZIA 4. KONSTRUOWANIE GRY 87

który opadnie w nowe miejsce, nadpisze dane o pozycji w pó�niejszym etapie, tote� na razie nietrzeba modyfikowa� tablicy klejnotów.

Zwró� uwag� na sposób, w jaki p�tla sprawdza wiersze: od do�u do góry zamiast z góry na dó�. Roz-wi�zanie to pozwoli Ci natychmiastowo przemie�ci� inne klejnoty w dó� planszy. Algorytm ten za-chowuje licznik ka�dej kolumny wewn�trz tablicy gaps. Nim zacznie on przetwarza� kolejn� kolum-n�, ustawia jej licznik na 0. Za ka�dym razem gdy usuni�ty zostanie klejnot, licznik jest zwi�kszanyo 1. Z kolej je�eli klejnot pozostaje na swoim miejscu, licznik tablicy gaps okre�li, czy powinien onzosta� przesuni�ty w dó�. Stanie si� tak, je�eli licznik ma warto�� dodatni� — wtedy klejnot opadniew dó� o równ� mu liczb� wierszy. Warto�� ta jest zapisana w drugiej tablicy — moved — za pomoc�podobnego litera�u obiektu, z tym �e tym razem zachowane zostan� w niej pozycja pocz�tkowa i ko�co-wa. W tym momencie nale�y uaktualni� tablic� jewels, poniewa� wskazywane przez ni� wspó�rz�dneuleg�y zmianie.

Generowanie nowych klejnotówFunkcja check() nie zosta�a do ko�ca opracowana; wci�� zawiera kilka niedoci�gni��. Przenosz�cistniej�ce klejnoty w dó�, wype�niasz co prawda luki, lecz tworzysz nowe w górnej cz��ci planszy.Dlatego te� po przetworzeniu wszystkich klejnotów w kolumnie nale�y stworzy� nowe kamienie, któresp�yn� z górnej granicy w dó�. Listing 4.15 przedstawia modyfikacj� odpowiedzialn� za ten mechanizm.

Listing 4.15. Dodawanie nowych klejnotówjewel.board = (function() { ... function check() { ... for (var x = 0; x < cols; x++) { gaps[x] = 0; for (var y = rows-1; y >= 0; y--) { ... }

// Dodaje nowe klejnoty u góry planszy. for (y = 0; y < gaps[x]; y++) { jewels[x][y] = randomJewel(); moved.push({ toX : x, toY : y, fromX : x, fromY : y - gaps[x], type : jewels[x][y] }); } } } ...})();

Liczba nowych kamieni, które trzeba wygenerowa� w kolumnie, jest równa liczbie wolnych komó-rek, które si� w niej znajduj�. Konkretne wspó�rz�dne, które maj� zaj�� klejnoty, s� �atwe do obli-czenia, poniewa� nowe kamienie zawsze spadaj� na wolne miejsca z góry planszy. Informacje o no-wych klejnotach s� dodawane do tablicy moved poza istniej�cymi wcze�niej brylantami, któreprzeniesiono ni�ej. Z uwagi na fakt, �e nowe klejnoty nie maj� wspó�rz�dnych pocz�tkowych, wpro-wadzi�em nieistniej�ce wspó�rz�dne spoza planszy, tak jakby nowe klejnoty istnia�y wcze�niej i czeka�yna swoj� kolej.

88 HTML5. TWORZENIE GIER

Przyznawanie punktówW funkcji initialize() wprowadzi�em zmienn� baseScore, na podstawie której b�d� oblicza� liczb�przyznawanych punktów. Listing 4.16 prezentuje kod odpowiedzialny za punktowanie ruchów gracza,dodany w skrypcie check().

Listing 4.16. Przyznawanie punktów za uformowane �a�cuchyjewel.board = (function() { ... function check() { ... for (var x = 0; x < cols; x++) { gaps[x] = 0; for (var y = rows-1; y >= 0; y--) { if (chains[x][y] > 2) { hadChains = true; gaps[x]++; removed.push({ x : x, y : y, type : getJewel(x, y) });

// Dodaje punkty do wyniku. score += baseScore * Math.pow(2, (chains[x][y] - 3)); } else if (gaps[x] > 0) { ... } ... } } } ...})();

Za ka�dy sk�adowy klejnot �a�cucha gra dodaje punkty do ogólnego wyniku. Liczba otrzymanychpunktów zale�y od d�ugo�ci �a�cucha. Ka�dy dodatkowy �a�cuch podwaja wynik.

Pami�taj: Zmienna score nie zawiera ca�kowitego wyniku gracza; to jedynie suma punktów ze-brana w rezultacie wykonania funkcji check(). Modu� planszy nie odzwierciedla reprezentacji ideigracza. Po prostu oblicza, jak� liczb� punktów nale�y nada� za wykonanie danego ruchu.

a�cuchy znikn��y, a powsta�e luki zosta�y wype�nione nowymi klejnotami. Trzeba jednak pami�ta�,�e nowe klejnoty mog� stworzy� nowe �a�cuchy — dlatego przed nami jeszcze troch� pracy. Funk-cja check() b�dzie wywo�ywa� siebie rekurencyjnie do czasu, gdy nie wykryje �adnych �a�cuchów.Jak pami�tamy, musi ona zwraca� zachowane zmiany. Listing 4.17 przedstawia wprowadzone w niejzmiany.

Listing 4.17. Rekurencyjna analiza planszyjewel.board = (function() { ... function check(events) { ...

ROZDZIA 4. KONSTRUOWANIE GRY 89

events = events || []; if (hadChains) { events.push({ type : "remove", data : removed }, { type : "score", data : score }, { type : "move", data : moved }); return check(events); } else { return events; } } ...}

Teraz nale�y po��czy� dane z tablic removed, moved i score z informacjami zwracanymi przez reku-rencyjne wywo�ania. W tym celu dodaj opcjonalny argument zdarzenia w funkcji check(). Argu-ment ten jest u�ywany tylko w rekurencyjnych wywo�aniach. Je�li do funkcji nie zostanie przekaza-ny �aden argument, zdarzenia s� przypisywane do pustej tablicy. Po wykonaniu analizy planszydodajemy wynik, po czym plansza zmienia si� w tablic� zdarze� poprzez u�ycie prostego formatuobiektów zdarze�, który przedstawi�em w listingu 4.16. Wszystkie obiekty zdarze� zawieraj� w�a�ci-wo�ci type i data. Je�eli gra nie znajdzie �adnych �a�cuchów, u�o�enie kamieni na planszy nie ulegniezmianie, a funkcja check() nie zostanie wywo�ana ponownie. W tym momencie zostanie zwrócona ta-blica zdarze�, która odbierze pierwsze wywo�anie i wykona ��dan� operacj�. W ten sposób podmiot,który j� wywo�a, uzyska list� wszystkich zmian, które zasz�y, nim gracz wykona kolejny ruch.

Ponowne wype�nianie siatkiW trakcie rozgrywki pr�dzej czy pó�niej dojdzie do sytuacji, w której u�o�enie kamieni na planszyzablokuje wszystkie ruchy. Gra musi rozpozna� tak� sytuacj� i zainicjowa� ponowne wype�nienie plan-szy nowymi klejnotami, by gracz móg� kontynuowa� zabaw�. Przygotujemy wi�c funkcj�, która rozpozna,czy na planszy mo�liwe s� jakiekolwiek ruchy. Listing 4.18 przedstawia tre�� funkcji hasMoves().

Listing 4.18. Sprawdzanie dost�pnych ruchówjewel.board = (function() { ... // Zwraca wartość true, jeśli znajdzie przynajmniej jeden możliwy ruch. function hasMoves() { for (var x = 0; x < cols; x++) { for (var y = 0; y < rows; y++) { if (canJewelMove(x, y)) { return true; } } } return false; } ...})();

90 HTML5. TWORZENIE GIER

Funkcja hasMoves() zwraca warto�� true, je�li co najmniej jeden klejnot mo�e zosta� przeniesiony,tak by stworzy� �a�cuch; w przeciwnym razie zwraca warto�� false. W listingu 4.19 znajdziesz po-mocnicz� metod� canJewelMove(), której zadaniem jest sprawdzenie wspó�rz�dnych dla ruchów.

Listing 4.19. Sprawdzanie wariantów ruchu dla pojedynczego kamieniajewel.board = (function() { ... // Zwraca true, jeśli współrzędne (x,y) są odwzorowane na planszy i // jeśli kamień w tym punkcie może pozostać zamieniony z sąsiednim. canJewelMove(x, y). function canJewelMove(x, y) { return ((x > 0 && canSwap(x, y, x-1 , y)) || (x < cols-1 && canSwap(x, y, x+1 , y)) || (y > 0 && canSwap(x, y, x , y-1)) || (y < rows-1 && canSwap(x, y, x , y+1))); } ...})();

Aby sprawdzi�, czy klejnot mo�e zosta� przeniesiony i stworzy� �a�cuch, metoda canJewelSwap()u�ywa funkcji canSwap() — to w�a�nie ona okre�la mo�liwo�� zamiany z jednym z czterech s�sia-duj�cych kamieni. Do wywo�ania metody canSwap() dochodzi, je�li s�siaduj�cy kamie� znajduje si�w obr�bie planszy. W rezultacie funkcja ta dokonuje zamiany z kamieniem np. po lewej stronie, tylkoje�li jego wspó�rz�dna wynosi przynajmniej 1 i jest mniejsza od (cols-1).

Je�eli gra odkryje, i� nie da si� wykona� �adnego ruchu (co nast�pi, gdy funkcja hasMoves() zwrócifalse), plansza zostanie automatycznie wype�niona nowymi brylantami. Wyzwalacz wype�nianiaumie�ci�em w funkcji check(). Po zidentyfikowaniu �a�cuchów, usuni�ciu klejnotów i wygenero-waniu nowych kamieni wywo�ywana jest funkcja hasMoves() i w przypadku niestwierdzenia mo�liwo�ciruchu wprowadza nowy zestaw brylantów na planszy. Wszelkie opisane zmiany znajdziesz w li-stingu 4.20.

Listing 4.20. Wyzwalanie wype�nienia planszyjewel.board = (function() { ... function check(events) { ... if (hadChains) { ...

// Wypełnia planszę ponownie, jeśli gracz nie będzie miał żadnego ruchu. if (!hasMoves()) { fillBoard(); events.push({ type : "refill", data : getBoard() }); } return check(events); } else { return events; } }})();

ROZDZIA 4. KONSTRUOWANIE GRY 91

Poza wyzwoleniem metody fillBoard() w listingu pojawia si� zdarzenie wype�niania dodane do ta-blicy zdarze�. Zawiera ono kopi� planszy stworzon� przez funkcj� getBoard() z listingu 4.21.

Listing 4.21. Kopiowanie danych z planszyjewel.board = (function() { ...

// Tworzy kopię planszy z klejnotami. function getBoard() { var copy = [], x; for (x = 0; x < cols; x++) { copy[x] = jewels[x].slice(0); } return copy; }

return { ... getBoard : getBoard };})();

Proste wywo�anie metody fillBoard() nie gwarantuje, �e na nowej planszy pojawi si� mo�liwo��wykonania ruchu. Istnieje szansa, �e losowe wybieranie klejnotów uniemo�liwi jakiekolwiek dzia�a-nie gracza. Takie u�o�enie planszy powinno wyzwoli� kolejne, niewidoczne dla u�ytkownika wype�-nienie. Najlepszym miejscem na umieszczenie tego mechanizmu jest funkcja fillBoard(). Poje-dyncze wywo�anie metody hasMoves() okre�li, czy plansza nadaje si� do dalszej gry — je�li oka�e si�,�e nie, funkcja fillBoard() zacznie wywo�ywa� siebie rekurencyjnie do czasu, a� uzyska po��danywynik. W rezultacie plansza b�dzie wype�niana raz po raz, do czasu gdy uzyskana zostanie przy-najmniej jedna para klejnotów. Listing 4.22 prezentuje mechanizm dodany do funkcji fillBoard().

Listing 4.22. Rekurencyjne wype�nianie planszy klejnotamijewel.board = (function() { ... function fillBoard() { ...

// Rekurencyjnie wypełnia planszę, jeśli nie ma na niej żadnych ruchów. if (!hasMoves()) { fillBoard(); } } ...})();

W ten sposób mechanizm wype�niania poradzi sobie z hipotetycznym scenariuszem, w którym nawst�pnej planszy nie by�oby �adnych ruchów. Jednak�e istnieje drobne prawdopodobie�stwo, �epierwsza wczytana plansza nie pozwoli graczowi na wykonanie �adnego dopasowania. Wywo�anierekurencyjne rozwi�zuje ten problem.

92 HTML5. TWORZENIE GIER

Dopasowywanie brylantówPrzygotowali�my wszystkie funkcje zarz�dzaj�ce stanem planszy. Brakuje nam tylko metody zamie-niaj�cej klejnoty miejscami. Jej opracowanie nie jest trudne. Dysponujesz ju� funkcj� canSwap(),która okre�la, czy gracz mo�e wykona� danych ruch, oraz metod� check(), która zajmuje si� wyda-rzeniami po wykonaniu dopasowania. Listing 4.23 przedstawia tre�� funkcji swap().

Listing 4.23. Funkcja swap()jewel.board = (function() { ... // Jeśli istnieje taka możliwość, zamienia miejscami klejnot w komórce (x1,y1) // z klejnotem w komórce (x2,y2). function swap(x1, y1, x2, y2, callback) { var tmp, events;

if (canSwap(x1, y1, x2, y2)) {

// Zamienia klejnoty miejscami. tmp = getJewel(x1, y1); jewels[x1][y1] = getJewel(x2, y2); jewels[x2][y2] = tmp;

// Sprawdza planszę i pobiera listę zdarzeń. events = check();

callback(events); } else { callback(false); } }

return { ... swap : swap };})();

Funkcja swap() zostanie ods�oni�ta dla pozosta�ej cz��ci kodu i mo�e wp�yn�� na stan planszy, tote�musi ona dzia�a� zgodnie z tym samym asynchronicznym mechanizmem co funkcja initialize().Dlatego te� poza dwoma zestawami wspó�rz�dnych metoda swap() przyjmuje jako parametr funkcj�zwrotn�. W zale�no�ci od tego, czy ruch u�ytkownika si� powiedzie, wywo�anie zwrotne otrzyma ja-ko parametr albo list� zdarze�, albo warto�� false (w przypadku nieuznanego ruchu). Listing 4.24przedstawia funkcje upublicznione poprzez modu� planszy.

Listing 4.24. Zwracanie metod publicznychjewel.board = (function() { ... return { initialize : initialize, swap : swap, canSwap : canSwap, getBoard : getBoard, print : print };})();

ROZDZIA 4. KONSTRUOWANIE GRY 93

To wszystko. Dzi�ki ods�oni�ciu tych funkcji stan gry mo�e zosta� zmodyfikowany jedynie wskutekustawienia nowej planszy lub wywo�ania metody swap(). Od tego momentu wszystkie zasady gry b�-d� egzekwowane przez funkcj� swap(), co jest gwarancj� integralno�ci planszy. Dodatkowo jedynympunktem wej�ciowym danych jest funkcja getBoard(), która nie pozwala nadpisywa� informacji, cozmniejsza ryzyko „z�amania” regu� przez reszt� kodu.

Jak zwykle dzia�anie metody swap() przetestujesz, wywo�uj�c j� w konsoli. Aby tego dokona�, wpisz:

jewel.board.initialize(function(){})

Nast�pnie u�yj komendy jewel.board.print(), aby znale�� w�a�ciw� wspó�rz�dn�, i wpisz np.:

jewel.board.swap(4,3,4,2, function(e){console.log(e)})

Pami�taj przy tym, �e funkcja swap() wymaga wywo�ania zwrotnego. Przygotuj w�asnor�cznie metod�,która b�dzie zwraca� list� zdarze� w konsoli.

PodsumowanieW rozdziale tym wy�o�y�em Ci sposób wdro�enia elementarnej mechaniki gry. Przeprowadzi�em Ci�przez implementacj� wszystkich jej regu� — w tym dotycz�cych przemieszczania klejnotów, usuwa-nia �a�cuchów i generowania dodatkowych klejnotów. Plansza gry zosta�a zrealizowana w obr�biejednego modu�u, pozwalaj�c na dost�p do informacji w zaledwie kilku miejscach, co gwarantuje, �ewprowadzone modyfikacje b�d� dzia�a�y wed�ug wy�o�onych wcze�niej zasad.

Ponadto rozdzia� ten bierze pod uwag� tryb dla wielu graczy, którego wdro�eniem zajmiemy si�w dalszej cz��ci ksi��ki. Na razie zapewnili�my, �e gra b�dzie korzysta� z kodu lokalnego lub specjalnegoskryptu udost�pnionego przez serwer. U�ycie funkcji zwrotnych w kilku kluczowych metodach pozwolidwóm opracowanym modu�om wspó�dzieli� ten sam interfejs, u�atwiaj�c dodanie asynchronicznego,serwerowego modu�u planszy w dalszej fazie projektowania gry.

94 HTML5. TWORZENIE GIER

SkorowidzA

ActionScript, 334ADB, Patrz: Android Debug BridgeAdobe Edge, 25Adobe Flash Professional, 340adres

IP, 346URL, 318, 330

AIR, 340Ajax, 23, 80, 96, 98, 271, 318, 322aLogcat, 73Amazon Elastic Compute Cloud,

324Amazon Web Services, 324ambient light, Patrz: �wiat�o

otaczaj�ceAndroid, 25, 46, 47, 60, 61, 68, 69,

70, 73, 97, 163, 168, 170, 171,235, 250, 334, 335, 338, 339,341, 343, 344

Android Debug Bridge, 73Android Developer Console, 344Angry Birds, 334animacja, 113, 188, 193, 197, 211,

219, 268, 292cykl, 196cykl wewn�trzny, 193zoomfade, 217

API, 21, 23, 37, 113audio, 236, 237, 239czasowe, 196danych Mozilla, 236FileSystem, Patrz: FileSystem

APIIndexedDB, 298JavaScriptu, 345komunikacyjne, 97, 98linii, 115magazynu, 299obiektu kontekstu

dwuwymiarowego, 352standaryzowane, 318

synchronizacji animacji, 193, 194�cie�ki, 115, 117WebGL, 282, 364WebSocket, 318, 326

aplikacja, 62, 63, 68czatu, 326debugowanie, 71ikonka, 65natywna, 334, 338, 340�ledzenia promieni, Patrz:

�ledzenie promieniApp Store, 338, 344Appcelerator Titanium, 341, 344Apple, 61, 163Apple App Store, 47, 334Application Programming

Interface, Patrz: APIAptana Studio, 341Arcade Fire, 338arkusz stylów, 34, 144, 145, 160,

163, 304mobilny, 59

Audacity, 229

BBada, 339base64, Patrz: format base64baza danych, 323Bejeweled, 27, 30Béziera

krzywa, Patrz: krzywa Bézierap�aszczyzna, Patrz: p�aszczyzna

Bézierabiblioteka

glMatrix, 265, 266, 267jQuery, 33Modernizr, 26, 27, 33, 36, 63,

108, 152, 170, 217, 227,228, 284

Prototype, 33, 334Sizzle, 272Sound Manager 2, 227

SoundManager, 22yepnope.js, 27

Biolab Disaster, 335BlackBerry, 341BlackBerry WebWorks, 339Blender, 271, 338Box2D, 334, 337Box2DJS, 334bufor, 263, 321, 365

barw, 268g��bi, 268, 375indeksu, 264normalnych, 274ramki, 377renderowania, 376szablonu, 268, 374wierzcho�ków, 264, 265, 269,

274

CCabello Ricardo „Mr. Doob”, 337cache, Patrz: pami�� podr�cznacanvas, 20, 21, 25, 27, 28, 112,

113, 114, 139, 152, 154, 174,237, 250, 251, 262, 334, 338,352, 361, 370cieniowanie, 129czyszczenie, 268efekty, 126, 129elementy awaryjne, 129obracanie, 126ograniczenia, 139operacje na pikselach, 136, 137skalowanie, 114, 125tekst, 127, 128transformacja, 124, 125, 138transformacja trójwymiarowa,

204translacja, 125, 126

chmura, 324Chrome, 37, 41, 97, 98, 100, 136,

193, 250, 298, 318, 342, 346

396 HTML5. TWORZENIE GIER

Chrome Web Store, 342Chromium, 251cieniowanie, 129, 357

Phonga, 273clipping path, Patrz: �cie�ka

przycinaj�caCollada, 271, 272, 274, 281Comet, 23cookie, 24, 298, 302, 318Crayon Physics Deluxe, 334CSS3, 20, 25, 28, 57, 59Cut the Rope, 48czat, 326, 329czytnik ekranu, 361

Ddane

numeryczne, 253typ, 253, 364, 386wektorowe, 253�ród�owe obrazu, 27

Danger Mouse, 338debugowanie, 37, 71, 251, 336dedicated worker, Patrz:

pracownik sieciowy dedykowanydelegacja zdarzenia, 56demoscena, 113dese�, 27, 124, 156, 163, 357,

Patrz te�: teksturadiffuse light, Patrz: �wiat�o

rozproszeniaDirectX, 252display, Patrz: modu� wy�wietlaniadiv, Patrz: element divDragonfly, 71Dreamweaver, 340d�wi�k, 22, 226, 242, 338

wizualizacja, 237zapisywanie, 237zatrzymywanie, 244

EEclipse, 341ECMAScript, 148edytor

poziomów, 336tekstu, 300

efektyd�wi�kowe, 229, 235, 242fizyczne, 334kompozycji, 27specjalne, 66, 126, 140, 196,

219, 290, 305, 373ekran

dotykowy, 46, 168, 176, 177gry, 153instalacyjny, 64, 65

powitalny, 31, 39, 40, 41, 54,55, 63, 145, 149

wielko��, 49, 59eksplozja, 220element

audio, 22, 23, 28, 226, 228,229, 230, 232, 235, 339

bgsound, 226canvas, Patrz: canvasdiv, 21, 34, 151, 171, 215DOM, 33, 97, 99, 160img, 21progress, 207video, 226

em, 50, 54, 162enkapsulacja, 38experimental-webgl, 251ExplorerCanvas, 27Extensible Markup Language,

Patrz: XML

FFast Fourier Transform, 239FileSystem API, 298Firebug, 71Firefox, 37, 41, 97, 98, 100, 136,

193, 194, 195, 231, 236, 250,298, 318, 319, 320

Flash, 22, 25, 27, 226, 227, 229,340

fontGeo Regular, 40optymalizacja, 41sieciowy, 28, 40, 42, 127Slackey Regular, 40TrueType, 40wysoko��, 50

FontSquirrel, 40format

AAC, 227audio, 227base64, 21BMP, 139GIF, 112JPEG, 112, 139MP3, 227OBJ, 338Ogg Vorbis, 227PNG, 112, 139SVG, 112, 113Wavefront OBJ, 338WebM, 227WOFF, 40XML, 113

Freesound Project, 229Fruit Ninja, 48

funkcjalinii, 115matematyczna, 387nienazwana, 38trygonometryczna, 389

GGenerator tonów, 239gesture, Patrz: zdarzenie gestówGithubset, 340GLSL, Patrz: j�zyk GLSLg�o�no��, 233, 235gniazdo, 23Google, 27, 334Google Analytics, 345Google Checkout, 344Google Play, 47, 338, 344Google Web Fonts, 40GPU, Patrz: procesor graficznygra

dystrybucja, 342hosting, 334, 345inicjowanie, 79kontener, 35mechanika, 78, 83, 180modu�, 38opcje zapisu, 24pauzowanie, 305plansza, 78, 79przywrócenie danych, 306regu�y, 78warstwa, 31wersja demo, 345wieloosobowa, 23wieloplatformowa, 28wynik, Patrz: wynikzamkni�cie, 303

gradient, 124, 357CSS3, 162ko�owy, 123, 153liniowy, 123

grafika, 112, 1543D, 262bitmapowa, 112, 114, 139powitalna, 67skalowanie, 112SVG, Patrz te�: format SVGtrójwymiarowa, 338wektorowa, 20

Graphic Processing Unit, Patrz:procesor graficzny

HHigh-Level Shading Language,

Patrz: HLSLHLSL, 252HTTP request, Patrz: ��danie HTTP

SKOROWIDZ 397

Iidentyfikator

URI, 21IETF, 318IEWebGL, 250ikonka

aplikacji, 65img, Patrz: element imgimmediate mode, Patrz: tryb

natychmiastowyImpact, 335, 337, 345IndexedDB, Patrz: API IndexedDBinstancja, 324interfejs, 342

aplikacji sieciowej, 342asynchroniczny, 80, 104MediaElement, 226odtwarzania, 234programowania, 80programowania aplikacji, Patrz:

APIu�ytkownika, 113

Internet Engineering Task Force,Patrz: IETF

Internet Explorer, 24, 25, 27, 37,41, 97, 129, 136, 194, 226, 250,298, 318

iOS, 25, 40, 46, 61, 62, 97, 168,170, 171, 235, 318, 334, 335,338, 339, 341

iPad, 46, 59, 61, 68, 174, 335, 343iPhon, 67iPhone, 46, 61, 174, 335, 343iPod, 46, 61iPod touch, 67Irish Paul, 41

JJavaScript, 21, 22, 25, 62, 96, 168,

193, 334, 364JavaScript Object Notation, Patrz:

JSONjednostki

em, Patrz: emstatyczne, 50wzgl�dne, 50

j�zykGLSL, 252, 255, 258, 386OpenGL Shading Language,

250PHP, 336Python, 338serwerowy, 322XML, 271

Joyent, 324jQuery Mobile, 343JSON, 24, 99, 271, 321, 343

Kkana� alfa, 136, 138, 197kaskadowy arkusz stylów, Patrz:

CSS3kerning, 50Khronos, 237, 250, 271klawiatura, 47, 168, 176, 177, 179

wirtualna, 47, 168klient

u�ytkownika, 25klucz, 299

SSH, 346kodek d�wi�kowy, 22kolor czyszczenia, 262kompatybilno��, 40

wsteczna, 20, 25kompatybilno��, 302komponent

semantyczny, 207span, 207

kompozycja, 135, 136, 138, 359kontekst, 114, 119, 250

trójwymiarowy, 250, 251krzywa Béziera, 119, 120

Llaptop, 49licznik

czasu, 193, 198, 206, 210, 211,305

punktów, 206, 211linia, Patrz te�: �cie�ka, krzywa

bazowa, 128grubo��, 116prosta, 115

Linux, 341lista, 148

��a�cuch, 85, 86

tekstowy, 24, 321�uk, 117

MMac OS, 341macierz, 255, 261, 265, 267, 390

projekcji, 265, 267transformacji, 125, 126, 353translacji, 125widoku modelu, 265, 266, 274,

290magazyn

lokalny, 24, 298, 301sesji, 24, 298, 301sieciowy, 24, 298, 299

manifest, 313, 314, 315, 343margines, 35maska, 120media query, Patrz: zapytanie

medialne CSS3menu

g�ówne, 31, 52, 55, 145kontekstowe, 48

metodaasynchroniczna, 80, 322audio.canPlayType, 228audio.mozCurrentSampleOffset,

241audio.mozSetup, 237audio.stop, 244canPlayType, 226ctx.createImageData, 360ctx.getImageData, 360deseni, 356document.createElement, 226gl.getError, 251gl.getParameter, 380gradientów, 356malowania obrazów, 358Math.sin, 197operowania na pikselach, 360play, 232prostok�tów, 355publiczna, 80requestAnimationFrame, 193,

194, 195, 211require, 324response.end, 325response.write, 325response.writeHead, 325setInterval, 193, 194setTimeout, 211setTimout, 193, 194, 195statyczna, 266�cie�ek, 354teksty, 358transformacji, 353ws.close, 319ws.send, 321zarz�dzaj�ca stosem stanów, 352

middleware, Patrz:oprogramowanie po�rednicz�ce

mieszanie barw, 288mipmapa, 279model

DOM, 160, 322Phonga, 273, 275

Modernizr, Patrz: bibliotekaModernizr

Module Pattern, Patrz: wzorzecmodu�ów

398 HTML5. TWORZENIE GIER

modu�audio, 226, 241HTTP, 324magazynu, 301, 303pauzy, 305sterowania, 176, 185wyników, 308wy�wietlania, 154, 158, 160,

196, 252, 283, 284wy�wietlania WebGL, 284zewn�trzny, 323

multi-touch event, Patrz:zdarzenie wielodotykowe

mysz, 48, 168, 170, 175, 176, 177

Nnatura bezstanowa, 24nie-tablica, 148Nitobi, 340Nobi, 338Node Package Manager, 323Node SmartMachines, 324Node.js, 23, 33, 318, 322, 324,

326, 346instalacja, 323

notacjaJSON, Patrz: JSON

Oobiekt

arguments, 148buforów, 263, 365dotyku, 179kontekstu dwuwymiarowego, 352kontekstu graficznego, 114,

126, 129localStorage, 298, 301magazynu, 300obiecany, 80port, 101pracownika sieciowego, 103programu, 259, 367resource, 146sessionStorage, 301shadera, 259tabel, 365trójwymiarowego kontekstu, 251trójwymiarowy, 262WebSocket, 318window.navigator, 62XMLHttpRequest, 98, 139, 318zdarze�, 170

obraz bitmapowy, Patrz: grafikabitmapowa

okno aktywne, 24opcje zapisu gry, 24OpenGL, 24, 250, 251, 364

OpenGL Shading Language, Patrz:j�zyk GLSL

Opera, 41, 97, 194, 250, 318operacja Portera-Duffa, 135oprogramowanie po�rednicz�ce, 334orientacja, 70, 162o�wietlenie, 273

Phonga, 275pikselowe, 276

Ppami�� podr�czna, 313, 314, 315

manifest, 313para klucz-warto��, 300parametr

device-height, 51device-width, 51, 52href, 21initial-scale, 52src, 21

pasekadresów, 69post�pu, 31, 147, 149, 207,

234, 235stanu, 68, 69

pauza, 50per-pixel lighting, Patrz:

o�wietlenie pikselowePhantom Limb, 174PhoneGap, 47, 338, 339, 340, 344PhoneGap Build, 340Phonga model, 273, 275plansza, 32, 154, 155, 162

kontener, 154uaktualnianie, 188

Playtomic, 345plik cookie, 24, 298, 302, 318p�aszczyzna Béziera, 119p�ótno, Patrz: canvaspod�cie�ka, 115polyfill, Patrz: wype�nieniepo��czenie sieciowe, 318, 325

trwa�e, 318ustanawianie, 318zamykanie, 319zerwanie, 320

PopCap Games, 30Portera-Duffa operacja, 135pracownik sieciowy, 80, 96, 97, 98,

103, 105b��dy, 99dedykowany, 100, 101mo�liwo�ci, 97ograniczenia, 96w�tek, Patrz: w�tek pracownikawspó�dzielony, 100, 101

precyzja zmiennej, 257

procesor graficzny, 251, 252projekcja perspektywy, 267promise object, Patrz: obiekt

obiecanyprostok�t, 116, 281, 355protokó�

HTTP, 23, 24, 318, 321, 324WebSocket, Patrz: WebSocket

Przedrostek autorski, 163, 194przegl�darka, 37

mobilna, 35, 65, 70mobilnym, 345okno, 51osobista, 35stacjonarna, 345zachowanie domy�lne, 70

przestrze� operacyjna, 51przewijanie strony, 68przezroczysto��, 116, 135, 136przycisk wirtualny, 47punkt ogniskowania, 263Puzzle Quest, 27

Rramka, 377ray tracer, Patrz: �ledzenie

promienireferencja, 39renderowanie, 262, 265, 268, 269,

270, 286, 288, 376retained mode, Patrz: tryb

zatrzymanyrozdzielczo��, 35, 49, 57, 59, 66

natywna, 49

SSafari, 41, 51, 61, 62, 68, 69, 70,

97, 100, 136, 193, 250, 318debugowanie, 71

Scalable Vector Graphics, Patrz:format SVG

serwerHTTP, 324Linuksa, 324wirtualny, 324

shader, 259, 290, 366, 386fragmentów, 251, 252, 256,

257, 259, 261, 262, 276,281, 282, 288, 290

osadzanie, 258wierzcho�ków, 251, 252, 256,

257, 259, 262, 265, 267,274, 275, 281

shared worker, Patrz: pracowniksieciowy wspó�dzielony

Sideshow, 40

SKOROWIDZ 399

silnikBox2D, Patrz: Box2Defektów fizycznych, 334Impact, Patrz: ImpactThree.js, Patrz: Three.jsV8, 346

Silverlight, 25, 27Sizzle, 33skalowanie, 52, 125, 162, 172, 192

dynamiczne, 173skrypt, 36, 97, 98, 139s�owo klucz, 73, 116, 176, 177

bevel, 122browser, 73butt, 121device-width, 52em, 50inline-clock, 61miter, 122no-repeat, 124precision, 258repeat, 124repeat-x, 124repeat-y, 124round, 122serverConfig, 326source-over, 136squre, 121uniform, 261

s�uchacz zdarze�, 55smartfon, 49, 58, 60SmartMachines, 346Snake, 46socket, Patrz: gniazdospacja em, 50specular light, Patrz: �wiat�o

odbicia zwierciadlanegosprite, 144, 160, 175spyware, 24standard OpenGL, 250, Patrz:

OpenGLstate stack, Patrz: stos stanówstos stanów, 112, 130, 353styl

obramowania, 117, 121, 124wype�niania, 117, 121, 124

SVG, 20Symbian, 339symulacja zjawisk fizycznych, 104system

dynamicznego wczytywania, 36iOS, Patrz: iOSlogów, 73przydzielania zdarze�, 80Ubuntu, Patrz: Ubuntu

Szablewski Dominik, 335sztuczna inteligencja, 103

��cie�ka, 115, 175, 353, 354

d�wi�kowa, 230, 244kontur, 115krzywa Béziera, Patrz: krzywa

Béziera�uk, 117przecinaj�ca si�, 27przekszta�canie na grafik�, 115przycinaj�ca, 120przycinanie, 117wype�nienie, 115, 175

�ledzenie promieni, 113�wiat�o

odbicia zwierciadlanego, 273, 277otaczaj�ce, 273, 274rozproszenia, 273, 274, 276

Ttablet, 49, 58, 168, 171tablica, 148

bufora ramki, 237changedTouches, 171Float32Array, 237próbek, 236przeplatanych danych próbek,

237targetTouches, 171, 173touches, 171typ, 365typowana, 237

TapJS, 345tekstura, 153, 273, 278, 281, 290,

371Three.js, 337Titanium, 344Titanium Studio, 341t�o, 35, 151, 162

pó�przezroczyste, 26, 155transformacja, 353, Patrz: canvas

transformacjatransformata, 117transformation matrix, Patrz:

macierz transformacjitre�� aw