Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00489 008921 14655774 na godz. na dobę w sumie
HTML5. Tworzenie gier - książka
HTML5. Tworzenie gier - książka
Autor: Liczba stron: 511
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-4480-3 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> html i xhtml - programowanie
Porównaj ceny (książka, ebook, audiobook).

Już dziś zacznij tworzyć gry w HTML5!

Możliwości nowej odsłony języka HTML są nieprawdopodobne. Jego potencjał można wykorzystać do tworzenia atrakcyjnych stron WWW, funkcjonalnych aplikacji oraz... gier! Ten język świetnie sprawdza się nawet w takiej roli. WebGL, JavaScript oraz CSS3 pozwolą Ci rozwinąć skrzydła. Już dziś możesz podjąć wyzwanie i wraz z autorem tej wspaniałej książki stworzyć swoją pierwszą grę!

'HTML5. Tworzenie gier' napisano w przeświadczeniu, że książka pomoże Ci przenieść Twoje umiejętności tworzenia stron w świat projektowania gier komputerowych. Nie ma znaczenia, czy jesteś projektantem witryn, który pragnie spróbować swoich sił w nowej dziedzinie, twórcą aplikacji Flash, zainteresowanym nową technologią, czy przyświeca Ci całkowicie inny cel. Książka pokaże Ci, jak użyć dobrze znanych narzędzi, by przebyć przepaść dzielącą tradycyjne witryny od ekscytujących gier. W trakcie lektury poznasz elementy składowe gry oraz charakterystykę urządzeń mobilnych. Zorientujesz się, jakie są kolejne etapy procesu wytwarzania nowej aplikacji. Nauczysz się tworzyć wielowątkowe rozwiązania dzięki technologii Web Workers oraz rysować atrakcyjne elementy graficzne przy użyciu elementu canvas. Z kolejnych rozdziałów dowiesz się, jak oprogramować sterowanie ruchem oraz jak przygotować efekty dźwiękowe dla Twojej gry, a potem poznasz tajniki tworzenia grafiki 3D oraz przechowywania danych lokalnie w przeglądarce użytkownika. Książka ta w sposób kompleksowy podchodzi do tematu tworzenia gier w języku HTML5. Jeżeli masz choć trochę zapału, dzięki niej z pewnością osiągniesz cel!

Już wkrótce będziesz mógł:

Od pustej strony do pełnowartościowej gry z HTML5!


Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: HTML5 Games: Creating Fun with HTML5, CSS3, and WebGL Tłumaczenie: Maciej Reszotnik Projekt okładki: Jan Paluch Materiał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 publikacji w 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ązane z 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 zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: 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/htm5tg Moż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ść Spis treĂci WstÚp ....................................................................................................... 13 CzÚĂÊ I. WstÚp do gier w standardzie HTML5 ..................................... 17 Rozdziaï 1. Gry w sieci ................................................................................................. 19 HTML5 — rys historyczny .............................................................................................20 HTML5 a gry ..................................................................................................................20 Element canvas .........................................................................................................21 DěwiÚk .......................................................................................................................22 WebSocket .....................................................................................................................23 Magazyn sieciowy ......................................................................................................24 WebGL ......................................................................................................................24 HTML5 (nie) jest pogromcÈ Flasha ...........................................................................25 Gwarantowanie wstecznej kompatybilnoĂci ....................................................................25 Wykrywanie wïasnoĂci ...............................................................................................25 Uĝywanie biblioteki Modernizr ..................................................................................26 Wypeïnianie luk .........................................................................................................26 Konstruowanie gry .........................................................................................................27 Podsumowanie ...............................................................................................................28 Rozdziaï 2. Pierwsze kroki ........................................................................................... 29 Planowanie gry ...............................................................................................................30 Dopasowywanie brylantów .........................................................................................30 Dopasowywanie .........................................................................................................30 Etapy gry ....................................................................................................................31 Definiowanie warstw gry ................................................................................................31 Ekran powitalny .........................................................................................................31 Menu gïówne .............................................................................................................31 Gra .............................................................................................................................32 Rekordowe wyniki ......................................................................................................32 Tworzenie szkieletu aplikacji ..........................................................................................33 Struktura HTML .......................................................................................................34 Nadawanie stylu ........................................................................................................34 Wczytywanie skryptów ...............................................................................................36 6 HTML5. TWORZENIE GIER Projektowanie ekranu powitalnego .................................................................................40 Uĝywanie fontów sieciowych .....................................................................................40 Formatowanie ekranu powitalnego ............................................................................41 Podsumowanie ...............................................................................................................43 Rozdziaï 3. HTML i urzÈdzenia mobilne ...................................................................... 45 Tworzenie aplikacji sieciowych na urzÈdzenia przenoĂne ..............................................46 Napisz raz a dobrze ....................................................................................................46 Platformy mobilne — wyzwania .................................................................................47 Obsïuga sterowania na urzÈdzeniu mobilnym ................................................................47 Sterowanie za pomocÈ klawiatury ..............................................................................47 Mysz kontra dotyk ......................................................................................................48 Przystosowywanie gry do niskiej rozdzielczoĂci ...............................................................49 Projektowanie skalowalnych ukïadów strony ..................................................................50 Kontrolowanie przestrzeni operacyjnej ......................................................................51 WyïÈczenie skalowania ..............................................................................................52 Tworzenie róĝnych widoków ..........................................................................................52 Tworzenie gïównego menu ........................................................................................53 Dodawanie moduïów ekranu .....................................................................................54 CSS i zapytania medialne ..........................................................................................57 Wykrywanie orientacji urzÈdzenia .............................................................................58 Dodawanie mobilnych arkuszy stylów ........................................................................59 Tworzenie gier na systemy iOS i Android .......................................................................61 Umieszczanie aplikacji na ekranie gïównym telefonu ................................................61 UsuniÚcie interfejsu przeglÈdarki ..............................................................................68 Debugowanie aplikacji mobilnych ..................................................................................71 WïÈczanie debugera Safari ........................................................................................71 Uzyskanie dostÚpu do logów w Androidzie .................................................................73 Podsumowanie ...............................................................................................................73 CzÚĂÊ II. Tworzenie komponentów gry ................................................ 75 Rozdziaï 4. Konstruowanie gry .................................................................................... 77 Tworzenie moduïu planszy .............................................................................................78 Inicjalizowanie stanu gry ...........................................................................................79 Wypeïnianie planszy ..................................................................................................81 Implementacja zasad .....................................................................................................83 Walidacja ruchów gracza ...........................................................................................83 Wykrywanie ïañcuchów .............................................................................................85 Generowanie nowych klejnotów ................................................................................87 Przyznawanie punktów ..............................................................................................88 Ponowne wypeïnianie siatki .......................................................................................89 Dopasowywanie brylantów .........................................................................................92 Podsumowanie ...............................................................................................................93 Rozdziaï 5. Pracownicy i delegowanie zadañ ............................................................... 95 Pracownicy sieciowi ........................................................................................................96 Pracownicy — ograniczenia .......................................................................................96 MoĝliwoĂci pracowników sieciowych ..........................................................................97 SPIS TRE¥CI 7 Korzystanie z pracowników ............................................................................................98 Wysyïanie wiadomoĂci ...............................................................................................98 Otrzymywanie wiadomoĂci ........................................................................................99 Przechwytywanie bïÚdów ...........................................................................................99 Wspóïdzieleni pracownicy .......................................................................................100 (Nie) Pierwszy przykïad ...........................................................................................101 Wykorzystywanie pracowników w grach .......................................................................103 Tworzenie moduïu pracownika ................................................................................104 Utrzymanie starego interfejsu ..................................................................................105 Podsumowanie .............................................................................................................110 Rozdziaï 6. Element canvas i grafika .......................................................................... 111 Grafika w sieci ..............................................................................................................112 Obrazy bitmapowe ...................................................................................................112 Grafika SVG .............................................................................................................112 Element canvas .......................................................................................................113 Element canvas — najlepsze rozwiÈzanie? ..............................................................113 Rysowanie na elemencie canvas ..................................................................................114 Rysowanie Ăcieĝek i figur .........................................................................................115 ’uki i okrÚgi .............................................................................................................117 Zaawansowane style wypeïniania i konturowania ....................................................121 Transformacje .........................................................................................................124 DoïÈczanie tekstu, obrazu i cieni .............................................................................126 Dodawanie tekstu ....................................................................................................127 ZarzÈdzanie stosem stanów .....................................................................................130 Rysowanie logo HTML5 ...........................................................................................131 Kompozycje ..............................................................................................................135 Manipulowanie danymi obrazu ....................................................................................136 Odczytywanie wartoĂci pikseli ..................................................................................136 Uaktualnianie wartoĂci pikseli .................................................................................137 Eksport danych obrazu ............................................................................................139 Bezpieczeñstwo i naïoĝone ograniczenia .................................................................139 Tworzenie efektów specjalnych na poziomie pikseli ................................................140 Podsumowanie .............................................................................................................141 Rozdziaï 7. Tworzenie szaty graficznej gry ................................................................. 143 WstÚpne ïadowanie plików ...........................................................................................144 Dopasowanie wielkoĂci obrazów ..............................................................................144 Modyfikowanie skryptu ïadowania ...........................................................................145 Pasek postÚpu ..........................................................................................................149 UpiÚkszanie tïa .............................................................................................................151 Konstruowanie ekranu gry ...........................................................................................153 Nanoszenie planszy na pïótno ..................................................................................154 Definiowanie planszy bez uĝycia pïótna ...................................................................160 Podsumowanie .............................................................................................................165 Rozdziaï 8. Interakcja w grze ...................................................................................... 167 Identyfikowanie dziaïañ uĝytkownika ...........................................................................168 Zdarzenia obsïugi myszy a ekrany dotykowe ............................................................168 Wirtualna klawiatura ...............................................................................................168 8 HTML5. TWORZENIE GIER Zdarzenia dotykowe .................................................................................................170 Zdarzenia sterowania i pïótna ..................................................................................174 Konstruowanie moduïu sterowania ..............................................................................176 Obsïuga zdarzeñ sterowania ....................................................................................177 Implementowanie mechaniki gry .............................................................................180 PowiÈzanie kontrolek z funkcjami gry ......................................................................184 Podsumowanie .............................................................................................................189 Rozdziaï 9. Animowanie grafiki w grze ....................................................................... 191 Wdraĝanie interakcji ....................................................................................................192 Synchronizacja animacji ..........................................................................................193 Animowanie znacznika ............................................................................................196 Animowanie dziaïañ w grze .....................................................................................197 Punkty i czas ................................................................................................................206 Tworzenie elementów interfejsu uĝytkownika .........................................................207 Tworzenie licznika czasu .........................................................................................210 Przyznawanie punktów ............................................................................................211 Koniec gry ................................................................................................................219 Podsumowanie .............................................................................................................222 CzÚĂÊ III. Efekty 3D i děwiÚk ............................................................. 223 Rozdziaï 10. Efekty děwiÚkowe w grach ..................................................................... 225 HTML5 i děwiÚk ..........................................................................................................226 Wykrywanie obsïugi audio .......................................................................................226 Wojny formatów — przebieg konfliktu .....................................................................227 Odnajdywanie efektów děwiÚkowych .......................................................................229 Uĝywanie elementu audio ............................................................................................229 Sterowanie odtwarzaniem .......................................................................................232 DěwiÚk a urzÈdzenia mobilne ..................................................................................235 Dane audio ...................................................................................................................235 Korzystanie z API danych Mozilla ............................................................................236 Kilka przykïadów ......................................................................................................237 Konstruowanie moduïu audio ......................................................................................241 Przygotowanie do odtwarzania děwiÚku ...................................................................242 Odtwarzanie efektów děwiÚkowych ..........................................................................242 Zatrzymywanie děwiÚku ..........................................................................................244 SprzÈtanie ...............................................................................................................244 DoïÈczanie efektów děwiÚkowych do gry ......................................................................245 Odtwarzanie děwiÚku w ekranie gry ........................................................................245 Podsumowanie .............................................................................................................247 Rozdziaï 11. WebGL i grafika 3D ................................................................................ 249 Trzeci wymiar w sieci ...................................................................................................250 Wprowadzenie do WebGL .......................................................................................250 Debugowanie w WebGL ..........................................................................................251 Tworzenie moduïu pomocniczego ...........................................................................252 Shadery ........................................................................................................................252 Zmienne i typy danych ............................................................................................252 Shadery WebGL — praktyczne zastosowanie ..........................................................256 SPIS TRE¥CI 9 Zmienne jednolite ...................................................................................................260 Zmienne róĝnorodne ...............................................................................................262 Renderowanie trójwymiarowych obiektów ....................................................................262 Korzystanie z buforów wierzchoïków .......................................................................263 Uĝywanie buforów indeksów ....................................................................................264 Korzystanie z modeli, widoków i projekcji ................................................................265 Macierz widoku modelu ...........................................................................................266 Renderowanie ..........................................................................................................268 ’adowanie modeli Collada .......................................................................................271 Wykorzystywanie tekstur i oĂwietlenia .........................................................................273 Dodawanie oĂwietlenia ............................................................................................273 OĂwietlenie pikselowe ..............................................................................................276 Tworzenie tekstur ....................................................................................................278 Tworzenie moduïu wyĂwietlania WebGL .....................................................................283 ’adowanie plików WebGL .......................................................................................284 Przygotowanie moduïu WebGL ................................................................................285 Renderowanie klejnotów ..........................................................................................287 Animowanie klejnotów .............................................................................................292 Podsumowanie .............................................................................................................294 CzÚĂÊ IV. Magazyn lokalny i tryb gry dla wielu graczy ....................... 295 Rozdziaï 12. Magazyn lokalny i tryb cache’owania ..................................................... 297 Magazynowanie danych — magazyn sieciowy ..............................................................298 Uĝywanie interfejsu magazynu ................................................................................298 Konstruowanie moduïu magazynu ...........................................................................301 Zapisywanie stanu gry na staïe .....................................................................................303 ZamkniÚcie gry ........................................................................................................303 Pauzowanie gry ........................................................................................................305 Zapisywanie danych gry ...........................................................................................306 Tworzenie listy najlepszych wyników ...........................................................................308 Konstruowanie ekranu wyników ..............................................................................309 Przechowywanie rekordowych wyników ..................................................................311 WyĂwietlanie rekordowych wyników ........................................................................312 PamiÚÊ podrÚczna aplikacji ..........................................................................................313 Manifest pamiÚci podrÚcznej ...................................................................................313 Podsumowanie .............................................................................................................316 Rozdziaï 13. Technologia WebSocket i tryb wieloosobowy gry ................................... 317 Korzystanie z technologii WebSocket ...........................................................................318 NawiÈzywanie poïÈczenia z serwerem .....................................................................318 Komunikacja w standardzie WebSocket ..................................................................321 Stosowanie systemu Node.js po stronie serwera ...........................................................322 Node.js — instalacja ................................................................................................323 Konstruowanie serwera HTTP .................................................................................324 Konstruowanie pokoju czatu w technologii WebSocket ...........................................326 Podsumowanie .............................................................................................................331 10 HTML5. TWORZENIE GIER Rozdziaï 14. Dodatkowe zasoby .................................................................................. 333 Korzystanie z oprogramowania poĂredniczÈcego ..........................................................334 Box2D ......................................................................................................................334 Impact .....................................................................................................................335 Three.js ...................................................................................................................337 Przystosowywanie gier do dziaïania na urzÈdzeniach mobilnych ..................................338 PhoneGap ................................................................................................................338 Appcelerator Titanium ............................................................................................341 Dystrybucja gier ...........................................................................................................342 Chrome Web Store ..................................................................................................342 Zeewe ......................................................................................................................343 Google Play ...................................................................................................................344 App Store .................................................................................................................344 Korzystanie z usïug sieciowych .....................................................................................345 TapJS .......................................................................................................................345 Playtomic .................................................................................................................345 JoyentCloud Node ........................................................................................................346 Podsumowanie .............................................................................................................346 CzÚĂÊ V. Dodatki ................................................................................. 349 Dodatek A. Element canvas — zbiór odwoïañ ............................................................. 351 Element canvas ............................................................................................................352 API kontekstu dwuwymiarowego ..................................................................................352 ZarzÈdzanie stanem .................................................................................................352 Transformacje .........................................................................................................353 Figury i Ăcieĝki .........................................................................................................354 Wypeïnienia i linie ...................................................................................................356 Cienie ......................................................................................................................357 Obrazy .....................................................................................................................358 Tekst ........................................................................................................................358 Kompozycje ..............................................................................................................359 Manipulowanie pikselami ........................................................................................360 DostÚpnoĂÊ ..............................................................................................................361 Dodatek B. WebGL — zbiór odwoïañ .......................................................................... 363 API WebGL — zbiór odwoïañ .......................................................................................364 Typy danych ............................................................................................................364 Typy tablic ...............................................................................................................365 Bufory ......................................................................................................................365 Shadery ...................................................................................................................366 Obiekty programów ..................................................................................................367 Zmienne jednolite ...................................................................................................368 Atrybuty wierzchoïków .............................................................................................369 Rysowanie ................................................................................................................370 Tekstury ..................................................................................................................371 Mieszanie i wtapianie ..............................................................................................373 Bufor szablonu .........................................................................................................374 Bufor gïÚbi ...............................................................................................................375 SPIS TRE¥CI 11 Bufory renderowania ...............................................................................................376 Bufory ramki ............................................................................................................377 Inne funkcje ............................................................................................................378 Parametry ................................................................................................................380 Dodatek C. OpenGL Shading Language .......................................................................385 JÚzyk GLSL ES — zbiór odwoïañ .................................................................................386 Typy danych ............................................................................................................386 Funkcje wbudowane ................................................................................................387 Wbudowane zmienne i staïe ....................................................................................393 Skorowidz ................................................................................................ 395 12 HTML5. TWORZENIE GIER ROZDZIA’ 4 Konstruowanie 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 gry poprzez 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Údzie odpowiednio zmieniaï poïoĝenie pozostaïych klejnotów. PrzedstawiÚ równieĝ kilka problemów wynikajÈcych z zastosowania przez uĝytkownika róĝnych urzÈdzeñ sterujÈcych rozgrywkÈ. Gra dla jednej osoby dziaïa w oparciu o lokalny kod uruchamiany po stronie klienta, który opisano w tym rozdziale. Zadbamy jednak takĝe o serwerowÈ implementacjÚ tych samych reguï. Tworzenie moduïu planszy Kluczowa 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: obecnego ukïadu klejnotów. Moduï ten odsïania metody, które mogÈ zostaÊ uĝyte przez inne moduïy (gïównie moduï 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 uzyskania dostÚpu do klejnotów, i funkcjÚ umoĝliwiajÈcÈ przemieszczanie brylantów. Funkcja przemieszczania zamienia miejscami tylko parÚ klejnotów, gdyĝ wedïug zasad klejnoty mogÈ byÊ przesuwane tylko zgodnie 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ï planszy bÚ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ï planszy jewel.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 gry Kod 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Ê bez potrzeby 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 settings var jewel = { screens : {}, settings : { rows : 8, cols : 8, baseScore : 100, numJewelTypes : 7 } }; Parametry rows i cols definiujÈ rozmiar — odpowiednio — wierszy i kolumn. Plansza w Brylantowym wojowniku powstaïa na planie siatki 8×8, która bezproblemowo mieĂci siÚ na maïym ekranie. Z kolei ustawienie baseScore okreĂla liczbÚ punktów, jakÈ gracz otrzymuje po usuniÚciu jednego klejnotu z ïañcucha. Wynik ten jest mnoĝony w przypadku ïañcuchów, w których znajdujÈ siÚ wiÚcej niĝ trzy klejnoty. 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 (dwuwymiarowych obrazkó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 planszy Usprawnianie moduïu zaczniemy od opracowania funkcji ustawiajÈcej i inicjujÈcej planszÚ. Nim wïaĂciwa gra siÚ rozpocznie, plansza jest wypeïniana losowymi klejnotami. Listing 4.4 prezentuje zawartoĂÊ funkcji initialize() w skrypcie board.js. Listing 4.4. Funkcja inicjalizujÈca jewel.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 += ; } 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, zwraca dane 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 asynchronicznych Nim przejdÚ do objaĂniania kolejnej funkcji, wprowaděmy wspólnie maïÈ modyfikacjÚ w funkcji initialize() — 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 przy uĝ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 samodzielnie opracowanego 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Ústo uĝ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 pewnym momencie w trakcie wykonywania zadania. Listing 4.5 przedstawia zmodyfikowanÈ funkcjÚ initialize() w skrypcie board.js. Listing 4.5. Inicjalizowanie funkcji zwrotnej jewel.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 ĝe rezultat 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 planszy Funkcja 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 klejnotami jewel.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 klejnotu jewel.board = (function() { ... function randomJewel() { return Math.floor(Math.random() * numJewelTypes); } ... })(); Podstawowy algorytm wypeïniania planszy jest juĝ gotowy. Przygotowane przez nas rozwiÈzanie jest jednak 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Ètkowej gra 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() musi ukï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 dolnym prawym. 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 to sprawia, ĝe uïoĝony wïaĂnie brylant nie moĝe mieÊ tej samej barwy co dwa u góry lub dwa po jego lewej 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ów jewel.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 kamieni spoza 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Údnych jewel.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 granice planszy, 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 zasad Teraz, 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 nie speïniajÈ reguï gry, sÈ uznawane za niewaĝne. Zaczniemy od wdraĝania mechanizmu walidacji ru- chów gracza. Walidacja ruchów gracza Zamiana klejnotów miejscami jest waĝna jedynie, jeĂli jeden z nich uformuje ïañcuch zïoĝony z trzech lub 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 rodzaju znajdzie 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Ăli w grÚ w chodzi Ărodkowy klejnot ïañcucha), dopasowanie zostanie uznane za waĝne. Listing 4.10 przedstawia dokïadnÈ treĂÊ funkcji checkChain() w pliku board.js. Listing 4.10. Sprawdzanie ïañcuchów jewel.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ów znalezionych 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 jest to, ĝ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. Zgodnie z wczeĂniejszymi ustaleniami, jeĝeli ruch zostanie uznany za waĝny, funkcja checkChain() zwróci liczbÚ 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 ruchu jewel.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 nie jest. 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 znajdziesz treĂÊ funkcji isAdjacent(). Listing 4.12. Sprawdzanie sÈsiedztwa jewel.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ów Po dokonaniu zamiany gra przeszuka planszÚ w poszukiwaniu ïañcucha i go usunie. Po wykonaniu ruchu zniknie zaledwie kilka klejnotów. Pojedynczy ïañcuch powstaje w wyniku zamiany miejscami dwó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ĝe siÚ, ĝ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 planszy jewel.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. Zamiast danych 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 skutkuje dopasowaniem odpowiedniej komórki na mapie do zwracanej przez funkcjÚ wartoĂci. Usuwanie ïañcuchów klejnotów Samo 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ów jewel.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 planszy funkcja 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 nie trzeba 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Úkszany o 1. Z kolej jeĝeli klejnot pozostaje na swoim miejscu, licznik tablicy gaps okreĂli, czy powinien on zostaÊ przesuniÚty w dóï. Stanie siÚ tak, jeĝeli licznik ma wartoĂÊ dodatniÈ — wtedy klejnot opadnie w 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Údne ulegïy zmianie. Generowanie nowych klejnotów Funkcja check() nie zostaïa do koñca opracowana; wciÈĝ zawiera kilka niedociÈgniÚÊ. PrzenoszÈc istniejÈ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óre spïynÈ z górnej granicy w dóï. Listing 4.15 przedstawia modyfikacjÚ odpowiedzialnÈ za ten mechanizm. Listing 4.15. Dodawanie nowych klejnotów jewel.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óre przeniesiono 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ïy na swojÈ kolej. 88 HTML5. TWORZENIE GIER Przyznawanie punktów W 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ñcuchy jewel.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 otrzymanych punktó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 idei gracza. 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 niej zmiany. Listing 4.17. Rekurencyjna analiza planszy jewel.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 planszy dodajemy wynik, po czym plansza zmienia siÚ w tablicÚ zdarzeñ poprzez uĝycie prostego formatu obiektó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 ulegnie zmianie, 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 siatki W trakcie rozgrywki prÚdzej czy póěniej dojdzie do sytuacji, w której uïoĝenie kamieni na planszy zablokuje 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ów jewel.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. List
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

HTML5. Tworzenie gier
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: