Tytuł oryginału The Web Game Developers Cookbook Using JavaScript and HTML5 to Develop Games

Tłumaczenie Łukasz Piwko

ISBN 978-83-246-8042-9

Authorized translation from the English language edition entitled THE WEB GAME DEVELOPERS COOKBOOK USING JAVASCRIPT AND HTML5 TO DEVELOP GAMES ISBN 0321898389 by Evan Burchard published by Pearson Education Inc publishing as Addison WesleyCopyright copy 2013 Pearson Education Inc

All rights reserved No part of this book may by 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 Pearson Education IncPolish language edition published by HELION SA Copyright copy 2014

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

Wydawnictwo HELION dołożyło wszelkich starań by zawarte w tej książce informacje były kompletnei rzetelne Nie bierze jednak żadnej odpowiedzialności ani za ich wykorzystanie ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich Wydawnictwo HELION nie ponosi roacutewnież żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce

Wydawnictwo HELIONul Kościuszki 1c 44-100 GLIWICEtel 32 231 22 19 32 230 98 63e-mail helionhelionplWWW httphelionpl (księgarnia internetowa katalog książek)

Pliki z przykładami omawianymi w książce można znaleźć pod adresem ftpftphelionplprzykladytwgintzip

Drogi CzytelnikuJeżeli chcesz ocenić tę książkę zajrzyj pod adres httphelionpluseropinietwgintMożesz tam wpisać swoje uwagi spostrzeżenia recenzję

Printed in Poland

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

bull Księgarnia internetowabull Lubię to raquo Nasza społeczność

Spis treści

Przedmowa 11

O autorze 13

Wstęp 15

Rozdział 1 Quiz 19

Receptura Tworzenie zbioru pytań 20Receptura Ukrywanie i pokazywanie quizu 25Receptura Przywracanie pytań do widoku 26Receptura Lista zakupoacutew 28Receptura Ktoacutere odpowiedzi są poprawne 32Podsumowanie 34

Rozdział 2 Fikcja interaktywna 37

Receptura Stylizowane strony 38Receptura Zmienianie stron 41Receptura Dodanie schowka z obsługą funkcji przeciągania i upuszczania 44Receptura Dodawanie złożonych interakcji 50Receptura Okruszki 59Receptura Dramatyczne zakończenie 61Podsumowanie 63

Rozdział 3 Impreza 65

Receptura Tworzenie przykładowej gry przy użyciu silnika atomjs 66Receptura Rysowanie na kanwie 70Receptura Rysowanie dziur 72Receptura Rysowanie kreta 74Receptura Umieszczanie kretoacutew w dziurach 77Receptura Dynamiczne pokazywanie kreta 79Receptura Bicie kretoacutew 80Pogrążanie się w rozpaczy z powodu elementu ltaudiogt HTML5 83Podsumowanie 85

Kup książkę Poleć książkę

8 Spis treści

Rozdział 4 Puzzle 87

Receptura Renderowanie przy użyciu biblioteki easeljs 88Receptura Renderowanie większej liczby obiektoacutew 92Receptura Tworzenie par 94Receptura Dopasowywanie i usuwanie par 97Receptura Ukrywanie i przekręcanie obrazkoacutew 99Receptura Wygrywanie i przegrywanie 100Receptura Buforowanie i wydajność 104Receptura Dopasowywanie par zamiast duplikatoacutew 106Podsumowanie 110

Rozdział 5 Gry platformowe 113

Wprowadzenie do biblioteki melonjs 114Receptura Tworzenie mapy kafelkowej 114Receptura Uruchamianie gry 116Receptura Dodawanie postaci 119Receptura Budowa mapy kolizji 121Receptura Chodzenie i skakanie 121Receptura Ekran tytułowy 123Receptura Dodawanie przedmiotoacutew do zbierania 125Receptura Wrogowie 126Receptura Zwiększanie mocy postaci 128Receptura Przegrywanie wygrywanie oraz informacje 129Podsumowanie 131

Rozdział 6 Bijatyki 133

Receptura Podstawowe wiadomości o bibliotece gamejs 134Receptura Wybieranie poszczegoacutelnych spritersquooacutew z zestawu 136Receptura Odbieranie danych od dwoacutech graczy 137Receptura Poruszanie się i zmienianie formy 141Receptura Przyjmowanie danych od obu graczy naraz 144Receptura Implementacja masek bitowych 146Receptura Maskowanie kolizji 150Receptura Niszczenie z wzajemnością 152Podsumowanie 156

Rozdział 7 Strzelanka 159

Trochę podstawowych informacji o renderowaniu 160Receptura Wstęp do gameQuery 160Receptura Dodawanie wrogoacutew 163Receptura Tworzenie pojazdu 167Receptura Kolizje z wrogami 169Receptura Strzelanie 170Receptura Uzupełnianie mocy 172Podsumowanie 174

Kup książkę Poleć książkę

Spis treści 9

Rozdział 8 Gry FPS 177

Receptura Wprowadzenie do biblioteki Jaws 178Receptura Tworzenie mapy dwuwymiarowej 179Receptura Dodawanie postaci gracza 182Receptura Raycasting widoku z goacutery 186Receptura Imitacja troacutejwymiarowości przy użyciu raycastingu 190Receptura Dodawanie kamery 192Receptura Uatrakcyjnianie świata pod względem wizualnym 196Receptura Dodawanie przyjacioacuteł i wrogoacutew 200Podsumowanie 207

Rozdział 9 RPG 209

Receptura Wprowadzenie do biblioteki enchantjs 210Receptura Tworzenie mapy 211Receptura Dodawanie gracza 214Receptura Dodawanie warstwy kolizji 217Receptura Ekran stanu 220Receptura Interakcja z postaciami w grze 223Receptura Tworzenie schowka 226Receptura Tworzenie sklepu 228Receptura Tworzenie interfejsu bitwy 235Receptura Zapisywanie gry przy użyciu API Local Storage HTML5 245Podsumowanie 247

Rozdział 10 Gry RTS 249

Potrzebujemy serwera 250Receptura Instalacja i uruchamianie Node 251Receptura Synchronizacja przy użyciu biblioteki SocketIO 254Receptura Tworzenie mapy izometrycznej przy użyciu silnika craftyjs 257Receptura Rysowanie jednostek 259Receptura Poruszanie jednostkami 263Receptura Sterowanie gracza i widoczność 265Receptura Kolizje dla destrukcji i sprawdzenia przeciwnika 270Podsumowanie 275

Rozdział 11 Dalszy rozwoacutej 277

Co się wydarzyło 278Co dalej 278

Dodatek A Podstawy JavaScriptu 281

Głoacutewne typy API w JavaScripcie 282API rdzenne 282Implementacja API 282API bibliotek 282Własne API 283

Instrukcje 283

Kup książkę Poleć książkę

10 Spis treści

Zmienne 283Łańcuchy 284Liczby 284Tablice 284Funkcje 285Obiekty 285Instrukcje warunkowe 286Pętle 286Komentarze 287

Dodatek B Kontrola jakości 289

Przeglądarkowe narzędzia do diagnostyki błędoacutew 290Testowanie 291Wspoacutełpraca 292

Dodatek C Zasoby 295

Silniki gier 296Edytory tekstu 297Przeglądarki 297Inne narzędzia 298Tworzenie i wyszukiwanie sztuki 299Dema i poradniki 299Książki 300Portale internetowe 300

Skorowidz 303

Kup książkę Poleć książkę

1Quiz

Jest to rodzaj gry o bardzo prostych zasadach Trzeba udzielić odpo-

wiedzi na pytania i albo się je zna albo się zgaduje Jest to niezwykle

popularny typ gry można go spotkać min w interaktywnych tele-

turniejach telewizyjnych Nawet jeśli gra jest bardziej skomplikowana

niż prosty zestaw pytań i odpowiedzi to tak jak każdy program działa

w oparciu o pewną logikę Gdy kroacutel spyta Cię czy chcesz walczyć ze

smokiem i odpowiesz bdquotakrdquo to jest to mały prosty quiz Przesadą

byłoby stwierdzenie że wpadnięcie w otchłań w platformoacutewce albo

strata wszystkich punktoacutew mocy w grze RPG jest tym samym czym

udzielenie odpowiedzi w quizie ale jednak programowanie zasad gry

i ich konsekwencji w każdym gatunku wygląda podobnie

Kup książkę Poleć książkę

20 Rozdział 1 QUIZ

Receptura Tworzenie zbioru pytań

Biorąc pod uwagę fakt że tę książkę mogą czytać początkujący starałem się aby objaśnienia w tymrozdziale były jak najprostsze Dalsze rozdziały są bardziej skomplikowane Natomiast materiałznajdujący się w tym rozdziale ma umożliwić zrozumienie tematu każdemu Każdy od czegośzaczyna i dla niektoacuterych takim początkiem może być właśnie ten tekst Jeśli treść tego rozdziałuwydaje Ci się banalna możesz go tylko przejrzeć albo w ogoacutele pominąć W dalszych rozdziałach sąopisane bardziej złożone i trudniejsze zagadnienia

Opis gry w tym rozdziale pełni trzy funkcje Po pierwsze chcę na jego bazie objaśnić podstawyjęzykoacutew HTML CSS i JavaScript Z tych trzech technologii najważniejszy jest język JavaScriptJeśli słabo znasz podstawy tego języka przeczytaj poradnik znajdujący się w dodatku A Po drugiew opisywanych grach jest używanych wiele roacuteżnych bibliotek i chcę mieć pewność że będzieszwiedzieć skąd je brać Po trzecie chcę ustalić wygodne i powtarzalne zasady tworzenia edytowa-nia zapisywania i otwierania plikoacutew będących podstawą tej książki

Jeśli nie masz edytora tekstu to musisz się w niego zaopatrzyć Edytoroacutew do tworzenia i edyto-wania plikoacutew HTML CSS oraz JavaScript jest mnoacutestwo Jeśli nie wiesz ktoacutery wybrać możeszskorzystać z podpowiedzi zawartych w dodatku C

Jeśli masz już edytor tekstu uruchom go utwoacuterz w nim plik quizstartindexhtml i wklej do niego kodz listingu 11 Jeśli jeszcze nie pobrałeś plikoacutew z serwera FTP poszukaj informacji o nich we wstępie

Listing 11 Plik indexhtml mdash struktura dokumentu HTML

ltDOCTYPE htmlgtlthtmlgt ltheadgt ltmeta charset=utf-8gt lttitlegtQuizlttitlegt ltlink rel=stylesheet type=textcss href=maincssgt ltheadgt ltbodygt lth1gtQuizlth1gt ltdiv id=quizgt ltdivgt ltbodygtlthtmlgt

UWAGA

Akronim HTML pochodzi od angielskich słoacutew Hypertext Markup Language (język znakowaniahipertekstu) Nazwa ta powstała w dawnych czasach gdy łącza nazywano także hiperłą-

czami i istniały jeszcze inne technologie pozwalające na przemieszczanie się między doku-mentami Hipertekst to zwykły tekst zawierający łącza Znaczniki to specjalne fragmentytekstu otaczające zwykły tekst w celu określenia jego funkcji Kroacutetko moacutewiąc HTML to zestawwytycznych składniowych określających sposoacuteb łączenia roacuteżnych rodzajoacutew tekstu w celu uzy-skania wzajemnie powiązanych stron będących plikami z rozszerzeniem html

Znacznik HTML to tekst znajdujący się w ltnawiasie troacutejkątnymgt Natomiast element HTMLto para znacznikoacutew ltotwierającygt i ltzamykającygt wraz z tym co znajduje się między nimi(zwroacuteć uwagę na znak w znaczniku zamykającym)

Kup książkę Poleć książkę

Receptura Tworzenie zbioru pytań 21

Tworzenie dokumentu zaczyna się od zadeklarowania jego typu przy użyciu deklaracji DOCTYPEDzięki temu przeglądarka internetowa bdquowierdquo że otrzymała do przetworzenia dokument HTMLPrzeglądarki mogą też otwierać dokumenty innych typoacutew od plikoacutew XML przez pliki dźwiękowepo obrazy graficzne Dlatego też zadeklarowanie typu dokumentu jako normalnej strony inter-netowej jest bardzo ważne Pewnie zastanawia Cię co się stanie jeśli tego nie zrobisz W zależ-ności od przeglądarki skutki mogą być zaroacutewno mało znaczące jak i straszne Bądź co bądź taknaprawdę nigdy nie wiadomo co się stanie i dlatego najlepiej jest nie zapominać o tym drobiazguna początku dokumentu

Na drugim miejscu znajduje się znacznik lthtmlgt Jest to globalny kontener dokumentu ktoacuteryzazwyczaj zawiera dwa elementy head i body jak widać na powyższym listingu Zwroacuteć uwagęże wszystkie wymienione elementy składają sie ze znacznika otwierającego i zamykającego z uko-śnikiem () Znacznik zamykający pozwala umieścić w elemencie inny element

W elemencie head ogoacutelnie rzecz biorąc wpisuje się informacje ktoacutere są ważne dla przeglądarkiinternetowej ale nie mają bezpośredniego wpływu na to co użytkownik widzi na ekranie Elementmeta ma wiele zastosowań W tym przypadku został użyty do określenia sposobu kodowaniadokumentu Jeśli nie określi się kodowania to znaki niewchodzące w skład standardowego(i mocno ograniczonego) zestawu będą traktowane w nieprzewidywalny sposoacuteb Jeśli będziesz pisaćnp tylko po angielsku to pewnie nie napotkasz trudności ale z typowo polskimi literami typu ś ćmożesz mieć problemy Nawet w konsoli JavaScript (a także narzędziu Firebug i narzędziach dlawebmasteroacutew przeglądarki Chrome) jest wyświetlane powiadomienie że brakuje tego składnikaMimo to w tej książce w większości przypadkoacutew ten element jest opuszczony aby można byłoskupić się na tym co jest nowego w każdym rozdziale

Treść elementu title jest wyświetlana w goacuternej części okna przeglądarki na goacuternej belce kar-cie albo na obu Wykorzystują ją też aplikacje do tworzenia skroacutetoacutew i zakładek jako bdquozwięzłyopis stronyrdquo

Dalej znajduje się element link z atrybutem rel ustawionym na stylesheet atrybutem typeinformującym że dołączany jest arkusz styloacutew CSS oraz atrybutem href zawierającym ścieżkędo tego arkusza W tym przypadku ścieżką jest nazwa pliku co oznacza że ten plik znajduje sięw tym samym folderze co plik indexhtml Element ten jest często używany do dołączania dostron arkuszy styloacutew i oproacutecz ścieżki praktycznie zawsze wygląda tak samo W przypadku elementulink jak roacutewnież meta należy zwroacutecić uwagę na brak znacznika zamykającego (np ltlinkgt)Elementy te nie są kontenerami i nie muszą mieć zamknięcia

W elemencie body znajdują się dwa zagnieżdżone elementy Pierwszy z nich to nagłoacutewek h1 ktoacute-rego zawartość domyślnie jest wyświetlana powiększoną czcionką Drugi to element div pełniącyrolę kontenera oznakowanych informacji W przedstawionym przykładzie element div ma atry-but id ktoacutery obok atrybutu class i samej nazwy elementu stanowi jeden z trzech najczęściej uży-wanych sposoboacutew wybierania elementoacutew do formatowania za pomocą CSS (np w celu zmianykoloru albo rozmiaru tekstu) i przetwarzania za pomocą JavaScriptu (np gdy element zostaniekliknięty strona ma zostać przekręcona do goacutery nogami)

Na razie w elemencie div jeszcze niczego nie ma ale zanim coś do niego dodamy sprawdzimy czywszystko działa tak jak powinno Zapisz plik indexhtml i uruchom przeglądarkę internetowąAby otworzyć w niej swoacutej plik wpisz w pasku adresu jego adres przeciągnij plik na pasek adresuprzeglądarki albo kliknij go dwukrotnie myszą

Gdy plik zostanie otwarty w oknie przeglądarki powinien pojawić się widok pokazany narysunku 11 Zwroacuteć uwagę że tytuł karty został ustawiony na Quiz ponieważ to słowo wpisali-śmy w elemencie title

Kup książkę Poleć książkę

22 Rozdział 1 QUIZ

Rysunek 11 Plik HTML otwarty w przeglądarce Chrome

Jeśli nie masz przeglądarki Chrome ani Firefoksa to powinieneś je sobie teraz obie zainstalowaćUkazują roacuteżne problemy jakie mogą występować podczas tworzenia gier przy użyciu HTML5i obu będziesz często używać Przeglądarki te nie są w tej książce traktowane jako idealnezamienniki

Teraz dodamy trochę pytań w elemencie div Widać je na listingu 12 gdzie zostały wyroacuteżnionepogrubieniem Jest to dość długi fragment kodu ale znajduje się w nim wiele powtarzających sięczęści Jeśli nie masz chęci tego wszystkiego przepisywać możesz to skopiować z plikuquizpo_recepturze1indexhtml

Listing 12 Pytania quizu

ltdiv id=quizgt ltdiv id=question1gt ltdiv class=questiongtKtoacutery z tych typoacutew plikoacutew nie jest u ywany do tworzenia stron internetowychltdivgt ltinput type=radio name=question1 value=agt ltlabelgthtmlltlabelgt ltinput type=radio name=question1 value=bgt ltlabelgtexeltlabelgt ltinput type=radio name=question1 value=cgt ltlabelgtjsltlabelgt ltinput type=radio name=question1 value=dgt ltlabelgtcssltlabelgt ltdivgt ltbr gt ltdiv id=question2gt ltdiv class=questiongtKtoacutera para znakoacutew jest u ywana do oznaczania obiektoacutew JavaScriptltdivgt ltinput type=radio name=question2 value=agt ltlabelgt[]ltlabelgt ltinput type=radio name=question2 value=bgt ltlabelgtltlabelgt ltinput type=radio name=question2 value=cgt ltlabelgtltlabelgt ltinput type=radio name=question2 value=dgt ltlabelgt()ltlabelgt ltdivgt ltbr gt ltdiv id=question3gt ltdiv class=questiongtKrety s ltdivgt ltinput type=radio name=question3 value=agt ltlabelgtwszystko erneltlabelgt ltinput type=radio name=question3 value=bgt ltlabelgturoczeltlabelgt ltinput type=radio name=question3 value=cgt

Kup książkę Poleć książkę

Receptura Tworzenie zbioru pytań 23

ltlabelgtobrzydliweltlabelgt ltinput type=radio name=question3 value=dgt ltlabelgtwszystkie powy szeltlabelgt ltdivgt ltbr gt ltdiv id=question4gt ltdiv class=questiongtJapo ski znak wymawia si ltdivgt ltinput type=radio name=question4 value=agt ltlabelgtkaltlabelgt ltinput type=radio name=question4 value=bgt ltlabelgtkoltlabelgt ltinput type=radio name=question4 value=cgt ltlabelgtkeltlabelgt ltinput type=radio name=question4 value=dgt ltlabelgtkiltlabelgt ltdivgt ltbr gt ltdiv id=question5gt ltdiv class=questiongtSta a grawitacji na Ziemi w przybli eniu wynosiltdivgt ltinput type=radio name=question5 value=agt ltlabelgt10 ms^2ltlabelgt ltinput type=radio name=question5 value=bgt ltlabelgt0809 ms^2ltlabelgt ltinput type=radio name=question5 value=cgt ltlabelgt981 ms^2ltlabelgt ltinput type=radio name=question5 value=dgt ltlabelgt844 ms^2ltlabelgt ltdivgt ltbr gt ltdiv id=question6gt ltdiv class=questiongtJak wygl da dziesi tna liczba 45 w systemie dwoacutejkowymltdivgt ltinput type=radio name=question6 value=agt ltlabelgt101101ltlabelgt ltinput type=radio name=question6 value=bgt ltlabelgt110011ltlabelgt ltinput type=radio name=question6 value=cgt ltlabelgt011101ltlabelgt ltinput type=radio name=question6 value=dgt ltlabelgt101011ltlabelgt ltdivgt ltbr gt ltdiv id=question7gt ltdiv class=questiongt4 ltlt 2 = ltdivgt ltinput type=radio name=question7 value=agt ltlabelgt16ltlabelgt ltinput type=radio name=question7 value=bgt ltlabelgt4ltlabelgt ltinput type=radio name=question7 value=cgt ltlabelgt2ltlabelgt ltinput type=radio name=question7 value=dgt ltlabelgt8ltlabelgt ltdivgt ltbr gt ltdiv id=question8gt ltdiv class=questiongtJak obliczy d ugo przeciwprostok tnej troacutejk ta prostok tnego maj c podane d ugo ci jego przyprostok tnych ltdivgt

Kup książkę Poleć książkę

24 Rozdział 1 QUIZ

ltinput type=radio name=question8 value=agt ltlabelgtpipromie ^2ltlabelgt ltinput type=radio name=question8 value=bgt ltlabelgtkorzystaj c z twierdzenia Pitagorasaltlabelgt ltinput type=radio name=question8 value=cgt ltlabelgtu ywaj c kalkulatoraltlabelgt ltinput type=radio name=question8 value=dgt ltlabelgtsin(bok1 + bok2)ltlabelgt ltdivgt ltbr gt ltdiv id=question9gt ltdiv class=questiongtPrawda czy fa sz aby gra by a co warta musi zmienia klatki z pr dko ci przynajmniej 60 na sekund ltdivgt ltinput type=radio name=question9 value=agt ltlabelgtprawdaltlabelgt ltinput type=radio name=question9 value=bgt ltlabelgtfa szltlabelgt ltdivgt ltbr gt ltdiv id=question10gt ltdiv class=questiongtDzi ki serwerowi mo naltdivgt ltinput type=radio name=question10 value=agt ltlabelgtukry swoacutej kodltlabelgt ltinput type=radio name=question10 value=bgt ltlabelgtutworzy wietn gr ltlabelgt ltinput type=radio name=question10 value=cgt ltlabelgtumo liwi graczom wspoacuteln gr ltlabelgt ltinput type=radio name=question10 value=dgt ltlabelgtwszystkie powy szeltlabelgt ltdivgt ltdivgt hellip

Wszystkie pytania w tym quizie mają taką samą ogoacutelną strukturę Roacuteżnią się natomiast nume-rami treścią oraz możliwościami do wyboru Przyjmijmy że interesuje nas tylko pierwsze pytanieZnajduje się ono w elemencie div o identyfikatorze (id) question1 Identyfikator jest niepowta-rzalny i można go będzie poacuteźniej użyć do roacuteżnych celoacutew Ten element div zawiera samo pytaniei cały blok odpowiedzi W nim jest zagnieżdżony kolejny element div zawierający tylko samopytanie Ma on przypisaną klasę (class) question Przypomnę że za pomocą klasy podobniejak nazwy elementu i identyfikatora można się poacuteźniej odwoływać do elementu Najważniejsząroacuteżnicą między klasą a identyfikatorem jest to że identyfikator nie może powtarzać się na stroniea liczba klas jest nieograniczona

Dalej znajduje się element input z trzema atrybutami Atrybut type=radio oznacza że zostałutworzony przycisk radiowy Jeśli nie wiesz jak on wygląda spoacutejrz na rysunek 12 Drugi atrybutto name Każda odpowiedź w zestawie musi mieć inną wartość tego atrybutu Atrybut value okre-śla co jest przesyłane jako wartość elementu po zatwierdzeniu formularza HTML Podobnie prze-syłana jest zawartość pola tekstowego My nie będziemy zatwierdzać formularzy ale będziemykorzystać z tych wartości do sprawdzania odpowiedzi przy użyciu JavaScriptu Poznałeś jużelementy wymagające i niewymagające znacznika zamykającego Natomiast omawiany elementinput ma zakończenie gt oznaczające że sam się zamyka

Elementy label służą do oznaczania tekstu znajdującego się poza elementami input Ich głoacutew-nym zadaniem jest przeniesienie fokusu na odpowiednie pola wejściowe w reakcji na ich klik-

Kup książkę Poleć książkę

Receptura Ukrywanie i pokazywanie quizu 25

Rysunek 12 Pytania i odpowiedzi quizu

nięcie Nie ma tego w przykładowym kodzie ale jeśli chcesz możesz nadać każdej odpowiedziniepowtarzalny identyfikator np id=question-10-answer-b oraz użyć go w atrybucie forodpowiedniej etykiety np ltlabel for=question-10-answer-bgt

Między każdą parą pytań znajduje się znacznik ltbr gt w ktoacuterym ukośnik oznacza że jest tosamozamykający się element Element br służy do rozsuwania elementoacutew w pionie Wysokośćtej pustej przestrzeni jest zależna od przeglądarki i dlatego jeśli układ elementoacutew jest ważny (w więk-szości przypadkoacutew jest ale tutaj akurat nie) należy zamiast tego elementu używać własności CSS

Jeśli wszystko poszło zgodnie z planem to po otwarciu pliku w przeglądarce powinieneś zobaczyćwidok pokazany na rysunku 12

Receptura Ukrywanie i pokazywanie quizu

W grach często występują roacuteżnego rodzaju blokady np zablokowane postaci niedostępne planszealbo ukryte poziomy Tutaj mamy zablokowane pytania Może się wydawać że to przestarzałetechniki ale to tylko złudzenie Nie chciałbyś przechodzić wszystkich plansz gry Mario narazprawda To samo dotyczy quizu Gdyby zawierał 100 pytań to lepiej byłoby nie wyświetlać ichwszystkich jednocześnie

Jak można zablokować treść Jest wiele możliwości wśroacuted ktoacuterych można wymienić np umiesz-czenie jej grupami na roacuteżnych stronach Jednak dla uproszczenia w tym przypadku użyjemy koduCSS aby ukryć część treści strony W związku z tym w folderze zawierającym plik indexhtmlmusimy utworzyć plik o nazwie maincss i zawartości pokazanej na listingu 13

Kup książkę Poleć książkę

26 Rozdział 1 QUIZ

Listing 13 Zawartość pliku maincss ukrywająca treść strony

quiz displaynonebody margin-left50px

Tekst quiz oznacza że jest to reguła CSS odnosząca się do wszystkiego co znajduje się w kon-tenerze np div o identyfikatorze (id) quiz Użyta tu deklaracja display none powodujeukrycie całej zawartości elementu div o identyfikatorze quiz Gdybyśmy chcieli zdefiniowaćwłaściwości elementu o identyfikatorze inny-quiz to użylibyśmy selektora inny-quiz A gdybyinteresował nas element przypisany do klasy quiz to zamiast znaku użylibyśmy kropki np quiz

Przed selektorami elementoacutew nie ma żadnych dodatkowych znakoacutew a więc aby odnieść się doelementu body nie trzeba używać kropki ani krzyżyka Zastosowana w tym przykładzie deklara-cja margin-left50px przesuwa całą stronę nieco w prawo Przyjrzyjmy się dokładniej struk-turze tych dwoacutech blokoacutew formatujących Każdy z nich zawiera selektor otwarcie klamry dekla-racje stylistyczne oraz zamknięcie klamry Deklaracja stylu składa się z nazwy atrybutu po lewejdwukropka wartości tego atrybutu po prawej oraz średnika oznaczającego koniec wiersza

Początkującym składnia ta może sprawiać drobne problemy zwłaszcza gdy się ją połączy z elemen-tami HTML oraz ich identyfikatorami klasami i innymi atrybutami Pocieszę Cię że znasz już pod-stawy językoacutew HTML i CSS Poacuteźniej poznasz jeszcze inne atrybuty i selektory ale najważniejszepodstawy już znasz Pewnie nie raz popełnisz jakiś błąd np użyjesz krzyżyka zamiast kropki alboodwrotnie zapomnisz o końcowym średniku lub zamknięciu klamry itp Nie przejmuj się jednakSą to powszechnie występujące błędy ktoacuterych nie potrafią się ustrzec nawet zawodowcy Jeśli cośnie będzie działać zastanoacutew się przez chwilę i dokładnie przeczytaj napisany przez siebie kod

Jeśli teraz zapiszesz pliki i otworzysz plik indexhtml w przeglądarce to zobaczysz że strona wyglądatak jak na rysunku 11 chociaż jest odrobinę wcięta w prawo

Receptura Przywracanie pytań do widoku

Wszystkie pytania zniknęły i trzeba je jakoś przywroacutecić do widoku Możesz to zrobić dodającpakiety użyte w każdym z kolejnych rozdziałoacutew Każdy pakiet spowoduje pojawienie się jednegopytania

Zanim zaczniemy ładować pakiety musimy sprawdzić czy w ogoacutele możemy ładować kod JavaScriptPrawie na samym dole pliku indexhtml wpisz kod wyroacuteżniony pogrubieniem na listingu 14

Listing 14 Ładowanie pierwszego zewnętrznego pliku JavaScript

hellip ltscript src=gamejsgtltscriptgt ltbodygtlthtmlgt

W ten sposoacuteb ładujemy na stronę plik JavaScript o nazwie gamejs Oczywiście musimy też goutworzyć Utwoacuterz plik o nazwie gamejs w tym samym folderze w ktoacuterym znajdują się plikimaincss i indexhtml oraz wpisz w nim kod widoczny na listingu 15

Kup książkę Poleć książkę

Receptura Przywracanie pytań do widoku 27

Listing 15 Zawartość pliku gamejs

alert(Witaj wiecie)consolelog(Witaj wiecie)

Kod ten drukuje informacje w dwoacutech miejscach Pierwsze z nich stanie się oczywiste po otwarciupliku indexhtml ponieważ jest to wyskakujące okienko alertu Natomiast instrukcja consolelogpowoduje wysłanie tekstu do konsoli JavaScript ktoacutera jest niezbędnym narzędziem dla każdegowebmastera Jeśli potrzebujesz pomocy na temat podstaw obsługi konsoli JavaScript zajrzyj dododatku B bdquoKontrola jakościrdquo

Teraz dodamy bibliotekę jQuery Najprościej jest w tym celu wejść na stronę httpjquerycomi pobrać bibliotekę na swoacutej dysk w dowolny sposoacuteb Ja po prostu kliknąłem największy i najbar-dziej efektowny przycisk znajdujący się na stronie aby przejść na stronę zawierającą kod tej biblio-teki Następnie go skopiowałem i wkleiłem do utworzonego własnoręcznie pliku o nazwie jqueryjsNa koniec zapisałem ten plik

Na stronie jQuery można też pobrać plik biblioteki w tradycyjny sposoacuteb Nieważne jak ją zdo-będziesz pamiętaj tylko aby umieścić ją w odpowiednim folderze na swoim dysku (w tym samymw ktoacuterym znajdują się pliki indexhtml maincss i gamejs)

Po umieszczeniu pliku w odpowiednim miejscu na dole pliku indexhtml dodaj kod wyroacuteżnionypogrubieniem na listingu 16 Upewnij się że nazwa pliku jest taka sama jak nazwa wpisana w tymkodzie

Listing 16 Dodanie biblioteki jQuery do pliku indexhtml

hellip ltscript src=jqueryjsgtltscriptgt ltscript src=gamejsgtltscriptgt ltbodygtlthtmlgt

Jeśli swojemu plikowi nadałeś inną nazwę niż jqueryjs pamiętaj żeby zmienić ją także w powyż-szym kodzie

Teraz przydałoby się nieco dostosować arkusz styloacutew Wcześniej zadziałaliśmy trochę zbyt agre-sywnie Teraz to zmienimy i zamiast ukrywać wszystkie pytania naraz schowamy każde z nichosobno przy użyciu kodu widocznego na listingu 17

Listing 17 Ukrywanie pytań nie całego quizu

body margin-left50pxquestion1 question2 question3 question4 question5question6 question7 question8 question9 question10 displaynone

Kup książkę Poleć książkę

28 Rozdział 1 QUIZ

Został usunięty selektor quiz a w jego miejsce wstawiliśmy listę rozdzielanych przecinkamiselektoroacutew identyfikatoroacutew pytań Można też było przypisać wszystkim pytaniom wspoacutelną klasęi ukryć je wszystkie przy użyciu selektora kropki Ale warto wiedzieć że można też tworzyć takielisty selektoroacutew jak powyższa

Po ukryciu pytań za pomocą CSS możemy je odblokować przy użyciu jQuery W tym celu musimyzmienić kod znajdujący się w pliku gamejs na pokazany na listingu 18 Należy nim zastąpićpoprzednią zawartość tego pliku

Listing 18 Kod powodujący wyświetlenie pierwszego pytania jeżeli jest załadowana biblioteka jQuery

if(jQuery) $(question1)show()

Znajdująca się w pierwszym wierszu instrukcja warunkowa sprawdza czy jest załadowana biblio-teka jQuery Jeśli tak następuje wykonanie drugiego wiersza kodu W tym wierszu jest użyta funk-cja jQuery $ ktoacuterej przekazujemy selektor CSS question1 w cudzysłowie i nawiasie Następniewykonujemy funkcję show w celu zamiany deklaracji displaynone pierwszego pytania nadisplayblock

Jeśli teraz zapiszesz pliki i otworzysz stronę indexhtml w przeglądarce zobaczysz że pojawiło siępierwsze pytanie

Receptura Lista zakupoacutew

W tej recepturze zaimportujemy na naszą stronę jeszcze dziewięć dodatkowych plikoacutew Pewniezastanawiasz się dlaczego warunkiem wyświetlenia pytań ma być załadowanie jakichś plikoacutewWielu osobom może się wydawać że pobieranie plikoacutew na dysk a następnie dołączanie ich doinnych plikoacutew jest bez sensu Jednak umiejętność korzystania z kodu napisanego przez inneosoby jest bardzo ważna Niewiele projektoacutew tworzy się zupełnie od podstaw a nauczenie się two-rzenia gier poprzez bdquostawanie na ramionach olbrzymoacutewrdquo jest naprawdę warte zachodu Ponadtow tej części rozdziału zrobisz przegląd jakiego rodzaju plikoacutew będziesz używać w dalszych częściachkursu

Jeżeli wiesz jak się dołącza pliki JavaScript do systemu i dobrze znasz metody kontroli wersji topozostałe podrozdziały będą dla Ciebie jedynie powtoacuterką Możesz je tylko przejrzeć a nawetpominąć jeśli chcesz

Mając załatwioną sprawę z najważniejszą w tym rozdziale biblioteką jQuery możemy udać sięna dalsze zakupy Jeśli masz ochotę na małą przygodę to możesz wszystkie biblioteki pobrać z ichstron ktoacuterych adresy znajdziesz w dodatku C bdquoZasobyrdquo Ale możesz też je wszystkie znaleźć w fol-derze po_recepturze4 w katalogu plikoacutew do tego rozdziału Nie zapomnij tylko umieścić wszystkichplikoacutew w tym samym folderze w ktoacuterym znajduje się plik indexhtml

Po zdobyciu wszystkich plikoacutew w ten czy inny sposoacuteb Twoacutej system plikoacutew powinien wyglądaćtak jak na rysunku 13

Teraz możesz rozpocząć dołączanie plikoacutew JavaScript do strony dodając wiersze pogrubione nalistingu 19 do pliku indexhtml

Kup książkę Poleć książkę

Receptura Lista zakupoacutew 29

ARTYKUŁY SPOŻYWCZE

1 jqueryjs ten plik już masz Jest używany w kilku innych rozdziałach do wybieraniaelementoacutew na stronie i manipulowania nimi

2 impressjs w rozdziale 3 bdquoImprezardquo tego narzędzia do tworzenia prezentacji (podobnegodo PowerPointa ale w JavaScripcie) użyjemy do zarządzania bdquostronamirdquo interaktywnej gry

3 atomjs jest to jeden z najmniejszych dostępnych silnikoacutew gier (zawiera tylko 203nieskompresowane wiersze kodu CoffeeScript) Skryptu tego użyjemy do budowy gryimprezowej

4 easeljs skrypt udostępniający udoskonalony interfejs do API kanwy ktoacuterego będziemyużywać przy rysowaniu puzzli

5 melonjs tego silnika użyjemy do budowy platformoacutewki w rozdziale 5

6 yabblejs w grze symulującej walkę wykorzystamy tę bibliotekę do załadowania silnikagamejs (nie mylić z plikiem gamejs użytym w tym rozdziale i innych)

7 jquerygamequeryjs wtyczka do jQuery będąca silnikiem gier Użyjemy jej do utworzeniastrzelanki w ktoacuterej poruszamy się z boku ekranu

8 jawsjs tego wszechstronnego silnika gier (i staroświeckiej trygonometrii) użyjemydo budowy typowej gry FPS

9 enchantjs japoński silnik gier o bogatej funkcjonalności i doskonałej obsłudze urządzeńmobilnych Użyjemy go do budowy gry RPG w rozdziale 9 bdquoRPGrdquo

10 craftyjs rozbudowany i bardzo dobrze obsługiwany silnik gier ktoacuterego użyjemy do budowygry RTS (gdybym miał wybrać jeden silnik ktoacutery zabrałbym na bezludną wyspę to możliweże wybrałbym właśnie ten)

UWAGA

Jeśli przeczytałeś dodatek C to zapewne zauważyłeś że wszystkie wymienione pliki możnateż znaleźć w serwisie GitHub Pliki z tego serwisu można pobierać na trzy sposoby Popierwsze można pobrać cały projekt w formacie ZIP wypakować pliki i użyć tych ktoacutere sąpotrzebne

Po drugie można przejrzeć zawartość projektu kliknąć wybrany plik skopiować jego zawar-tość a następnie wkleić ją do nowo utworzonego pliku na własnym dysku Może się wyda-wać że to dużo zachodu ale w istocie ta metoda jest naprawdę szybka

Trzecia możliwość jest nieco bardziej skomplikowana ale może zaowocować ułatwieniempracy w przyszłości Polega ona na zainstalowaniu programu Git w komputerze pobraniu(sklonowaniu) projektu oraz przejściu do folderu tego rozdziału w celu pobrania plikoacutewMożesz pracować bezpośrednio w tym folderze albo skopiować z niego potrzebne pliki

Git to system kontroli wersji umożliwiający śledzenie zmian w plikach Natomiast GitHubto portal internetowy w ktoacuterym osoby używające programu Git (wielu programistoacutew z roacuteż-nych krajoacutew) mogą przechowywać własne projekty i znajdować projekty innych osoacuteb Publicz-nie udostępnione projekty można przechowywać za darmo Gorąco polecam skorzystaniez tej możliwości Najlepszy poradnik instalacji programu Git znajduje się pod adresemhelpgithubcomarticlesset-up-git

Kup książkę Poleć książkę

30 Rozdział 1 QUIZ

Rysunek 13 Katalog zawierający wszystkie potrzebne pliki JavaScript

Listing 19 Dodawanie plikoacutew JavaScript do strony indexhtml

ltscript src=jqueryjsgtltscriptgt ltscript src=impressjsgtltscriptgt lt-- To jest potrzebne do działania skryptu atomjs --gt ltcanvasgtltcanvasgt ltscript src=atomjsgtltscriptgt ltscript src=easeljsgtltscriptgt ltscript src=melonjsgtltscriptgt ltscript src=yabblejsgtltscriptgt ltscript src=jquerygamequeryjsgtltscriptgt ltscript src=jawsjsgtltscriptgt ltscript src=enchantjsgtltscriptgt ltscript src=craftyjsgtltscriptgt ltscript src=gamejsgtltscriptgt ltbodygtlthtmlgt

Upewnij się że nazwy plikoacutew dołączanych do strony zgadzają się z nazwami wpisanymi w elemen-tach script Pliki JavaScript do stron HTML zazwyczaj dołącza się właśnie przy użyciu elementuscript W całym tym kodzie znajduje się tylko jedna nietypowa rzecz mdash element canvas umiesz-czony między skryptem atomjs a komentarzem lt-- --gt Element ten jest potrzebny do działaniabiblioteki atomjs Większość silnikoacutew gier uruchamia się poprzez wywołanie funkcji inicjującejalbo wskazanie konkretnego elementu canvas ktoacutery ma zostać wykorzystany Jednak skryptatomjs automatycznie szuka elementu canvas natychmiast gdy tylko zostanie dołączony do stronyZamiast z nim walczyć (tzn edytować plik atomjs) lepiej jest dać mu to czego chce Znaki lt-- --gtoznaczają komentarz HTML Komentarze służą do wpisywania na stronie notatek przeznaczo-nych dla nas samych lub innych osoacuteb ktoacutere są ignorowane przez przeglądarki Należy jednakpamiętać że może je przeczytać każdy użytkownik ktoacutery zajrzy do kodu źroacutedłowego strony Jeślinie wiesz o co mi chodzi przeczytaj dodatek B

Teraz w pliku gamejs przywroacutecimy do widoku pozostałe pytania naszego quizu W tym celunależy dodać wiersze oznaczone na listingu 110 pogrubieniem

Kup książkę Poleć książkę

Receptura Lista zakupoacutew 31

Listing 110 Przywroacutecenie pozostałych pytań do widoku

if(jQuery) $(question1)show()if(impress) $(question2)show()if(atom) $(question3)show()if(createjs) $(question4)show()if(me) $(question5)show()if(require) $(question6)show()if($()playground) $(question7)show()if(jaws) $(question8)show()if(enchant) $(question9)show()if(Crafty) $(question10)show()

Efekt dodania każdej z tych instrukcji jest od razu widoczny w postaci pojawienia się nowegoobiektu na stronie Jedynym wyjątkiem w tym bloku kodu jest test playground dotyczący pyta-nia 7 gameQuery to rozszerzenie jQuery a więc jego funkcje bazują na funkcjach tej bibliotekiNie ma własnego rdzennego obiektu i dlatego trzeba sprawdzić dostępność funkcji playgroundw obiekcie $() jQuery

OSTRZEŻENIE

TO NIE JEST TWOacuteJ KOD Programiści piszący kod zazwyczaj chcą mieć odrobinę kontrolinad sposobem jego używania przez innych Kontrolę tę sprawują poprzez dołączenie dokodu licencji Nie oznacza to że takich programoacutew nie można albo nie należy używać Nie-ktoacutere licencje zabraniają tylko używać kodu w celach komercyjnych inne wymagają poda-nia gdzieś nazwiska autora skryptu a jeszcze inne są tylko po to aby skrypt moacutegł być zawszeużywany Szczegoacutełowy opis kwestii licencjonowania oprogramowania wykracza poza zakrestej książki ale jeśli przeczytasz licencje użytych w niej bibliotek lub poczytasz o licencjachCreative Commons GPL BSD i MIT to będziesz się orientować jak inni zapatrują się nakwestię otwartości oprogramowania To samo dotyczy obrazoacutew plikoacutew dźwiękowych i innychtypoacutew treści

Kup książkę Poleć książkę

32 Rozdział 1 QUIZ

Jeśli teraz zapiszesz plik indexhtml i otworzysz go w przeglądarce internetowej to zobaczyszcały quiz chociaż nie będzie on reagował na kliknięcia Powodem tego jest rozciągnięcie napowierzchni całej strony elementu canvas ktoacutery jak niewidoczna płachta przykrywa wszystkoblokując dostęp do elementoacutew strony Problem ten rozwiążemy dodając prostą regułę CSS (pogru-biony kod na listingu 111)

Listing 111 Kod CSS ukrywający element canvas

body margin-left50pxquestion1 question2 question3 question4 question5question6 question7 question8 question9 question10displaynonecanvas displaynone

Receptura Ktoacutere odpowiedzi są poprawne

Poprawne odpowiedzi można by było oznaczyć dodając do nich klasę correct ale to zbyt prosterozwiązanie zaroacutewno pod względem implementacji jak i ryzyka podejrzenia odpowiedzi przezużytkownika Wszystko co znajduje się w tych plikach nawet komentarze jest widoczne dla użyt-kownika ktoacutery jeśli nie będzie znał odpowiedzi będzie moacutegł ją podejrzeć Aby trochę utrudnićoszukiwanie osobom znającym się na programowaniu i uniemożliwić tym ktoacutere się nie znajądo sprawdzania odpowiedzi można użyć słabej funkcji mieszającej

Funkcja mieszająca to funkcja pobierająca wartość i przekształcająca ją w inną wartość Jej zaletąw tym przypadku jest łatwość z jaką można odkryć pierwotną wartość mając wynik mieszania

Zanim ją napiszemy najpierw utworzymy styl informujący w widoczny sposoacuteb że wszystkie odpo-wiedzi są poprawne Styl ten zapisany w pliku maincss jest pokazany na listingu 112 i wyroacuteż-niony pogrubieniem

Listing 112 Styl włączany gdy użytkownik poprawnie odpowie na wszystkie pytania

body margin-left50pxquestion1 question2 question3 question4 question5question6 question7 question8 question9 question10displaynonecanvas displaynonecorrect background-color24399f colorwhite

Kup książkę Poleć książkę

Receptura Ktoacutere odpowiedzi są poprawne 33

Dodana reguła definiuje niebieskie tło i biały tekst dla elementoacutew należących do klasy correctKlasę tę można dodać do quizu gdy użytkownik poprawnie odpowie na wszystkie pytania W przed-szkolu albo gdzieś indziej może słyszałeś o kolorze białym ale kolor o nazwie 24399f raczejrzadko pojawia się w codziennych konwersacjach nawet wśroacuted absolwentoacutew większości kierunkoacutewtechnicznych Jest to definicja koloru w formacie RGB (ang red green blue mdash czerwony zielonyniebieski) Dwie pierwsze cyfry określają wartość czerwieni następne dwie mdash wartość zielenia ostatnie dwie mdash ilość niebieskiego

Ale chwileczkę ostatnia cyfra to litera f Litera to przecież nie cyfra W istocie w dziesiętnymsystemie liczbowym nie ma takiej cyfry Ale gdybyśmy używali systemu dziesiętnego to mieliby-śmy do dyspozycji tylko 100 (0 ndash 9 i 0 ndash 9 czyli 10middot10) wartości dla każdej z barw składowychKtoś uznał że to za mało jak na sieć i dlatego używamy systemu szesnastkowego w ktoacuterym dlakażdej barwy RGB jest dostępnych 256 (16middot16) odcieni Istnieje też ograniczony zbioacuter nazw kolo-roacutew i można np napisać white albo ffffff oraz black albo 000000 Przy okazji ktoś innykiedyś pomyślał sobie że tych cyfr czasami jest za dużo i dlatego powtarzające się cyfry możnaredukować do trzech np kolor czarny można zapisać jako 000 a biały mdash fff

Po dodaniu kodu CSS pozostaje jeszcze zmienić coś w pliku indexhtml Znacznik otwierającyltbodygt zamień na znacznik oznaczony pogrubieniem na listingu 113

Listing 113 Dodanie procedury obsługi kliknięcia do elementu body w pliku indexhtml

ltDOCTYPE htmlgtlthtmlgt ltheadgt ltmeta charset=utf-8gt lttitlegtQuizlttitlegt ltlink rel=stylesheet type=textcss href=maincssgt ltheadgt ltbody onclick=checkAnswers()gt

Zamiast zwykłego znacznika ltbodygt mamy teraz znacznik z atrybutem onclick zawierającymłańcuch kodu JavaScript w cudzysłowie Jeśli dziwi Cię słowo bdquołańcuchrdquo przeczytaj dodatek Ai dopiero potem wroacuteć do tego miejsca Łańcuch znajdujący się w tym atrybucie onclick powo-duje wywołanie funkcji checkAnswers za każdym razem gdy zostanie kliknięty jakiś element nastronie Zwroacuteć uwagę na nawias ktoacutery oznacza że jest to wywołanie funkcji Gdyby go nie byłopo prostu odnosilibyśmy się do funkcji ale byśmy jej nie wywoływali

Na listingu 114 znajduje się ostatni przykład kodu prezentowany w tym rozdziale Jest to treść opi-sanej powyżej funkcji Pogrubiony kod z tego listingu można umieścić na początku pliku gamejsmiędzy testem obecności biblioteki jQuery a instrukcją powodującą wyświetlenie pierwszegopytania

Listing 114 Sprawdzenie odpowiedzi

if(jQuery) var checkAnswers = function() var answerString = var answers = $(checked) answerseach(function(i) answerString = answerString + answers[i]value ) $(checked)each(function(i)

Kup książkę Poleć książkę

34 Rozdział 1 QUIZ

var answerString = answerString + answers[i]value ) checkIfCorrect(answerString) var checkIfCorrect = function(theString) if(parseInt(theString 16) === 811124566973) $(body)addClass(correct) $(h1)text(Wygra e ) $(canvas)show() $(question1)show()hellip

W pogrubionym kodzie znajdują się definicje dwoacutech funkcji Pierwsza ma nazwę checkAnswersi tworzy pusty łańcuch do ktoacuterego będziemy dodawać kolejne odpowiedzi gdy użytkownik będzieklikał przyciski radiowe Po zakończeniu tej pętli zostaje wywołana druga funkcja checkIfCorrectporoacutewnująca otrzymany łańcuch z długą liczbą Skąd wzięła się ta liczba

Przypomnij sobie szesnastkowe wartości koloroacutew CSS Można w nich używać cyfr od 0 do f Tooznacza że litery a ndash d będące odpowiedziami w naszym quizie mogą być traktowane jak cyfrysystemu szesnastkowego (można je traktować jak liczby 10 ndash 13) Połączyłem je w jeden łańcuchktoacutery następnie zamieniłem na format dziesiętny

Jeśli wynik poroacutewnania jest pozytywny dodajemy do elementu body klasę correct co powodujezmianę koloru tła i tekstu Dodatkowo następuje zamiana tekstu elementu h1 z Quiz na Wygra e Na zakończenie wykorzystujemy ukryty wcześniej element canvas do zablokowania możliwościużywania myszy na ekranie Normalnie w celu zablokowania możliwości używania elementoacutewformularza na stronie posłużylibyśmy się funkcją jQuery disable ale dzięki tej sztuczce znaleź-liśmy zastosowanie dla elementu canvas ktoacutery w innym przypadku byłby całkiem bezużytecznyPonadto element ten można by było wykorzystać jako bazę gry opartej na silniku atomjs i woacutew-czas udzielenie poprawnych odpowiedzi w quizie byłoby warunkiem rozpoczęcia gry

Po wykonaniu wszystkich opisanych czynności oraz zapisaniu wszystkich plikoacutew i otwarciu w prze-glądarce pliku indexhtml powinieneś zobaczyć stronę pokazaną na rysunku 14

Podsumowanie

W tym rozdziale utworzyliśmy prosty quiz z pytaniami mającymi związek z każdym rozdziałemtej książki Wszystkie pytania były zablokowane i aby je odblokować trzeba było dołączyć dostrony pliki JavaScript ktoacutere będą używane w roacuteżnych rozdziałach Do sprawdzania odpowiedziużyliśmy prostej funkcji mieszającej zamieniającej wartości szesnastkowe reprezentujące odpo-wiedzi na długą wartość dziesiętną

Podczas tworzenia tej gry poznałeś podstawy technologii HTML CSS jQuery Git oraz dowie-działeś się o istnieniu niektoacuterych licencji na oprogramowanie Ponadto poznałeś nazwy silnikoacutewgier i innych bibliotek ktoacuterych będziemy używać we wszystkich pozostałych rozdziałach

Jeśli chcesz trochę poćwiczyć możesz sproacutebować utworzyć drugą stronę z pytaniami ktoacutera będzieodblokowywana dopiero wtedy gdy użytkownik udzieli prawidłowych odpowiedzi na pierw-szej W rozdziale 2 znajduje się opis jednej z możliwości wyświetlania bardziej dynamicznych

Kup książkę Poleć książkę

Podsumowanie 35

Rysunek 14 Wszystkie poprawne odpowiedzi z informacją o wygranej

informacji a więc możesz w nim poszukać inspiracji Ponadto na zakończenie gry przykryliśmywszystko elementem canvas Możesz umieścić na nim inną grę Skrypt atomjs kontroluje go i czekaaż wroacutecisz po lekturze rozdziału 3 aby coś na nim dodać gdy już będziesz wiedział jak to zrobić

Jeśli treść tego rozdziału była dla Ciebie trudna do zrozumienia przestudiuj go jeszcze raz wrazz dodatkiem A A jeśli nie znalazłeś w nim nic nowego to nie przejmuj się Od rozdziału 2 zaczy-namy prawdziwą zabawę a w rozdziale 7 idziemy już na całość

Kup książkę Poleć książkę

36 Rozdział 1 QUIZ

Kup książkę Poleć książkę

Skorowidz

A

activeMole 81aktualizowanie graczy 144anchor 205API 282

bibliotek 282implementacja 282localStorage 245rdzenne 282sieciowe 250własne 283

argument 285atomjs 29 65

dostęp do elementu canvas 70podstawowy plik 66tworzenie przykładowej gry 66

atrybutcanChange 144class 21data-x 42fillStyle 71href 21id 21moleOffset 78name 24onclick 33onload 89player 266reallySuperDead 274rel 21room 266type 21type= 24value 24

audiocontextplay(noteOrFrequency) 83

B

backbonejs 66Bejeweled 106biblioteka

Akihabara 296Atom 296atomjs 30 66Crafty 296craftyjs 250

cechy 275rysowanie tablicy izometrycznej 257wykrywanie kolizji 271

dokumentacja dodatkoacutew 92easeljs 88

buforowanie 104renderowanie 88

enchantjs 210API 247cechy 247dokumentacja 216obiekt Group 213praca na urządzeniach przenośnych 220wiązanie klawiszy 220właściwości 211

filtrr 195gamejs 134

blit 135Gamejs 296gameQuery 160

dokumentacja 164funkcje 175interfejs playground 163

impressjsdodawanie złożonych interakcji 51

Kup książkę Poleć książkę

304 Skorowidz

bibliotekaJaws 178jQuery

dodawanie do pliku 27pobieranie 27Raptorize 61selektory 166silnik gier 29

melonJS 114kontekst renderowania kanwy 124Melon Engine 118narzędzia 131przestrzeń nazw 134warstwy kolizji 121zapisywanie mapy 116

Node 250instalacja i uruchamianie 251

pygame 134SocketIO 250

pobieranie 255pokoje 267synchronizacja 254

zalety wykorzystania 178bijatyka 133blit 135

definicje form 155definicje nazw 139

definicje zmiennych pomocniczych 148dodanie tekstu do gry 143implementacja masek bitowych 146koniec gry 155maskowanie kolizji 150narzędzia mask 151niszczenie z wzajemnością 152obsługa naciśnięć klawiszy 139odbieranie danych od dwoacutech graczy 137początkowy plik 134poruszanie się 141

powiększanie 135przesunięcie obiektoacutew graczy 155przyjmowanie danych od obu graczy naraz 144rejestrowanie ciosoacutew 153silnik gry 29spritersquoyspritey 135tworzenie obiektoacutew graczy 143

wybieranie z zestawu 136zmiana rozmiaru 150

zmiana sposobu obsługi klawiszy 142zmienianie formy 141

block image transfer 135blokady 25blokowanie

treści 25używania elementoacutew formularza 34

blokowe przesyłanie obrazu 135

błąd składniowy 49Box 2D Web 300buforowanie 104

wyłączanie 105bug 289button 220

C

caching 104Can I use 300Chrome 297Chrono Trigger 43class 24closure 50CoffeeScript 66 298

dziedziczenie 70konwersja na JavaScript 66przykład kodu 67utrudnione znajdowanie błędoacutew 66

component-entity system 257compositing 135craftyjs 29

silnik gry 257Crockford Douglas 38cross-site scripting 173CSS 161

definiowanie formatu stron 39formatowanie 21funkcja przeciągania przedmiotoacutew 45nawigacja między stronami 39określanie koloroacutew 197reset 41ukrycie elementu canvas 32ukrywanie części strony 25wygląd w przeglądarkach 41

D

Daily JS 300dane

w formacie JSON 54debugowanie

buforowanego systemu 104definiowanie

schowka 46tytułu pliku HTML 67

deklaracjadisplay

block 28none 26

DOCTYPE 21html 67margin-left

50px 26stylu 26

Kup książkę Poleć książkę

Skorowidz 305

distance 191dodatek

Firebug 290DOM 161dostępność dokumentu dla czytnikoacutew 39Double Fine Adventure 38dragDropjs 46

modyfikacja 52

E

Easel 2988 296edytor map kafelkowych 114edytor tekstu 297

wyboacuter 20ekran

PlayScreen 117element

body 21gradient tła 41procedura obsługi kliknięcia 33

canvas 30 32 67 70 90 179 181blokowanie myszy 34dwuwymiarowy kontekst rysunkowy 71gamejs 134znajdowanie wpliku HTML 70

dino 54div 21 38

dodawanie pytań quizu 22head 21HTML 20input 24inventory-box 47label 24link 21meta 21minimap

arkusz styloacutew 182dodanie do pliku 182

myAudio 84playerBody

dodanie symbolu 172replay 103screenshot 195script 61 89 134title 21z identyfikatorem liczbowym 51

Emacs 297Enchant 29 296entitiesjs 120

funkcja gameOver 125ładowanie pliku 120

entity 120Etsy 299etykieta stanu 222

F

fikcja interaktywna 37dinozaura 61dodaniekonteneroacutew przedmiotoacutew 44schowka 44stron historii 38złożonych interakcji 50

dramatyczne zakończenie 61formatowanie wnętrza slajdoacutew 43kod stron 39nawigacja okruszkowa 59obsługa interakcji 46przechowywanie i pobieranie elementoacutew 48rozpoczęcie gry od nowa 43slajdy 38strona decyzyjna 41strona zakończenia gry 42

fikcja literackastyle okruszkoacutew 60

Filtrr 298finkcja

updatewywołanie dla graczy 146

Firebug 298Firefox 297folder

gotowe 17po_recepturze 17

for 94fora dla programistoacutew 293forEach 46

poroacutewnanie z pętlą for 46foreground 114format

tmx 114Base64 116

fps 211funkcja 285

add 49addChild 213addChildAt 108addCombatants 243addItem 56apply 204arctan 203areaMap 263attack 237beginPath 71blank 190 192budowanie tablicy 95call 46callDino 62cameratakePicture 194canPlayType 84

Kup książkę Poleć książkę

306 Skorowidz

funkcjacanvasdrawSliver 191canvasinit 190castRay

kolorowanie ścian 198castRays 186

przeniesienie 203changeForm 144

modyfikacja 153checkAnswers 33 34checkIfCorrect 34clearInventory 57clearStatus 226 228consolelog 253containsBlock 185clearStatus

wywołanie 226deleteItem 56dinodraw 205disable 34displayStatus 222

modyfikacja 230modyfikacja wyświetlania informacji 237przełączanie widoczości informacji 226

doJump 123doWalk 123draw 76 124 188 189

modyfikacja 83 190 204drawHoles 74drawItemsForSale 235drawSliver

kanwy 191drawSquare 93

modyfikacja 91 96drawTextTile 108drawWhiskers 76dropItemInto 62end 164 165eval 173

zastąpienie 173facing 224facingSquare 224fillRect 185findTextNode 56floor 185focusViewport 217forEach 47function Eval 173gameonload

modyfikacja 225 231gameslide 55gameOver 110 124

modyfikacja 129gameOver() 102 103gameTick 140

modyfikacja 152 155getElementById 90

getInventory 56getPlayerStatus 244getRandomPlacement 96 109graphicsbeginFill 91handleDragOver 48handleDragStart 47handleDrop 48handleEvent 142handleOnPress 98 109

aktualizacja bufora 105modyfikacja 100 103

hideInventory 226 228hitStrength 239 240hitTest 220init 89 118

deklaracje zmiennych 92dodawanie kwadratoacutew 102modyfikacja 122modyfikacja pętli 96obiektu minimap 181pętla for 108renderowanie kwadratoacutew 94renderowanie par 107wiązanie z oknem 89

jsApponload 118JSONparse 247JSONstringify 246keydown 171lineTo 76 189listen 253load 150loaded 118lost 240main 135 139 140

renderowanie spriteoacutew 137makeHoles 77markToDestroy 274Mathatan 203Mathfloor 91 266Mathround 173mieszająca 32move 184moveBy 217moveTo 76 189moveUnit 264onDestroyEvent 130onHit 272onload 118

dodanie własności coins i totalCoins 130onResetEvent 124

instrukcje dla gracza 129parseInt 247pause 241placeUnits 260

modyfikacja 267obsługa klikania i ruchu 264obsługa kolizji 271

Kup książkę Poleć książkę

Skorowidz 307

Playerzapisywanie infomacji o graczu 152

Player drawmodyfikacja 142

playerdisplayStatus 222playerdraw 183playermove 217

modyfikacja 222preload 118 150przeciągania i upuszczania 44push 49 96pushScene 230randomColor 91 93registerCallbacks 163registerHit 153 155remove 49render 195replay 103 110

odświeżenie strony 106reset 195responseend 253run 67Run 241samowykonująca 52scaleUp 136setBattle 238setInterval 269setMaps 213

dodanie warstwy kolizji 217setPlacementArray 95 109setPlayer 216 222setShopping 231setStage 213setText 56setTimeout 234setup 179

modyfikacja 190obiekt palette 196

shoppingFunds 232show 28showInventory 226 228

modyfikacja 230splice 49spritedraw 206standardowa 90 92start 179startGame 163statechange 118takePicture 195text 166tick 102 110toDataURL 195uncache 105unitsWithLimitedData 269update

modyfikacja 79 122obiektu Player 154

obsługa animacji podczas ruchu 120poruszanie graczem 183

updateEnemyPositions 269windowOnReady 118windowopen 196with_key 81 82won 240wywołanie 33zmiany rozmiaru ekranu 66zmienianie form 141

funkcjetrygonometryczne w grze 185

G

game jam 15gamecss 179 210gamejs 26 179 210

dodanie własności screen 58funkcja gameslide 55funkcja placeUnits 262kod kliencki SocketIO 256kod wiązania klawiszy 220kolizje 270nasłuchiwanie wiadomości place units 262obsługa ruchu gracza 214procedura obsługi kliknięć kafelkoacutew 263silnik gry

wykrywanie kolizji 150uruchamianie aparatu 194windowonload 211

GameQuery 296Gedit 297Gimp 299

magiczna roacuteżdżka 150Git 29 252GitHub 29 253 282

wspoacutełpraca 292globalna przestrzeń nazw 118gniazda sieciowe 255gra

FPS 177dodawanie kamery 192dodawanie postaci gracza 182dodawanie przyjacioacuteł i wrogoacutew 200imitacja troacutejwymiarowości 190kierunek patrzenia 185konfiguracja raycastera 186ładowanie dinozaura 200podstawowy plik HTML 178poruszanie postacią 184raycasting widoku z goacutery 186rejestrowanie danych wejściowych 183rysowanie koloroacutew i odcieni 198rzucanie promieni 187

Kup książkę Poleć książkę

308 Skorowidz

silnik gry 29style elementoacutew aparatu fotograficznego 193tworzenie mapy dwuwymiarowej 179uatrakcyjnianie świata 196umieszczanie gracza na mapie 183włączenie sepii 206zasoby 299

platformowa 113automatyczne resetowanie 124budowa mapy kolizji 121chodzenie i skakanie 121definicja wygranej 130dodanie konteneroacutew na wiadomości

i instrukcje 129dodawanie postaci 119dodawanie przedmiotoacutew do zbierania 125dodawanie ziemi 121edycja mapy 115ekran tytułowy 123gameOver 129informacje 129inicjowanie aplikacji 118jednostka EnemyEntity 127obsługa ruchu gracza 122obsługa stanu MENU 124przegrywanie i wygrywanie 129przycisk dodawania obiektu 119resetowanie monet 130silnik gry 117tworzenie mapy kafelkowej 114uruchamianie 116wiązanie klawiszy ruchu 122wrogowie 126youWin 130zakończenie gry 125załadowanie zasoboacutew 118zapis danych mapy 116zasoby 299zwiększanie mocy postaci 128

ROGrysowanie kota 232

RPG 209atakowanie 240atakowanie i przechodzenie poziomoacutew 237budowa sceny 244dodawanie gracza 214dodawanie gracza i wroga 242dodawanie warstwy kolizji 217dodawanie włoacuteczęgi 235działania wojenne 240ekran stanu 220etykieta na status gracza 238funkcja obsługi danych wejściowych 222interakcja z postaciami 223magazyn lokalny 246moacutewiący kot 228

obsługa początku bitwy 243odczytywanie danych z magazynu

lokalnego 246odejmowanie punktoacutew zdrowia 239określanie spritersquoa przed graczem 224opuszczanie sceny bitwy 244otwieranie sklepu 230pętla bitwy 243plik indexhtml 210poruszanie gracza 217procedura obsługi zdarzeń sklepu 233przeglądarka Chrome 219przegranie bitwy 239przygotowanie bitwy 238przygotowywanie danych

do wyświetlania 221rozmawianie z postaciami z gry 224rysowanie produktoacutew w sklepie 232skroacutety atrybutoacutew 222spritersquoy przedmiotoacutew 226stan gracza 221turowa 210tworzenie interfejsu bitwy 235tworzenie mapy 211tworzenie sklepu 228ukrywanie etykiety 222uruchamianie sklepu 231usunięcie zawartości schowka 229widoczność informacji o stanie gracza 226worzenie schowka 226wygrana w bitwie 239wykrywanie kolizji 219wyświetlanie danych 221wyświetlanie i ukrywanie schowka 227wyświetlanie opcji walki 242wywołania funkcji i przypisania własności

w sklepie 235zakup produktu 234zapisywanie 245zasoby 300

RTS 249dodawanie spritersquooacutew 258informacja o zmianach pozycji 268kolizje dla destrukcji i sprawdzenia

przeciwnika 270obsługa kliknięć kafelkoacutew 263plik indexhtml 255poruszanie jednostkami 263procedura obsługi połączenia 266procedura obsługi wiadomości initialize

player 273procedura obsługi wiadomości place units 273rysowanie jednostek 259sterowanie gracza 265tworzenie mapy izometrycznej 257ustawienie kafelkoacutew 258

Kup książkę Poleć książkę

Skorowidz 309

warunek pierwszego kliknięcia 268widoczność 265wysyłanie jednostek miejsc do klienta 259

typu 38grupa

battle 238shop 231

guard 82

H

halfAngularWidth 206Harvest Moon 38hipertekst 20hitbox 150HTML 20

otwieranie pliku w przeglądarce 21struktura dokumentu 20

HTML5 Audio 301HTML5 Game Development 301HTML5 Rocks 301httpserverjs 253Hypertext Markup Language 20

I

id 24identyfikator 24

impress 39player_inventory 45

if else 54importowanie

plikoacutewna stronę 28

zestawu kafelkoacutew 114Impress 298impressjs 29 38

okruszki 59impreza 65

bicie kretoacutew 80dynamiczne pokazywanie kreta 79rysowanie dziur 72rysowanie kreta 74rysowanie na kanwie 70rysowanie tła 71skrypt 29sprawdzenie trafienia 82umieszczanie kretoacutew w dziurach 77ustawienie stanu aktywności dziur 80zapisywanie wyniku 81

inicjowanie obiektu inwentarza 49initialize player 269Inkscape 299instrukcja

bindthis 118consolelog 27

consolelog(moacutejObiekt) 290consolelog(toCzegoNieRozumiem) 73gameconstructor 70thismessage 232thisnazwaWłasności 74warunkowa 48

instrukcje 283warunkowe 286

interakcje z obiektami 50interfejs

książka 38programistyczny 282

interpreter 284 290komentarze 285

interpretery 66

J

JavaScriptbrenchmarking 104definiowanie własności obiektoacutew 98dodawanie plikoacutew 30dołączanie plikoacutew do systemu 28funkcja 285głoacutewne typy API 282gra platformowa 116instrukcje 283instrukcje warunkowe 286interpreter 253język przeglądarkowy 254komentarze 287konwersja z CoffeeScript 68lista numeroacutew klawiszy 169ładowanie kodu 26ładowanie skryptu 89łańcuchy 284metody API 49nawiasy 49notacjaWielbłądzia 283obiekt 285ogoacutelna budowa API 283określanie dostępności zmiennych 69określanie koloroacutew 197operatory 172opisowe nazwy zmiennych i funkcji 93pętle 286przecinki 117przykładowa gra 68tablica 284unobtrusive 89wartość zwrotna 49wczytywanie plikoacutew 39wzorce 89zmienna 283

Jaws 29 296jednostka gracza 120

Kup książkę Poleć książkę

310 Skorowidz

jQuery 298jquerygamequeryjs 29jqueryjs 29js2coffeeorg 66jsfiddlenet 293JSLint 292jsperfcom 104

K

kafelekkolizji 121solid 121

kanały IRC 293kanwa 160

z dwuwymiarowym kontekstem 160 161z troacutejwymiarowym kontekstem 160 161

katalog start 17klasa 24

Bitmap 111BitmapAnimation 111correct 32 33empty 46enemy 166event-text 51inventory-box 46itemable 45item-container 45playerMissiles 171question 24slide 39 41slide-text 42SpriteSheets 111step 39

kodbłędy programistyczne 289elementy ułatwiające zrozumienie 93oznaczenie 16testowanie 291

komentarz 285 287komponent

DOM 258grass 259

komunikaty diagnostyczne 290konsola 290konstruktor 138

Enemy 164obiektu 69Player 141

height 167width 167z identyfikatorem formy 156

kontekst renderowania kanwy 124kontekst troacutejwymiarowy 71kontrola jakości 289konwencje typograficzne 16

konwersjakąta na stopnie 205

kształt 108

L

Legend of Zelda 88licencjonowanie oprogramowania 31liczby 146 284

binarne 147dziesiętne 147

listy mailingowe 292literał

gamekeys 80local storage 245losowanie koloroacutew 91Lufia 2 88

Ł

ładowaniezewnętrznego pliku JavaScript 26

ładowanie obrazu ekranu jako zasobu 124łańcuchy 284

wywołań 49

M

magazyn lokalnyrelacyjny 247

Magic wand 150maincss 39

przeciąganie przedmiotoacutew 45ukrywanie treści strony 26

mainjsdodanie butoacutew do puli jednostek 128dodanie monet do puli jednostek 125dodanie wroga do puli jednostek 126dodawanie modułu czcionek 141

Maniac Mansion 38mapjs 211mapa 211maper kodu 66maski bitowe 146

obsługa zdarzeń 149maszyna stanoacutew 244mechanizm

broadcast 267Melon 297melonjs 29

silnik gry 117menedżer pakietoacutew

nmp 252menedżery pakietoacutew 252message 54

Kup książkę Poleć książkę

Skorowidz 311

metodaadd 49addChild() 90addEventListener 46addGroup 165addItem 57addSprite 165arc 71attachEvent 46beginFill() 91beginStroke() 91bitowa 147contextfillText 74contextfont 74currentSlide 56deleteItem 57draw 71

bez skalowania 150modyfikacja 78uproszczenie 72

Draww pętli 67

drawHoles 73drawSquare() 90dropItemInto 54fill 71fillRect 71fillStyle 71gamebopwith_key 83gamedrawBackground 72gamescreendraw 55gameslideSetText 54gameupdate 81get 49 54graphicssetStrokeStyle() 90item 47items 54łączenie wywołań w łańcuchy 165Objectcreate 69 70prywatna 56publiczna 49querySelectorAll 46rect() 91remove 49rysowanie figur 72stageupdate() 90stroke 76update

bitowa 148w pętli 67

Minecraft 38Modernizr 298modularyzacja 50module pattern 50Mozilla Developer Network 282Myst 207

N

nagłoacutewekh1 21

narzędziaprzydatne podczas tworzenia gier 298

Node 298node package manager 252notacjaWielbłądzia 283Notepad++ 297NPM 298

O

obiekt 285bat 54battlemenu 238BootsEntity 128bop 81buforowanie 104camera 194canvas

definiowanie 191modyfikowanie 197

CoinEntity 126Crafty 258dino 200 205

sprite jaws 205eksperymentowanie w konsoli 181Enemy 166EnemyEntity 126

definiowanie 127forms 142game 52 67

wymiary spritea 213Game 66 67 211gamehole 74Graphics 92greeter 225Group 213hole

dodatkowy kod rysowania 77imgSize 137inventory 49inventoryObject 48kanwy 191map 213

dodanie danych kolizji 217mapujacy metody publiczne na prywatne 54minima

funkcja draw 181minimap 181

funkcja draw 204mole 75NodeList 46npc 225

Kup książkę Poleć książkę

312 Skorowidz

obiektopis przeglądarek 70palette 196player 183 216

atakowanie i przechodzenie poziomoacutew 237Player 137

atrybut mask 148funkcja update 144rejestr naciśnięć klawiszy 144rejestrowanie danych wejściowych 145

PlayerEntitydodawanie 121

playerInventory 56potomny

tworzenie 69raycaster 186

modyfikacja 190modyfikowanie 201

rect 137reprezentujący kreta 75Stage 90surface 137Ticker 102tile 98tileClicked 98TitleScreen 123tworzenie

konwencje 138window 89

object 54obsługa

padoacutew do gier 220raycastingu 178zdarzeń klawiatury i myszy 66

obszar widoku 219odblokowanie pytań 28odtwarzanie dźwiękoacutew 83

w przeglądarkach 84okruszki 59

implementacja 59Open Game Art 299open source 282operacje na bitach 147operatory bitowe 147oznaczanie poprawnych odpowiedzi

tworzenie stylu 32

P

pakiet npm 252 255parallax scrolling 131parametr 285

alignment 262context 124dt 79formIndex 152

itemNode 54message 56slideId 56source-overlay 105target 54

perspektywa izometryczna 178pętla 286

for 233w stylu funkcyjnym 46w stylu proceduralnym 46

pętle 94Pickle 299Piętnastka 88Pixel Joint 299playground 162pliki

indexhtml 17źroacutedłowe 17

pobieranie danych od graczy 144pobieranie losowego elementu 97pola kolizyjne 150polecenie

node 253poradniki 299procedura

dragenter 48dragleave 48enterframe 234onPress 108

procedura nasłuchowa dla przycisku 221programowanie

niskopoziomowe 88wysokopoziomowe 88

programowanie funkcyjne 47programy działające po stronie serwera 250projektowanie gier

kierunek badań 279prototyp obiektu 69przechowywanie danych 284przeglądarki 297

bufory 104przeniesienie

fokusu 24przywracanie do widoku 26punkty wstrzymania 291puzzle 87

aktualizacja bufora 105buforowanie i wydajność 104dopasowywanie i usuwanie par 97dopasowywanie par zamiast duplikatoacutew 106inicjowanie bufora 104logika wygranej i przegranej 103Memory 88 99obsługa

kliknięć 97przechowywanie czasu gry 100

Kup książkę Poleć książkę

Skorowidz 313

skrypt 29tworzenie kwadratoacutew 92tworzenie par 94ukrycie koloru kwadratoacutew 99ukrywanie i przekręcanie obrazkoacutew 99wstępny plik HTML 88wygrywanie i przegrywanie 100wyłączanie buforowania 105

Q

quiz 19dodawanie pytań 22lista zakupoacutew 28oznaczanie poprawnych odpowiedzi 32plik indexhtml 20przywracanie pytań do widoku 26przywroacutecenie pytań do widoku 31reagowanie na kliknięcia 32sprawdzanie odpowiedzi 24sprawdzenie odpowiedzi 33styl poprawnych odpowiedzi 32ukrywanie i pokazywanie 25ukrywanie pytań 27wynik poroacutewnania odpowiedzi 34wyświetlenie

pierwszego pytania 28zablokowane pytania 25zbioacuter pytań 20

QUnit 291

R

Raptorize 298ray casting 177raycasting 178

imitacja troacutejwymiarowości 190widoku z goacutery 186

receptury 17refactoring 73refaktoryzacja 73

kodu 137renderowanie 160

grafiki 88koloroacutew

śroacutedliniowo 106kontrolowanie 219kwadratoacutew 94na kanwie 160technologie 161

przeglądarkowe 160większej liczby obiektoacutew 92

requestAnimationFramenormalizacja 66

reset CSS 41resourcesjs 117

dodanie spritea monet 125dodanie wroga 126dodanie zasobu boots 128dodawanie gracza 119dodawanie postaci gry 120

RGB 33rootScene 213Ruby on Rails 66rysowanie

dziur 72funkcje bibliotek 76kształtoacutew 90na elemencie canvas 70na kanwie 70 88na ścieżce 71sumy trafień 83tła 71wykorzystanie obiektoacutew graficznych 76wyniku 81

rzutowanie izometryczne 178

S

scenabattleScene 236 245

schowekzapełnianie 49

screen 58screenjs

dodanie obiektu PlayScreen 117wiązanie klawiszy ruchu 121

screensjs 117ekran tytułowy 123instrukcje dla gracza 129usunięcie starych wiadomości 129

selektorbody 41

serverjsobsługa połączenia 266określenie położenia jednostek 260

serwer 250aktualizowanie zmian 269automatyczne przyjmowanie zmian 260kod serwerowy 251 254komputer użytkownika 251protokoacuteł komunikacyjny 250SocketIO 256zapisywanie zmian 259

sessionStorage 247shade 199Shadowgate 38sikniki gier 29silnik

wykrywanie kolizji 150silnik gry 296

pojęcia i terminy 228

Kup książkę Poleć książkę

314 Skorowidz

silniki gieruruchamianie 30

składanie 135skrypt

yabblejs 134słowo kluczowe

super 67this 73var 118 283

Socketio 298SocketIO

procedura nasłuchująca 262sprawdzenie

dopasowania kwadratoacutew 99sprite 76Sprite Database 299spritesheet 114stage 213statusLabel 222Stratego 250strażnik 82struktura DOM 160

obiekty game i stage 213strzelanka 159

dodaniegracza do planszy 167nowej warstwy 164wrogoacutew 163

dynamiczne dodawanie wrogoacutew 165formatowanie pociskoacutew 172kod sterowania pojazdem 168kolizje z pociskami

udoskonalenie obsługi 173wykrywanie 170

kolizje z wrogami 169obsługa kolizji 169początkowy kod HTML 160podstawowe elementy gry 162prędkość pocisku 170przeglądanie funkcji 174silnik gry 29strzelanie 170style statku kosmicznego 168style wrogoacutew 166tworzenie pociskoacutew 171tworzenie pojazdu 167uzupełnianie mocy 172warstwa pocisku 170zasoby 299zmienne statku kosmicznego 167

subject 54Sublime Text 297Surface 216SVG 161system kontroli wersji 252

Ś

ścieżka 21

T

tablica 284backgroundSlivers 203do przechowywania slajdoacutew 52enemyUnits 268flashcards 107foregroundSlivers 203gameholes 77gameitems

szczegoacuteły przedmiotoacutew 230indeksy 284jednowymiarowa 108map 181maskCache 151

budowa 151numberOfTiles 96placementArray 94spriteRoles 225squares

dodawanie kwadratoacutew 102stepsTaken 56surfaceCache 137textiles 106units 268visibleItems 228walls 197yLocations 262

technikaparallax scrolling 178ray tracing 178rzutowanie izometryczne 178

testplayground 31kodu 291

niskopoziomowe 291wysokopoziomowe 291

wydajności 292threejs 301TIGSource 301Tiled 114 298

dodawanie postaci 119tworzenie

mapy kafelkowej 114nowego poziomu 115pozycji startowej 119

warstwaboots 128coin 125enemy 126kaflekowa 121

tileset 114

Kup książkę Poleć książkę

Skorowidz 315

tłumaczenie strony na wybrany język 39trueSprite 265tryb pełnoekranowy przeglądarki

ustawianie 219twierdzenie Pitagorasa 199tworzenie

dokumentu HTML 21grafiki 299obiektoacutew potomnych 69obiektu z szablonu 69stron internetowych 89

U

ukrycie pytań 28undefined 49unit 265unitClicked 264usługi sieciowe 250ustawienie

tła pod tekstem 108ustawienie stanu aktywności 80

V

viewport 120 219Vim 297

W

warstwaenemies 164

dodawanie spriteoacutew 165player

dodawanie spritersquooacutew 167pocisku 170

warstwa collision 121wartość

adjustedDistance 191bias 258brightness 199totalCoins 130

WebSocket 255wiązanie klawiszy 80wiązanie przycisku

z funkcją 234wiązanie zdarzeń myszy 71wiersze kodu 283własność

active 80alive 272collisionData 220color 272constructor 69dinoshow 203direction 216

effects 54frame 216gamethings 53hiding 272isMoving 217itemSelected 232nadpisywanie 98name 54node 164opacity 41prototype 69screen 58shades 197spriteOffset 216startingX 216startingY 216type 272walk 216

wspoacutełpraca 292wydajność aplikacji na platformie 104wykrywanie klawiszy 81wypełnianie tła 109wyszukiwanie

grafiki 299wyświetlanie błędoacutew w konsoli 39wywołanie

epreventDefault() 48

X

XSS 173

Y

Yabble 298yabblejs 29YAGNI 89

Z

zamknięcie 50zapisywanie danych

po stronie klienta 247zasoby 295

książki 300portale internetowe 300

zdarzenieenter 234onload

wiązanie 89zmiana

łącza do slajdoacutew 51sposobu odnoszenia do elementoacutew 51

zmiana kodu podczas pracy 269zmienianie stron 41

Kup książkę Poleć książkę

316 Skorowidz

zmienna 283activeGame 155adjustedAngle 206angle 185angleBetweenRays 186angleInDegrees 205battleover 239color 96columns 93controllable 268counter 58currentMoleTime 79definiowanie 93definiowanie jako niezdefiniowana 98direction 185distance 188draggingObject 47dX 188dY 188enemyHeight 164enemySpawnRate 164 165enemyWidth 164expMax 237filtered 195foregroundData 212game 68Game 67 68 69highlight

usunięcie 100hit 154initialWallColors 197items 57mapData 212max_rgb_color_value 92maxDistance 203movementSpeed 185moveStep 185

numberOfTiles 95 96pairIndex 108parallax 162percentageDistance 203placement 96PlayerEntity 120potentialWidth 205rayNumber 187rows 93speed 164 185squareOutline 92squarePadding 93squareSide 92textTiles 107tileClicked 97total 81turnSpeed 185twoPi 188unitInfo 268units 266ustawienie na obiekt 98value 164wallType 198wallX 188wallY 188xHit 188yHit 188

zmienneglobalne 283

zmniejszenie szybkości ruchu jednostek 264znacznik 20

lthtmlgt 21HTML 20viewport 219

znacznikiprzeglądarki Safari 219

Kup książkę Poleć książkę