Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00370 010909 10755430 na godz. na dobę w sumie
HTML5. Tworzenie gier z wykorzystaniem CSS i JavaScript - ebook/pdf
HTML5. Tworzenie gier z wykorzystaniem CSS i JavaScript - ebook/pdf
Autor: Liczba stron: 208
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-1773-4 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> html i xhtml - programowanie
Porównaj ceny (książka, ebook (-20%), audiobook).
Pasjans, Bubble Shooter, Puzzle Bubble, Mahjong, Candy Crush... Ile już godzin spędziłeś nad jedną z tych prostych i... wyjątkowo uzależniających gier? Żadna z nich nie wymaga nośników instalacyjnych ani potężnych mocy obliczeniowych, te gry działają na różnych platformach i urządzeniach, niezależnie od systemu operacyjnego, a do ich uruchomienia wystarczy jedynie przeglądarka. Zbudowanie takiej gry jest proste — wystarczy sprawny duet HTML5 i JavaScript.

Jeśli masz podstawową wiedzę o HTML5, CSS i JavaScript, to dzięki tej książce możesz nauczyć się pisania gier działających w przeglądarce. Autor książki, Karl Bunyan, pokazuje, jak zaplanować logikę gry, jak korzystać z bibliotek jQuery i Modernizr, jak renderować elementy gry i tworzyć płynne animacje. Uczy korzystania z efektownych przejść i transformacji CSS, a także sposobu implementowania efektów dźwiękowych i zapisywania wyników uzyskanych przez gracza. Ten kompletny przewodnik w każdym rozdziale przedstawia nowe koncepcje i techniki, od razu prezentując ich działanie w praktyce. Dzięki temu czytelnik płynnie przechodzi od zagadnień podstawowych (tworzenie struktury plików gry czy reagowanie na zachowanie gracza) przez bardziej zaawansowane (wprowadzanie poziomów i wykorzystanie kanwy), aż po tak istotne sprawy, jak zarządzanie pamięcią i optymalizacja szybkości działania aplikacji.

Spróbuj swoich sił i zrealizuj pomysły na własną grę!


Karl Bunyan — swoją pierwszą grę przygodową opublikował w 1990 r. dla ZX Spectrum i od tamtej pory zajmuje się tworzeniem gier. Tworzył prototypy HTML5 dla Game Show Network, a obecnie jest właścicielem Wedu Games, niezależnej firmy budującej gry sieciowe i mobilne.
Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: Build an HTML5 Game: A Developer s Guide with CSS and JavaScript Tłumaczenie: Jakub Hubisz ISBN: 978-83-283-1770-3 Copyright © 2015 by Karl Bunyan. Title of English-language original: Build an HTML5 Game, ISBN 978-1-59327-575-4, published by No Starch Press. Polish language edition copyright © 2016 by Helion S.A. 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. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/htcsjs Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/htcsjs.zip Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis tre(cid:258)ci PRZEDMOWA ............................................................................................. 9 Podzi(cid:218)kowania .............................................................................................................................. 10 WPROWADZENIE ..................................................................................... 11 Po co budowa(cid:202) gry w HTML5? ..................................................................................................... 12 Wykorzystanie posiadanych umiej(cid:218)tno(cid:258)ci ................................................................................. 12 Tworzenie dla wielu systemów ................................................................................................ 12 Szybko rosn(cid:200)ca platforma ......................................................................................................... 13 O ksi(cid:200)(cid:285)ce ....................................................................................................................................... 13 Dla kogo jest ta ksi(cid:200)(cid:285)ka? ........................................................................................................... 13 Zawarto(cid:258)(cid:202) ksi(cid:200)(cid:285)ki ..................................................................................................................... 14 Zakres ksi(cid:200)(cid:285)ki ........................................................................................................................... 15 Jak korzysta(cid:202) z tej ksi(cid:200)(cid:285)ki? ......................................................................................................... 16 Cz(cid:218)(cid:258)(cid:202) I. Tworzenie gry z wykorzystaniem HTML, CSS i JavaScriptu 1 PRZYGOTOWANIE I KONFIGURACJA ...................................................... 19 Zasady gry ..................................................................................................................................... 20 Budowa gry ................................................................................................................................... 23 (cid:165)rodowisko programistyczne i testowe ........................................................................................ 23 Poleć książkęKup książkę Testowanie w przegl(cid:200)darce ......................................................................................................24 Debugowanie w przegl(cid:200)darce ...................................................................................................25 Rozmieszczanie ekranu gry ...........................................................................................................26 Tworzenie paneli za pomoc(cid:200) HTML i CSS ...............................................................................27 Struktura kodu ..........................................................................................................................29 Dodanie pierwszych skryptów ......................................................................................................31 Biblioteki Modernizr i jQuery ....................................................................................................31 Dodanie biblioteki Modernizr ...................................................................................................33 (cid:146)adowanie skryptów za pomoc(cid:200) Modernizr .............................................................................34 Modularny JavaScript .................................................................................................................37 Interfejs u(cid:285)ytkownika i skrypty wy(cid:258)wietlaj(cid:200)ce ...........................................................................42 Podsumowanie ..............................................................................................................................44 Dalsze (cid:202)wiczenia ...........................................................................................................................44 2 ANIMACJA SPRITE’ÓW Z U(cid:191)YCIEM JQUERY I CSS .................................. 45 Zasady pracy ze sprite’ami CSS .....................................................................................................47 Tworzenie planszy gry ..............................................................................................................47 Dodawanie sprite’ów ................................................................................................................49 Animacja i klasa Bubble ..................................................................................................................51 Obliczanie k(cid:200)ta i kierunku .........................................................................................................52 Wystrzeliwanie i celowanie b(cid:200)belkami ......................................................................................55 Podsumowanie ..............................................................................................................................58 Dalsze (cid:202)wiczenia ...........................................................................................................................58 3 LOGIKA GRY ............................................................................................ 59 Rysowanie planszy gry ...................................................................................................................61 Renderowanie poziomu ............................................................................................................65 Kolejka b(cid:200)belków ......................................................................................................................67 Wykrywanie kolizji ........................................................................................................................69 Geometria kolizji .......................................................................................................................70 Logika wykrywania kolizji ..........................................................................................................75 Reagowanie na kolizje ....................................................................................................................80 Dodanie obiektu b(cid:200)belka do planszy .........................................................................................81 Ustawianie obiektu b(cid:200)belka na siatce ........................................................................................83 Podsumowanie ..............................................................................................................................84 Dalsze (cid:202)wiczenia ...........................................................................................................................84 4 PRZE(cid:146)O(cid:191)ENIE NA EKRAN ZMIAN W STANIE GRY ................................. 85 Obliczanie grup ..............................................................................................................................86 Pobieranie b(cid:200)belków .................................................................................................................86 Tworzenie grup o jednakowym kolorze ...................................................................................87 P(cid:218)kanie b(cid:200)belków ..........................................................................................................................90 Usuwanie grup b(cid:200)belków za pomoc(cid:200) JavaScriptu .....................................................................90 Animacja p(cid:218)kania za pomoc(cid:200) CSS .............................................................................................92 4 S p i s t r e (cid:258) c i Poleć książkęKup książkę Grupy osierocone ......................................................................................................................... 94 Identyfikacja osieroconych b(cid:200)belków ....................................................................................... 94 Usuwanie osieroconych b(cid:200)belków ........................................................................................... 99 Tworzenie eksplozji b(cid:200)belków za pomoc(cid:200) wtyczki jQuery ........................................................ 101 Podsumowanie ............................................................................................................................ 106 Dalsze (cid:202)wiczenia ......................................................................................................................... 106 Cz(cid:218)(cid:258)(cid:202) II. Ulepszanie gry za pomoc(cid:200) HTML5 i kanwy 5 PRZEJ(cid:165)CIA I TRANSFORMACJE CSS ....................................................... 109 Zalety CSS ................................................................................................................................... 109 Podstawowe przej(cid:258)cia CSS ......................................................................................................... 110 Jak stworzy(cid:202) przej(cid:258)cie? ........................................................................................................... 110 Przyciski zmieniaj(cid:200)ce kolor ..................................................................................................... 112 Podstawowe transformacje CSS ................................................................................................. 114 Jak stworzy(cid:202) transformacj(cid:218)? ................................................................................................... 115 Skalowanie przycisku .............................................................................................................. 115 Przej(cid:258)cia CSS zamiast animacji jQuery ........................................................................................ 116 Wady przej(cid:258)(cid:202) CSS ....................................................................................................................... 119 Podsumowanie ............................................................................................................................ 120 Dalsze (cid:202)wiczenia ......................................................................................................................... 120 6 RENDEROWANIE SPRITE’ÓW ZA POMOC(cid:107) KANWY ............................. 121 Wykrywanie wsparcia dla kanwy ................................................................................................ 122 Rysowanie w elemencie canvas ................................................................................................... 122 Renderowanie obrazów .............................................................................................................. 124 Elementy canvas ..................................................................................................................... 124 Obracanie obrazów w elemencie canvas ............................................................................... 126 Renderowanie sprite’ów ............................................................................................................. 129 Definiowanie i utrzymanie stanów .............................................................................................. 131 Przygotowanie maszyny stanów ............................................................................................. 131 Implementacja stanów ............................................................................................................ 132 Arkusze sprite’ów a kanwa ......................................................................................................... 137 Renderowanie kanwy .................................................................................................................. 143 Przemieszczanie sprite’ów .......................................................................................................... 146 Animowanie klatek sprite’ów ...................................................................................................... 149 Podsumowanie ............................................................................................................................ 151 Dalsze (cid:202)wiczenia ......................................................................................................................... 152 7 POZIOMY, D(cid:189)WI(cid:125)K I NIE TYLKO ........................................................... 153 Wiele poziomów i wyniki ............................................................................................................ 153 Zmienne stanu nowej gry ....................................................................................................... 154 Wy(cid:258)wietlenie poziomu i wyniku ............................................................................................. 155 S p i s t r e (cid:258) c i 5 Poleć książkęKup książkę Efektywne ko(cid:241)czenie poziomów ................................................................................................165 Przechowywanie najwy(cid:285)szego wyniku za pomoc(cid:200) magazynu lokalnego .....................................167 Magazyn lokalny kontra ciasteczka ..........................................................................................167 Dodawanie danych do magazynu lokalnego ............................................................................168 Wyg(cid:239)adzanie animacji za pomoc(cid:200) requestAnimationFrame .........................................................170 Nowe spojrzenie na aktualizacj(cid:218) klatek ..................................................................................171 Kompatybilno(cid:258)(cid:202) kodu dzi(cid:218)ki wype(cid:239)nianiu ................................................................................172 Dodanie d(cid:283)wi(cid:218)ku za pomoc(cid:200) HTML5 .........................................................................................175 API audio HTML ......................................................................................................................176 P(cid:218)kanie b(cid:200)belków: kompletne z d(cid:283)wi(cid:218)kiem ...........................................................................177 Podsumowanie ............................................................................................................................179 Dalsze (cid:202)wiczenia .........................................................................................................................179 8 KOLEJNE KROKI W HTML5 .................................................................... 181 Zapisywanie i odczytywanie danych ............................................................................................181 AJAX ........................................................................................................................................182 WebSockets ............................................................................................................................183 W(cid:200)tki robocze .........................................................................................................................184 WebGL ........................................................................................................................................185 Udost(cid:218)pnianie gier HTML5 .........................................................................................................187 Pe(cid:239)ny ekran w przegl(cid:200)darce komputera ..................................................................................187 Przegl(cid:200)darki mobilne ...............................................................................................................188 Udost(cid:218)pnianie w postaci aplikacji natywnej ............................................................................191 Optymalizacja ..............................................................................................................................192 Zarz(cid:200)dzanie pami(cid:218)ci(cid:200) ..............................................................................................................193 Optymalizacja pr(cid:218)dko(cid:258)ci .........................................................................................................195 Bezpiecze(cid:241)stwo ...........................................................................................................................196 Nie ufaj nikomu .......................................................................................................................197 Zaciemnianie ...........................................................................................................................197 Korzystanie ze zmiennych prywatnych ...................................................................................198 Walidacja za pomoc(cid:200) sum kontrolnych ...................................................................................199 Podsumowanie ............................................................................................................................200 Dalsze (cid:202)wiczenia .........................................................................................................................200 POS(cid:146)OWIE .............................................................................................. 201 Udoskonalenie Bubble Shootera .................................................................................................201 Stworzenie zupe(cid:239)nie nowej gry ...................................................................................................202 Dopasuj trzy ............................................................................................................................202 Pasjans .....................................................................................................................................202 Gra platformowa .....................................................................................................................202 Prosta gra zwi(cid:200)zana z fizyk(cid:200) ....................................................................................................203 Do(cid:239)(cid:200)cz do zespo(cid:239)u tworz(cid:200)cego gry .............................................................................................203 SKOROWIDZ .......................................................................................... 205 6 S p i s t r e (cid:258) c i Poleć książkęKup książkę 3 Logika gry DO TEJ PORY STWORZYLI(cid:165)MY EKRAN POWITALNY, PRZYCISK ROZPOCZYNAJ(cid:107)CY NOW(cid:107) GR(cid:125) I POJEDYNCZY B(cid:107)BELEK, KTÓRY MO(cid:191)E ZOSTA(cid:109) WYSTRZELONY POZA EKRAN. W TYM ROZDZIALE Bubble Shooter zacznie bardziej przypomina(cid:202) gr(cid:218). Dowiesz si(cid:218), jak narysowa(cid:202) plansz(cid:218) gry i wy(cid:258)wietli(cid:202) informacje na temat poziomu, a nast(cid:218)pnie nauczysz si(cid:218), jak wykrywa(cid:202) kolizje. Kolizje s(cid:200) g(cid:239)ównym elementem wielu gier i maj(cid:200) miejsce, je(cid:285)eli sprite’y si(cid:218) zetkn(cid:200). Kiedy b(cid:218)dziesz ju(cid:285) w stanie wykrywa(cid:202) kolizje, b(cid:218)dziesz móg(cid:239) napisa(cid:202) kod, który sprawi, (cid:285)e sprite’y b(cid:218)d(cid:200) na nie reagowa(cid:202). W naszej grze kolizje nast(cid:218)puj(cid:200), gdy wystrzelony b(cid:200)belek zderza si(cid:218) z b(cid:200)belkiem znajduj(cid:200)cym si(cid:218) w siatce gry. Zaimplementujemy dwie reakcje: je(cid:285)eli b(cid:200)belek nie uformuje grupy co najmniej trzech b(cid:200)belków tego samego koloru, przyklei si(cid:218) do siatki, a w przeciwnym wypadku stworzy grup(cid:218) i wszystkie b(cid:200)belki p(cid:218)kn(cid:200). Zanim jednak zaczniemy oblicza(cid:202) kolizje, potrzebujemy obiektu, z którym b(cid:200)belki b(cid:218)d(cid:200) mog(cid:239)y si(cid:218) zderzy(cid:202). W pierwszej cz(cid:218)(cid:258)ci tego rozdzia(cid:239)u omówi(cid:218) ryso- wanie pocz(cid:200)tkowej planszy gry i przygotowanie stanu gry. Zrobimy to zgodnie z procesem obejmuj(cid:200)cym kilka kroków, pokazanym na rysunku 3.1. Najpierw narysujemy plansz(cid:218) gry, a potem dodamy wykrywanie kolizji dla wystrzelonego b(cid:200)belka. W kolejnym rozdziale zaimplementujemy mechanizm p(cid:218)kania grup b(cid:200)belków oparty na identyczno(cid:258)ci kolorów. Przejd(cid:283)my przez kolejne kroki i zamie(cid:241)my je na kod. Poleć książkęKup książkę Rysunek 3.1. P(cid:218)tla gry rozpoczyna si(cid:218) od narysowania planszy, a ko(cid:241)czy na pokazaniu wyniku 60 R o z d z i a (cid:239) 3 Poleć książkęKup książkę Rysowanie planszy gry Plansza gry ma podobn(cid:200) struktur(cid:218) dla ka(cid:285)dego poziomu, a ka(cid:285)da plansza zawiera rz(cid:218)dy b(cid:200)belków w czterech kolorach. Kolejne rz(cid:218)dy zawieraj(cid:200) albo parzyst(cid:200), albo nieparzyst(cid:200) liczb(cid:218) b(cid:200)belków, zale(cid:285)nie od tego, czy numer rz(cid:218)du jest parzysty, czy nie. Wszystkie te informacje b(cid:218)dziemy przechowywa(cid:202) w obiekcie Board, a aktu- alny obiekt b(cid:218)dzie przechowywany jako zmienna w obiekcie Game. Wybrana struktura obiektów powinna by(cid:202) uzale(cid:285)niona od projektu gry, ale cele powinny by(cid:202) takie same jak podczas podejmowania decyzji na temat struktury kodu w aplikacjach webowych: nale(cid:285)y grupowa(cid:202) obiekty wykonuj(cid:200)ce podobne operacje i próbowa(cid:202) osi(cid:200)gn(cid:200)(cid:202) równowag(cid:218) w ilo(cid:258)ci abstrahowanych wspólnych funkcji. Nie definiuj kilku klas zawieraj(cid:200)cych bardzo ma(cid:239)o kodu, ale nie twórz te(cid:285) zbyt ma(cid:239)o klas zawieraj(cid:200)cych bardzo du(cid:285)o kodu, które b(cid:218)d(cid:200) trudne do czytania i zrozumienia. Twórcy gier cz(cid:218)sto opieraj(cid:200) decyzje dotycz(cid:200)ce struktury kodu na instynkcie i do(cid:258)wiadczeniu oraz na (cid:258)ci(cid:258)le zdefiniowanych zasadach. Zawsze b(cid:200)d(cid:283) przygotowany, aby refaktoryzowa(cid:202) swój kod, je(cid:285)eli uwa(cid:285)asz, (cid:285)e Twoje pocz(cid:200)t- kowe wybory nie s(cid:200) ju(cid:285) odpowiednie. Rz(cid:218)dy sk(cid:239)adaj(cid:200)ce si(cid:218) na plansz(cid:218) b(cid:218)d(cid:200) tablic(cid:200) obiektów Bubble. Stworzymy t(cid:218) tablic(cid:218) podczas tworzenia instancji obiektu Board. Pó(cid:283)niej przeniesiemy ryso- wanie elementów planszy do pliku ui.js. Wstawienie du(cid:285)ej ilo(cid:258)ci kodu do klasy Game jest bardzo proste, ale niepo(cid:285)(cid:200)dane — dlatego korzystaj z okazji i rozdzielaj odpowiedzialno(cid:258)(cid:202) pomi(cid:218)dzy klasami, kiedy tylko b(cid:218)dzie to mo(cid:285)liwe, szczególnie je(cid:285)eli chodzi o renderowanie obiektów na ekranie. W pliku game.js musimy stworzy(cid:202) zmienn(cid:200) przechowuj(cid:200)c(cid:200) plansz(cid:218) i now(cid:200) instancj(cid:218) obiektu Board. Plansza jest generowana po klikni(cid:218)ciu przycisku nowej gry. Dodaj poni(cid:285)szy kod do pliku game.js: game.js var BubbleShoot = window.BubbleShoot || {}; BubbleShoot.Game = (function($){ var Game = function(){ var curBubble; var board; --ci(cid:266)cie-- var startGame = function(){ $( .but_start_game ).unbind( click ); BubbleShoot.ui.hideDialog(); curBubble = getNextBubble(); board = new BubbleShoot.Board(); BubbleShoot.ui.drawBoard(board); $( #game ).bind( click ,clickGameScreen); }; --ci(cid:266)cie-- }; return Game; })(jQuery); L o g i k a g r y 61 Poleć książkęKup książkę Board to nowy konstruktor, który musimy stworzy(cid:202). Stwórz nowy plik o nazwie board.js i dodaj go do listy plików (cid:239)adowanych przez Modernizr.load w pliku index.html. Dodaj poni(cid:285)szy kod do nowego pliku: board.js var BubbleShoot = window.BubbleShoot || {}; BubbleShoot.Board = (function($){ var NUM_ROWS = 9; var NUM_COLS = 32; var Board = function(){ var that = this; var rows = createLayout(); this.getRows = function(){ return rows;}; return this; }; var createLayout = function(){ var rows = []; for(var i=0;i NUM_ROWS;i++){ var row = []; var startCol = i 2 == 0 ? 1 : 0; for(var j=startCol;j NUM_COLS;j+=2){ var bubble = BubbleShoot.Bubble.create(i,j); row[j] = bubble; }; rows.push(row); }; return rows; }; return Board; })(jQuery); NUM_ROWS i NUM_COLS to sta(cid:239)e determinuj(cid:200)ce liczb(cid:218) rz(cid:218)dów i kolumn dla siatki b(cid:200)belków. Liczba kolumn mo(cid:285)e si(cid:218) wydawa(cid:202) wysoka, poniewa(cid:285) na pewno nie b(cid:218)dziemy mieli a(cid:285) 32 b(cid:200)belków w rz(cid:218)dzie. Powodem tak du(cid:285)ej liczby kolumn jest to, (cid:285)e stworzymy wpis siatki co po(cid:239)ow(cid:218) szeroko(cid:258)ci b(cid:200)belka, poniewa(cid:285) rz(cid:218)dy parzyste i nieparzyste s(cid:200) przesuni(cid:218)te wzgl(cid:218)dem siebie. Ta decyzja projektowa pozwala osi(cid:200)gn(cid:200)(cid:202) lepszy efekt wizualny, a b(cid:200)belki b(cid:218)d(cid:200) wygl(cid:200)da(cid:239)y jak u(cid:239)o(cid:285)one w stos. Pozwala to równie(cid:285) opracowa(cid:202) ciekawsze k(cid:200)ty wystrza(cid:239)u. Wszystkie b(cid:200)belki z pierwszego rz(cid:218)du i ka(cid:285)dy kolejny nieparzysty rz(cid:200)d b(cid:218)d(cid:200) mia(cid:239)y nieparzyste koordynaty y. Rz(cid:218)dy s(cid:200) numerowane kolejnymi liczbami ca(cid:239)- kowitymi, ale tablica, któr(cid:200) wykorzystamy, b(cid:218)dzie indeksowana od zera: pierw- szy rz(cid:200)d b(cid:218)dzie mia(cid:239) indeks 0, drugi b(cid:218)dzie mia(cid:239) indeks 1 i tak dalej. Dlatego koordynaty b(cid:200)belka (x, y) rozpoczynaj(cid:200)ce si(cid:218) od lewej górnej kraw(cid:218)dzi planszy b(cid:218)d(cid:200) numerowane zgodnie z rysunkiem 3.2. Ten sposób okre(cid:258)lania koordynat w przypadku cz(cid:218)(cid:258)ciowo obsadzonej siatki pozwala unikn(cid:200)(cid:202) warto(cid:258)ci cz(cid:200)stkowych i u(cid:239)amków. Ponadto mo(cid:285)emy przechowywa(cid:202) uk(cid:239)ad planszy w tablicach indekso- wanych liczbami ca(cid:239)kowitymi. Praca z liczbami ca(cid:239)kowitymi zamiast liczb zmien- noprzecinkowych nie wp(cid:239)ywa na proces obliczania kolizji, ale sprawia, (cid:285)e kod jest bardziej czytelny. 62 R o z d z i a (cid:239) 3 Poleć książkęKup książkę Rysunek 3.2. Koordynaty b(cid:200)belków w siatce gry W kodzie wywo(cid:239)amy teraz funkcj(cid:218) createLayout , która zwraca dwuwy- miarow(cid:200) tablic(cid:218) rz(cid:218)dów i kolumn. W nast(cid:218)pnym wierszu udost(cid:218)pniamy pu- . Kiedy mamy ju(cid:285) obiekt Board, mo(cid:285)emy pobra(cid:202) bliczny dost(cid:218)p do tej tablicy b(cid:200)belek na dowolnej pozycji. Na przyk(cid:239)ad aby pobra(cid:202) b(cid:200)belek na koordynatach (4,1), napisaliby(cid:258)my: var rows = board.getRows(); var row = rows[1]; var bubble = row[4]; Dost(cid:218)p do b(cid:200)belków uzyskujemy za po(cid:258)rednictwem numeru rz(cid:218)du i kolumny. Najpierw pobieramy wszystkie rz(cid:218)dy za pomoc(cid:200) board.getRows, a potem pierw- szy rz(cid:200)d przechowujemy jako row. Nast(cid:218)pnie uzyskujemy dost(cid:218)p do czwartego b(cid:200)belka za pomoc(cid:200) numeru kolumny. Poniewa(cid:285) tablica row ma tylko po(cid:239)ow(cid:218) warto(cid:258)ci, wszystkie nieparzyste wpisy w parzy(cid:258)cie zaindeksowanych rz(cid:218)dach (pocz(cid:200)wszy od 0) i wszystkie parzyste wpisy dla nieparzystych kolumn b(cid:218)d(cid:200) mia(cid:239)y warto(cid:258)(cid:202) null. Funkcja createLayout zawiera p(cid:218)tl(cid:218) . Dla ka(cid:285)dego rz(cid:218)du, który chcemy stworzy(cid:202), startCol oblicza, czy zacz(cid:200)(cid:202) od kolumny 1 czy 0, w zale(cid:285)no(cid:258)ci od tego, czy rz(cid:200)d jest nieparzysty czy parzysty. Nast(cid:218)pnie kolejna p(cid:218)tla przechodzi do maksymalnej liczby kolumn, tworz(cid:200)c nowy obiekt Bubble i dodaj(cid:200)c go do tablicy rz(cid:218)du, która jest potem zwracana. Aby ta funkcja mog(cid:239)a zadzia(cid:239)a(cid:202), musimy przystosowa(cid:202) klas(cid:218) Bubble tak, (cid:285)eby przyjmowa(cid:239)a koordynaty rz(cid:218)du i kolumny, i wprowadzi(cid:202) zmiany w metodzie Bubble.create. To, (cid:285)e obiekt Bubble — dzi(cid:218)ki temu, i(cid:285) przechowuje koordynaty — b(cid:218)dzie zna(cid:239) swoje po(cid:239)o(cid:285)enie na planszy, przyda si(cid:218) równie(cid:285) podczas obliczania grup, które maj(cid:200) p(cid:218)kn(cid:200)(cid:202). Je(cid:285)eli znamy pozycj(cid:218) b(cid:200)belka, mo(cid:285)emy uzyska(cid:202) do niego dost(cid:218)p w strukturze przechowywanej w obiekcie Board. Nast(cid:218)pnie, maj(cid:200)c b(cid:200)belek, mo(cid:285)emy odpyta(cid:202) go o jego pozycj(cid:218). Ka(cid:285)dy b(cid:200)belek b(cid:218)dzie mia(cid:239) w(cid:239)a(cid:258)ci- wo(cid:258)(cid:202) type, która odnosi si(cid:218) do jego koloru, a w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) ta b(cid:218)dzie ustalana pod- czas tworzenia. Kiedy zaczniesz tworzy(cid:202) gry wed(cid:239)ug swoich pomys(cid:239)ów, kluczowe stan(cid:200) si(cid:218) decyzje na temat tego, gdzie przechowywa(cid:202) dane i jak uzyskiwa(cid:202) do nich dost(cid:218)p. Twoje rozwi(cid:200)zanie b(cid:218)dzie uzale(cid:285)nione od typu tworzonej gry. W grze Bubble L o g i k a g r y 63 Poleć książkęKup książkę Shooter przechowujemy relatywnie ma(cid:239)(cid:200) liczb(cid:218) b(cid:200)belków w ramach obiektu Board. Aby uzyska(cid:202) informacj(cid:218) o b(cid:200)belku, mo(cid:285)emy uzyska(cid:202) dost(cid:218)p do tych danych, prze- gl(cid:200)daj(cid:200)c tablic(cid:218) rows. W zale(cid:285)no(cid:258)ci od tego, jak chcieliby(cid:258)my wykorzysta(cid:202) dane dotycz(cid:200)ce b(cid:200)bel- ków, ta metoda mo(cid:285)e nie by(cid:202) najbardziej elegancka. Na przyk(cid:239)ad za(cid:239)ó(cid:285)my, (cid:285)e chcemy znale(cid:283)(cid:202) wszystkie czerwone b(cid:200)belki w grze. Aktualnie musieliby(cid:258)my przej(cid:258)(cid:202) po wszystkich elementach planszy, sprawdzi(cid:202), czy dany b(cid:200)belek jest czer- wony, a nast(cid:218)pnie zapisa(cid:202) wynik. Plansza gry jest ma(cid:239)a, wi(cid:218)c nowoczesne procesory szybko uporaj(cid:200) si(cid:218) z tym zadaniem. O ile nie b(cid:218)dziemy uruchamia(cid:202) sprawdzania kolorów zbyt wiele razy na sekund(cid:218), aktualna struktura kodu powinna zadzia(cid:239)a(cid:202). Ale wyobra(cid:283) sobie teraz, (cid:285)e na tablicy znajduj(cid:200) si(cid:218) tysi(cid:200)ce b(cid:200)belków. Prze- chodzenie w p(cid:218)tli po wszystkich b(cid:200)belkach tylko po to, aby znale(cid:283)(cid:202) czerwone, by(cid:239)oby zbyt czasoch(cid:239)onne. Mogliby(cid:258)my natomiast przechowywa(cid:202) b(cid:200)belki w tabli- cach wielowymiarowych — jedna dla wszystkich czerwonych b(cid:200)belków, jedna dla zielonych i tak dalej — aby mie(cid:202) natychmiastowy dost(cid:218)p do wszystkich b(cid:200)bel- ków danego koloru. Takie rozwi(cid:200)zanie równie(cid:285) ma swoje wady: aby sprawdzi(cid:202), czy dane miejsce na planszy jest zaj(cid:218)te przez b(cid:200)belek dowolnego koloru, musieli- by(cid:258)my przejrze(cid:202) wiele tablic. Je(cid:285)eli masz tylko ogólne poj(cid:218)cie na temat tego, jak szybko procesor mo(cid:285)e wykona(cid:202) dan(cid:200) operacj(cid:218), najlepiej, aby kod by(cid:239) jasny i prosty. Je(cid:258)li w Twoj(cid:200) gr(cid:218) da si(cid:218) gra(cid:202) i dzia(cid:239)a wystarczaj(cid:200)co szybko, nie b(cid:218)dziesz musia(cid:239) eksperymentowa(cid:202) z ró(cid:285)nymi metodami dost(cid:218)pu do danych. Je(cid:258)li zidentyfikujesz w(cid:200)skie gard(cid:239)a, b(cid:218)dziesz musia(cid:239) zrefaktoryzowa(cid:202) cz(cid:218)(cid:258)(cid:202) kodu, aby podnie(cid:258)(cid:202) ich wydajno(cid:258)(cid:202). Two- rzenie gier to proces iteracyjny — analizowanie i poprawianie istniej(cid:200)cego kodu jest równie cz(cid:218)ste co pisanie nowego. To, jak zaprojektujesz obiekty i gdzie b(cid:218)dziesz przechowywa(cid:239) ich dane, zale(cid:285)y od rodzaju gry. Pami(cid:218)taj jednak o tym, (cid:285)e je(cid:285)eli obiekt Game musi z tych danych korzysta(cid:202), b(cid:218)dziesz musia(cid:239) w ten czy inny sposób zapewni(cid:202) mu do nich dost(cid:218)p. To, czy dane b(cid:218)d(cid:200) przechowywane bezpo(cid:258)rednio w zmiennej czy w tablicy wewn(cid:200)trz obiektu Game lub wewn(cid:200)trz obiektu po(cid:258)redniego, do którego Game ma dost(cid:218)p (takiego jak obiekt Board w naszej grze), nie zmienia faktu, (cid:285)e je(cid:285)eli kod potrzebuje tych danych do podejmowania decyzji, b(cid:218)dzie musia(cid:239) mie(cid:202) dost(cid:218)p do stanu obiektu. Aby doda(cid:202) wsparcie dla przechowywania koloru i pozycji b(cid:200)belka na plan- szy, zmodyfikuj plik bubble.js zgodnie z poni(cid:285)szym: bubble.js row,col,type,sprite){ var BubbleShoot = window.BubbleShoot || {}; BubbleShoot.Bubble = (function($){ var Bubble = function( var that = this; this.getType = function(){ return type;}; this.getSprite = function(){ return sprite;}; this.getCol = function(){ return col;}; this.getRow = function(){ return row;}; }; Bubble.create = function( if(type === undefined){ rowNum,colNum,type){ 64 R o z d z i a (cid:239) 3 Poleć książkęKup książkę type = Math.floor(Math.random() * 4); }; var sprite = $(document.createElement( div )); sprite.addClass( bubble ); sprite.addClass( bubble_ + type); var bubble = new Bubble(rowNum,colNum,type,sprite); return bubble; }; return Bubble; })(jQuery); Obiekt Bubble, oprócz obiektu sprite, przyjmuje teraz koordynaty siatki i typ . Typ odnosi si(cid:218) do koloru okre(cid:258)lonego w pliku game.css. Metoda Bubble. , b(cid:200)belka (cid:180)create przyjmuje te same parametry jeden z czterech kolorów zostanie wybrany losowo — je(cid:285)eli typ nie zostanie przekazany Mamy teraz obiekt Board, mnóstwo b(cid:200)belków oraz ich typy i pozycje. Jednak wszystkie te informacje znajduj(cid:200) si(cid:218) w pami(cid:218)ci i s(cid:200) przechowywane w ramach w(cid:239)a(cid:258)ciwo(cid:258)ci rows obiektu Board. Teraz, korzystaj(cid:200)c z tych informacji, wyrende- rujemy poziom, dzi(cid:218)ki czemu gracze b(cid:218)d(cid:200) mogli zobaczy(cid:202) plansz(cid:218). . Renderowanie poziomu Rysowanie poziomu to idealne zadanie dla klasy ui, poniewa(cid:285) ui reprezentuje stan gry, ale na niego nie wp(cid:239)ywa. Odseparowanie kodu, który oblicza pozycj(cid:218) obiektu, od kodu, który renderuje obiekt na ekranie, jest zasad(cid:200), której powiniene(cid:258) przestrzega(cid:202) podczas pracy nad wszystkimi swoimi grami. Dzi(cid:218)ki temu nie tylko odseparujesz kod renderuj(cid:200)cy od logiki gry, poprawiaj(cid:200)c tym samym czytelno(cid:258)(cid:202), ale b(cid:218)dziesz móg(cid:239) równie(cid:285) (cid:239)atwiej zmienia(cid:202) sposób renderowania. Gdyby, na przyk(cid:239)ad, plansza naszej gry by(cid:239)a wi(cid:218)ksza i nie mie(cid:258)ci(cid:239)a si(cid:218) na ekranie, a my chcieliby(cid:258)my zaimplementowa(cid:202) funkcjonalno(cid:258)(cid:202) zbli(cid:285)ania i oddalania planszy, mogliby(cid:258)my zmieni(cid:202) kod rende- ruj(cid:200)cy tablic(cid:218) tak, aby przesuwa(cid:239) pozycje renderowania albo skalowa(cid:239) w gór(cid:218) czy w dó(cid:239) w celu uzyskania ró(cid:285)nych rozmiarów tablicy. Waga odseparowywania kodu renderowania od logiki stanie si(cid:218) oczywista, kiedy w rozdziale 6. przej- dziemy od sprite’ów tworzonych w oparciu o elementy DOM do korzystania z elementu canvas. Poniewa(cid:285) stworzenie obiektu bubble wi(cid:200)(cid:285)e si(cid:218) ze stworzeniem elementu DOM dla sprite’a, proces renderowania musi umie(cid:258)ci(cid:202) ten element w dokumencie i poprawnie ustawi(cid:202) jego pozycj(cid:218). Musimy wykona(cid:202) poni(cid:285)sze kroki: 1. W p(cid:218)tli przej(cid:258)(cid:202) po wszystkich rz(cid:218)dach i kolumnach i wyci(cid:200)gn(cid:200)(cid:202) ka(cid:285)dy z obiektów bubble. 2. Zapisa(cid:202) kod HTML b(cid:200)belka w drzewie DOM. 3. Ustawi(cid:202) b(cid:200)belek na odpowiedniej pozycji. Kod, który dodasz teraz, b(cid:218)dzie wykonywa(cid:239) te kroki. Otwórz ui.js, dodaj now(cid:200) metod(cid:218) (drawBoard) po metodzie fireBubble, a nast(cid:218)pnie na pocz(cid:200)tku pliku dodaj sta(cid:239)(cid:200) ROW_HEIGHT: L o g i k a g r y 65 Poleć książkęKup książkę ui.js var BubbleShoot = window.BubbleShoot || {}; BubbleShoot.ui = (function($){ var ui = { BUBBLE_DIMS : 44, ROW_HEIGHT : 40, init : function(){ }, fireBubble : function(bubble,coords,duration){ --ci(cid:266)cie-- }, drawBoard : function(board){ var rows = board.getRows(); var gameArea = $( #board ); for(var i=0;i rows.length;i++){ var row = rows[i]; for(var j=0;j row.length;j++){ var bubble = row[j]; if(bubble){ var sprite = bubble.getSprite(); gameArea.append(sprite); var left = j * ui.BUBBLE_DIMS/2; var top = i * ui.ROW_HEIGHT; sprite.css({ left : left, top : top }); }; }; }; } }; return ui; })(jQuery); . Je(cid:285)eli na aktualnej pozycji znajduje si(cid:218) b(cid:200)belek Metoda drawBoard pobiera rz(cid:218)dy i kolumny planszy i przechodzi po nich w p(cid:218)tli (pami(cid:218)taj, (cid:285)e ze wzgl(cid:218)du na sposób rozmieszczenia b(cid:200)belków na siatce co druga pozycja w tablicy ma warto(cid:258)(cid:202) null), drawBoard pobiera obiekt sprite i przed ustaleniem jego pozycji oblicza koordynaty , dodaje go na plansz(cid:218) . Aby okre(cid:258)li(cid:202) pozycj(cid:218) b(cid:200)belka, drawBoard najpierw oblicza koordynat(cid:218) left, poprzez przemno(cid:285)enie numeru kolumny b(cid:200)belka przez po(cid:239)ow(cid:218) jego szeroko(cid:258)ci. Aby obliczy(cid:202) koordynat(cid:218) top, u(cid:285)yjemy warto(cid:258)ci nieco mniejszej ni(cid:285) wysoko(cid:258)(cid:202) BUBBLE_DIMS. Rz(cid:218)dy parzyste i nieparzyste ustawione s(cid:200) naprzemiennie i chcemy, aby b(cid:200)belki wygl(cid:200)da(cid:239)y na dobrze dopasowane. W celu uzyskania efektu u(cid:239)o(cid:285)enia w warstwach separacja pionowa b(cid:218)dzie nieco mniejsza ni(cid:285) odleg(cid:239)o(cid:258)(cid:202) pozioma. Na pocz(cid:200)tku pliku ui.js sta(cid:239)a ROW_HEIGHT zosta(cid:239)a ustawiona na 40, czyli o 4 piksele mniej ni(cid:285) wysoko(cid:258)(cid:202). Warto(cid:258)(cid:202) ta zosta(cid:239)a dobrana metod(cid:200) prób i b(cid:239)(cid:218)dów, a nie za pomoc(cid:200) oblicze(cid:241) geometrycznych: modyfikuj warto(cid:258)ci, a(cid:285) plansza b(cid:218)dzie wygl(cid:200)- da(cid:239)a tak jak chcesz. 66 R o z d z i a (cid:239) 3 Poleć książkęKup książkę Prze(cid:239)aduj stron(cid:218) i kliknij przycisk Nowa gra — powiniene(cid:258) zobaczy(cid:202) wyren- derowan(cid:200) plansz(cid:218). Mo(cid:285)esz nawet wystrzeli(cid:202) b(cid:200)belek, aczkolwiek niestety przeleci on przez pozosta(cid:239)e b(cid:200)belki, nie zderzaj(cid:200)c si(cid:218) z (cid:285)adnym z nich, i wyleci poza ekran. Poniewa(cid:285) mamy tylko jeden b(cid:200)belek, to aby strzeli(cid:202) ponownie, musimy od(cid:258)wie- (cid:285)y(cid:202) stron(cid:218). Zanim zaczniemy prac(cid:218) nad wykrywaniem kolizji, upewnimy si(cid:218), czy mo(cid:285)emy strzela(cid:202) kolejnymi b(cid:200)belkami. Kolejka b(cid:200)belków Chocia(cid:285) gracz b(cid:218)dzie mia(cid:239) do dyspozycji tylko sko(cid:241)czon(cid:200) liczb(cid:218) b(cid:200)belków, gra musi zapewni(cid:202) kolejne b(cid:200)belki do wystrzelenia. Dlatego musimy doda(cid:202) funkcj(cid:218), która stworzy nowy b(cid:200)belek, doda go do drzewa DOM i ustawi go w kolejce zaraz po wystrzeleniu poprzedniego. W pliku game.js dodaj poni(cid:285)sze zmienne i funkcje oraz zmie(cid:241) inicjalizacj(cid:218) dla curBubble tak, aby wywo(cid:239)ywa(cid:239)a now(cid:200) funkcj(cid:218) getNextBubble: game.js var BubbleShoot = window.BubbleShoot || {}; BubbleShoot.Game = (function($){ var Game = function(){ var curBubble; var board; var numBubbles; var MAX_BUBBLES = 70; this.init = function(){ $( .but_start_game ).bind( click ,startGame); }; var startGame = function(){ $( .but_start_game ).unbind( click ); numBubbles = MAX_BUBBLES; BubbleShoot.ui.hideDialog(); curBubble = getNextBubble(); board = new BubbleShoot.Board(); BubbleShoot.ui.drawBoard(board); $( #game ).bind( click ,clickGameScreen); }; var getNextBubble = function(){ var bubble = BubbleShoot.Bubble.create(); bubble.getSprite().addClass( cur_bubble ); $( #board ).append(bubble.getSprite()); BubbleShoot.ui.drawBubblesRemaining(numBubbles); numBubbles--; return bubble; }; var clickGameScreen = function(e){ var angle = BubbleShoot.ui.getBubbleAngle(curBubble .getSprite(),e); var duration = 750; var distance = 1000; var distX = Math.sin(angle) * distance; var distY = Math.cos(angle) * distance; var bubbleCoords = BubbleShoot.ui.getBubbleCoords(curBubble .getSprite()); var coords = { x : bubbleCoords.left + distX, y : bubbleCoords.top - distY L o g i k a g r y 67 Poleć książkęKup książkę }; BubbleShoot.ui.fireBubble(curBubble,coords,duration); curBubble = getNextBubble(); }; return Game; })(jQuery); Nowy kod najpierw tworzy zmienn(cid:200) do przechowywania liczby wystrze- lonych przez u(cid:285)ytkownika b(cid:200)belków. Poniewa(cid:285) liczba wystrzelonych b(cid:200)belków jest liczb(cid:200) ca(cid:239)kowit(cid:200) (to podstawowy typ danych), przechowamy j(cid:200) jako zmienn(cid:200) klasy Game. Je(cid:285)eli na przyk(cid:239)ad mieliby(cid:258)my ograniczenie czasowe na uko(cid:241)czenie poziomu, to zamiast tworzy(cid:202) kolejne zmienne w klasie Game mogliby(cid:258)my stwo- rzy(cid:202) obiekt przechowuj(cid:200)cy pozosta(cid:239)y czas i liczb(cid:218) pozosta(cid:239)ych b(cid:200)belków. Aktu- alnie jednak zmienna dobrze odpowiada naszym potrzebom. W kodzie ustawiana jest równie(cid:285) sta(cid:239)a zawieraj(cid:200)ca maksymaln(cid:200) liczb(cid:218) dozwo- . Kiedy rozpoczyna si(cid:218) poziom, liczba pozosta(cid:239)ych b(cid:200)belków lonych b(cid:200)belków , a z pliku ui.js wywo(cid:239)ywana jest nowa ustawiana jest na warto(cid:258)(cid:202) MAX_BUBBLES funkcja, wy(cid:258)wietlaj(cid:200)ca na ekranie liczb(cid:218) pozosta(cid:239)ych b(cid:200)belków . I wreszcie, za ka(cid:285)dym razem, kiedy wystrzelony zostanie b(cid:200)belek, wywo(cid:239)ywana jest funkcja getNextBubble przygotowuj(cid:200)ca nast(cid:218)pny . Chcemy, aby gracz widzia(cid:239) liczb(cid:218) pozosta(cid:239)ych w zapasie b(cid:200)belków, dlatego w pliku ui.js, w ramach obiektu ui, stworzymy metod(cid:218) drawBubblesRemaining: ui.js var BubbleShoot = window.BubbleShoot || {}; BubbleShoot.ui = (function($){ var ui = { BUBBLE_DIMS : 44, ROW_HEIGHT : 40, --ci(cid:266)cie-- drawBoard : function(board){ --ci(cid:266)cie-- }, drawBubblesRemaining : function(numBubbles){ $( #bubbles_remaining ).text(numBubbles); } }; return ui; })(jQuery); Dodatkowo musimy wy(cid:258)wietli(cid:202) liczb(cid:218) pozosta(cid:239)ych b(cid:200)belków, dlatego dodamy nowy element w pliku index.html: index.html div id= game div id= board /div div id= bubbles_remaining /div /div W pliku main.css trzeba te(cid:285) doda(cid:202) style dla elementu bubbles_remaining: 68 R o z d z i a (cid:239) 3 Poleć książkęKup książkę main.css #bubbles_remaining { position: absolute; left: 479px; top: 520px; width: 50px; font-size: 26px; font-weight: bold; color: #000; text-align: center; } Teraz od(cid:258)wie(cid:285) gr(cid:218). Powiniene(cid:258) móc wystrzeliwa(cid:202) b(cid:200)belki, otrzymywa(cid:202) nowy b(cid:200)belek zaraz po wystrzeleniu poprzedniego (dopóki nie wykorzystasz 70 b(cid:200)belków lub innej liczby okre(cid:258)lonej w sta(cid:239)ej MAX_BUBBLES) i natychmiast go wystrzeliwa(cid:202). Zazwyczaj mo(cid:285)esz rozbi(cid:202) gr(cid:218) na powtarzaj(cid:200)ce si(cid:218) p(cid:218)tle tur. P(cid:218)tla jest prze- wa(cid:285)nie inicjowana przez dzia(cid:239)anie gracza i zamykana po zako(cid:241)czeniu tego dzia(cid:239)ania. W naszej grze p(cid:218)tla rozpoczyna si(cid:218), kiedy gracz kliknie b(cid:200)belek, aby go wystrzeli(cid:202), i ko(cid:241)czy si(cid:218), gdy kolejny b(cid:200)belek jest gotowy do wystrzelenia. W tym momencie mamy podstawow(cid:200) p(cid:218)tl(cid:218) tur, ale aby utworzy(cid:202) gr(cid:218), musimy dopracowa(cid:202) (cid:258)rodkow(cid:200) faz(cid:218) p(cid:218)tli i dzi(cid:218)ki temu móc okre(cid:258)la(cid:202), gdzie b(cid:200)belek powi- nien si(cid:218) zatrzyma(cid:202) i czy jakie(cid:258) b(cid:200)belki powinny p(cid:218)kn(cid:200)(cid:202). Wykrywanie kolizji Chocia(cid:285) mo(cid:285)esz ju(cid:285) strzela(cid:202) b(cid:200)belkami, przelatuj(cid:200) one przez ca(cid:239)(cid:200) plansz(cid:218) bez (cid:285)adnego wp(cid:239)ywu na ni(cid:200). Projekt gry wymaga, aby zderza(cid:239)y si(cid:218) z pozosta(cid:239)ymi b(cid:200)belkami, albo staj(cid:200)c si(cid:218) cz(cid:218)(cid:258)ci(cid:200) planszy, albo powoduj(cid:200)c p(cid:218)kni(cid:218)cie grup b(cid:200)bel- ków o tym samym kolorze. Kolejnym zadaniem jest wykrycie wyst(cid:200)pienia kolizji. Mo(cid:285)emy oblicza(cid:202) kolizj(cid:218) na dwa sposoby: (cid:132) Przesun(cid:200)(cid:202) sprite o kilka pikseli do przodu dla ka(cid:285)dej klatki i wtedy próbowa(cid:202) wykrywa(cid:202) nak(cid:239)adanie si(cid:218) na siebie sprite’ów. Je(cid:285)eli takie na(cid:239)o(cid:285)enie wyst(cid:200)pi, b(cid:218)dziemy wiedzie(cid:202), (cid:285)e trafili(cid:258)my w inny b(cid:200)belek. (cid:132) Jeszcze przed rozpocz(cid:218)ciem ruchu b(cid:200)belka wykorzysta(cid:202) geometri(cid:218) do obliczenia, w którym miejscu sprite mo(cid:285)e zderzy(cid:202) si(cid:218) z innym. W szybkich grach zr(cid:218)czno(cid:258)ciowych mo(cid:285)esz wybra(cid:202) pierwsz(cid:200) opcj(cid:218), pod warun- kiem (cid:285)e nie b(cid:218)dzie mo(cid:285)liwo(cid:258)ci, i(cid:285) obiekty przelec(cid:200) przez siebie bez wykrycia kolizji. Takie przenikanie mo(cid:285)e mie(cid:202) miejsce, kiedy obiekty poruszaj(cid:200) si(cid:218) z du(cid:285)(cid:200) szybko(cid:258)ci(cid:200), a wykrycie kolizji nast(cid:218)puje dopiero po przemieszczeniu obiektu o wiele pikseli od ostatniego sprawdzenia. Na przyk(cid:239)ad w grze, w której wystrze- liwujesz kul(cid:218) w (cid:258)cian(cid:218) o grubo(cid:258)ci 30 centymetrów, to, (cid:285)e kula zderzy si(cid:218) ze (cid:258)cian(cid:200), b(cid:218)dzie pewne tylko wówczas, je(cid:285)eli b(cid:218)dziesz sprawdza(cid:239) wyst(cid:200)pienie kolizji co 30 centymetrów. Je(cid:258)li zamiast tego b(cid:218)dziesz sprawdza(cid:239) kolizje co 60 centyme- trów, sprawdzenie mo(cid:285)e wypa(cid:258)(cid:202) tu(cid:285) przed (cid:258)cian(cid:200) i kolizja nie zostanie wykryta. L o g i k a g r y 69 Poleć książkęKup książkę Po 60 centymetrach, kiedy wykonane zostanie kolejne sprawdzenie, kula b(cid:218)dzie ju(cid:285) za (cid:258)cian(cid:200) i znowu kolizja nie wyst(cid:200)pi. Aby rozwi(cid:200)za(cid:202) problem szybko poruszaj(cid:200)cych si(cid:218) obiektów, mo(cid:285)emy zapew- ni(cid:202), aby kroki by(cid:239)y zawsze wystarczaj(cid:200)co ma(cid:239)e, by przenikni(cid:218)cie nigdy nie mia(cid:239)o miejsca, wymaga to jednak wi(cid:218)cej oblicze(cid:241), które mog(cid:200) okaza(cid:202) si(cid:218) niemo(cid:285)liwe bez znacznej mocy obliczeniowej. Wyst(cid:200)pienie tego problemu jest bardziej praw- dopodobne w (cid:258)rodowisku przegl(cid:200)darkowym: poniewa(cid:285) nie mo(cid:285)emy wiedzie(cid:202), z jakiego sprz(cid:218)tu korzysta u(cid:285)ytkownik, nie mo(cid:285)emy zak(cid:239)ada(cid:202) dost(cid:218)pno(cid:258)ci mocy obliczeniowej. Druga opcja — wykorzystanie geometrii — jest bardziej dok(cid:239)adna, je(cid:285)eli tylko jest mo(cid:285)liwa. Na szcz(cid:218)(cid:258)cie nasza gra ma stosunkowo proste w(cid:239)a(cid:258)ciwo(cid:258)ci geo- metryczne. Niestety ta opcja nie jest mo(cid:285)liwa w grach, w których sprite’y maj(cid:200) bardziej skomplikowane kszta(cid:239)ty. W takim przypadku b(cid:218)dziesz musia(cid:239) w poszcze- gólnych klatkach sprawdza(cid:202), czy sprite’y nachodz(cid:200) na siebie, i dok(cid:239)adnie przete- stowa(cid:202) gr(cid:218), aby si(cid:218) upewni(cid:202), (cid:285)e nie ma skutków ubocznych. Dla Bubble Shootera wykorzystamy podej(cid:258)cie geometryczne, poniewa(cid:285) gra ma nast(cid:218)puj(cid:200)ce w(cid:239)a(cid:258)ciwo(cid:258)ci: (cid:132) gra odbywa si(cid:218) na regularnej planszy; (cid:132) wszystkie obiekty (b(cid:200)belki) s(cid:200) identyczne; (cid:132) pracujemy tylko w dwóch wymiarach; (cid:132) gracz przemieszcza tylko jeden obiekt; (cid:132) wszystkie obiekty to proste kszta(cid:239)ty geometryczne (okr(cid:218)gi), dlatego obliczenie zetkni(cid:218)cia si(cid:218) kraw(cid:218)dzi jest proste. Te warunki powoduj(cid:200), (cid:285)e obliczenia kolizji s(cid:200) relatywnie proste. Poniewa(cid:285) tworzenie gier z regu(cid:239)y wi(cid:200)(cid:285)e si(cid:218) z wykorzystaniem geometrii, dobre podstawy z trygonometrii i wektorów s(cid:200) nieodzowne. W kolejnym podrozdziale omówi(cid:218) obliczenia geometryczne wykorzystywane w grze. Potem przekszta(cid:239)cimy teori(cid:218) w kod. Geometria kolizji Kiedy musisz obliczy(cid:202) kolizje, przed napisaniem kodu wykrywaj(cid:200)cego rozrysuj potrzebne obliczenia na kartce. B(cid:218)dziesz móg(cid:239) wtedy zwizualizowa(cid:202) warto(cid:258)ci potrzebne do oblicze(cid:241) (zobacz rysunek 3.3). Wystrzelony b(cid:200)belek powinien spowodowa(cid:202) kolizj(cid:218), kiedy jego (cid:258)rodek minie punkt znajduj(cid:200)cy si(cid:218) w odleg(cid:239)o(cid:258)ci 2R (gdzie R to promie(cid:241) b(cid:200)belka) od (cid:258)rodka innego b(cid:200)belka. B(cid:218)dzie to oznacza(cid:202), (cid:285)e dwa obwody si(cid:218) stykaj(cid:200). Poniewa(cid:285) punkt styku zawsze b(cid:218)dzie pod k(cid:200)tem 90 stopni do kraw(cid:218)dzi b(cid:200)belka, z którym nast(cid:200)- pi(cid:239)a kolizja, musimy sprawdza(cid:202) kolizje tylko wówczas, je(cid:285)eli (cid:258)cie(cid:285)ka (cid:258)rodka poru- szaj(cid:200)cego si(cid:218) b(cid:200)belka znajdzie si(cid:218) w odleg(cid:239)o(cid:258)ci 2R od (cid:258)rodka innego b(cid:200)belka. Aby okre(cid:258)li(cid:202), gdzie wyst(cid:200)pi kolizja, musimy sprawdzi(cid:202) ka(cid:285)dy b(cid:200)belek na plan- szy i ustali(cid:202), czy przechodzi przeze(cid:241) (cid:258)cie(cid:285)ka wystrzelonego b(cid:200)belka. Je(cid:285)eli (cid:258)cie(cid:285)ka koliduje z wieloma b(cid:200)belkami, jak na rysunku 3.4, musimy si(cid:218) upewni(cid:202), (cid:285)e wybie- rzemy b(cid:200)belek, który spowoduje pierwsz(cid:200) kolizj(cid:218), czyli ten, do którego b(cid:200)belek wystrzelony ma najkrótsz(cid:200) drog(cid:218). 70 R o z d z i a (cid:239) 3 Poleć książkęKup książkę Rysunek 3.3. Wizualizacja geometrii potrzebnej do obliczenia kolizji b(cid:200)belków Rysunek 3.4. Wystrzelony b(cid:200)belek mo(cid:285)e by(cid:202) na torze kolizyjnym z wieloma b(cid:200)belkami Wykrycie kolizji jest równoznaczne z wykryciem, kiedy wektor narysowany ze (cid:258)rodka wystrzeliwanego b(cid:200)belka przetnie si(cid:218) z ko(cid:239)em o promieniu dwukrot- nie wi(cid:218)kszym od promienia b(cid:200)belków. B(cid:218)dziemy to nazywa(cid:202) obszarem trafienia. Rysunek 3.5 przedstawia inny sposób na narysowanie tej koncepcji, dzi(cid:218)ki któ- remu b(cid:218)dziemy mogli (cid:239)atwiej o tym my(cid:258)le(cid:202). L o g i k a g r y 71 Poleć książkęKup książkę Rysunek 3.5. Kolizja nast(cid:218)puje, je(cid:285)eli (cid:258)cie(cid:285)ka przemieszczania si(cid:218) wystrzelonego b(cid:200)belka przetnie si(cid:218) z okr(cid:200)g(cid:239)ym obszarem trafienia b(cid:200)belka stacjonarnego Na tym schemacie ma(cid:239)e wype(cid:239)nione kó(cid:239)ko oznacza (cid:258)rodek wystrzeliwanego b(cid:200)belka. B(cid:200)belek, z którym nast(cid:200)pi kolizja, to wewn(cid:218)trzny okr(cid:200)g, a przeci(cid:218)cie z obszarem trafienia (punkt oznaczony strza(cid:239)k(cid:200) 2R, która jest dwukrotnym pro- mieniem b(cid:200)belka) to miejsce zatrzymania si(cid:218) wystrzelonego b(cid:200)belka. Zmienienie schematu we wzór matematyczny wi(cid:200)(cid:285)e si(cid:218) z wykorzystaniem wektorów. Zamiast omawia(cid:202) matematyk(cid:218) przed programowaniem, przejd(cid:283)my bezpo(cid:258)rednio do potrzebnego kodu JavaScriptu wraz z adnotacjami. UPRASZCZANIE OBSZARÓW TRAFIENIA Poniewa(cid:285) pracujemy z okr(cid:218)gami, stworzenie obszaru trafienia jest (cid:239)atwiejsze, ni(cid:285) gdyby(cid:258)my, na przyk(cid:239)ad, animowali biegaj(cid:200)c(cid:200) i skacz(cid:200)c(cid:200) posta(cid:202), jak w grze platformowej. W takim przypadku mo(cid:285)esz nie chcie(cid:202) wykrywa(cid:202) kolizji na pod- stawie nachodz(cid:200)cych na siebie pikseli ze wzgl(cid:218)du na mo(cid:285)liwe problemy wydaj- no(cid:258)ciowe; zamiast tego móg(cid:239)by(cid:258) upro(cid:258)ci(cid:202) geometri(cid:218) g(cid:239)ównego bohatera i stwo- rzy(cid:202) prostok(cid:200)tny obszar trafienia. Nie wszystkie gry mog(cid:200) skorzysta(cid:202) z tego rozwi(cid:200)zania. Je(cid:285)eli jednak b(cid:218)dziesz w stanie zredukowa(cid:202) skomplikowany kszta(cid:239)t do pojedynczych figur geometrycznych, b(cid:218)dziesz móg(cid:239) bardziej precy- zyjnie wykrywa(cid:202) kolizje, a proces ten b(cid:218)dzie wymaga(cid:239) mniejszej mocy obli- czeniowej ni(cid:285) w przypadku sprawdzania, czy piksele si(cid:218) nak(cid:239)adaj(cid:200). Zawsze szukaj kreatywnych, wydajnych rozwi(cid:200)za(cid:241), które pozwol(cid:200) unikn(cid:200)(cid:202) korzystania z brutalnych, zasobo(cid:285)ernych technik. Obliczenia to du(cid:285)y blok kodu o konkretnym zadaniu, dlatego umie(cid:258)cimy go w osobnym pliku. Stwórz plik o nazwie collision-detector.js i dodaj go do wywo(cid:239)a- nia Modernizr.load w pliku index.html. Zapisz w nim poni(cid:285)szy kod: collision -detector.js var BubbleShoot = window.BubbleShoot || {}; BubbleShoot.CollisionDetector = (function($){ var CollisionDetector = { findIntersection : function(curBubble,board,angle){ var rows = board.getRows(); var collision = null; var pos = curBubble.getSprite().position(); 72 R o z d z i a (cid:239) 3 Poleć książkęKup książkę var start = { left : pos.left + BubbleShoot.ui.BUBBLE_DIMS/2, top : pos.top + BubbleShoot.ui.BUBBLE_DIMS/2 }; var dx = Math.sin(angle); var dy = -Math.cos(angle); for(var i=0;i rows.length;i++){ var row = rows[i]; for(var j=0;j row.length;j++){ var bubble = row[j]; if(bubble){ var coords = bubble.getCoords(); var distToBubble = { x : start.left - coords.left, y : start.top - coords.top }; var t = dx * distToBubble.x + dy * distToBubble.y; var ex = -t * dx + start.left; var ey = -t * dy + start.top; var distEC = Math.sqrt((ex - coords.left) * (ex - coords.left) + (ey - coords.top) * (ey - coords.top)); if(distEC BubbleShoot.ui.BUBBLE_DIMS * .75){ var dt = Math.sqrt(BubbleShoot.ui.BUBBLE_DIMS * BubbleShoot. ui.BUBBLE_DIMS - distEC * distEC); var offset1 = { x : (t - dt) * dx, y : -(t - dt) * dy }; var offset2 = { x : (t + dt) * dx, y : -(t + dt) * dy }; var distToCollision1 = Math.sqrt(offset1.x * offset1.x + offset1.y * offset1.y); var distToCollision2 = Math.sqrt(offset2.x * offset2.x + offset2.y * offset2.y); if(distToCollision1 distToCollision2){ var distToCollision = distToCollision1; var dest = { x : offset1.x + start.left, y : offset1.y + start.top }; }else{ var distToCollision = distToCollision2; var dest = { x : -offset2.x + start.left, y : offset2.y + start.top }; } if(!collision || collision.distToCollision distToCollision){ collision = { bubble : bubble, distToCollision : distToCollision, coords : dest }; }; }; L o g i k a g r y 73 Poleć książkęKup książkę }; }; }; return collision; } }; return CollisionDetector; })(jQuery); Za chwil(cid:218) omówimy kod w pliku collision-detector.js. Najpierw jednak zwró(cid:202) uwag(cid:218) na wywo(cid:239)anie z pliku bubble.js nowej metody getCoords , która zwraca koordynaty (x, y) (cid:258)rodka b(cid:200)belka obliczone na podstawie jego pozycji w rz(cid:218)dzie i kolumnie. B(cid:218)dziesz musia(cid:239) zmodyfikowa(cid:202) klas(cid:218) b(cid:200)belka i doda(cid:202) now(cid:200) metod(cid:218): bubble.js var BubbleShoot = window.BubbleShoot || {}; BubbleShoot.Bubble = (function($){ var Bubble = function(row,col,type,sprite){ var that = this; this.getType = function(){ return type;}; this.getSprite = function(){ return sprite;}; this.getCol = function(){ return col;}; this.getRow = function(){ return row;}; this.getCoords = function(){ var coords = { left : top : }; return coords; } }; Bubble.create = function(rowNum,colNum,type){ --ci(cid:266)cie-- }; return Bubble; })(jQuery); BubbleShoot.ui.BUBBLE_DIMS/2, BubbleShoot.ui.BUBBLE_DIMS/2 that.getRow() * BubbleShoot.ui.ROW_HEIGHT + that.getCol() * BubbleShoot.ui.BUBBLE_DIMS/2 + pomno(cid:285)ony przez wysoko(cid:258)(cid:202) rz(cid:218)du pomno(cid:285)ona przez po(cid:239)ow(cid:218) szeroko(cid:258)ci sprite’a b(cid:200)belka Koordynaty b(cid:200)belka s(cid:200) (cid:239)atwe do obliczenia: zaczynasz od znalezienia poszcze- gólnych koordynat punktu w lewym górnym rogu. Koordynata x (od lewej) to liczba kolumny . Koor- dynata y (od góry) to numer rz(cid:218)du , co stanowi warto(cid:258)(cid:202) nieznacznie mniejsz(cid:200) ni(cid:285) wysoko(cid:258)(cid:202) sprite’a b(cid:200)belka. Aby znale(cid:283)(cid:202) (cid:258)rodek b(cid:200)belka, do obu koordynat wystarczy doda(cid:202) po(cid:239)ow(cid:218) wymiarów b(cid:200)belka . Podczas opracowywania logiki gry najcz(cid:218)(cid:258)ciej skupia(cid:202) si(cid:218) b(cid:218)dziesz na koor- dynatach (cid:258)rodka obiektu, natomiast do celów renderowania podawane s(cid:200) koordy- naty lewego górnego rogu obiektu oraz jego szeroko(cid:258)(cid:202) i wysoko(cid:258)(cid:202). Wbudowanie w obiekcie wygodnej metody konwertuj(cid:200)cej z koordynat (cid:258)rodka na koordynaty lewego górnego rogu zaoszcz(cid:218)dzi Ci konieczno(cid:258)ci pisania oblicze(cid:241) za ka(cid:285)dym razem, kiedy zechcesz zmieni(cid:202) koordynaty. 74 R o z d z i a (cid:239) 3 Poleć książkęKup książkę Logika wykrywania kolizji Omówmy teraz ca(cid:239)(cid:200) metod(cid:218) findIntersection z pliku collision-detector.js. Je(cid:285)eli nie chcesz teraz zag(cid:239)(cid:218)bia(cid:202) si(cid:218) w obliczenia matematyczne, mo(cid:285)esz pomin(cid:200)(cid:202) t(cid:218) cz(cid:218)(cid:258)(cid:202) — omówi(cid:218) tu wy(cid:239)(cid:200)cznie matematyk(cid:218) pozwalaj(cid:200)c(cid:200) obliczy(cid:202) kolizje i nie b(cid:218)d(cid:218) przedstawia(cid:239) (cid:285)adnych nowych koncepcji z dziedziny HTML5 ani tworze- nia gier. Wiedz jednak, (cid:285)e w prawie ka(cid:285)dej grze, jak(cid:200) b(cid:218)dziesz tworzy(cid:239), b(cid:218)dziesz musia(cid:239) rozbija(cid:202) z(cid:239)o(cid:285)one interakcje mi(cid:218)dzy obiektami w modelu, w którym b(cid:218)dziesz móg(cid:239) nimi operowa(cid:202) za pomoc(cid:200) relatywnie prostej matematyki. Pozycja pocz(cid:200)tkowa i wektor kierunku Pierwsz(cid:200) cz(cid:218)(cid:258)ci(cid:200) pliku collision-detector.js jest standardowy pocz(cid:200)tek biblioteki: var BubbleShoot = window.BubbleShoot || {}; BubbleShoot.CollisionDetector = (function($){ var CollisionDetector = { Stworzyli(cid:258)my obiekt o nazwie CollisionDetector. Spójrzmy teraz na pierw- sz(cid:200) metod(cid:218) tego obiektu: findIntersection : function(curBubble,board,angle){ Podczas wywo(cid:239)ywania CollisionDetector b(cid:218)dziesz korzysta(cid:239) z BubbleShoot. (cid:180)CollisionDetector.findIntersection. Metoda ta przyjmuje parametry curBubble (instancj(cid:218) klasy Bubble), zmienn(cid:200) board (instancj(cid:218) klasy Board) i k(cid:200)t, pod którym wystrzeliwany jest b(cid:200)belek — s(cid:200) to wystarczaj(cid:200)ce informacje o sytuacji pocz(cid:200)t- kowej. Przyjrzyjmy si(cid:218) pierwszym zmiennym wewn(cid:200)trz funkcji findIntersection: var rows = board.getRows(); var collision = null; B(cid:218)dziemy przechodzi(cid:202) w p(cid:218)tli po ka(cid:285)dym z rz(cid:218)dów i sprawdza(cid:202) kolizj(cid:218), dlatego do zmiennej lokalnej zapisujemy rz(cid:218)dy planszy. Zak(cid:239)adaj(cid:200)c, (cid:285)e
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

HTML5. Tworzenie gier z wykorzystaniem CSS i JavaScript
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ą: