HTML5_Tworzenie_gier_z_wykorzystaniem_CSS_i_JavaScript_htcsjs.pdf

(997 KB) Pobierz
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 ci
PRZEDMOWA ............................................................................................. 9
Podzi kowania .............................................................................................................................. 10
WPROWADZENIE ..................................................................................... 11
Po co budowa gry w HTML5? ..................................................................................................... 12
Wykorzystanie posiadanych umiej tno ci ................................................................................. 12
Tworzenie dla wielu systemów ................................................................................................ 12
Szybko rosn ca platforma ......................................................................................................... 13
O ksi ce ....................................................................................................................................... 13
Dla kogo jest ta ksi ka? ........................................................................................................... 13
Zawarto ksi ki ..................................................................................................................... 14
Zakres ksi ki ........................................................................................................................... 15
Jak korzysta z tej ksi ki? ......................................................................................................... 16
Cz
I. Tworzenie gry z wykorzystaniem HTML,
CSS i JavaScriptu
1
PRZYGOTOWANIE I KONFIGURACJA ...................................................... 19
Zasady gry ..................................................................................................................................... 20
Budowa gry ................................................................................................................................... 23
rodowisko programistyczne i testowe ........................................................................................ 23
Kup książkę
Poleć książkę
Testowanie w przegl darce ......................................................................................................24
Debugowanie w przegl darce ...................................................................................................25
Rozmieszczanie ekranu gry ...........................................................................................................26
Tworzenie paneli za pomoc HTML i CSS ...............................................................................27
Struktura kodu ..........................................................................................................................29
Dodanie pierwszych skryptów ......................................................................................................31
Biblioteki Modernizr i jQuery ....................................................................................................31
Dodanie biblioteki Modernizr ...................................................................................................33
adowanie skryptów za pomoc Modernizr .............................................................................34
Modularny JavaScript .................................................................................................................37
Interfejs u ytkownika i skrypty wy wietlaj ce ...........................................................................42
Podsumowanie ..............................................................................................................................44
Dalsze wiczenia ...........................................................................................................................44
2
ANIMACJA SPRITE’ÓW Z U 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 ta i kierunku .........................................................................................................52
Wystrzeliwanie i celowanie b belkami ......................................................................................55
Podsumowanie ..............................................................................................................................58
Dalsze wiczenia ...........................................................................................................................58
3
LOGIKA GRY ............................................................................................ 59
Rysowanie planszy gry ...................................................................................................................61
Renderowanie poziomu ............................................................................................................65
Kolejka b belków ......................................................................................................................67
Wykrywanie kolizji ........................................................................................................................69
Geometria kolizji .......................................................................................................................70
Logika wykrywania kolizji ..........................................................................................................75
Reagowanie na kolizje ....................................................................................................................80
Dodanie obiektu b belka do planszy .........................................................................................81
Ustawianie obiektu b belka na siatce ........................................................................................83
Podsumowanie ..............................................................................................................................84
Dalsze wiczenia ...........................................................................................................................84
4
PRZE O ENIE NA EKRAN ZMIAN W STANIE GRY ................................. 85
Obliczanie grup ..............................................................................................................................86
Pobieranie b belków .................................................................................................................86
Tworzenie grup o jednakowym kolorze ...................................................................................87
P kanie b belków ..........................................................................................................................90
Usuwanie grup b belków za pomoc JavaScriptu .....................................................................90
Animacja p kania za pomoc CSS .............................................................................................92
4
Spis tre ci
Kup książkę
Poleć książkę
Grupy osierocone ......................................................................................................................... 94
Identyfikacja osieroconych b belków ....................................................................................... 94
Usuwanie osieroconych b belków ........................................................................................... 99
Tworzenie eksplozji b belków za pomoc wtyczki jQuery ........................................................ 101
Podsumowanie ............................................................................................................................ 106
Dalsze wiczenia ......................................................................................................................... 106
Cz
II. Ulepszanie gry za pomoc HTML5 i kanwy
5
PRZEJ CIA I TRANSFORMACJE CSS ....................................................... 109
Zalety CSS ................................................................................................................................... 109
Podstawowe przej cia CSS ......................................................................................................... 110
Jak stworzy przej cie? ........................................................................................................... 110
Przyciski zmieniaj ce kolor ..................................................................................................... 112
Podstawowe transformacje CSS ................................................................................................. 114
Jak stworzy transformacj ? ................................................................................................... 115
Skalowanie przycisku .............................................................................................................. 115
Przej cia CSS zamiast animacji jQuery ........................................................................................ 116
Wady przej CSS ....................................................................................................................... 119
Podsumowanie ............................................................................................................................ 120
Dalsze wiczenia ......................................................................................................................... 120
6
RENDEROWANIE SPRITE’ÓW ZA POMOC
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 wiczenia ......................................................................................................................... 152
7
POZIOMY, D WI K I NIE TYLKO ........................................................... 153
Wiele poziomów i wyniki ............................................................................................................ 153
Zmienne stanu nowej gry ....................................................................................................... 154
Wy wietlenie poziomu i wyniku ............................................................................................. 155
Spis tre ci
5
Kup książkę
Poleć książkę

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin