Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00465 007088 14657738 na godz. na dobę w sumie
Wprowadzenie do HTML5. Nauka HTML5 i JavaScriptu na przykładzie gier - książka
Wprowadzenie do HTML5. Nauka HTML5 i JavaScriptu na przykładzie gier - książka
Autor: Liczba stron: 312
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-4107-9 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> gry >> programowanie gier
Porównaj ceny (książka, ebook, audiobook).

Skuteczny sposób na HTML5!

Standard HTML5 umożliwia tworzenie nie tylko dynamicznych, multimedialnych stron WWW, ale także zaawansowanych aplikacji internetowych i gier. Do niedawna, żeby to osiągnąć, konieczna była instalacja dodatkowych rozszerzeń. Teraz można to zrealizować, korzystając tylko i wyłącznie z HTML-a, JavaScriptu i kaskadowych arkuszy stylów CSS... Jeśli chcesz szybko i przyjemnie poznać podstawowe założenia HTML5 oraz natychmiast wykorzystać je w praktyce, sięgnij po tę książkę. W charakterze materiału do analizy wykorzystuje ona popularne gry, takie jak 'Wisielec', kości czy blackjack.

'Wprowadzenie do HTML5' pokaże Ci nowe, ekscytujące możliwości standardu HTML5 oraz sposoby integrowania HTML-a z JavaScriptem i CSS. Dzięki podanym przykładom zrozumiesz, jak te elementy wzajemnie się uzupełniają. Każdy rozdział jest poświęcony innej aplikacji i ma podobną strukturę. Na początku znajdują się wymagania, a następnie funkcje HTML5, CSS i JavaScriptu niezbędne do konkretnej implementacji. W dalszej części szczegółowo omawiana jest sama implementacja. Jeśli masz nieco większe doświadczenie w tworzeniu stron WWW, ta książka przybliży Ci sposoby wykorzystania JavaScriptu w połączeniu z dokumentami HTML oraz zapozna Cię z nowościami w HTML5, takimi jak obsługa zdarzeń, walidacja formularzy, wykorzystanie lokalnego magazynu danych czy elementy canvas, video i audio. Przykłady są wystarczająco proste, aby ich zrozumienie nie przysparzało problemów, ale na tyle inspirujące, by dać możliwość stworzenia ciekawych interaktywnych aplikacji WWW.

Połącz przyjemne z pożytecznym:

Nauka jeszcze nigdy nie była tak wciągająca!

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

Darmowy fragment publikacji:

Tytuł oryginału: The Essential Guide to HTML5: Using Games to learn HTML5 and JavaScript Tłumaczenie: Marek Pętlicki ISBN: 978-83-246-4107-9 Original edition copyright 2010 by Jeanine Meyer. All rights reserved. Polish edition copyright 2012 by HELION SA. All rights reserved. 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. Wydawnictwo HELION dołożyło wszelkich starań, by zawarte w tej książce informacje były kompletne i 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 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) Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/whtmjs.zip Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/whtmjs Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis treści O autorce .................................................................................................................................. 9 Redaktor techniczny .............................................................................................................. 10 Wstęp ...................................................................................................................................... 11 Rozdziaï 1. Podstawy ..................................................................................................... 15 Wprowadzenie .........................................................................................................................................................15 Wymagania ................................................................................................................................................................16 Funkcje HTML5, CSS i JavaScriptu .....................................................................................................................18 Podstawowe struktury i znaczniki HTML .................................................................................................18 Programowanie w JavaScripcie ..................................................................................................................24 Zbuduj aplikację i weź ją dla siebie ...................................................................................................................26 Testowanie aplikacji i wrzucanie jej na serwer .............................................................................................32 Podsumowanie ........................................................................................................................................................32 Rozdziaï 2. Gra w kości ................................................................................................... 35 Wprowadzenie .........................................................................................................................................................35 Wymagania ................................................................................................................................................................38 Funkcje HTML5, CSS i JavaScriptu .....................................................................................................................38 Przetwarzanie liczb pseudolosowych i wyrażenia matematyczne .................................................38 Zmienne i instrukcje przypisania ................................................................................................................40 Funkcje użytkownika ......................................................................................................................................41 Kontrola logiki kodu: instrukcje if i switch ...............................................................................................42 Rysowanie na elemencie canvas .................................................................................................................45 Zbuduj własną aplikację .......................................................................................................................................53 Rzut pojedynczą kością ..................................................................................................................................55 Rzut dwiema kośćmi .......................................................................................................................................60 Kompletna gra w kości ...................................................................................................................................65 Testowanie aplikacji i wrzucenie jej na serwer .............................................................................................72 Podsumowanie ........................................................................................................................................................73 SPIS TREŚCI Rozdziaï 3. Odbijająca się piłka ..................................................................................... 75 Wprowadzenie .........................................................................................................................................................75 Wymagania ................................................................................................................................................................78 Funkcje HTML5, CSS i JavaScriptu .....................................................................................................................78 Rysowanie piłki, ilustracji i gradientów ....................................................................................................79 Zbuduj aplikację i weź ją dla siebie ...................................................................................................................90 Testowanie aplikacji i wrzucenie jej na serwer .......................................................................................... 100 Podsumowanie ..................................................................................................................................................... 100 Rozdziaï 4. Armata i proca ........................................................................................... 103 Wprowadzenie ...................................................................................................................................................... 103 Wymagania ............................................................................................................................................................. 106 Funkcje HTML5, CSS i JavaScriptu .................................................................................................................. 107 Tablice i obiekty definiowane przez programistę .............................................................................. 107 Obroty i przesunięcia w operacjach rysowania .................................................................................. 109 Rysowanie odcinków ................................................................................................................................... 113 Zdarzenia myszy: napinanie procy .......................................................................................................... 114 Modyfikowanie listy wyświetlanych elementów z użyciem metody splice() ........................... 116 Odległość między punktami ..................................................................................................................... 117 Zbuduj aplikację i weź ją dla siebie ................................................................................................................ 117 Strzał z armaty: ustawianie kąta i prędkości ........................................................................................ 122 Proca: definiowanie parametrów lotu pocisku za pomocą myszy ............................................... 128 Testowanie aplikacji i wrzucenie jej na serwer .......................................................................................... 136 Podsumowanie ..................................................................................................................................................... 137 Rozdziaï 5. Pamięć ........................................................................................................ 139 Wprowadzenie ...................................................................................................................................................... 139 Podstawowe wymagania .................................................................................................................................. 143 Funkcje HTML5, CSS i JavaScriptu .................................................................................................................. 144 Reprezentowanie kart ................................................................................................................................. 144 Wykorzystanie obiektu Date do obliczana czasu ............................................................................... 146 Obsługa pauzy ................................................................................................................................................ 146 Rysowanie tekstu .......................................................................................................................................... 147 Rysowanie wielokątów ................................................................................................................................ 149 Mieszanie kart ................................................................................................................................................. 150 Kliknięcia w karty ........................................................................................................................................... 151 Zapobieganie oszustwom .......................................................................................................................... 152 Zbuduj własną aplikację .................................................................................................................................... 153 Testowanie aplikacji i wrzucenie jej na serwer .......................................................................................... 166 Podsumowanie ..................................................................................................................................................... 166 6 SPIS TREŚCI Rozdziaï 6. Quiz ............................................................................................................ 167 Wprowadzenie ...................................................................................................................................................... 167 Podstawowe wymagania .................................................................................................................................. 172 Funkcje HTML5, CSS i JavaScriptu .................................................................................................................. 172 Zapisywanie informacji w tablicach i ich odczytywanie .................................................................. 172 Tworzenie elementów HTML w czasie działania programu ............................................................... 175 Zmiana stylu CSS elementów za pomocą kodu JavaScript ............................................................ 177 Używanie formularzy i ich pól do komunikacji z graczem .............................................................. 179 Wyświetlanie wideo ..................................................................................................................................... 180 Zbuduj własną aplikację .................................................................................................................................... 182 Testowanie aplikacji i wrzucenie jej na serwer .......................................................................................... 193 Podsumowanie ..................................................................................................................................................... 194 Rozdziaï 7. Labirynt ...................................................................................................... 195 Wprowadzenie ...................................................................................................................................................... 195 Wymagania podstawowe .................................................................................................................................. 201 Funkcje HTML5, CSS i JavaScriptu .................................................................................................................. 201 Reprezentacja ścian i pionka ..................................................................................................................... 201 Wykorzystanie zdarzeń myszy do budowania ścian ......................................................................... 202 Obsługa klawiszy strzałek ........................................................................................................................... 203 Detekcja kolizji: pionek i ściany ................................................................................................................ 204 Wykorzystanie lokalnego magazynu danych ...................................................................................... 207 Kodowanie danych do zapisu w magazynie lokalnym .................................................................... 212 Przyciski typu radio ....................................................................................................................................... 214 Zbuduj własną aplikację .................................................................................................................................... 214 Druga wersja aplikacji „Labirynt” ............................................................................................................. 224 Testowanie aplikacji i wrzucenie jej na serwer .......................................................................................... 231 Podsumowanie ..................................................................................................................................................... 231 Rozdziaï 8. Kamień, papier, nożyce ............................................................................ 233 Wprowadzenie ...................................................................................................................................................... 233 Podstawowe wymagania .................................................................................................................................. 236 Funkcje HTML5, CSS i JavaScriptu .................................................................................................................. 237 Tworzenie graficznych przycisków do interakcji z graczem ............................................................... 237 Generowanie ruchu komputera ............................................................................................................... 241 Zaczynamy ....................................................................................................................................................... 249 Zbuduj własną aplikację .................................................................................................................................... 250 Testowanie aplikacji i wrzucenie jej na serwer .......................................................................................... 257 Podsumowanie ..................................................................................................................................................... 257 7 SPIS TREŚCI Rozdziaï 9. Wisielec ...................................................................................................... 259 Wprowadzenie ...................................................................................................................................................... 259 Wymagania podstawowe .................................................................................................................................. 265 Funkcje HTML5, CSS i JavaScriptu .................................................................................................................. 265 Przechowywanie listy wyrazów w tablicy zdefiniowanej w zewnętrznym skrypcie ............. 266 Generowanie, pozycjonowanie elementów HTML, formatowanie elementów w postać przycisków i blokowanie przycisków ............................................................................... 266 Tworzenie rysunku na elemencie canvas ............................................................................................. 269 Śledzenie stanu gry i rozstrzygnięcie wygranej lub przegranej ................................................... 271 Sprawdzenie, czy gracz odgadł, i ustawienie textContent ............................................................. 272 Zbuduj własną aplikację .................................................................................................................................... 273 Testowanie aplikacji i wrzucenie jej na serwer .......................................................................................... 282 Podsumowanie ..................................................................................................................................................... 282 Rozdziaï 10. Blackjack ................................................................................................. 283 Wprowadzenie ...................................................................................................................................................... 283 Wymagania podstawowe .................................................................................................................................. 288 Funkcje HTML5, CSS i JavaScriptu .................................................................................................................. 289 Zbuduj własną aplikację .................................................................................................................................... 297 Testowanie aplikacji i wrzucenie jej na serwer .......................................................................................... 306 Podsumowanie ..................................................................................................................................................... 307 Skorowidz ............................................................................................................................. 308 8 Rozdziaï 5 Pamięć W tym rozdziale omówimy następujące zagadnienia: techniki programistyczne reprezentowania informacji; rysowanie wielokątów; Q Q wypisywanie tekstów na elemencie canvas; Q Q programowanie przerwy; Q obliczanie minionego czasu; Q metoda mieszania kart. Wprowadzenie Ten rozdział demonstruje dwie wersje gry karcianej znanej jako gra w pamięć (ang. memory game). Karty są układane na stole koszulką do góry, a gracz odkrywa dwie naraz (klikając je myszą), starając się dopasować pary. Program usuwa dopasowania ze stołu, ale jeśli karty nie są dopasowane, od- wraca je znów koszulkami do góry. Gdy gracz znajdzie wszystkie dopasowania, gra prezentuje wy- nik w postaci czasu trwania gry. Pierwsza wersja gry będzie na kartach rysować wielokąty, druga wykorzystuje zdjęcia. Między tymi wersjami znajdziesz też więcej różnic, które mają na celu zobrazowanie funkcji HTML5, ale zachę- cam do wyszukiwania nie tylko różnic, ale też jak największej liczby podobieństw tych aplikacji. Rysunek 5.1 prezentuje początkowy ekran pierwszej wersji aplikacji. Gdy gracz ukończy grę, for- mularz prezentujący liczbę par wyświetli dodatkowo czas gry. Rysunek 5.2 prezentuje efekt kliknięcia dwóch kart. Wielokąty na kartach nie pasują, więc po chwili przerwy program „odwraca” karty, wyświetlając ich koszulki. Gdy dwie karty pasują do siebie, aplikacja usuwa je ze stołu i modyfikuje w formularzu liczbę dopa- sowań (rysunek 5.3). ROZDZIAŁ 5. Rysunek 5.1. Ekran początkowy gry „Pamięć” Rysunek 5.2. Dwie karty odkryte, nie ma pary Rysunek 5.4 przedstawia wynik końcowy: w tym przypadku 6 dopasowań w czasie 28 sekund. W drugiej wersji gry fronty kart zamiast wielokątów wykorzystują zdjęcia osób. Mimo że wiele gier tego typu dopasowania ma zdefiniowane jako identyczne obrazy, to w tym przypadku traktujemy tę sytuację jako „2 kier pasuje do 2 karo” (czerwone kolory) w zwykłej talii kart. Innymi słowy: dopa- sowanie jest zdefiniowane jako dwa różne zdjęcia tej samej osoby. Takie założenie gry wymaga zdefiniowania specjalnej struktury danych, która określi dopasowania. Ta wersja gry dodatkowo demonstruje technikę wypisywania tekstu na elemencie canvas, co przedstawia rysunek 5.5. 140 PAMIĘĆ Rysunek 5.3. Aplikacja usunęła dwie dopasowane karty Rysunek 5.4. Pierwsza wersja gry: widok ekranu po ukończeniu Przykład sytuacji po kliknięciu dwóch kart prezentuje rysunek 5.6. Ponieważ odkryte karty zawierają zdjęcia dwóch różnych osób, po krótkiej przerwie, pozwalającej graczowi przyjrzeć się obrazom, gra odwraca karty i pozwala graczowi spróbować ponownie. Ry- sunek 5.7 przedstawia sytuację dopasowania: dwa różne zdjęcia tej samej osoby. 141 ROZDZIAŁ 5. Rysunek 5.5. Druga wersja gry „Pamięć”, ekran początkowy Rysunek 5.6. Dwie odkryte karty, brak dopasowania Dopasowane zdjęcia są usuwane ze stołu. Gdy zostaną usunięte wszystkie karty, na ekranie zostaje wyświetlony całkowity czas gry wraz z instrukcją, w jaki sposób rozpocząć grę od nowa, co przed- stawia rysunek 5.8. W tę grę można grać, wykorzystując zdjęcia dostępne wraz z kodem HTML na serwerze FTP. Dużo więcej frajdy sprawia jednak gra ze zdjęciami znanych sobie osób. Można zacząć od zestawu dwóch-trzech par zdjęć i stopniowo skompletować zdjęcia całej rodziny, klasy albo klubu. W pierw- szej wersji gry zamiast wielokątów można zaimplementować własne, bardziej efektowne kreacje. 142 PAMIĘĆ Rysunek 5.7. Udane dopasowanie: dwa różne zdjęcia tej samej osoby Rysunek 5.8. Ostatni ekran gry (druga wersja). Wszystkie zdjęcia zostały dopasowane, więc na stole nie ma już ani jednej karty Podstawowe wymagania Komputerowa wersja gry w karty wymaga reprezentowania koszulek (tylnej strony) kart, które są identyczne, oraz ich frontów. W naszych przykładach w tej drugiej roli zastosujemy wielokąty i zdjęcia. Aplikacja musi umieć stwierdzić, czy odkryte karty pasują do siebie i gdzie na stole znajdują się po- szczególne karty. Dodatkowo gracz potrzebuje informacji zwrotnych dotyczących tego, co się dzieje w grze. W rzeczywistej grze gracze odwracają po dwie karty i sprawdzają, czy znaleźli dopasowanie, co zajmuje chwilę. Jeśli dopasowania nie ma, karty są ponownie odwracane koszulką do góry. Program komputerowy musi wyświetlać fronty wybranych kart, a po odkryciu drugiej karty musi na chwilę zatrzymać działanie, aby gracz zobaczył, co zostało odkryte. Ta pauza jest przykładem dzia- łania podejmowanego przez komputer w celu zasymulowania sytuacji świata rzeczywistego, czyli 143 ROZDZIAŁ 5. w tym przypadku prawdziwej gry w karty. Aplikacja powinna również wyświetlić aktualną liczbę znalezionych par, a po zakończeniu gry ilość czasu, jaki upłynął od jej rozpoczęcia. Wersje aplikacji wykorzystujące wielokąty i zdjęcia różnią się nieco w zakresie sposobu prezentowania tych infor- macji graczowi. Oto podsumowanie funkcji, jakie muszą realizować te dwie gry: Q rysowanie koszulek kart; losowanie kolejności kart na stole w celu uniknięcia powtarzania się tego samego układu; Q Q wykrywanie kliknięcia w kartę i rozróżnianie między pierwszym a drugim kliknięciem; Q po rozpoznaniu kliknięcia wyświetlenie frontu właściwej karty przez narysowanie wielokąta (wersja pierwsza) lub wyświetlenie zdjęcia (wersja druga); Q usunięcie dopasowanych par; Q podejmowanie odpowiednich reakcji nawet w przypadku, gdy gracz wykonuje pozornie bezsensowne działania, jak dwukrotne kliknięcie tej samej karty lub pustego miejsca na stole, na którym wcześniej leżała karta. Funkcje HTML5, CSS i JavaScriptu Omówmy funkcje HTML5 i JavaScriptu specyficzne dla gier implementowanych w tym rozdziale. Ponownie naszą implementację oprzemy na wiedzy zdobytej do tej pory, dotyczącej ogólnej struktury dokumentów HTML, umiejętności rysowania na elemencie canvas czworokątów, obrazów i ścieżek złożonych z odcinków, wykorzystania formularzy i tablic. Nowościami w tym rozdziale będą: wykorzystanie zdarzenia zaplanowanego w czasie, użycie obiektu Date do obliczania czasu, jaki upłynął, wypisywanie tekstu na elemencie canvas oraz kilka użytecznych technik programowania, które przydadzą się też w innych aplikacjach. Podobnie jak w poprzednich rozdziałach, ten podrozdział omawia funkcje HTML oraz techniki pro- gramowania w ujęciu ogólnym. Kod przykładowych aplikacji znajduje się w podrozdziale „Zbuduj własną aplikację”. Jeśli chcesz, możesz przeskoczyć do tego podrozdziału i zobaczyć kod, ale sugeruję, żebyś wrócił w to miejsce, żeby zapoznać się z objaśnieniami technik użytych w kodzie. Reprezentowanie kart Każdy, kto trzymał w ręce prawdziwą kartę, wie jak ona wygląda. Z jednej strony znajduje się rysu- nek informujący o znaczeniu karty, a z drugiej wzór ozdobny (nazywany koszulką lub rewersem), który jest identyczny na wszystkich kartach z tej samej talii. Gdy rozłożymy karty na stole, wiemy doskonale, gdzie się znajdują, wiemy też, które karty są odwrócone frontem, a które koszulką do góry. Komputer musi te informacje zapisać w jakiejś strukturze (zakodować). Kodowanie informacji jest jednym z kluczowych elementów większości programów komputerowych, nie tylko gier. W tym rozdziale (i w dalszej części książki) opiszę sposoby realizacji tego zadania. Należy pamiętać, że nie istnieje jedno, idealne podejście do tego problemu. Różne strategie budowania aplikacji jednak często bazują na podobnych założeniach. 144 PAMIĘĆ Nasze podejście do zakodowania informacji o kartach opiera się na obiektach definiowanych przez programistę. Tworzenie takich obiektów w JavaScripcie wiąże się z pisaniem funkcji konstruktorów; w naszym przypadku będzie to funkcja Card(). Zaleta wykorzystania obiektów polega na tym, że w języku JavaScript możemy w prosty sposób wykorzystać notację z kropką, uzyskując dostęp do różnych elementów obiektu (informacji). W podobny sposób wykorzystywaliśmy obiekty w roz- dziale 4., przy okazji armaty i procy. Obiekt Card będzie wyposażony we właściwości przechowujące informacje o położeniu karty na stole (sx i sy) i jej wymiarach (swidth i sheight), funkcję rysującą koszulkę karty na elemencie canvas oraz informację o tym, w jaki sposób rysować front karty. W przypadku pierwszej wersji gry, w której rysujemy wielokąty, informacja o froncie karty zawiera liczbę odcinków do narysowania (kod implementujący rysowanie takiego wielokąta omawiamy w dalszej części). W przypadku drugiej wersji gry, w której rysujemy zdjęcia, wartością będzie refe- rencja img do obiektu Image definiującego obraz do wyświetlenia. Oprócz obiektu obrazu będzie- my przechowywać liczbę, która powiąże w parę różne obrazy. Do rysowania obrazu z pliku wyko- rzystamy standardową metodę drawImage(). Oczywiście, w komputerze karty nie istnieją jako fizyczne obiekty, z dwoma stronami. Aplikacja ry- suje na elemencie canvas tę stronę karty, która powinna być widoczna. Do rysowania koszulki służy funkcja flipback(). Usunięcie karty polega na narysowaniu w miejscu karty prostokąta w kolorze tła. Obie aplikacje wykorzystują funkcję pod nazwą makedeck(), która „przygotowuje talię”, czyli generuje odpowiednie obiekty klasy Card. W przypadku pierwszej wersji w obiekcie Card zapisujemy liczbę wierzchołków wielokąta. Na tym etapie aplikacja jednak niczego nie rysuje. Wersja druga gry dodatko- wo definiuje tablicę pod zmienną pairs, w której wymienione są nazwy plików fotografii. Wykorzy- stując tę tablicę, możesz podmienić zdjęcia fotografiami członków własnej rodziny lub przyjaciół. Wskazówka: Jeśli chcesz wykorzystać moje przykładowe pliki, wystarczy, że pobierzesz z serwe- ra FTP archiwa z przykładowymi kodami z tej książki. Jeśli zechcesz podmienić zdjęcia, musisz odpowiednio zmodyfikować kod aplikacji. W kodzie znajdują się informacje, w jaki sposób na- leży to zrobić. Funkcja makedeck() tworzy obiekty klasy Image i wykorzystuje tablicę pairs do ustawienia ich wła- ściwości src. Gdy kod tworzy obiekty klasy Card, ustawia ich atrybuty index, które definiują pary, to znaczy pasujące fotografie mają taką samą wartość index. Tak samo jak w wersji wykorzystującej wielokąty, aplikacja na etapie inicjalizacji nie rysuje niczego na elemencie canvas. Po narysowaniu karty wyglądają identycznie, ale powiązane z nimi informacje są zróżnicowane. Po zainicjalizowa- niu karty są ułożone zawsze w tej samej kolejności, mieszanie następuje później. Informacje o pozycji (właściwości sx i sy) są interpretowane w inny sposób w każdej z wersji aplikacji. W przypadku wersji wykorzystującej zdjęcia informacja odnosi się do lewego górnego wierzchołka karty. W przypadku wersji wykorzystującej wielokąty te współrzędne identyfikują środek wielokąta. Znając współrzędne środka, możemy jednak wyliczyć współrzędne wierzchoł- ka i odwrotnie. 145 ROZDZIAŁ 5. Wykorzystanie obiektu Date do obliczana czasu Musimy zmierzyć czas, jaki graczowi zajęło znalezienie wszystkich dopasowań. JavaScript udostęp- nia sposób mierzenia czasu. Kompletny kod znajdziesz w punkcie „Zbuduj własną aplikację”, a w tym miejscu przedstawię jedynie fragmenty prezentujące sposób mierzenia czasu między dwoma zdarze- niami w kodzie JavaScript. Wywołanie metody Date() generuje obiekt daty i czasu, np.: starttime = new Date(); starttime = Number(starttime.getTime()); Powyższy fragment kodu zapisuje w zmiennej starttime liczbę milisekund (tysięcznych sekundy), jakie upłynęły od początku 1970 roku (w tym miejscu nie ma znaczenia, dlaczego czas jest mierzo- ny od początku 1970 roku). Gdy nasze gry „Pamięć” stwierdzą, że gracz znalazł wszystkie dopasowania, kreator Date() jest wy- woływany ponownie: var now = new Date(); var nt = Number(now.getTime()); var seconds = Math.floor(.5 + (nt - starttime) / 1000); Oto analiza tego kodu: 1. Stworzenie nowego obiektu Date i przypisanie go zmiennej now. 2. Odczytanie czasu z obiektu now z użyciem metody getTime(). Wartość ta jest przekształcana na liczbę (funkcja Number()) i przypisywana zmiennej nt. To oznacza, że zmienna nt zawiera liczbę sekund, jakie upłynęły od początku 1970 roku do momentu wywołania metody Date(). Następnie program od tej wartości odejmuje zapisaną na początku gry zmienną starttime. 3. Dzielenie przez 1000 sprowadzi wartość do sekund. 4. Dodanie wartości .5 spowoduje, że funkcja Math.floor() właściwie zaokrągli wartość do pełnych sekund. Jeśli interesuje Cię większa dokładność pomiaru, możesz pominąć wyliczenie zaokrąglenia i doda- wanie wartości .5. Takiego kodu możesz użyć wtedy, gdy chcesz zmierzyć czas wykonania fragmentów programu. Obsługa pauzy Gdy gramy w tego typu grę, używając prawdziwych kart, nie odczekujemy świadomie przed od- wróceniem kart na drugą stronę. Ale, jak wspominałam wcześniej, implementacja komputerowa musi odczekać chwilę, żeby dać graczowi czas na obejrzenie obydwu odkrytych kart. Jak pamiętasz z rozdziałów 3. i 4. (animacja odbijającej się piłki oraz strzelanie z armaty i procy), do definiowania opóźnienia wykonania kodu w równych odstępach czasu wykorzystywaliśmy funkcję setInterval(). Do odczekania ustalonego czasu przed kontynuowaniem działania gry możemy wykorzystać inną funkcję o zbliżonym działaniu: setTimeout(). Pełny kod wykorzystujący tę funkcję znajdziesz 146 PAMIĘĆ w podrozdziale „Zbuduj własną aplikację”. Zobaczmy, w jaki sposób definiuje się tego typu zdarzenie czasowe i co się stanie, gdy czas oczekiwania upłynie. Funkcja setTimeout() ustawia pojedyncze zdarzenie czasowe, które jest wywoływane z ustalonym opóźnieniem. Funkcja choose(), wywoływana po tym, gdy gracz kliknie element canvas, sprawdza wartość zmiennej firstpick w celu określenia, czy kliknięta została pierwsza, czy druga karta z rzę- du. W każdym z tych przypadków program rysuje front karty w tym samym miejscu, w którym znajdował się rysunek koszulki karty. Jeśli kliknięcie było drugim z rzędu i karty pasują do siebie, kod ustawia wartość zmiennej matched na true (jeśli karty nie pasują, wartość ta ustawiana jest na false). Jeśli gra nie jest jeszcze skończona, wywoływany jest następujący kod: setTimeout(flipback, 1000); To spowoduje, że po upłynięciu jednej sekundy (1000 milisekund) zostanie wywołana funkcja flipback(). Funkcja flipback() wykorzystuje zmienną matched, która pozwala jej zdecydować, czy w miejscu odkrytych kart ma narysować ich koszulki (wartość false), czy usunąć karty ze stołu, rysując w ich miejscu kolor tła (wartość true). Funkcji setTimeout() można użyć do definiowania indywidualnych zdarzeń czasowych. Wystarczy określić odstęp czasu oraz funkcję, która ma być wywołana z takim opóźnieniem. Pamiętaj jedynie, że jednostką czasu jest milisekunda. Rysowanie tekstu Standard HTML5 definiuje mechanizm rysowania tekstów na elemencie canvas. Dzięki temu mamy dostęp do bardziej dynamicznego, elastycznego sposobu wyświetlania tekstów niż dawniej. Łącząc tekst z prostokątami, liniami, łukami i obrazami, możemy uzyskać ciekawe efekty. W tym punkcie opiszę ogólne zasady posługiwania się tekstem w połączeniu z elementem canvas, przedstawię też prosty przykład do samodzielnego wypróbowania. Jeśli chcesz, możesz pominąć ten fragment i przejść do podrozdziału „Zbuduj własną aplikację”, w którym omawiam kod aplikacji prezentowanej na rysun- kach od 5.5 do 5.8, czyli gry „Pamięć” z wykorzystaniem fotografii. W celu umieszczenia tekstu na elemencie canvas napiszemy kod, który ustawia krój czcionki, a na- stępnie wywołuje metodę fillText(), która rysuje tekst na elemencie canvas w ustalonym poło- żeniu x, y. Poniższy przykład tworzy kilka napisów z wykorzystaniem różnych krojów czcionek (ko- niecznie przeczytaj uwagę w dalszej części tekstu). html head title Czcionki /title script type= text/javascript var ctx; function init(){ ctx = document.getElementById( canvas ).getContext( 2d ); ctx.font= 15px Lucida Handwriting ; ctx.fillText( this is Lucida Handwriting , 10, 20); ctx.font= italic 30px HarlemNights ; ctx.fillText( italic HarlemNights ,40,80); ctx.font= bold 40px HarlemNights ctx.fillText( HarlemNights ,100,200); 147 ROZDZIAŁ 5. ctx.font= 30px Accent ; ctx.fillText( Accent , 200,300); } /script /head body onLoad= init(); canvas id= canvas width= 900 height= 400 Twoja przeglÈdarka nie obsïuguje elementu canvas standardu HTML5. /canvas /body /html Ten dokument uruchomiony w przeglądarce WWW daje efekt przedstawiony na rysunku 5.9. Rysunek 5.9. Tekst z użyciem różnych czcionek wyświetlony na elemencie canvas z użyciem metod font() i fillText() Ostrzeżenie: Pamiętaj, aby stosować czcionki dostępne w komputerach graczy. W rozdziale 10. dowiesz się, w jaki sposób wykorzystywać mechanizm standardu CSS pod nazwą font-family, który udostępnia systematyczny sposób definiowania preferowanych czcionek oraz czcionek zastępczych, jeśli podstawowa czcionka nie zostanie znaleziona. Należy pamiętać, że mimo tego, iż tekst na elemencie canvas wygląda zupełnie „normalnie”, to należy go postrzegać tak jak druk na papierze albo obraz, a nie tekst, jaki znamy ze stron WWW, który można zaznaczać, lub pole tekstowe, którego wartość można modyfikować. Oznacza to, że w celu zmodyfikowania tekstu musimy napisać kod JavaScript, który wymaże starą zawartość. Wy- korzystujemy do tego atrybut fillStyle, który ustawiamy na wartość zmiennej tablecolor, a na- stępnie wywołujemy metodę fillRect() z odpowiednimi współrzędnymi. 148 PAMIĘĆ Po narysowaniu ścieżki tekstu musimy wypełnić ją kolorem. Właściwość fillStyle musimy więc ustawić na inną wartość niż kolor tła (tablecolor). Możemy na przykład wykorzystać ten sam kolor, którego użyliśmy do namalowania koszulek kart. Krój czcionki ustawiamy w ramach inicjalizacji gry: ctx.font = bold 20pt sans-serif ; Użycie czcionki sans-serif ma sens, ponieważ krój ten należy do standardowych krojów interne- towych, dostępnych na wszystkich komputerach. Oto kod wypisujący liczbę dopasowań w danym momencie gry: ctx.fillStyle = tablecolor; ctx.fillRect(10, 340, 900, 100); ctx.fillStyle=backcolor; ctx.fillText( Liczba par: + String(count), 10, 360); Pierwsze dwie instrukcje wymazują aktualny wynik, a dwie kolejne wypisują aktualny. Wyrażenie Liczba par: + String(count) wymaga nieco więcej wyjaśnień. Jego funkcja jest następująca: Q Przekształca na łańcuch znaków wartość zmiennej count, która jest liczbą. Q Łączy ten łańcuch znaków z tekstem Liczba par: . Łączenie łańcuchów znaków (konkatenacja) jest realizowane za pomocą operatora dodawania (plus), co demonstruje wieloznaczną interpretację tego operatora. Jeśli obydwa operandy są licz- bami, znak plus powoduje dodawanie arytmetyczne. Jeśli operandy są łańcuchami znaków, opera- tor plus powoduje połączenie tych łańcuchów w jeden (konkatenację). Sytuację, w której jeden operator ma wiele znaczeń, nazywa się przeciążaniem operatorów. Co zrobi JavaScript, jeśli jeden z operatorów jest łańcuchem znaków, a drugi liczbą? Odpowiedź jest zależna od ich kolejności. W internecie można znaleźć mnóstwo przykładów, w których autorzy nie dokonali konwersji typów operandów, a konkatenacja znaków działa prawidłowo. Tajemnica leży we właściwej kolejności operacji. Ja jednak sugeruję, żeby unikać niespodzianek i zawsze stosować operandy właściwych typów. Je- śli nagle okaże się, że program dodaje dwie jedynki i w efekcie otrzymujemy 11, a następnie 111, zamiast 1, 2, 3, to znak, że łączymy znaki, zamiast dodawać liczby i że należy dokonać konwersji typów. Rysowanie wielokątów Rysowanie wielokątów to dobra ilustracja możliwości HTML5 w zakresie rysowania. Aby zrozumieć proces tworzenia kodu używanego do rysowania wielokątów, warto wyobrazić sobie taki wielokąt jako kształt przypominający koło rowerowe ze szprychami rozchodzącymi się z jego środka do każ- dego z wierzchołków. Szprycha nie pojawia się na rysunku, ale służy jako pomoc w zrozumieniu procesu rysowania wielokąta. Koncepcję tę objaśnia rysunek 5.10, na przykładzie trójkąta. W celu zmierzenia kąta między szprychami dzielimy wartość 2 * Math.PI (reprezentującą pełne koło) przez liczbę wierzchołków. Wartość kąta wykorzystamy do wywołania metody moveTo(), któ- ra przesunie pozycję ścieżki w odpowiednie miejsce. 149 ROZDZIAŁ 5. Rysunek 5.10. Reprezentacja trójkąta jako kształtu geometrycznego ze szprychami rozchodzącymi się z jego środka do wierzchołków. Strzałka wskazuje punkt, od którego zaczynamy rysowanie Program rysuje wielokąty jako wypełnione ścieżki rozpoczynające się od punktu wskazanego strzałką na rysunku 5.10, wyznaczonego jako połowa wartości kąta między szprychami. Aby do- trzeć do tego punktu, wywołujemy metodę moveTo() z wartością promienia radius oraz wykorzy- stujemy funkcje Math.sin() i Math.cos(). Następnie metodę lineTo() wywołujemy n - 1 razy, po- stępując w kierunku zgodnym z ruchem wskazówek zegara. W przypadku trójkąta n – 1 to dwa kolejne wierzchołki. W przypadku ośmiokąta będzie to siedem kolejnych wierzchołków. Po zakoń- czeniu pętli wywołujemy metodę fill(), która spowoduje wyświetlenie wypełnionego wielokąta. Kompletny kod z komentarzami znajdziesz w podrozdziale „Zbuduj własną aplikację”. Uwaga: Rysowanie wielokątów zajmuje czas, ale w tej aplikacji to nie jest problem. Gdyby pro- gram wymagał rysowania dużej liczby skomplikowanych grafik, warto zastanowić się nad technikami przyspieszenia ich rysowania, jak na przykład użycie gotowych grafik. To rozwiąza- nie wymaga jednak pobierania dodatkowych plików, co z kolei również zajmuje czas. Należy przeprowadzić eksperymenty w celu stwierdzenia, które rozwiązanie jest najbardziej korzystne w danej sytuacji. Mieszanie kart Jak wspomniałam wcześniej, gra „Pamięć” wymaga tego, aby kolejność kart była różna przy każdej rozgrywce. Najlepszy sposób realizacji tego zadania wcale nie jest zagadnieniem trywialnym. W rozdziale 10. przy okazji gry w 21 znajdziesz odnośnik do artykułu omawiającego najefektywniej- szy algorytm mieszania talii kart. W przypadku gry „Pamięć” zaimplementujemy sposób, który wykorzystywałam, grając w tę grę ja- ko dziecko. Razem z innymi graczami rozkładaliśmy karty, a następnie wybieraliśmy po dwie karty i zamienialiśmy je miejscami. Gdy uznaliśmy, że liczba zamian była wystarczająca, zaczynaliśmy właściwą rozgrywkę. W tym punkcie omówię sposób zaimplementowania tego pomysłu w naszej aplikacji. Funkcję shuffle() znajdziesz w podrozdziale „Zbuduj własną aplikację”, w tabeli z pełnym ko- dem aplikacji. W celu napisania kodu JavaScript niezbędnego do mieszania kart powinniśmy zdefiniować, co zna- czy „wystarczająca liczba zamian”. Możemy przyjąć, że taką liczbą jest trzykrotna liczba kart w talii 150 PAMIĘĆ zapisanych w tablicy deck. Ale przecież nie mamy fizycznych kart, a jedynie interpretujące je informacje. W takim razie co będziemy zamieniać? Oczywiście, tylko informacje identyfikujące kartę. W przypadku pierwszej wersji gry, wykorzystującej wielokąty, będzie to liczba boków, czyli właściwość info. W przypadku wersji wykorzystującej zdjęcia będą to właściwości info i img. Do losowania kart wykorzystamy wyrażenie Math.floor(Math.random() * dl), gdzie dl określa liczbę kart w talii. W każdym przebiegu takie losowanie wykonamy dwukrotnie, po czym zamieni- my miejscami wylosowane dwie karty. Losowanie może dwukrotnie wskazać tę samą kartę, co oznacza, że zostanie ona zastąpiona przez siebie samą, ale nie jest to powód do zmartwienia. Jeśli coś takiego się zdarzy, po prostu jeden przebieg nie przyniesie zmian kolejności kart w talii. Zapla- nowaliśmy dużą liczbę takich zamian, więc jedna mniej przejdzie niezauważona. Kolejnym wyzwaniem jest realizacja samej zamiany. Do tej operacji potrzebne nam będą pomocni- cze zmienne, przechowujące tymczasowo nasze przenoszone wartości. W przypadku wersji wyko- rzystującej wielokąty wykorzystamy jedną zmienną, pod nazwą holder, a w przypadku wersji ze zdjęciami będą to dwie zmienne: holderimg i holderinfo. Kliknięcia w karty Następnym krokiem będzie wyjaśnienie ruchów graczy, a dokładniej obsługa kliknięć kart. Obsługę zdarzeń kliknięć myszą rozwiążemy w sposób podobny do tego, jaki znamy z rozdziału 4. Wykor- zystamy metodę addEventListener(): canvas1 = document.getElementById( canvas ); canvas1.addEventListener( click , choose, false); Ten fragment kodu umieścimy w funkcji init(). Funkcja choose() musi zawierać kod wykrywający klikniętą kartę. Program wykorzysta współrzędne kliknięcia myszą na elemencie canvas. Technikę odczytu współrzędnych również znamy z rozdziału 4. Niestety, różne przeglądarki obsługują zdarzenia myszy na różne sposoby. Omówiłam to pokrótce w rozdziale 4., ale przypomnę te informacje również w tym miejscu. Poniższy kod działa prawidło- wo w przeglądarkach Chrome, Firefox i Safari: if ( ev.layerX || ev.layerX==0) { mx= ev.layerX; my = ev.layerY; } else if (ev.offsetX || ev.offsetX==0 ) { mx = ev.offsetX; my = ev.offsetY; } Ten kod działa prawidłowo, ponieważ w przypadku gdy przeglądarka nie obsługuje właściwości ev.layerX, jej wartość będzie interpretowana jako false. Jeśli istnieje, ale ma wartość 0, również będzie interpretowana jako false, ale za to wyrażenie ev.layerX==0 zwróci wartość true. Dzięki temu jeżeli program znajdzie użyteczną wartość ev.layerX, użyje jej. W przeciwnym razie kod sprawdzi istnienie właściwości ev.offsetX. Jeśli żadna z tych właściwości nie działa, zmienne mx i my nie zostaną przypisane. 151 ROZDZIAŁ 5. Karty są prostokątami, więc łatwo będzie po prostu kolejno przejrzeć wszystkie karty i porównać ich współrzędne z pozycją myszy (mx, my) w momencie kliknięcia: wystarczy odczytać współrzędne lewego górnego wierzchołka oraz szerokość i wysokość karty. Warunek if skonstruujemy w nastę- pujący sposób: if ((mx card.sx) (mx card.sx + card.swidth) (my card.sy) (my card.sy + card.sheight)) { Uwaga: W następnym rozdziale zajmiemy się sposobami dynamicznego definiowania kodu HTML z poziomu JavaScriptu. Poznamy w nim sposoby definiowania zdarzeń dla poszczegól- nych elementów na ekranie zamiast całego elementu canvas. Wartość zmiennej firstpick ustawiamy na true, co sygnalizuje, że następne kliknięcie będzie pierwszym z dwóch w serii. Po kliknięciu pierwszej karty program zmieni tę wartość na false, a po kliknięciu drugiej ponownie na true. Tego typu zmienne, przełączane między dwoma stanami, czę- sto nazywa się flagami (ang. flag) lub przełącznikami (ang. toggle). Zapobieganie oszustwom Ten punkt omawia specyficzne zagadnienia dotyczące tej konkretnej gry, ale z tych przemyśleń wynika też ogólna nauka budowania interaktywnych aplikacji. Istnieją co najmniej dwa sposoby, w jakie gracz może próbować oszukać grę: klikając dwukrotnie na tej samej karcie lub klikając w miej- scu, w którym znajdowała się wcześniej usunięta karta. Przed pierwszym problemem zabezpieczymy się, umieszczając poniższy kod po warunku spraw- dzającym, czy kliknięcie nastąpiło w obrębie karty: if ((firstpick) || (i != firstcard)) break; Ten wiersz kodu spowoduje wyjście z pętli for, jeśli indeks i jest prawidłowy, to znaczy jeśli kliknię- ta karta jest pierwszą w sekwencji lub drugą, ale inną od pierwszej. Uniknięcie drugiego problemu (kliknięcia w miejscu, w którym już nie ma karty) wymaga więcej pracy. Gdy aplikacja usuwa kartę ze stołu, oprócz narysowania tła w miejscu karty może dodatkowo ustawiać specjalną wartość (np. -1) w jej właściwości sx. To będzie wirtualny znak, że karta jest usunięta. Operacja ta powinna być wykonana w funkcji flipback(). Funkcja choose() sprawdzi wartość właściwości sx (sx = 0). Obydwa mechanizmy zapobiegania oszustwom można zaim- plementować w następującej pętli for: for (i = 0; i deck.length; i++){ var card = deck[i]; if (card.sx =0) if ((mx card.sx) (mx card.sx + card.swidth) (my card.sy) (my card.sy + card.sheight)) { if ((firstpick)|| (i!=firstcard)) break; } } 152 PAMIĘĆ Mamy tu do czynienia z trzykrotnie zagnieżdżonymi instrukcjami warunkowymi. Druga z nich jest jedyną instrukcją pierwszej. Trzecia zawiera pojedyncze wyrażenie break, które powoduje wyjście z pętli. Z reguły zalecam stosowanie nawiasów klamrowych ({ i }) w instrukcjach warunkowych, ale powyższy przykład stanowi skróconą wersję, jedynie do celów demonstracyjnych. Przejdźmy wreszcie do naszych dwóch wersji gry „Pamięć”. Zbuduj własną aplikację Ten podrozdział zawiera kompletne kody dwóch wersji gry „Pamięć”. Każda z nich wykorzystuje sporą liczbę funkcji, dlatego na początek zapoznaj się z ich zestawieniami w tabelach. Znajdziesz w nich nazwy funkcji oraz informacje, przez co są wywoływane i co same wywołują. Tabela 5.1 zawiera zestawienie funkcji pierwszej wersji gry, wykorzystującej wielokąty. Niektó- re z funkcji są wywoływane w ramach obsługi zdarzeń. Tabela 5.1. Funkcje w wersji gry „Pamięć” wykorzystującej wielokąty Funkcja Wywoływana przez init() obsługę zdarzenia onLoad elementu body Wywołuje makedeck() shuffle() choose() obsługę zdarzenia myszy zdefiniowaną przez metodę addEventListener() w funkcji init() Polycard() drawpoly() wywołaną jako metoda draw() wielokąta flipback() drawback() Polycard() shuffle() makedeck() Card() drawpoly() obsługę zdarzenia czasowego zdefiniowanego przez funkcję setTimeout() wywołaną w funkcji choose() makedeck() i flipback() jako metodę draw() klasy Polycard choose() init() init() makedeck() choose() jako metodę draw() klasy Polygon Tabela 5.2 zawiera kod pierwszej wersji gry z kompletnymi komentarzami. Analizując kod, zwróć uwagę na podobieństwa między tymi dwoma wersjami aplikacji, omówione wcześniej w tym rozdziale. Pamiętaj również, że to jest jeden z niezliczonej liczby sposobów zaprogramowania gry tego typu. Tabela 5.2. Pełny kod pierwszej wersji gry „Pamięć” wykorzystującej wielokąty html head Początek elementu html Początek elementu head title Gra PamiÚÊ /title Kompletny element title 153 ROZDZIAŁ 5. style form { width:330px; margin:20px; Początek elementu style Definicja stylu dla elementu form Szerokość Margines zewnętrzny background-color:pink; Kolor Padding:20px; } input { text-align:right; } /style Wypełnienie wewnętrzne Koniec definicji stylu Definicja stylu dla elementów pól formularza Wyrównanie do prawej, odpowiednie dla liczb Koniec definicji stylu Koniec elementu style script type= text/javascript var ctx; Początek elementu script. Deklaracja type nie jest niezbędna, ale zalecana Zmienna przechowująca graficzny kontekst elementu canvas var firstpick = true; Deklaracja i inicjalizacja zmiennej firstpick var firstcard; var secondcard; Deklaracja zmiennej przechowującej informację o pierwszej karcie Deklaracja zmiennej przechowującej informację o drugiej karcie var frontbgcolor = rgb(251,215,73) ; Kolor tła frontów kart var polycolor = rgb(254,11,0) ; Kolor wielokątów var backcolor = rgb(128,0,128) ; Kolor koszulek kart var tablecolor = rgb(255,255,255) ; Kolor stołu var cardrad = 30; var deck = []; var firstsx = 30; var firstsy = 50; var margin = 30; Promień wielokątów Deklaracja talii, początkowo pusta tablica Współrzędna x pierwszej karty Współrzędna y pierwszej karty Odstęp między kartami var cardwidth = 4 * cardrad; Szerokość karty ustalona na czterokrotność promienia wielokąta var cardheight = 4 * cardrad; Wysokość karty ustalona na czterokrotność promienia wielokąta var matched; var starttime; function Card(sx, sy, swidth, sheight, info) { this.sx = sx; this.sy = sy; this.swidth = swidth; this.sheight = sheight; 154 Ta zmienna jest ustawiana w funkcji choose() i wykorzystywana przez funkcję flipback() Ta zmienna jest ustawiana w funkcji init() i służy do obliczenia czasu gry Początek funkcji kreatora obiektu klasy Card Współrzędna pozioma … współrzędna pionowa … szerokość …. wysokość PAMIĘĆ this.info = info; this.draw = drawback; } … info (liczba boków wielokąta) Metoda rysująca kartę Koniec funkcji function makedeck() { Początek funkcji makedeck() inicjalizującej talię var i; var acard; var bcard; var cx = firstsx; var cy = firstsy; Zmienna wykorzystywana w pętli for Zmienna przechowująca pierwszą kartę z pary Zmienna przechowująca drugą kartę z pary Zmienna przechowująca współrzędną x, inicjalizowana na współrzędną x pierwszej karty Zmienna przechowująca współrzędną y, inicjalizowana na współrzędną y pierwszej karty for(i = 3; i 9; i++) { Pętla rysująca wielokąty: od trójkątów po ośmiokąty acard = new Card(cx, cy, cardwidth, cardheight, i); Nowy obiekt karty deck.push(acard); Dodanie karty do talii bcard = new Card(cx, cy + cardheight + margin, cardwidth, cardheight, i); Druga karta z takimi samymi parametrami, ale wyświetlana poniżej pierwszej deck.push(bcard); Dodanie karty do talii cx = cx + cardwidth + margin; Odstęp między kartami z marginesem acard.draw(); bcard.draw(); } shuffle(); } Rysowanie karty na elemencie canvas Rysowanie karty na elemencie canvas Koniec pętli for Mieszanie kart Koniec funkcji function shuffle() { Początek funkcji shuffle() var i; var k; var holder; Zmienna przechowująca referencję do karty Zmienna przechowująca referencję do karty Zmienna dodatkowa, niezbędna do dokonania zamiany var dl = deck.length Zmienna przechowująca liczbę kart w talii var nt; Indeks karty do zamiany for (nt = 0; nt 3 * dl; nt++) { Pętla for i = Math.floor(Math.random() * dl); Pobranie losowej karty k = Math.floor(Math.random() * dl); Pobranie losowej karty holder = deck[i].info; Zapisanie informacji karty i deck[i].info = deck[k].info; Umieszczenie informacji karty i w miejscu karty k deck[k].info = holder; Umieszczenie poprzedniej informacji karty k w miejscu karty i } } Koniec pętli for Koniec funkcji 155 ROZDZIAŁ 5. function Polycard(sx, sy, rad, n) { Początek funkcji konstruktora klasy Polycard this.sx = sx; this.sy = sy; this.rad = rad; this.draw = drawpoly; this.n = n; Ustawienie współrzędnej x … współrzędnej y … promienia wielokąta … metody rysującej … liczby boków this.angle = (2 * Math.PI) / n Obliczenie i przypisanie kąta } Koniec funkcji function drawpoly() { Początek funkcji drawpoly() ctx.fillStyle = frontbgcolor; Wypełnienie kolorem frontu karty ctx.fillRect(this.sx - 2 * this.rad, this.sy - 2 * this.rad, 4 * this.rad, 4 * this.rad); Wierzchołek prostokąta znajduje się u góry i po lewej środka wielokąta ctx.beginPath(); Początek ścieżki ctx.fillStyle = polycolor; Wypełnienie wielokąta var i; Zmienna używana do indeksowania var rad = this.rad; Promień ctx.moveTo(this.sx + rad * Math.cos(-.5 * this.angle), this.sy + rad * Math.sin(-.5 * this.angle)); Przeniesienie rysowania do pierwszego wierzchołka for (i=1; i this.n; i++) { Pętla for rysująca kolejne odcinki ctx.lineTo(this.sx + rad * Math.cos((i - .5) * this.angle), this.sy + rad * Math.sin((i - .5) * this.angle)); } ctx.fill(); } function drawback() { Dodanie odcinka wielokąta do ścieżki Koniec pętli for Wypełnienie ścieżki Koniec funkcji Początek funkcji ctx.fillStyle = backcolor; Ustawienie koloru koszulki karty ctx.fillRect(this.sx, this.sy, this.swidth, this.sheight); } Rysowanie prostokąta Koniec funkcji function choose(ev) { Początek funkcji choose() (obsługa kliknięcia karty) var mx; var my; var pick1; var pick2; Zmienna przechowująca współrzędną x myszy Zmienna przechowująca współrzędną y myszy Zmienna przechowująca obiekt klasy Polygon Zmienna przechowująca obiekt klasy Polygon if (ev.layerX || ev.layerX == 0) { Czy przeglądarka obsługuje właściwości layerX i layerY? 156 PAMIĘĆ mx= ev.layerX; my = ev.layerY; } Ustawienie mx Ustawienie my Koniec warunku if true else if (ev.offsetX || ev.offsetX == 0) { Czy przeglądarka obsługuje właściwości offsetX i offsetY? mx = ev.offsetX; my = ev.offsetY; } var i; Ustawienie mx Ustawienie my Koniec klauzuli else Zmienna wykorzystywana w pętli for (i = 0; i deck.length; i++){ Pętla przeglądająca wszystkie karty w talii var card = deck[i]; if (card.sx = 0) if ((mx card.sx) (mx card.sx + card.swidth) (my card.sy) (my card.sy + card.sheight)) { Referencja do obiektu karty w celu uproszczenia kodu Sprawdzenie, czy karta nie jest oznaczona jako usunięta Sprawdzenie, czy kliknięcie nastąpiło w obrębie rysunku karty if ((firstpick) || (i != firstcard)) break; Jeśli tak, sprawdzamy, czy to nie jest drugie kliknięcie w tę samą kartę; w takim przypadku kończymy przetwarzanie pętli } } Koniec warunku if true Koniec pętli for if (i deck.length) { Czy nastąpiło wcześniejsze wyjście z pętli for? if (firstpick) { firstcard = i; firstpick = false; pick1 = new Polycard(card.sx + cardwidth * .5,card.sy + cardheight * .5, cardrad, card.info); Jeśli to była pierwsza kliknięta karta… … ustawiamy na nią referencję firstcard Ustawienie firstpick na wartość false Utworzenie obiektu wielokąta pick1.draw(); } else { Narysowanie wielokąta Koniec warunku W przeciwnym wypadku… secondcard = i; … ustawienie referencji secondcard na drugą klikniętą kartę pick2 = new Polycard(card.sx + cardwidth * .5, card.sy + cardheight * .5, cardrad, card.info); Utworzenie obiektu wielokąta pick2.draw(); if (deck[i].info == deck[firstcard].info) { matched = true; Narysowanie wielokąta Sprawdzenie pary Ustawienie zmiennej matched na wartość true var nm = 1 + Number(document.f.count.value); Inkrementacja liczby par 157 ROZDZIAŁ 5. document.f.count.value = String(nm); Wyświetlenie nowego wyniku if (nm = .5 * deck.length) { Sprawdzenie, czy gra jest już zakończona var now = new Date(); Odczyt obiektu daty i czasu var nt = Number(now.getTime()); Wydobycie czasu i przekształcenie na liczbę var seconds = Math.floor(.5 + (nt - starttime) / 1000); Obliczenie sekund document.f.elapsed.value = String(seconds); Wyświetlenie czasu } } else { Koniec warunku (czy koniec gry) Koniec warunku (czy jest dopasowanie) w przeciwnym razie… matched = false; Ustawienie zmiennej matched na wartość false } Koniec instrukcji else firstpick = true; Przywrócenie domyślnego stanu zmiennej firstpick setTimeout(flipback, 1000); Ustawienie przerwy } } } function flipback() { if (!matched) { deck[firstcard].draw(); deck[secondcard].draw(); } else { Koniec warunku (jeśli to nie jest pierwsza karta) Koniec warunku (kliknięcie w kartę, pętla for przerwana) Koniec funkcji Początek funkcji flipback() obsługującej przerwę Jeśli nie było dopasowania… … rysowanie koszulki karty … rysowanie koszulki karty Koniec warunku Jeśli było dopasowanie (usuwanie kart) ctx.fillStyle = tablecolor; Ustawienie koloru wypełnienia na kolor stołu ctx.fillRect(deck[secondcard].sx, deck[secondcard].sy, deck[secondcard].swidth, deck[secondcard].sheight); ctx.fillRect(deck[firstcard].sx, deck[firstcard].sy, deck[firstcard].swidth, deck[firstcard].sheight); Rysowanie w miejscu karty Rysowanie w miejscu karty deck[secondcard].sx = -1; deck[firstcard].sx = -1; Ustawienie wartości powodującej pominięcie karty Ustawienie wartości powodującej pominięcie karty } } function init(){ 158 Koniec warunku (brak dopasowania) Koniec funkcji Początek funkcji init() PAMIĘĆ ctx = document.getElementById ( canvas ).getContext( 2d ); canvas1 = document.getElementById ( canvas ); canvas1.addEventListener( click , choose, false); Zmienna ctx realizująca rysowanie Zmienna canvas1 do obsługi zdarzeń Ustawienie funkcji obsługi zdarzeń makedeck(); Utworzenie talii document.f.count.value = 0 ; Inicjalizacja licznika par document.f.elapsed.value = ; Usunięcie starej wartości czasu starttime = new Date(); Odczyt czasu rozpoczęcia gry starttime = Number(starttime. getTime()); Ta sama zmienna jest użyta do zapisania właściwej wartości czasu w sekundach shuffle(); } /script /head Mieszanie kart Koniec funkcji Koniec elementu script Koniec elementu head body onLoad= init(); Element body, konfiguracja uruchomienia funkcji init() canvas id= canvas width= 900 height= 400 Twoja przeglÈdarka nie obsïuguje elementu canvas standardu HTML5. /canvas br/ Początek elementu canvas Komunikat dla użytkowników niekompatybilnych przeglądarek Koniec elementu canvas Przejście do nowego wiersza Klikaj karty próbujÈc znaleěÊ pary. Instrukcje gry form name= f Początek elementu formularza Liczba par: input type= text name= count value= 0 size= 1 / Etykieta i pole tekstowe używane do wyświetlania informacji p Nowy akapit Czas gry: input type= text name= elapsed value= size= 4 / sekundy. Etykieta i pole tekstowe używane do wyświetlania informacji /form /body /html Koniec elementu form Koniec elementu body Koniec elementu html Niezależnie od podjętych przez Ciebie decyzji programistycznych jeszcze raz zachęcam do komen- towania kodu (używając dwóch ukośników // na początku) i robienia odstępów (pustych wierszy) między niezależnymi fragmentami kodu. Oczywiście, nie ma konieczności komentowania każdego wiersza, ale rozsądna liczba komentarzy z pewnością pomoże w przyszłości, gdy będziesz musiał wrócić do tego kodu w celu wprowadzenia poprawek lub udoskonaleń. 159 ROZDZIAŁ 5. Grę można zmodyfikować, zmieniając rozmiar i kolor czcionki formularza lub kolor tła pola formula- rza. Więcej pomysłów na zmodyfikowanie aplikacji znajdziesz w dalszej części rozdziału. Druga wersja gry „Pamięć”, wykorzystująca zdjęcia, posiada bardzo podobną strukturę do wersji wykorzystującej wielokąty. Wersja druga nie wymaga osobnej funkcji do rysowania frontu karty. Tabela 5.3 zawiera listę funkcji wykorzystywanych przez drugą wersję gry. Tabela 5.3. Funkcje w drugiej wersji gry „Pamięć”, wykorzystującej fotografie Funkcja Wywoływana przez init() obsługę zdarzenia onLoad elementu body Wywołuje makedeck() shuffle() choose() flipback() drawback() shuffle() makedeck() Card() obsługę zdarzenia myszy zdefiniowaną przez metodę addEventListener() w funkcji init() obsługę zdarzenia czasowego zdefiniowanego przez funkcję setTimeout() wywołaną w funkcji choose() makedeck() i flipback() jako metodę draw() klasy Polycard init() init() makedeck() Kod drugiej wersji aplikacji jest bardzo podobny do pierwszej. Większość logiki pozostaje bez zmian. Ta wersja do wyświetlania komunikatów do użytkownika korzysta z elementu canvas, dla- tego dokument HTML nie zawiera formularza. Kod aplikacji jest przedstawiony w tabeli 5.4, z ko- mentarzami tylko w miejscach różnic. W komentarzu sygnalizuję miejsce
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Wprowadzenie do HTML5. Nauka HTML5 i JavaScriptu na przykładzie 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ą: