Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00252 006259 13652700 na godz. na dobę w sumie
jQuery. Niezbędnik programisty gier - książka
jQuery. Niezbędnik programisty gier - książka
Autor: Liczba stron: 224
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-8608-7 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> jquery - programowanie
Porównaj ceny (książka, ebook, audiobook).

Tworzenie gier nie musi być trudne!

JavaScript jeszcze nigdy w historii nie był tak popularny. Jego możliwości w połączeniu ze współczesnymi przeglądarkami są oszałamiające. Nikogo nie dziwią już aplikacje, które swoją użytecznością przewyższają tradycyjne desktopowe odpowiedniki. Teraz przyszła kolej na gry. Czy wkrótce i one podbiją rynek?

Dzięki bibliotece jQuery korzystanie z potencjału JavaScriptu stało się zdecydowanie łatwiejsze. Fakt ten sprawił, że zyskała ona ogromną popularność i jest ceniona w środowisku programistów. W trakcie lektury tej książki odkryjesz, jak dzięki jQuery sprawnie stworzyć wciągającą grę.

Naucz się tworzyć gry oparte na sprite...ach, wspierające tryb multiplayer oraz zintegrowane z sieciami społecznościowymi. Dowiedz się, jak wykrywać kolizje, tworzyć rzuty izometryczne oraz projektować gry mobilne. Już za chwilę będziesz w stanie stworzyć swoją własną platformówkę, a może nawet prostą grę RPG. Sięgnij po tę książkę i przekonaj się, że to nie takie trudne!

Dzięki tej książce:

Masz pomysł na grę? Zrealizuj go z jQuery!

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

Darmowy fragment publikacji:

Tytuł oryginału: jQuery Game Development Essentials Tłumaczenie: Aleksander Lamża ISBN: 978-83-246-8608-7 Copyright © Packt Publishing 2013. First published in the English language under the title ‘jQuery Game Development Essentials’. Polish edition copyright © 2014 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/jqunpg 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(cid:258)ci 9 10 11 11 12 12 13 14 15 15 17 19 21 21 23 23 25 26 26 27 37 39 42 45 O autorze O recenzencie Wst(cid:218)p Co znajdziesz w ksi(cid:200)(cid:285)ce Co b(cid:218)dzie Ci potrzebne Dla kogo jest ta ksi(cid:200)(cid:285)ka Przyj(cid:218)te konwencje Kod przyk(cid:239)adów Rozdzia(cid:239) 1. jQuery w grach Jak u(cid:285)ywa(cid:202) biblioteki jQuery Przesuwanie elementów Obs(cid:239)uga zdarze(cid:241) Wi(cid:200)zanie danych z elementami DOM Manipulowanie struktur(cid:200) DOM Ciekawo(cid:258)(cid:202) to pierwszy stopie(cid:241) do… Podsumowanie Rozdzia(cid:239) 2. Tworzymy pierwsz(cid:200) gr(cid:218) Jak pracowa(cid:202) z ksi(cid:200)(cid:285)k(cid:200) Przejd(cid:283)my do konkretów — gra Zaczynamy od podstaw Inicjalizowanie gry G(cid:239)ówna p(cid:218)tla gry Wykrywanie kolizji Podsumowanie Kup książkęPoleć książkę Spis tre(cid:286)ci Rozdzia(cid:239) 3. Lepiej i szybciej, ale niekoniecznie trudniej Interwa(cid:239)y i odmierzanie czasu Odpytywanie klawiatury Fragmenty HTML Unikanie przebudowywania struktury DOM Przemieszczanie sprite’ów za pomoc(cid:200) przekszta(cid:239)ce(cid:241) CSS Zastosowanie requestAnimationFrame zamiast interwa(cid:239)ów Podsumowanie Rozdzia(cid:239) 4. Wskakujemy na g(cid:239)(cid:218)bsz(cid:200) wod(cid:218) Od(cid:239)(cid:200)czane elementy div Grupy Przekszta(cid:239)cenia sprite’ów Mapy kafelków Wykrywanie kolizji Piszemy kod gry Podsumowanie Rozdzia(cid:239) 5. Zmieniamy perspektyw(cid:218) Optymalizowanie mapy kafelków dla gier z perspektyw(cid:200) mapy Sortowanie przes(cid:239)aniania Wykrywanie kolizji Kompletna gra Izometryczne kafelki Podsumowanie Rozdzia(cid:239) 6. Dodajemy kolejne poziomy Implementowanie gry z(cid:239)o(cid:285)onej z wielu plików Modyfikujemy gr(cid:218) platformow(cid:200) Podsumowanie Rozdzia(cid:239) 7. Tworzymy gr(cid:218) typu multiplayer World of Ar’PiGi Zarz(cid:200)dzanie kontem gracza Synchronizacja graczy Sterowanie przeciwnikami Podsumowanie Rozdzia(cid:239) 8. Wkraczamy w sieci spo(cid:239)eczno(cid:258)ciowe Tworzenie prostej tablicy wyników Mechanizmy utrudniaj(cid:200)ce oszukiwanie Integracja z Twitterem Integracja z Facebookiem Podsumowanie 6 47 48 53 55 56 57 58 59 61 61 63 64 68 71 75 85 87 88 94 96 103 104 105 107 108 117 121 123 124 124 132 137 141 143 144 149 156 164 171 Kup książkęPoleć książkę Spis tre(cid:286)ci Rozdzia(cid:239) 9. Tworzymy gr(cid:218) mobiln(cid:200) Jak sprawi(cid:202), by gra dobrze dzia(cid:239)a(cid:239)a na urz(cid:200)dzeniach mobilnych? Sterowanie dotykiem Integracja gry z ekranem domowym Korzystanie z informacji o orientacji urz(cid:200)dzenia Korzystanie z trybu offline Lokalne sk(cid:239)adowanie danych Podsumowanie Rozdzia(cid:239) 10. Ujarzmiamy d(cid:283)wi(cid:218)k Abstrakcyjna biblioteka obs(cid:239)ugi d(cid:283)wi(cid:218)ku Osadzanie d(cid:283)wi(cid:218)ku Element audio Web Audio API Zastosowanie Flasha Generowanie efektów d(cid:283)wi(cid:218)kowych Podsumowanie Skorowidz 173 174 180 188 191 192 193 193 195 196 198 200 204 211 214 214 215 7 Kup książkęPoleć książkę Spis tre(cid:286)ci 8 Kup książkęPoleć książkę 8 Wkraczamy w sieci spo(cid:239)eczno(cid:258)ciowe Ju(cid:285) w najwcze(cid:258)niejszych grach wideo by(cid:239)o stosowane pewne rozwi(cid:200)zanie zapewniaj(cid:200)ce nies(cid:239)ab- n(cid:200)ce zainteresowanie graczy. Chodzi o tablic(cid:218) wyników. Dzi(cid:218)ki niej gracz stara si(cid:218) osi(cid:200)gn(cid:200)(cid:202) za ka(cid:285)dym razem lepszy rezultat — od swojego poprzedniego wyniku, osi(cid:200)gni(cid:218)(cid:202) przyjació(cid:239) czy innych graczy z ca(cid:239)ego (cid:258)wiata. Sieci spo(cid:239)eczno(cid:258)ciowe nada(cid:239)y nowy wymiar temu prostemu pomys(cid:239)owi, poniewa(cid:285) osi(cid:200)gni(cid:218)ty rezultat mo(cid:285)na opublikowa(cid:202) na osi czasu albo w tweecie. Ma to wiele zalet, a jedn(cid:200) z nich jest z ca(cid:239)(cid:200) pewno(cid:258)ci(cid:200) to, (cid:285)e je(cid:285)eli kto(cid:258) zamie(cid:258)ci swój wynik, jego znajomi z du(cid:285)ym prawdopodo- bie(cid:241)stwem b(cid:218)d(cid:200) równie(cid:285) chcieli zagra(cid:202) w t(cid:218) gr(cid:218) (i osi(cid:200)gn(cid:200)(cid:202) lepszy rezultat!). W tym rozdziale prac(cid:218) rozpoczniemy od przygotowania skryptu tablicy wyników dzia(cid:239)aj(cid:200)cego po stronie serwera. Zastosujemy tu techniki znane z poprzedniego rozdzia(cid:239)u. Nast(cid:218)pnie zaj- miemy si(cid:218) umo(cid:285)liwieniem zalogowania si(cid:218) do gry za pomoc(cid:200) konta na Twitterze oraz umiesz- czaniem tweetów z wynikami. Ostatnia cz(cid:218)(cid:258)(cid:202) rozdzia(cid:239)u jest po(cid:258)wi(cid:218)cona integracji gry z Facebookiem, publikowaniu wydarze(cid:241) na osi czasu u(cid:285)ytkownika oraz tworzeniu osi(cid:200)gni(cid:218)(cid:202). Podczas korzystania z serwisów takich jak Facebook czy Twitter trzeba zwraca(cid:202) szczególn(cid:200) uwag(cid:218), by post(cid:218)powa(cid:202) zgodnie z ustalonymi tam zasadami oraz na bie(cid:285)(cid:200)co (cid:258)ledzi(cid:202) wszelkie aktualizacje, dzi(cid:218)ki czemu gra b(cid:218)dzie zawsze poprawnie funkcjonowa(cid:239)a. Aplikacje i gry, które nie spe(cid:239)niaj(cid:200) wymaga(cid:241), s(cid:200) zazwyczaj blokowane. Dowiesz si(cid:218), jak korzysta(cid:202) z tych dwóch konkretnych sieci spo(cid:239)eczno(cid:258)ciowych, ale musisz wiedzie(cid:202), (cid:285)e mechanizm stoj(cid:200)cy za wi(cid:218)kszo(cid:258)ci(cid:200) innych tego typu serwisów jest podobny. Kup książkęPoleć książkę jQuery. Niezb(cid:266)dnik programisty gier W tym rozdziale zostan(cid:200) omówione nast(cid:218)puj(cid:200)ce zagadnienia: (cid:81) tworzenie prostej tablicy wyników, (cid:81) wprowadzanie mechanizmów utrudniaj(cid:200)cych oszukiwanie, (cid:81) integracja gry z Twitterem umo(cid:285)liwiaj(cid:200)ca publikowanie wyników, (cid:81) integracja gry z Facebookiem pozwalaj(cid:200)ca na zdobywanie osi(cid:200)gni(cid:218)(cid:202). Tworzenie prostej tablicy wyników Jak si(cid:218) mo(cid:285)na domy(cid:258)li(cid:202), utworzenie tablicy wyników b(cid:218)dzie wymaga(cid:239)o bazy danych, w której b(cid:218)dzie przechowywana punktacja. Podobnie jak w poprzednim rozdziale, do implementacji gry po stronie serwera u(cid:285)yjemy j(cid:218)zyka PHP i bazy danych MySQL. Jednak w przeciwie(cid:241)- stwie do problemu omówionego w poprzednim rozdziale, realizacja tablicy wyników dla wielu graczy jest o wiele prostsza. Wynika to st(cid:200)d, (cid:285)e nie wymaga zbyt wielu zasobów serwera, a operacje na bazie danych nie s(cid:200) wykonywane zbyt cz(cid:218)sto. Mo(cid:285)na za(cid:239)o(cid:285)y(cid:202), (cid:285)e dla ka(cid:285)dego gracza (cid:285)(cid:200)danie b(cid:218)dzie zg(cid:239)aszane co mniej wi(cid:218)cej 10 sekund, a nie — jak w przypadku gry MMORPG z poprzedniego rozdzia(cid:239)u — kilka razy w ci(cid:200)gu sekundy. Przede wszystkim musimy ustali(cid:202), co b(cid:218)dzie pe(cid:239)ni(cid:239)o funkcj(cid:218) punktacji w grze. Zastosujemy najprostsze rozwi(cid:200)zanie, czyli zdecydujemy si(cid:218) na czas (wyra(cid:285)ony w sekundach), w którym gracz przeszed(cid:239) plansz(cid:218). Poni(cid:285)szy diagram ilustruje algorytm implementowanego mechanizmu: Na potrzeby interfejsu u(cid:285)ytkownika b(cid:218)dziemy musieli utworzy(cid:202) dwa ekrany. Post(cid:200)pimy tak samo jak w poprzednim rozdziale, czyli u(cid:285)yjemy elementów div, które b(cid:218)dziemy wy(cid:258)wietla(cid:202) lub ukrywa(cid:202). 144 Kup książkęPoleć książkę Rozdzia(cid:225) 8. • Wkraczamy w sieci spo(cid:225)eczno(cid:286)ciowe Pierwszy ekran s(cid:239)u(cid:285)y do poinformowania o rozpocz(cid:218)ciu poziomu i daje graczowi czas na przygotowanie si(cid:218). Drugi ekran jest troch(cid:218) bardziej z(cid:239)o(cid:285)ony. Wy(cid:258)wietlane s(cid:200) na nim: uzyskany wynik, lista pi(cid:218)ciu najlepszych graczy oraz, je(cid:258)li aktualny wynik gracza kwalifikuje si(cid:218) do listy najlepszych, pole umo(cid:285)liwiaj(cid:200)ce wpisanie si(cid:218) na ni(cid:200). Przyk(cid:239)adowy wygl(cid:200)d tego ekranu zosta(cid:239) przedstawiony poni(cid:285)ej: Zdecydowali(cid:258)my si(cid:218) na takie rozwi(cid:200)zanie — pytanie o nazw(cid:218) u(cid:285)ytkownika nie na pocz(cid:200)tku gry, ale dopiero po uzyskaniu wystarczaj(cid:200)cej liczby punktów — by odtworzy(cid:202) zachowanie kla- sycznych gier. Podsumowuj(cid:200)c, serwer musi obs(cid:239)u(cid:285)y(cid:202) dwie dodatkowe operacje: (cid:81) pobranie pi(cid:218)ciu najlepszych wyników dla danego poziomu, (cid:81) zapisanie punktacji dla danego poziomu. Zaimplementujemy je w osobnych plikach: highscore.php oraz save.php. Zapisywanie wyników Tabela w bazie danych musi si(cid:218) sk(cid:239)ada(cid:202) z trzech kolumn: (cid:81) level — liczba ca(cid:239)kowita okre(cid:258)laj(cid:200)ca numer poziomu gry, (cid:81) name — (cid:239)a(cid:241)cuch znaków przechowuj(cid:200)cy nazw(cid:218) u(cid:285)ytkownika, (cid:81) time — liczba ca(cid:239)kowita odpowiadaj(cid:200)ca liczbie sekund, która up(cid:239)yn(cid:218)(cid:239)a od rozpocz(cid:218)cia poziomu do jego zako(cid:241)czenia. Skrypt zapisuj(cid:200)cy wyniki jest bardzo prosty. Wystarczy, (cid:285)e na serwer prze(cid:258)lemy nazw(cid:218) u(cid:285)yt- kownika, liczb(cid:218) punktów oraz poziom. Otrzymane dane zapiszemy w bazie danych za pomoc(cid:200) nast(cid:218)puj(cid:200)cej kwerendy: INSERT INTO scores (level, name, time) VALUES (1, Krysia , 36); Pozosta(cid:239)a cz(cid:218)(cid:258)(cid:202) skryptu jest bardzo podobna do tego, z czym mieli(cid:258)my do czynienia w po- przednich rozdzia(cid:239)ach, wi(cid:218)c nie b(cid:218)dziemy tu zamieszcza(cid:202) kodu. Pe(cid:239)n(cid:200) wersj(cid:218) skryptu znaj- dziesz w plikach do(cid:239)(cid:200)czonych do ksi(cid:200)(cid:285)ki. 145 Kup książkęPoleć książkę jQuery. Niezb(cid:266)dnik programisty gier Pobieranie listy najlepszych wyników Aby pobra(cid:202) wyniki z serwera, wystarczy przekaza(cid:202) mu numer poziomu, a on zwróci punktacj(cid:218). Zastosowali(cid:258)my tu jednak troch(cid:218) bardziej skomplikowany mechanizm. Ustalamy dodatkowo, czy bie(cid:285)(cid:200)cy u(cid:285)ytkownik zakwalifikowa(cid:239) si(cid:218) na list(cid:218), i — je(cid:258)li tak — obliczamy, na którym miejscu. Dzi(cid:218)ki temu b(cid:218)dziemy mogli równie(cid:285) zaimplementowa(cid:202) zabezpieczenia przeciw- dzia(cid:239)aj(cid:200)ce oszustwom. Musimy wi(cid:218)c dostarczy(cid:202) do serwera poziom oraz uzyskany czas, a on zwróci plik JSON zawie- raj(cid:200)cy wszystkie dane niezb(cid:218)dne do wygenerowania tablicy wyników. Format tego pliku przed- stawia si(cid:218) nast(cid:218)puj(cid:200)co: { top :[ { name : Tymek , time : 18}, { name : Anna , time : 20}, { time : 22}, { name : Jacek , time : 25} ], intop : true, pos : 2 } Jak mo(cid:285)na zauwa(cid:285)y(cid:202), wprowadzili(cid:258)my pole intop, które informuje, czy bie(cid:285)(cid:200)cy u(cid:285)ytkownik znalaz(cid:239) si(cid:218) na li(cid:258)cie pi(cid:218)ciu najlepszych. Je(cid:258)li ma ono warto(cid:258)(cid:202) true, do(cid:239)(cid:200)czane jest kolejne pole — pos, które przechowuje indeks rezultatu gracza w tablicy wyników (top). Wszystkie pozosta(cid:239)e elementy tablicy top odpowiadaj(cid:200) uporz(cid:200)dkowanym rosn(cid:200)co wynikom uzyskanym przez innych graczy. Je(cid:258)li pole intop ma warto(cid:258)(cid:202) false, tablica top przechowuje jedynie wyniki innych graczy. Pierwszym krokiem b(cid:218)dzie wykonanie poni(cid:285)szego zapytania SQL: SELECT * FROM scores WHERE level=1 ORDER BY time ASC LIMIT 5; Jest ono bardzo podobne do poprzednich, ale na ko(cid:241)cu (fragment zapisany wyró(cid:285)nionym kodem) znajduje si(cid:218) modyfikator wymuszaj(cid:200)cy posortowanie wyników wzgl(cid:218)dem kolumny time w po- rz(cid:200)dku rosn(cid:200)cym (ORDER BY time ASC) oraz ograniczaj(cid:200)cy liczb(cid:218) zwracanych rekordów do pi(cid:218)ciu (LIMIT 5). W drugiej kolejno(cid:258)ci trzeba si(cid:218) zaj(cid:200)(cid:202) wygenerowaniem pliku JSON na podstawie danych otrzymanych z kwerendy. Jedynym ciekawym fragmentem jest wstawienie wyniku gracza, je(cid:258)li uzyska(cid:239) wystarczaj(cid:200)co dobry czas. Pe(cid:239)ny kod tego skryptu znajduje si(cid:218) poni(cid:285)ej: ?php session_start(); include dbconnect.php ; $time = $_GET[ time ]; 146 Kup książkęPoleć książkę Rozdzia(cid:225) 8. • Wkraczamy w sieci spo(cid:225)eczno(cid:286)ciowe $level = $_GET[ level ]; if (isset($time) isset($level)) { // Obiekt JSON $json = array( top = array(), intop = false); $query = SELECT * FROM scores WHERE level= .$level. ORDER BY time ASC (cid:180)LIMIT 5 ; $result = mysqli_query($link, $query); $i=0; while ($obj = mysqli_fetch_object($result)) { if (!$json[ intop ] $time $obj- time) { $json[ intop ] = true; $json[ pos ] = $i; array_push($json[ top ], array( time = $time)); $i++; } if ($i 5) { array_push($json[ top ], array( time = $obj- time, name = $obj- (cid:180) name)); $i++; } } if ($i 5 !$json[ intop ]) { $json[ intop ] = true; $json[ pos ] = $i; array_push($json[ top ], array( time = $time)); } mysqli_free_result($result); echo json_encode($json); } mysqli_close($link); ? Na listingu zosta(cid:239)y wyró(cid:285)nione te fragmenty, które odpowiadaj(cid:200) za operacje na wyniku gracza. Wy(cid:258)wietlanie listy najlepszych wyników Po stronie klienta wygenerujemy ekran przedstawiaj(cid:200)cy wynik, list(cid:218) najlepszych graczy oraz pole s(cid:239)u(cid:285)(cid:200)ce do wprowadzenia nazwy u(cid:285)ytkownika, je(cid:258)li uda(cid:239)o mu si(cid:218) uzyska(cid:202) wystarczaj(cid:200)co dobry czas. Kod ten przedstawia si(cid:218) nast(cid:218)puj(cid:200)co: 147 Kup książkęPoleć książkę jQuery. Niezb(cid:266)dnik programisty gier var finishedTime = Math.round((Date.now() - levelStart) / 1000); $.ajax({ dataType: json , url: highscore.php , data: { level: currentLevel, time: finishedTime }, async: false, success: function(json) { var top = ; for (var i = 0; i json.top.length; i++) { if (json.intop json.pos === i) { top += input id= name placeholder= _____ size= 5 / + (cid:180) input id= timeScore type= hidden value= +json.top[i] (cid:180).time+ /input + input id= level type= hidden value= (cid:180) +currentLevel+ /input + +minSec(json.top[i].time) + (cid:180) a id= saveScore href= # submit /a br ; } else { top += + json.top[i].name + + minSec(json.top[i].time) + (cid:180) br ; } } $( #top_list ).html(top); } }).fail(function(a, b, c) { var toto = toto ; }); Kod generuj(cid:200)cy list(cid:218) zosta(cid:239) wyró(cid:285)niony. Tworzymy pole, w którym gracz mo(cid:285)e wpisa(cid:202) swoj(cid:200) nazw(cid:218), oraz dwa ukryte pola przechowuj(cid:200)ce numer poziomu i punktacj(cid:218). Umieszczamy tu równie(cid:285) odsy(cid:239)acz s(cid:239)u(cid:285)(cid:200)cy do zatwierdzenia wyniku. Kod obs(cid:239)uguj(cid:200)cy ten odsy(cid:239)acz znajduje si(cid:218) poni(cid:285)ej: $( #levelEnd ).on( click , #saveScore , function() { $.get( save.php , { name: $( #name ).val(), time: $( #timeScore ).val(), level: $( #level ).val() }, function() { $( #saveScore ).fadeOut(500); }); return false; }); Pobieramy tu warto(cid:258)ci z pól i przekazujemy je na serwer. Po ich przes(cid:239)aniu usuwamy przycisk zatwierdzania, aby da(cid:202) zna(cid:202) u(cid:285)ytkownikowi, (cid:285)e proces si(cid:218) zako(cid:241)czy(cid:239). 148 Kup książkęPoleć książkę Rozdzia(cid:225) 8. • Wkraczamy w sieci spo(cid:225)eczno(cid:286)ciowe Mechanizmy utrudniaj(cid:200)ce oszukiwanie Nie istnieje idealne rozwi(cid:200)zanie uniemo(cid:285)liwiaj(cid:200)ce oszukiwanie. Problem ten jest szczególnie istotny w grach tworzonych w JavaScripcie, poniewa(cid:285) bardzo (cid:239)atwo uzyska(cid:202) dost(cid:218)p do kodu (cid:283)ród(cid:239)owego. Mo(cid:285)na oczywi(cid:258)cie przekszta(cid:239)ci(cid:202) kod do nieczytelnej postaci, ale to nie powstrzyma zdeterminowanego oszusta, a jedynie spowolni jego prac(cid:218). Istnieje jednak kilka innych technik, dzi(cid:218)ki którym próby oszustw staj(cid:200) si(cid:218) trudniejsze i mniej op(cid:239)acalne. Weryfikacja po stronie serwera Najprostszym sposobem na utrudnienie oszukiwania jest przeniesienie cz(cid:218)(cid:258)ci kodu na serwer. Zrobili(cid:258)my tak z mechanizmem walki w grze tworzonej w rozdziale 7. W przypadku gry plat- formowej musieliby(cid:258)my przesy(cid:239)a(cid:202) na serwer informacje o wciskaniu klawiszy steruj(cid:200)cych po- staci(cid:200), na podstawie których skrypt okre(cid:258)la(cid:239)by jego nowe po(cid:239)o(cid:285)enie. W wi(cid:218)kszo(cid:258)ci przypadków nie da si(cid:218) zastosowa(cid:202) takiego rozwi(cid:200)zania w tego typu grach, ale mo(cid:285)na stworzy(cid:202) skrypt, który b(cid:218)dzie weryfikowa(cid:239) punktacj(cid:218) gracza po stronie serwera. Wystarczy w kilku miejscach planszy umie(cid:258)ci(cid:202) niewidoczne punkty kontrolne, po osi(cid:200)gni(cid:218)ciu których na serwer jest przesy(cid:239)ana stosowna informacja. Dzi(cid:218)ki temu, je(cid:258)li u(cid:285)ytkownik przes(cid:239)a(cid:239) na serwer punktacj(cid:218), ale nie trafi(cid:239)y tam wcze(cid:258)niej informacje z punktów kontrolnych, wiemy, (cid:285)e co(cid:258) jest nie tak. Mo(cid:285)na te(cid:285) zastosowa(cid:202) podobne rozwi(cid:200)zanie, ale bazuj(cid:200)ce na przyk(cid:239)ad na liczbie skoków lub pora(cid:285)ek gracza. Tak czy inaczej, trzeba wprowadzi(cid:202) w grze jak(cid:200)kolwiek form(cid:218) weryfikacji wyników. Nie ma jednego, najlepszego rozwi(cid:200)zania. Musisz jednak pami(cid:218)ta(cid:202), by zastosowany mechanizm nie wykry(cid:239) próby oszustwa tam, gdzie go nie ma, czyli (cid:285)eby uczciwy gracz nie zosta(cid:239) o nie pos(cid:200)- dzony. Istotny jest równie(cid:285) nak(cid:239)ad pracy wymagany do zaimplementowania tego typu mecha- nizmów, tak by praca nad nimi nie zaj(cid:218)(cid:239)a przypadkiem wi(cid:218)cej czasu ni(cid:285) tworzenie samej gry. W przedstawionym poni(cid:285)ej przyk(cid:239)adzie zastosujemy proste rozwi(cid:200)zanie. Znamy maksymaln(cid:200) pr(cid:218)dko(cid:258)(cid:202), z jak(cid:200) mo(cid:285)e si(cid:218) porusza(cid:202) gracz, wiemy te(cid:285), ile ma do przej(cid:258)cia, wi(cid:218)c (cid:239)atwo jest obliczy(cid:202) minimalny czas potrzebny na zako(cid:241)czenie poziomu. Wystarczy porówna(cid:202) wynik gracza z t(cid:200) warto(cid:258)ci(cid:200) i sprawdzi(cid:202), czy nie jest mniejszy. Aby to zrobi(cid:202), trzeba uzupe(cid:239)ni(cid:202) skrypt highscore.php: // gracz mo(cid:298)e przej(cid:286)(cid:252) 7 pikseli w 30 ms - 233.1 $minTime = array( 1 = 15, // 3500 / 233.1 2 = 15, // 3500 / 233.1 3 = 42, // 9800 / 233.1 4 = 23 // 5460 / 233.1 ); $timeValid = !($minTime[intval($level)] intval($time)); //... while ($obj = mysqli_fetch_object($result)) { 149 Kup książkęPoleć książkę jQuery. Niezb(cid:266)dnik programisty gier if (!$json[ intop ] $time $obj- time $timeValid) { //... } Je(cid:258)li wynik osi(cid:200)gni(cid:218)ty przez gracza zosta(cid:239) uznany za nieprawdziwy, zostanie wy(cid:258)wietlony, ale gracz nie b(cid:218)dzie móg(cid:239) wpisa(cid:202) swojej nazwy. Mniej czytelne zmienne Innym rozwi(cid:200)zaniem jest zmniejszenie czytelno(cid:258)ci zmiennych, tak by utrudni(cid:202) analiz(cid:218) danych przesy(cid:239)anych na serwer oraz ich modyfikacj(cid:218) (dane te s(cid:200) w naszym przypadku zapisane w ukry- tych polach formularza). Rozwi(cid:200)zanie to wydaje si(cid:218) dobre, ale niestety nietrudno jest obej(cid:258)(cid:202) ta- kie zabezpieczenia. Na poni(cid:285)szym rysunku zosta(cid:239)o przedstawione okno inspektora przegl(cid:200)darki Chrome. Jedn(cid:200) z naczelnych zasad jest unikanie przechowywania istotnych informacji w elementach znajduj(cid:200)cych si(cid:218) w strukturze DOM, poniewa(cid:285) maj(cid:200) do nich dost(cid:218)p wszyscy u(cid:285)ytkownicy, nawet tacy, którzy z programowaniem maj(cid:200) niewiele do czynienia. W zwi(cid:200)zku z tym usuniemy je z wywo(cid:239)ania skryptu save.php i zapiszemy je w sesji. W pliku highscore.php musimy doda(cid:202) na- st(cid:218)puj(cid:200)cy kod: if (!$json[ intop ] $time $obj- time $timeValid) { $json[ intop ] = true; $json[ pos ] = $i; array_push($json[ top ], array( time = $time)); 150 Kup książkęPoleć książkę Rozdzia(cid:225) 8. • Wkraczamy w sieci spo(cid:225)eczno(cid:286)ciowe $_SESSION[ level ] = $level; $_SESSION[ time ] = $time; $i++; } W skrypcie save.php musimy z sesji odczyta(cid:202) poziom i czas: $name = $_GET[ name ]; $time = $_SESSION[ time ]; $level = $_SESSION[ level ]; Te proste zmiany wystarcz(cid:200), by utrudni(cid:202) oszukiwanie w naszej grze. Zaciemnianie kodu Zaciemnianie kodu (ang. obfuscating) jest bardzo prost(cid:200) technik(cid:200), ale przy tym ca(cid:239)kiem sku- teczn(cid:200). Przekszta(cid:239)cony w ten sposób kod trudno analizowa(cid:202), poniewa(cid:285) jest nieczytelny dla ludzi. Poni(cid:285)ej znajduje si(cid:218) fragment kodu odpowiedzialnego za tablic(cid:218) wyników: if (status == finished ) { gameState = menu ; $( #level_nb_2 ).html(currentLevel); $( #level_nb_1 ).html(currentLevel + 1); var finishedTime = Math.round((Date.now() - levelStart) / 1000); $.ajax({ dataType: json , url: highscore.php , data: { level: currentLevel, time: finishedTime }, async: false, success: function (json) { var top = ; for (var i = 0; i json.top.length; i++) { if (json.intop json.pos === i) { top += input id= name placeholder= _____ size= 5 / + (cid:180) input id= timeScore type= hidden value= +json.top[i]. (cid:180)time+ /input + input id= level type= hidden value= (cid:180)+currentLevel+ /input + +minSec(json.top[i].time) + (cid:180) a id= saveScore href= # submit /a br ; } else { top += + json.top[i].name + + minSec(json.top[i].time) + (cid:180) br ; } 151 Kup książkęPoleć książkę jQuery. Niezb(cid:266)dnik programisty gier } $( #top_list ).html(top); } }).fail(function(a, b, c) { var toto = toto ; }); $( #time ).html(minSec(finishedTime)); $( #levelEnd ).fadeIn(2000, function() { $( #backgroundFront ).css( background-position , 0px 0px ); $( #backgroundBack ).css( background-position , 0px 0px ); gf.x(group, 0); tilemap = loadNextLevel(group); gf.x(player.div, 0); gf.y(player.div, 0); gf.setAnimation(player.div, playerAnim.jump); }); status = stand ; } Ten sam kod poddany operacji zaciemniania (za pomoc(cid:200) narz(cid:218)dzia UglifyJS) wygl(cid:200)da nast(cid:218)puj(cid:200)co: if( finished ==status){gameState= menu ,$( #level_nb_2 ). html(currentLevel),$( #level_nb_1 ).html(currentLevel+1);var finishedTime=Math.round((Date.now()-levelStart)/1e3);$.ajax({dataType : json ,url: highscore.php ,data:{level:currentLevel,time:finishedTim e},async:!1,success:function(a){for(var b= ,c=0;a.top.length c;c++) b+=a.intop a.pos===c? input id= name placeholder= _____ size= 5 / input id= timeScore type= hidden value= +a.top[c].time+ / input + input id= level type= hidden value= +currentLevel+ / input + +minSec(a.top[c].time)+ a id= saveScore href= # submit /a br : +a.top[c].name+ +minSec(a.top[c]. time)+ br ;$( #top_list ).html(b)}}).fail(function(){}),$( #time ). html(minSec(finishedTime)),$( #levelEnd ).fadeIn(2e3,function() {$( #backgroundFront ).css( background-position , 0px 0px ),$( #backgroundBack ).css( background-position , 0px 0px ),gf.x( group,0),tilemap=loadNextLevel(group),gf.x(player.div,0),gf.y(player. div,0),gf.setAnimation(player.div,playerAnim.jump)}),status= stand } Z ca(cid:239)(cid:200) pewno(cid:258)ci(cid:200) analiza takiego kodu jest du(cid:285)o trudniejsza, a zyskujemy przy okazji co(cid:258) jeszcze —przetworzony w ten sposób kod jest krótszy ni(cid:285) orygina(cid:239). 152 Kup książkęPoleć książkę Rozdzia(cid:225) 8. • Wkraczamy w sieci spo(cid:225)eczno(cid:286)ciowe Mniej czytelny protokó(cid:239) sieciowy Chocia(cid:285) poprawili(cid:258)my kod dzia(cid:239)aj(cid:200)cy po stronie klienta, nadal istnieje mo(cid:285)liwo(cid:258)(cid:202) uzyskania do- st(cid:218)pu do warto(cid:258)ci przesy(cid:239)anych zmiennych poprzez analiz(cid:218) ruchu sieciowego. Na poni(cid:285)szym rysunku zosta(cid:239)o przedstawione okno aplikacji nas(cid:239)uchuj(cid:200)cej, która wy(cid:258)wietla dane przesy(cid:239)ane po zako(cid:241)czeniu poziomu. Jest to problem, poniewa(cid:285) w celu oszustwa u(cid:285)ytkownik nie musi modyfikowa(cid:202) kodu — wystarczy sfa(cid:239)szowa(cid:202) pakiet przesy(cid:239)any na serwer. Istniej(cid:200) trzy proste sposoby na utrudnienie analizowania transmitowanych danych: 1. Nadawanie zmiennym przypadkowych nazw, tak by na ich podstawie nie da(cid:239)o si(cid:218) okre(cid:258)li(cid:202) ich przeznaczenia. 2. Kodowanie zawarto(cid:258)ci zmiennych. U(cid:285)ytkownik zna przewa(cid:285)nie osi(cid:200)gni(cid:218)ty przez siebie wynik, wi(cid:218)c na jego podstawie mo(cid:285)e znale(cid:283)(cid:202) w transmitowanych danych odpowiedni(cid:200) zmienn(cid:200) i j(cid:200) zmodyfikowa(cid:202). Dzi(cid:218)ki zakodowaniu tej warto(cid:258)ci zadanie to stanie si(cid:218) trudniejsze. 3. Dodanie wielu przypadkowych zmiennych. Dzi(cid:218)ki temu trudniej si(cid:218) domy(cid:258)li(cid:202), która z nich przechowuje istotne dane. Podobnie jak w przypadku wcze(cid:258)niej opisywanych metod, te równie(cid:285) jedynie utrudniaj(cid:200) próby oszustwa, ale nie daj(cid:200) stuprocentowego zabezpieczenia. Równoczesne zastosowanie kilku rozwi(cid:200)za(cid:241) mo(cid:285)e zniech(cid:218)ci(cid:202) nawet najbardziej zdeterminowanych oszustów. Poni(cid:285)ej znaj- dziesz propozycj(cid:218) implementacji ka(cid:285)dego z nich. Kodowanie warto(cid:258)ci Zaczniemy od kodowania warto(cid:258)ci. Mo(cid:285)na to zrobi(cid:202) na wiele sposobów ró(cid:285)ni(cid:200)cych si(cid:218) uzy- skiwanym stopniem bezpiecze(cid:241)stwa. W naszym przypadku wystarczy utrudni(cid:202) odszukanie wyniku na li(cid:258)cie przesy(cid:239)anych zmiennych, w zwi(cid:200)zku z czym nie musimy wprowadza(cid:202) (cid:285)adnej 153 Kup książkęPoleć książkę jQuery. Niezb(cid:266)dnik programisty gier skomplikowanej metody kodowania. W kodzie klienta u(cid:285)yjemy operacji przesuni(cid:218)cia w lewo ( ), a na serwerze — przesuni(cid:218)cia w prawo ( ). Oto kod skryptu dzia(cid:239)aj(cid:200)cego na kliencie: $.ajax({ dataType: json , url: highscore.php , data: { level: currentLevel, time: finishedTime 1 }, async: false, success: function (json) { // ... } }); Odpowiedni fragment skryptu na serwerze: $time = intval($_GET[ time ]) 1; Aby jeszcze bardziej zmyli(cid:202) u(cid:285)ytkownika, warto(cid:258)(cid:202) t(cid:218) prze(cid:258)lemy w wielu innych zmiennych, które nie b(cid:218)d(cid:200) w ogóle brane pod uwag(cid:218) po stronie serwera. Przypadkowe nazwy zmiennych Nie trzeba tu wiele wyja(cid:258)nia(cid:202) — wystarczy zmieni(cid:202) nazw(cid:218) zmiennej. Je(cid:258)li chcesz jeszcze bardziej utrudni(cid:202) zadanie oszustom, mo(cid:285)esz zmienia(cid:202) t(cid:218) nazw(cid:218) przy ka(cid:285)dym (cid:285)(cid:200)daniu. Poni(cid:285)ej podstawowa wersja kodu: $.ajax({ dataType: json , url: highscore.php , data: { Nmyzsf: currentLevel, WfBCLQ: finishedTime 1 }, async: false, success: function (json) { // ... } }); Kod po stronie serwera przyjmie nast(cid:218)puj(cid:200)c(cid:200) posta(cid:202): $time = intval($_GET[ WfBCLQ ]) 1; $level = $_GET[ Nmyzsf ]; 154 Kup książkęPoleć książkę Rozdzia(cid:225) 8. • Wkraczamy w sieci spo(cid:225)eczno(cid:286)ciowe Dodatkowe przypadkowe zmienne Nazwy zmiennych nie oddaj(cid:200) ju(cid:285) znaczenia przechowywanych przez nie warto(cid:258)ci, ale to nie wszystko, poniewa(cid:285) stosunkowo (cid:239)atwo sprawdzi(cid:202), która z nich odpowiada za wynik. Musimy wi(cid:218)c doda(cid:202) wi(cid:218)cej zmiennych, których zadaniem jest wprowadzenie oszusta w b(cid:239)(cid:200)d. Przyk(cid:239)adowe rozwi(cid:200)zanie zosta(cid:239)o przedstawione na poni(cid:285)szym listingu: $.ajax({ dataType: json , url: highscore.php , data: { sXZZUj: Math.round(200*Math.random()), enHf8F: Math.round(200*Math.random()), eZnqBG: currentLevel, avFanB: Math.round(200*Math.random()), zkpCfb: currentLevel, PCXFTR: Math.round(200*Math.random()), Nmyzsf: currentLevel, FYGswh: Math.round(200*Math.random()), C3kaTz: finishedTime 1, gU7buf: finishedTime, ykN65g: Math.round(200*Math.random()), Q5jUZm: Math.round(200*Math.random()), bb5d7V: Math.round(200*Math.random()), WTsrdm: finishedTime 1, bCW5Dg: currentLevel, AFM8MN: Math.round(200*Math.random()), FUHt6K: Math.round(200*Math.random()), WfBCLQ: finishedTime 1, d8mzVn: Math.round(200*Math.random()), bHxNpb: Math.round(200*Math.random()), MWcmCz: finishedTime, ZAat42: Math.round(200*Math.random()) }, async: false, success: function (json) { // ... } }); W kodzie serwera nie trzeba nic zmienia(cid:202), poniewa(cid:285) dodatkowe zmienne s(cid:200) po prostu igno- rowane. Mo(cid:285)na oczywi(cid:258)cie jeszcze bardziej skomplikowa(cid:202) spraw(cid:218) i wprowadzi(cid:202) dodatkowe zale(cid:285)no(cid:258)ci mi(cid:218)dzy zmiennymi. Nale(cid:285)y jednak ca(cid:239)y czas pami(cid:218)ta(cid:202), które zmienne przechowuj(cid:200) istotne dane, by równie(cid:285) sobie nie utrudni(cid:202) zadania. 155 Kup książkęPoleć książkę jQuery. Niezb(cid:266)dnik programisty gier Integracja z Twitterem Twitter daje mo(cid:285)liwo(cid:258)(cid:202) dzielenia si(cid:218) z innymi krótkimi informacjami. W przypadku gier mo(cid:285)emy z niego skorzysta(cid:202) na dwa sposoby: (cid:81) mo(cid:285)emy umo(cid:285)liwi(cid:202) graczowi zalogowanie si(cid:218) do gry za pomoc(cid:200) nazwy u(cid:285)ytkownika i has(cid:239)a z Twittera, (cid:81) mo(cid:285)emy da(cid:202) mo(cid:285)liwo(cid:258)(cid:202) publikowania tweetów z wynikami lub informacjami o post(cid:218)pach w grze. Zajmiemy si(cid:218) teraz zaimplementowaniem tych dwóch funkcji. Podstawy Twittera Istnieje bardzo prosty sposób korzystania z Twittera, który nie wymaga znajomo(cid:258)ci (cid:285)adnego API. Je(cid:258)li u(cid:285)ytkownik jest zalogowany, za po(cid:258)rednictwem odpowiednio przygotowanego adresu URL mo(cid:285)na opublikowa(cid:202) tweet. URL powinien by(cid:202) zbudowany w nast(cid:218)puj(cid:200)cy sposób: http://twitter.com/home?status=Przyk(cid:239)adowy tweet Wyró(cid:285)niony fragment adresu to tekst tweeta. Na ekranie tablicy wyników obok przycisku Zatwierd(cid:283) umie(cid:258)cimy odsy(cid:239)acz Tweetnij. $.ajax({ dataType: json , url: highscore.php , data: { // ... }, async: false, success: function (json) { var top = ; for (var i = 0; i json.top.length; i++) { if (json.intop json.pos === i) { top += input id= name placeholder= _____ size= 5 / + (cid:180) +minSec(json.top[i].time) + a id= saveScore href= # submit (cid:180) /a + a id= tweetScore target= _blank href= http:// (cid:180)twitter.com/home?status= +escape( W(cid:239)a(cid:258)nie uda(cid:239)o mi si(cid:218) sko(cid:241)czy(cid:202) (cid:180) +currentLevel+ poziom gry Yet Another Platformer w (cid:180) +minSec(json.top[i].time)+ sekund! )+ Tweetnij /a br ; } else { top += + json.top[i].name + + minSec(json.top[i].time) + (cid:180) br ; } } $( #top_list ).html(top); } }); 156 Kup książkęPoleć książkę Rozdzia(cid:225) 8. • Wkraczamy w sieci spo(cid:225)eczno(cid:286)ciowe Najistotniejszy jest wyró(cid:285)niony fragment kodu, bo to dzi(cid:218)ki niemu dzieje si(cid:218) to, co powinno. Za- stosowali(cid:258)my tu javascriptow(cid:200) funkcj(cid:218) escape, by dostarczany test by(cid:239) poprawnie sformatowany. Jak wida(cid:202), bardzo (cid:239)atwo zaimplementowa(cid:202) to rozwi(cid:200)zanie, ale trzeba wiedzie(cid:202) o kilku ograni- czeniach: (cid:81) Je(cid:258)li u(cid:285)ytkownik nie jest zalogowany, pojawi si(cid:218) ekran logowania Twittera. (cid:81) Na ekranie tablicy wyników nie mo(cid:285)na u(cid:285)y(cid:202) nazwy u(cid:285)ytkownika z Twittera. W zwi(cid:200)zku z tym, nawet je(cid:258)li u(cid:285)ytkownik b(cid:218)dzie chcia(cid:239) tweetn(cid:200)(cid:202) swój wynik, i tak b(cid:218)dzie musia(cid:239) poda(cid:202) swoj(cid:200) nazw(cid:218) w grze. (cid:81) Publikowanie ka(cid:285)dego tweeta powoduje otwarcie nowego okna przegl(cid:200)darki, w którym u(cid:285)ytkownik musi potwierdzi(cid:202) t(cid:218) operacj(cid:218). Je(cid:258)li chcieliby(cid:258)my umo(cid:285)liwi(cid:202) u(cid:285)ytkownikowi zalogowanie si(cid:218) i automatyczne publikowanie tweetów bez konieczno(cid:258)ci ka(cid:285)dorazowego otwierania nowego okna, musimy skorzysta(cid:202) z API Twittera. Pe(cid:239)ny dost(cid:218)p do API Twittera Najpe(cid:239)niejsza integracja gry z Twitterem wymaga zapytania u(cid:285)ytkownika o zgod(cid:218) na po(cid:239)(cid:200)czenie jego konta z gr(cid:200). Mo(cid:285)na w tym celu skorzysta(cid:202) z mechanizmu OAuth, który jest otwartym stan- dardem uwierzytelniania stosowanym przez wiele firm, takich jak Twitter, Google czy Facebook. Aby da(cid:202) u(cid:285)ytkownikom mo(cid:285)liwo(cid:258)(cid:202) zalogowania si(cid:218) za po(cid:258)rednictwem Twittera, musimy lekko zmodyfikowa(cid:202) ekran pocz(cid:200)tkowy: Je(cid:258)li gracz kliknie (cid:239)(cid:200)cze Rozpocznij gr(cid:218), zacznie od razu rozgrywk(cid:218). Je(cid:258)li z kolei kliknie Zaloguj przez Twittera, b(cid:218)dzie si(cid:218) musia(cid:239) zalogowa(cid:202) za po(cid:258)rednictwem Twittera, po czym nast(cid:200)pi powrót do gry. 157 Kup książkęPoleć książkę jQuery. Niezb(cid:266)dnik programisty gier Rejestrowanie gry w Twitterze Zanim przejdziemy dalej, musimy zarejestrowa(cid:202) gr(cid:218) w Twitterze. Aby to zrobi(cid:202), musisz si(cid:218) zalogowa(cid:202) na stron(cid:218) Twittera dla deweloperów (https://dev.twitter.com), a nast(cid:218)pnie klikn(cid:200)(cid:202) pozycj(cid:218) My applications (moje aplikacje) w menu profilu: Nale(cid:285)y utworzy(cid:202) now(cid:200) aplikacj(cid:218) ((cid:239)(cid:200)cze Create a new application), wype(cid:239)ni(cid:202) wszystkie wymagane pola oraz wyrazi(cid:202) zgod(cid:218) na warunki licencyjne (Rules of the Road). Po zatwierdzeniu wprowa- dzonych danych zostanie wy(cid:258)wietlona strona zawieraj(cid:200)ca dane utworzonej aplikacji: 158 Kup książkęPoleć książkę Rozdzia(cid:225) 8. • Wkraczamy w sieci spo(cid:225)eczno(cid:286)ciowe Trzeba zwróci(cid:202) uwag(cid:218) na dwie informacje, które na rysunku zosta(cid:239)y otoczone ramk(cid:200), poniewa(cid:285) b(cid:218)d(cid:200) potrzebne pó(cid:283)niej. Nale(cid:285)y wykona(cid:202) jeszcze jedn(cid:200) drobn(cid:200) modyfikacj(cid:218) konfiguracji. Przejd(cid:283) do zak(cid:239)adki Settings (ustawienia) i przyjrzyj si(cid:218) sekcji Application Type (typ aplikacji). Domy(cid:258)lnie jest zaznaczone pole Read only (tylko do odczytu). Je(cid:258)li chcesz w imieniu gracza publikowa(cid:202) tweety, musisz wybra(cid:202) opcj(cid:218) Read and Write: W ten sposób przygotowali(cid:258)my konto na Twitterze do integracji z gr(cid:200). Pomocnicza biblioteka Kod realizuj(cid:200)cy komunikacj(cid:218) z API Twittera mo(cid:285)na napisa(cid:202) samemu w PHP, ale to dosy(cid:202) (cid:285)mud- na praca. Na szcz(cid:218)(cid:258)cie jest dost(cid:218)pnych wiele bibliotek, które mog(cid:200) to upro(cid:258)ci(cid:202). Jedn(cid:200) z nich, przeznaczon(cid:200) dla PHP, jest twitteroauth (https://github.com/abraham/twitteroauth). Istniej(cid:200) oczywi(cid:258)cie biblioteki dla innych j(cid:218)zyków; koniecznie zajrzyj do dokumentacji Twittera, aby dowiedzie(cid:202) si(cid:218) wi(cid:218)cej na ten temat. Du(cid:285)(cid:200) zalet(cid:200) biblioteki twitteroauth jest to, (cid:285)e mo(cid:285)na j(cid:200) zainstalowa(cid:202) na prawie ka(cid:285)dym serwerze obs(cid:239)uguj(cid:200)cym PHP. Wystarczy skopiowa(cid:202) bibliotek(cid:218) do tego samego katalogu, w którym znajduj(cid:200) si(cid:218) skrypty gry. W naszym przypadku b(cid:218)dzie to podkatalog twitter. 159 Kup książkęPoleć książkę jQuery. Niezb(cid:266)dnik programisty gier Musimy zacz(cid:200)(cid:202) od skonfigurowania biblioteki. Przydatny b(cid:218)dzie przyk(cid:239)adowy skrypt konfigura- cyjny config-sample.php dost(cid:218)pny w podanym repozytorium. Znajduje si(cid:218) w nim kod definiuj(cid:200)cy trzy sta(cid:239)e: define( CONSUMER_KEY , (1) ); define( CONSUMER_SECRET , (2) ); define( OAUTH_CALLBACK , (3) ); W miejscach (1) i (2) trzeba wpisa(cid:202) warto(cid:258)ci wy(cid:258)wietlone na stronie informacji o utworzonej aplikacji Twittera. W miejscu (3) nale(cid:285)y poda(cid:202) adres URL skryptu zwrotnego callback.php. Ostatnim krokiem jest zmodyfikowanie skryptu callback.php, tak by zawiera(cid:239) prawid(cid:239)owe przekierowanie do g(cid:239)ównego pliku naszej gry: header( Location: ./index.php ); Uwierzytelnianie Na poni(cid:285)szym diagramie zosta(cid:239) przedstawiony sposób przeprowadzania uwierzytelniania i auto- ryzacji u(cid:285)ytkowników w grze za po(cid:258)rednictwem Twittera: W praktyce nie jest to tak skomplikowane, na jakie wygl(cid:200)da, przede wszystkim dlatego, (cid:285)e wi(cid:218)kszo(cid:258)(cid:202) jest ju(cid:285) zaimplementowana w bibliotece twitteroauth. Zajmiemy si(cid:218) utworzeniem strony logowania wy(cid:258)wietlanej po klikni(cid:218)ciu przycisku Zaloguj przez Twittera. U(cid:285)yjemy zwy- k(cid:239)ego odsy(cid:239)acza kieruj(cid:200)cego do pliku redirect.php. Kiedy u(cid:285)ytkownik kliknie to (cid:239)(cid:200)cze po raz pierwszy, zostanie przekierowany na stron(cid:218) Twittera, na której b(cid:218)dzie móg(cid:239) autoryzowa(cid:202) dost(cid:218)p do konta: 160 Kup książkęPoleć książkę Rozdzia(cid:225) 8. • Wkraczamy w sieci spo(cid:225)eczno(cid:286)ciowe Po wyra(cid:285)eniu zgody nast(cid:200)pi przekierowanie na adres, który zosta(cid:239) ustawiony w pliku callback.php. Je(cid:258)li u(cid:285)ytkownik ju(cid:285) raz wyrazi(cid:239) zgod(cid:218) na autoryzacj(cid:218), b(cid:218)dzie móg(cid:239) od razu si(cid:218) zalogowa(cid:202). W skryptach JavaScript bardzo przyda nam si(cid:218) teraz informacja o tym, czy gracz jest po(cid:239)(cid:200)czony, czy nie. Aby j(cid:200) uzyska(cid:202), musimy przekszta(cid:239)ci(cid:202) g(cid:239)ówny dokument HTML gry w plik PHP i umie- (cid:258)ci(cid:202) na jego pocz(cid:200)tku nast(cid:218)puj(cid:200)cy kod: ?php session_start(); require_once( twitter/twitteroauth/twitteroauth.php ); require_once( twitter/config.php ); /* Pobranie tokenów u(cid:298)ytkownika z sesji. */ $access_token = $_SESSION[ access_token ]; $connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, $access_token[ oauth_token ], $access_token[ oauth_token_secret ]); $user = $connection- get( account/verify_credentials ); ? W tym kodzie rozpoczynamy sesj(cid:218), do(cid:239)(cid:200)czamy dwa pliki biblioteki twitteroauth oraz odczytuje- my token sesji. Je(cid:258)li token jest ustawiony, oznacza to, (cid:285)e u(cid:285)ytkownik jest zalogowany do Twittera. Nast(cid:218)pnie serwer (cid:239)(cid:200)czy si(cid:218) z Twitterem, aby pobra(cid:202) obiekt u(cid:285)ytkownika. Tak to wygl(cid:200)da po stronie serwera, ale kod JavaScript wci(cid:200)(cid:285) nie ma informacji o zalogowaniu. W zwi(cid:200)zku z tym musimy utworzy(cid:202) skrypt przesy(cid:239)aj(cid:200)cy dane do kodu klienckiego: script type= text/javascript ?php if($_SESSION[ status ] == verified ){ ? var twitter = true; var twitterName = ?php print $user- screen_name; ? ; ?php } else { ? var twitter = false; ?php } ? /script 161 Kup książkęPoleć książkę jQuery. Niezb(cid:266)dnik programisty gier Je(cid:258)li gracz jest zalogowany do Twittera, globalna zmienna twitter ma warto(cid:258)(cid:202) true, a zmienna twitterName zawiera nazw(cid:218) u(cid:285)ytkownika. Ostatnim, o co nale(cid:285)y zadba(cid:202), jest poinformowanie u(cid:285)ytkownika o pomy(cid:258)lnym zalogowaniu za pomoc(cid:200) Twittera i umo(cid:285)liwienie wylogowania si(cid:218). W tym celu musimy wprowadzi(cid:202) drobn(cid:200) zmian(cid:218) w kodzie odpowiedzialnym za ekran pocz(cid:200)tkowy wy(cid:258)wietlany po zalogowaniu: div id= startScreen class= screen ?php if($_SESSION[ status ] != verified ){ ? a class= button tweetLink href= ./twitter/redirect.php Zaloguj przez (cid:180)Twittera /a ?php } else { ? a class= button tweetLink href= ./twitter/clearsessions.php Wyloguj z (cid:180)Twittera /a ?php }? a id= startButton class= button href= # Rozpocznij gr(cid:218) /a /div Po wprowadzeniu powy(cid:285)szych modyfikacji mo(cid:285)na uzna(cid:202), (cid:285)e uwierzytelnianie przez Twittera jest zaimplementowane. Publikowanie najlepszych wyników na Twitterze Teraz, kiedy gracz jest ju(cid:285) zalogowany do Twittera, mo(cid:285)na publikowa(cid:202) jego wyniki w znacznie wygodniejszy sposób ni(cid:285) poprzednio. Zaczniemy od utworzenia po stronie serwera skryptu twitterPost.php, w którym u(cid:285)yjemy interfejsu statuses/update API Twittera. Spójrzmy na kompletny skrypt: ?php session_start(); require_once( twitter/twitteroauth/twitteroauth.php ); require_once( twitter/config.php ); $time = $_SESSION[ time ]; $level = $_SESSION[ level ]; if (isset($time) isset($level)) { /* Pobranie tokenów u(cid:298)ytkownika z sesji. */ $access_token = $_SESSION[ access_token ]; $connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, (cid:180)$access_token[ oauth_token ], $access_token[ oauth_token_secret ]); $parameters = array( status = W(cid:239)a(cid:258)nie uda(cid:239)o mi si(cid:218) sko(cid:241)czy(cid:202) .$level. (cid:180)poziom gry Yet Another Platformer w .$time. sekund! ); $status = $connection- post( statuses/update , $parameters); } ? Najprawdopodobniej rozpoznajesz wi(cid:218)kszo(cid:258)(cid:202) kodu z powy(cid:285)szego listingu, który dodali(cid:258)my na pocz(cid:200)tku skryptu ekranu pocz(cid:200)tkowego (tylko wyró(cid:285)niony kod jest nowy). W ostatnich dwóch wierszach tworzymy, a nast(cid:218)pnie przesy(cid:239)amy do Twittera tekst, który chcemy opublikowa(cid:202), co 162 Kup książkęPoleć książkę Rozdzia(cid:225) 8. • Wkraczamy w sieci spo(cid:225)eczno(cid:286)ciowe — jak wida(cid:202) — jest ca(cid:239)kiem proste. Musimy jednak zaj(cid:200)(cid:202) si(cid:218) jeszcze jednym. Poniewa(cid:285) gracz jest zalogowany, znamy jego nazw(cid:218), wi(cid:218)c mo(cid:285)emy j(cid:200) wykorzysta(cid:202) na ekranie tablicy wyników. W kodzie klienta utworzymy troch(cid:218) inn(cid:200) od dotychczasowej wersj(cid:218) tablicy wyników: $.ajax({ dataType: json , url: highscore.php , data: { // ... }, async: false, success: function (json) { var top = ; for (var i = 0; i json.top.length; i++) { if (json.intop json.pos === i) { if (twitter) { top += input id= name type= hidden value= +twitterName+ / + twitterName + + minSec(json.top[i].time) + a id= saveScore href= # Zatwierd(cid:283) /a + a id= tweetScore href= # Tweetnij /a br ; } else { top += input id= name placeholder= _____ size= 5 / + +minSec(json.top[i].time) + a id= saveScore href= # submit /a + a target= _blank href= http://twitter.com/home? (cid:180)status= +escape( w(cid:239)a(cid:258)nie uda(cid:239)o mi si(cid:218) sko(cid:241)czy(cid:202) +current (cid:180)Level+ poziom gry Yet Another Platformer w +minSec (cid:180)(json.top[i].time)+ sekund! )+ Tweetnij /a br ; } } else { top += + json.top[i].name + + minSec(json.top[i].time) + (cid:180) br ; } } $( #top_list ).html(top); } }); Tworzymy tu niewidoczne pole wej(cid:258)ciowe przechowuj(cid:200)ce nazw(cid:218) u(cid:285)ytkownika pochodz(cid:200)c(cid:200) z Twittera. Nast(cid:218)pnie wypisujemy t(cid:218) nazw(cid:218) na ekranie tablicy wyników. Zwró(cid:202) uwag(cid:218), (cid:285)e nie musieli(cid:258)my w ogóle zmienia(cid:202) kodu po stronie serwera. Tyle na temat integracji z Twitterem. Je(cid:285)eli chcesz dowiedzie(cid:202) si(cid:218) wi(cid:218)cej i rozszerzy(cid:202) funk- cjonalno(cid:258)(cid:202) gry, zajrzyj do dokumentacji API Twittera. 163 Kup książkęPoleć książkę jQuery. Niezb(cid:266)dnik programisty gier Integracja z Facebookiem Integracja z Facebookiem i Twitterem jest w wielu aspektach podobna. Facebook jest jednak w du(cid:285)o wi(cid:218)kszym stopniu nastawiony na gry. Zajmiemy si(cid:218) implementacj(cid:200) osi(cid:200)gni(cid:218)(cid:202) dla zalo- gowanych u(cid:285)ytkowników. Skorzystamy z SDK Facebooka dla PHP, ale s(cid:200) równie(cid:285) dost(cid:218)pne rozwi(cid:200)zania dla innych j(cid:218)zyków. Tak jak w przypadku Twittera, tu równie(cid:285) musimy zacz(cid:200)(cid:202) od zarejestrowania aplikacji w Fa- cebooku. W tym celu trzeba si(cid:218) zalogowa(cid:202) do serwisu dla deweloperów (https://developers. (cid:180)facebook.com) i klikn(cid:200)(cid:202) pozycj(cid:218) Apps1. Nast(cid:218)pnie nale(cid:285)y klikn(cid:200)(cid:202) (cid:239)(cid:200)cze Create New App i wype(cid:239)ni(cid:202) obowi(cid:200)zkowe pola formularza. Po ich zatwierdzeniu pojawi si(cid:218) ekran z informacjami dotycz(cid:200)cymi nowej aplikacji. Podobnie jak by(cid:239)o w przypadku Twittera, tu równie(cid:285) najwa(cid:285)niejsze s(cid:200) dwie warto(cid:258)ci, co wida(cid:202) na rysunku: 1 Aby móc tworzy(cid:202) aplikacje, trzeba si(cid:218) zarejestrowa(cid:202) jako programista. W tym celu musisz klikn(cid:200)(cid:202) przycisk Register as a Developer — przyp. t(cid:239)um. 164 Kup książkęPoleć książkę Rozdzia(cid:225) 8. • Wkraczamy w sieci spo(cid:225)eczno(cid:286)ciowe Na powy(cid:285)szym zrzucie strza(cid:239)k(cid:200) zosta(cid:239)a oznaczona sekcja umo(cid:285)liwiaj(cid:200)ca wybór sposobu inte- gracji aplikacji z Facebookiem. Aby uzyska(cid:202) pe(cid:239)ny dost(cid:218)p do interfejsu Open Graph API Fa- cebooka, który umo(cid:285)liwia mi(cid:218)dzy innymi publikowanie osi(cid:200)gni(cid:218)(cid:202), trzeba zaznaczy(cid:202) pozycj(cid:218) Aplikacja na Facebooku. Dzi(cid:218)ki temu gra mo(cid:285)e by(cid:202) uruchamiana w ramce (iframe) wewn(cid:200)trz strony Facebooka. Jednak aby to by(cid:239)o mo(cid:285)liwe, konieczny jest prawid(cid:239)owy certyfikat dla HTTPS obowi(cid:200)zuj(cid:200)cy w dome- nie, w której jest dost(cid:218)pna gra. Je(cid:258)li jednak chcemy, by gra by(cid:239)a (cid:239)adowana z naszego serwera, nie ma tych wymaga(cid:241), ale i tak trzeba wpisa(cid:202) adres w odpowiednim polu (aby adres zosta(cid:239) uznany za poprawny, nale(cid:285)y poda(cid:202) https://, nawet je(cid:258)li nie ma si(cid:218) certyfikatu). Jest jeszcze jedno, co nale(cid:285)y zrobi(cid:202), by aplikacja mog(cid:239)a publikowa(cid:202) osi(cid:200)gni(cid:218)cia — nale(cid:285)y j(cid:200) zarejestrowa(cid:202) jako gr(cid:218). W tym celu wystarczy klikn(cid:200)(cid:202) pozycj(cid:218) Informacje o aplikacji, a na- st(cid:218)pnie w sekcji Informacje o aplikacji w polach Kategoria ustawi(cid:202) pozycj(cid:218) Gry i ustali(cid:202) gatunek gry, co wida(cid:202) na poni(cid:285)szym rysunku: Uwierzytelnianie przez Facebooka Podstawowy mechanizm uwierzytelniania jest bardzo podobny do tego z Twittera, ale istnieje pewna ró(cid:285)nica w podej(cid:258)ciu do dost(cid:218)pu. W przypadku Twittera mo(cid:285)na by(cid:239)o zdecydowa(cid:202), czy aplikacja ma prawa tylko do odczytu, czy równie(cid:285) zapisu. Facebook oferuje znacznie bogatsze mo(cid:285)liwo(cid:258)ci ustalania poziomów dost(cid:218)pu, przy czym decyduje si(cid:218) o nich w czasie logowania. Kod odpowiedzialny za uwierzytelnianie zosta(cid:239) przedstawiony na poni(cid:285)szym listingu. Tu równie(cid:285), jak w przypadku Twittera, musimy umie(cid:258)ci(cid:202) na pocz(cid:200)tku skryptu kod pobieraj(cid:200)cy obiekt bie- (cid:285)(cid:200)cego u(cid:285)ytkownika. 165 Kup książkęPoleć książkę jQuery. Niezb(cid:266)dnik programisty gier ?php session_start(); // Twitter... // Facebook require facebook/facebook.php ; $app_id = (1) ; $app_secret = (2) ; $app_namespace = yap_bookdemo ; $app_url = http://yetanotherplatformer.com/ ; $scope = publish_actions ; $facebook = new Facebook(array( appId = $app_id, secret = $app_secret, )); // Pobiera obiekt bie(cid:298)(cid:261)cego u(cid:298)ytkownika $facebookUser = $facebook- getUser(); ? Wyró(cid:285)niony wiersz kodu odpowiada za wskazanie, (cid:285)e z poziomu gry b(cid:218)dziemy chcieli publiko- wa(cid:202) wpisy na osi czasu u(cid:285)ytkownika. W miejscach (1) i (2) nale(cid:285)y wpisa(cid:202) warto(cid:258)ci wy(cid:258)wietlone na stronie konfiguracji aplikacji w Facebooku. Je(cid:258)li zmienna $facebookUser to null, oznacza to, (cid:285)e u(cid:285)ytkownik jest ju(cid:285) zalogowany. W prze- ciwnym przypadku musimy wy(cid:258)wietli(cid:202) przycisk logowania. Musimy wi(cid:218)c napisa(cid:202) kod podobny do tego, który s(cid:239)u(cid:285)y(cid:239) do wy(cid:258)wietlenia przycisku logowania za po(cid:258)rednictwem Twittera: div id= startScreen class= screen ... ?php if (!$facebookUser) { $loginUrl = $facebook- getLoginUrl(array( scope = $scope, redirect_uri = $app_url )); ? a class= button tweetLink href= ?php print $loginUrl; ? Zaloguj przez (cid:180)Facebooka /a ?php } else { $logoutUrl = $facebook- getLogoutUrl(array( next = $app_url )); ? a class= button tweetLink href= ?php print $logoutUrl;? Wyloguj z (cid:180)Facebooka /a ?php } ? a id= startButton class= button href= # Rozpocznij gr(cid:218) /a /div 166 Kup książkęPoleć książkę Rozdzia(cid:225) 8. • Wkraczamy w sieci spo(cid:225)eczno(cid:286)ciowe Jak wida(cid:202), Facebook SDK oferuje metod(cid:218) generowania adresów URL s(cid:239)u(cid:285)(cid:200)cych do logowania i wylogowywania. Do skryptu musimy jeszcze dopisa(cid:202) fragment s(cid:239)u(cid:285)(cid:200)cy do informowania javascriptowego kodu o tym, czy u(cid:285)ytkownik jest zalogowany, czy nie. U(cid:285)yjemy tu rozwi(cid:200)zania, które zastosowali(cid:258)my w przypadku Twittera: script type= text/javascript // ... ?php if($facebookUser){ ? var facebook = true; var facebookId = ?php print $facebookUser; ? ; ?php } else { ? var facebook = false; ?php } ? /script Tworzenie osi(cid:200)gni(cid:218)(cid:202) Zajmiemy si(cid:218) teraz tworzeniem osi(cid:200)gni(cid:218)(cid:202). Aby to by(cid:239)o mo(cid:285)liwe, na serwerze trzeba umie(cid:258)ci(cid:202) dwa pliki: (cid:81) plik HTML zawieraj(cid:200)cy w nag(cid:239)ówku zestaw znaczników meta, (cid:81) plik obrazka reprezentuj(cid:200)cego osi(cid:200)gni(cid:218)cie na osi czasu gracza. Dokument HTML b(cid:218)dzie nie tylko plikiem konfiguracyjnym, ale b(cid:218)dzie równie(cid:285) do niego prowadzi(cid:239) odsy(cid:239)acz z wpisu z osi(cid:200)gni(cid:218)ciem na osi czasu gracza. Aby Facebook go rozpozna(cid:239), trzeba w jego nag(cid:239)ówku umie(cid:258)ci(cid:202) siedem znaczników meta: (cid:81) og:type — zawieraj(cid:200)cy warto(cid:258)(cid:202) game.achievement. Odró(cid:285)nia on osi(cid:200)gni(cid:218)cie od innych wpisów OpenGraph. (cid:81) og:title — zawieraj(cid:200)cy krótki opis osi(cid:200)gni(cid:218)cia. (cid:81) og:url — zawieraj(cid:200)cy adres URL bie(cid:285)(cid:200)cego pliku. (cid:81) og:description — zawieraj(cid:200)cy d(cid:239)u(cid:285)szy opis osi(cid:200)gni(cid:218)cia. (cid:81) og:image — zawieraj(cid:200)cy adres pliku obrazka, o którym by(cid:239)a mowa wcze(cid:258)niej. Mo(cid:285)e to by(cid:202) plik PNG, JPEG lub GIF o minimalnych wymiarach 50×50 pikseli i maksymalnym stosunku wymiarów 3:1. (cid:81) game:points — zawieraj(cid:200)cy liczb(cid:218) punktów powi(cid:200)zan(cid:200) z danym osi(cid:200)gni(cid:218)ciem. Warto(cid:258)(cid:202) ta nie mo(cid:285)e przekroczy(cid:202) 1000 punktów i by(cid:202) mniejsza ni(cid:285) 1. Osi(cid:200)gni(cid:218)cia o wy(cid:285)szej warto(cid:258)ci b(cid:218)d(cid:200) z wi(cid:218)kszym prawdopodobie(cid:241)stwem wy(cid:258)wietlane u znajomych gracza. (cid:81) fb:app_id — b(cid:218)d(cid:200)cy identyfikatorem aplikacji. W ciele dokumentu HTML mo(cid:285)na umie(cid:258)ci(cid:202) dok(cid:239)adny opis osi(cid:200)gni(cid:218)cia oraz inne informacje. Prosty przyk(cid:239)ad kompletnej strony osi(cid:200)gni(cid:218)cia znajduje si(cid:218) na poni(cid:285)szym listingu: 167 Kup książkęPoleć książkę jQuery. Niezb(cid:266)dnik programisty gier html head meta property= og:type content= game.achievement / meta property= og:title content= Uko(cid:241)czony poziom 1 / meta property= og:url content= http://8bitentropy.com/yap/ach1.html / meta property= og:description content= W(cid:239)a(cid:258)nie zako(cid:241)czy(cid:239)e(cid:258) pierwszy (cid:180)poziom! / meta property= og:image content= http://8bitentropy.com/yap/ach1.png / meta property= game:points content= 50 / meta property= fb:app_id content= (1) / /head body h1 (cid:165)wietna robota, pierwszy poziom ju(cid:285) za tob(cid:200)! /h1 /body /html Osi(cid:200)gni(cid:218)cie zostanie wy(cid:258)wietlone w sposób zbli(cid:285)ony do tego, co wida(cid:202) na poni(cid:285)szym rysunku: Jednak samo przygotowanie dokumentu nie wystarczy — trzeba go opublikowa(cid:202) na Facebooku. Aby to zrobi(cid:202), musimy wykona(cid:202) (cid:285)(cid:200)danie POST pod okre(cid:258)lony adres i przekaza(cid:202) niezb(cid:218)dne pa- rametry. (cid:191)(cid:200)danie to musi by(cid:202) równie(cid:285) powi(cid:200)zane z tokenem aplikacji. Za pomoc(cid:200) tokenów Facebook upewnia si(cid:218), (cid:285)e komunikuje si(cid:218) z nim okre(cid:258)lona aplikacja, a nie jaka(cid:258) inna. Musimy wi(cid:218)c napisa(cid:202) skrypt przesy(cid:239)aj(cid:200)cy osi(cid:200)gni(cid:218)cia do Facebooka. Kompletny kod zosta(cid:239) przedstawiony na poni(cid:285)szym listingu: ?php require facebook/facebook.php ; $app_id = (1) ; $app_secret = (2) ; $app_namespace = yap_bookdemo ; $app_url = http://yetanotherplatformer.com/ ; $scope = publish_actions ; $facebook = new Facebook(array( appId = $app_id, secret = $app_secret, )); 168 Kup książkęPoleć książkę Rozdzia(cid:225) 8. • Wkraczamy w sieci spo(cid:225)eczno(cid:286)ciowe $app_access_token = get_app_access_token($app_id, $app_secret); $facebook- setAccessToken($app_access_token); $response = $facebook- api( /(1)/achievements , post , array( achievement = http://yetanotherplatformer.com/ach1.html , )); print($response); // Funkcja pomocnicza pobieraj(cid:261)ca token dost(cid:266)pu aplikacji (access token) function get_app_access_token($app_id, $app_secret) { $token_url = https://graph.facebook.com/oauth/access_token? . client_id= . $app_id . client_secret= . $app_secret . grant_type=client_credentials ; $token_response =file_get_contents($token_url); $params = null; parse_str($token_response, $params); return $params[ access_token ]; } ? Przeznaczenie poszczególnych fragmentów kodu jest dosy(cid:202) jasne, a poza tym wi(cid:218)kszo(cid:258)(cid:202) po- jawi(cid:239)a si(cid:218) ju(cid:285) wcze(cid:258)niej. W wyró(cid:285)nionym fragmencie pobieramy token aplikacji, wi(cid:200)(cid:285)emy go z tworzonym (cid:285)(cid:200)daniem, a nast(cid:218)pnie — za pomoc(cid:200) SDK — wysy(cid:239)amy (cid:285)(cid:200)danie POST. Adres (cid:285)(cid:200)dania ma nast(cid:218)puj(cid:200)c(cid:200) posta(cid:202): identyfikator aplikacji/osi(cid:200)gni(cid:218)cie. Przekazywany parametr jest zwyk(cid:239)ym adresem URL pliku osi(cid:200)gni(cid:218)cia. Poniewa(cid:285) generowany komunikat o b(cid:239)(cid:218)dzie (je(cid:258)li co(cid:258) pójdzie nie tak) mo(cid:285)e by(cid:202) niejasny, poszu- kiwania przyczyn problemów najlepiej zacz(cid:200)(cid:202) od sprawdzenia poprawno(cid:258)ci pliku osi(cid:200)gni(cid:218)cia za pomoc(cid:200) narz(cid:218)dzia udost(cid:218)pnianego przez Facebook (https://developers.facebook.com/tools/ debug/). Publikowanie osi(cid:200)gni(cid:218)(cid:202) Po zarejestrowaniu osi(cid:200)gni(cid:218)cia w Facebooku mo(cid:285)emy je przyzna(cid:202) graczom. Polecenie to jest równie(cid:285) przesy(cid:239)ane w formie (cid:285)(cid:200)dania POST, które musi by(cid:202) powi(cid:200)zane z tokenem aplikacji. Aby upro(cid:258)ci(cid:202) przyk(cid:239)ad, utworzymy niewielki skrypt PHP, który — po wywo(cid:239)aniu — b(cid:218)dzie nadawa(cid:239) u(cid:285)ytkownikom osi(cid:200)gni(cid:218)cia. Takiego rozwi(cid:200)zania nie powinno si(cid:218) jednak stosowa(cid:202) w rze- czywistych aplikacjach, poniewa(cid:285) zwykle chcemy unikn(cid:200)(cid:202) sytuacji, w której u(cid:285)ytkownik sam musi uruchomi(cid:202) jaki(cid:258) skrypt. W zwi(cid:200)zku z tym najlepszym wyj(cid:258)ciem by(cid:239)oby umieszczenie omawianego kodu w pliku highscore.php. Poni(cid:285)ej znajduje si(cid:218) pe(cid:239)ny kod skryptu. Jest on bardzo podobny do tego, który odpowiada(cid:239) za zarejestrowanie osi(cid:200)gni(cid:218)(cid:202); istotne ró(cid:285)nice zosta(cid:239)y wyró(cid:285)nione. 169 Kup książkęPoleć książkę jQuery. Niezb(cid:266)dnik programisty gier ?php session_start(); // Facebook require facebook/facebook.php ; $app_id = (1) ; $app_secret = (2) ; $app_namespace = yap_bookdemo ; $app_url = http://yetanotherplatformer.com/ ; $scope = publish_actions ; $facebook = new Facebook(array( appId = $app_id, secret = $app_secret, )); // Pobiera obiekt bie(cid:298)(cid:261)cego u(cid:298)ytkownika $facebookUser = $facebook- getUser(); $app_access_token = get_app_access_token($app_id, $app_secret); $facebook- setAccessToken($app_access_token); $response = $facebook- api( / .$facebookUser. /achievements , post , array( achievement = http://yetanotherplatformer.com/ach1.html )); print($response); // Funkcja pomocnicza pobieraj(cid:261)ca token dost(cid:266)pu aplikacji (access token) function get_app_access_token($app_id, $app_secret) { ... } ? Tym razem tworzymy (cid:285)(cid:200)danie POST pod adres w formacie identyfikator u(cid:285)ytkownika/osi(cid:200)gni(cid:218)cia. Teraz w kodzie gry, po uko(cid:241)czeniu pierwszego poziomu, wystarczy wykona(cid:202) asynchroniczne wywo(cid:239)anie tego pliku: if (status == finished ) { ... if (facebook currentLevel === 1) { $.get( ach1.php ); } ... 170 Kup książkęPoleć książkę Rozdzia(cid:225) 8. • Wkraczamy w sieci spo(cid:225)eczno(cid:286)ciowe Podsumowanie W tym rozdziale omówili(cid:258)my naprawd(cid:218) sporo zagadnie(cid:241), przy czym niektóre, jak cho(cid:202)by ró(cid:285)ne mo(cid:285)liwo(cid:258)ci integracji z serwisami spo(cid:239)eczno(cid:258)ciowymi, jedynie zasygnalizowali(cid:258)my. Interfejsy API Facebooka i Twittera s(cid:200) bardzo rozbudowane i wci(cid:200)(cid:285) si(cid:218) zmieniaj(cid:200). Je(cid:258)li chcesz z nich skorzysta(cid:202) w najlepszy mo(cid:285)liwy sposób, musisz na bie(cid:285)(cid:200)co (cid:258)ledzi(cid:202) ich dokumentacj(cid:218). Trzeba jednak pami(cid:218)ta(cid:202), (cid:285)e korzystanie z zewn(cid:218)trznych serwisów, zw(cid:239)aszcza bezp(cid:239)atnych, powoduje powstanie silnych zale(cid:285)no(cid:258)ci, co mo(cid:285)e mie(cid:202) powa(cid:285)ne konsekwencje. Serwisy te mog(cid:200) w dowolnej chwili zmieni(cid:202) API, wymuszaj(cid:200)c w ten sposób konieczno(cid:258)(cid:202) szybkiego wprowadzenia zmian w kodzie aplikacji. Mo(cid:285)e si(cid:218) te(cid:285) okaza(cid:202), (cid:285)e opublikowana gra nie b(cid:218)dzie od jakiego(cid:258) momentu obs(cid:239)ugiwana. W zwi(cid:200)zku z tym zawsze trzeba mie(cid:202) przygotowane alter- natywne rozwi(cid:200)zanie. W kolejnym rozdziale zajmiemy si(cid:218) innym gor(cid:200)cym tematem — przystosujemy gr(ci
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

jQuery. Niezbędnik programisty 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ą: