html5. tworzenie gierpdf.helion.pl › htm5tg › htm5tg.pdf · urzdze sterujcych rozgrywk. gra dla...
TRANSCRIPT
-
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: [email protected]: 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