Tytuł oryginału jQuery Game Development Essentials
Tłumaczenie Aleksander Lamża
ISBN 978-83-246-8608-7
Copyright copy Packt Publishing 2013
First published in the English language under the title lsquojQuery Game Development Essentialsrsquo
Polish edition copyright copy 2014 by Helion SA All rights reserved
All rights reserved No part of this book may be reproduced or transmitted in any form or by any means electronic or mechanical including photocopying recording or by any information storage retrieval system without permission from the Publisher
Wszelkie prawa zastrzeżone Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione Wykonywanie kopii metodą kserograficzną fotograficzną a także kopiowanie książki na nośniku filmowym magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji
Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli
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ą roacutewnież żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce
Wydawnictwo HELIONul Kościuszki 1c 44-100 GLIWICEtel 32 231 22 19 32 230 98 63e-mail helionhelionplWWW httphelionpl (księgarnia internetowa katalog książek)
Drogi CzytelnikuJeżeli chcesz ocenić tę książkę zajrzyj pod adres httphelionpluseropiniejqunpgMożesz tam wpisać swoje uwagi spostrzeżenia recenzję
Printed in Poland
bull Kup książkębull Poleć książkę bull Oceń książkę
bull Księgarnia internetowabull Lubię to raquo Nasza społeczność
Spis tre ci
O autorze 9
O recenzencie 10
Wst p 11
Co znajdziesz w ksi ce 11Co b dzie Ci potrzebne 12Dla kogo jest ta ksi ka 12Przyj te konwencje 13Kod przyk adoacutew 14
Rozdzia 1 jQuery w grach 15
Jak u ywa biblioteki jQuery 15Przesuwanie elementoacutew 17Obs uga zdarze 19Wi zanie danych z elementami DOM 21Manipulowanie struktur DOM 21Ciekawo to pierwszy stopie dohellip 23Podsumowanie 23
Rozdzia 2 Tworzymy pierwsz gr 25
Jak pracowa z ksi k 26Przejd my do konkretoacutew mdash gra 26Zaczynamy od podstaw 27Inicjalizowanie gry 37G oacutewna p tla gry 39Wykrywanie kolizji 42Podsumowanie 45
Kup książkę Poleć książkę
Spis tre ci
6
Rozdzia 3 Lepiej i szybciej ale niekoniecznie trudniej 47
Interwa y i odmierzanie czasu 48Odpytywanie klawiatury 53Fragmenty HTML 55Unikanie przebudowywania struktury DOM 56Przemieszczanie spritersquooacutew za pomoc przekszta ce CSS 57Zastosowanie requestAnimationFrame zamiast interwa oacutew 58Podsumowanie 59
Rozdzia 4 Wskakujemy na g bsz wod 61
Od czane elementy div 61Grupy 63Przekszta cenia spritersquooacutew 64Mapy kafelkoacutew 68Wykrywanie kolizji 71Piszemy kod gry 75Podsumowanie 85
Rozdzia 5 Zmieniamy perspektyw 87
Optymalizowanie mapy kafelkoacutew dla gier z perspektyw mapy 88Sortowanie przes aniania 94Wykrywanie kolizji 96Kompletna gra 103Izometryczne kafelki 104Podsumowanie 105
Rozdzia 6 Dodajemy kolejne poziomy 107
Implementowanie gry z o onej z wielu plikoacutew 108Modyfikujemy gr platformow 117Podsumowanie 121
Rozdzia 7 Tworzymy gr typu multiplayer 123
World of ArrsquoPiGi 124Zarz dzanie kontem gracza 124Synchronizacja graczy 132Sterowanie przeciwnikami 137Podsumowanie 141
Rozdzia 8 Wkraczamy w sieci spo eczno ciowe 143
Tworzenie prostej tablicy wynikoacutew 144Mechanizmy utrudniaj ce oszukiwanie 149Integracja z Twitterem 156Integracja z Facebookiem 164Podsumowanie 171
Kup książkę Poleć książkę
Spis tre ci
7
Rozdzia 9 Tworzymy gr mobiln 173
Jak sprawi by gra dobrze dzia a a na urz dzeniach mobilnych 174Sterowanie dotykiem 180Integracja gry z ekranem domowym 188Korzystanie z informacji o orientacji urz dzenia 191Korzystanie z trybu offline 192Lokalne sk adowanie danych 193Podsumowanie 193
Rozdzia 10 Ujarzmiamy d wi k 195
Abstrakcyjna biblioteka obs ugi d wi ku 196Osadzanie d wi ku 198Element audio 200Web Audio API 204Zastosowanie Flasha 211Generowanie efektoacutew d wi kowych 214Podsumowanie 214
Skorowidz 215
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
8
Wkraczamy w siecispo eczno ciowe
Ju w najwcze niejszych grach wideo by o stosowane pewne rozwi zanie zapewniaj ce nies ab-n ce zainteresowanie graczy Chodzi o tablic wynikoacutew Dzi ki niej gracz stara si osi gn zaka dym razem lepszy rezultat mdash od swojego poprzedniego wyniku osi gni przyjacioacute czyinnych graczy z ca ego wiata
Sieci spo eczno ciowe nada y nowy wymiar temu prostemu pomys owi poniewa osi gni tyrezultat mo na opublikowa na osi czasu albo w tweecie Ma to wiele zalet a jedn z nich jestz ca pewno ci to e je eli kto zamie ci swoacutej wynik jego znajomi z du ym prawdopodo-bie stwem b d roacutewnie chcieli zagra w t gr (i osi gn lepszy rezultat)
W tym rozdziale prac rozpoczniemy od przygotowania skryptu tablicy wynikoacutew dzia aj cegopo stronie serwera Zastosujemy tu techniki znane z poprzedniego rozdzia u Nast pnie zaj-miemy si umo liwieniem zalogowania si do gry za pomoc konta na Twitterze oraz umiesz-czaniem tweetoacutew z wynikami
Ostatnia cz rozdzia u jest po wi cona integracji gry z Facebookiem publikowaniu wydarzena osi czasu u ytkownika oraz tworzeniu osi gni
Podczas korzystania z serwisoacutew takich jak Facebook czy Twitter trzeba zwraca szczegoacutelnuwag by post powa zgodnie z ustalonymi tam zasadami oraz na bie co ledzi wszelkieaktualizacje dzi ki czemu gra b dzie zawsze poprawnie funkcjonowa a Aplikacje i gry ktoacuterenie spe niaj wymaga s zazwyczaj blokowane
Dowiesz si jak korzysta z tych dwoacutech konkretnych sieci spo eczno ciowych ale musiszwiedzie e mechanizm stoj cy za wi kszo ci innych tego typu serwisoacutew jest podobny
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
144
W tym rozdziale zostan omoacutewione nast puj ce zagadnienia tworzenie prostej tablicy wynikoacutew wprowadzanie mechanizmoacutew utrudniaj cych oszukiwanie integracja gry z Twitterem umo liwiaj ca publikowanie wynikoacutew integracja gry z Facebookiem pozwalaj ca na zdobywanie osi gni
Tworzenie prostej tablicy wynikoacutewJak si mo na domy li utworzenie tablicy wynikoacutew b dzie wymaga o bazy danych w ktoacuterejb dzie przechowywana punktacja Podobnie jak w poprzednim rozdziale do implementacjigry po stronie serwera u yjemy j zyka PHP i bazy danych MySQL Jednak w przeciwie -stwie do problemu omoacutewionego w poprzednim rozdziale realizacja tablicy wynikoacutew dlawielu graczy jest o wiele prostsza Wynika to st d e nie wymaga zbyt wielu zasoboacutew serweraa operacje na bazie danych nie s wykonywane zbyt cz sto Mo na za o y e dla ka degogracza danie b dzie zg aszane co mniej wi cej 10 sekund a nie mdash jak w przypadku gryMMORPG z poprzedniego rozdzia u mdash kilka razy w ci gu sekundy
Przede wszystkim musimy ustali co b dzie pe ni o funkcj punktacji w grze Zastosujemynajprostsze rozwi zanie czyli zdecydujemy si na czas (wyra ony w sekundach) w ktoacuterymgracz przeszed plansz Poni szy diagram ilustruje algorytm implementowanego mechanizmu
Na potrzeby interfejsu u ytkownika b dziemy musieli utworzy dwa ekrany Post pimy taksamo jak w poprzednim rozdziale czyli u yjemy elementoacutew div ktoacutere b dziemy wy wietlalub ukrywa
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
145
Pierwszy ekran s u y do poinformowania o rozpocz ciu poziomu i daje graczowi czas naprzygotowanie si Drugi ekran jest troch bardziej z o ony Wy wietlane s na nim uzyskanywynik lista pi ciu najlepszych graczy oraz je li aktualny wynik gracza kwalifikuje si do listynajlepszych pole umo liwiaj ce wpisanie si na ni Przyk adowy wygl d tego ekranu zostaprzedstawiony poni ej
Zdecydowali my si na takie rozwi zanie mdash pytanie o nazw u ytkownika nie na pocz tkugry ale dopiero po uzyskaniu wystarczaj cej liczby punktoacutew mdash by odtworzy zachowanie kla-sycznych gier
Podsumowuj c serwer musi obs u y dwie dodatkowe operacje pobranie pi ciu najlepszych wynikoacutew dla danego poziomu zapisanie punktacji dla danego poziomu
Zaimplementujemy je w osobnych plikach highscorephp oraz savephp
Zapisywanie wynikoacutewTabela w bazie danych musi si sk ada z trzech kolumn
level mdash liczba ca kowita okre laj ca numer poziomu gry name mdash a cuch znakoacutew przechowuj cy nazw u ytkownika time mdash liczba ca kowita odpowiadaj ca liczbie sekund ktoacutera up yn a od rozpocz cia
poziomu do jego zako czenia
Skrypt zapisuj cy wyniki jest bardzo prosty Wystarczy e na serwer prze lemy nazw u yt-kownika liczb punktoacutew oraz poziom Otrzymane dane zapiszemy w bazie danych za pomocnast puj cej kwerendy
INSERT INTO scores (level name time) VALUES (1 Krysia 36)
Pozosta a cz skryptu jest bardzo podobna do tego z czym mieli my do czynienia w po-przednich rozdzia ach wi c nie b dziemy tu zamieszcza kodu Pe n wersj skryptu znaj-dziesz w plikach do czonych do ksi ki
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
146
Pobieranie listy najlepszych wynikoacutewAby pobra wyniki z serwera wystarczy przekaza mu numer poziomu a on zwroacuteci punktacj Zastosowali my tu jednak troch bardziej skomplikowany mechanizm Ustalamy dodatkowoczy bie cy u ytkownik zakwalifikowa si na list i mdash je li tak mdash obliczamy na ktoacuterymmiejscu Dzi ki temu b dziemy mogli roacutewnie zaimplementowa zabezpieczenia przeciw-dzia aj ce oszustwom
Musimy wi c dostarczy do serwera poziom oraz uzyskany czas a on zwroacuteci plik JSON zawie-raj cy wszystkie dane niezb dne do wygenerowania tablicy wynikoacutew Format tego pliku przed-stawia si nast puj co
top[ name Tymek time 18 name Anna time 20 time 22 name Jacek time 25 ] intop true pos 2
Jak mo na zauwa y wprowadzili my pole intop ktoacutere informuje czy bie cy u ytkownikznalaz si na li cie pi ciu najlepszych Je li ma ono warto true do czane jest kolejne pole mdashpos ktoacutere przechowuje indeks rezultatu gracza w tablicy wynikoacutew (top) Wszystkie pozosta eelementy tablicy top odpowiadaj uporz dkowanym rosn co wynikom uzyskanym przez innychgraczy Je li pole intop ma warto false tablica top przechowuje jedynie wyniki innych graczy
Pierwszym krokiem b dzie wykonanie poni szego zapytania SQL
SELECT FROM scores WHERE level=1 ORDER BY time ASC LIMIT 5
Jest ono bardzo podobne do poprzednich ale na ko cu (fragment zapisany wyroacute nionym kodem)znajduje si modyfikator wymuszaj cy posortowanie wynikoacutew wzgl dem kolumny time w po-rz dku rosn cym (ORDER BY time ASC) oraz ograniczaj cy liczb zwracanych rekordoacutew do pi ciu(LIMIT 5)
W drugiej kolejno ci trzeba si zaj wygenerowaniem pliku JSON na podstawie danychotrzymanych z kwerendy Jedynym ciekawym fragmentem jest wstawienie wyniku graczaje li uzyska wystarczaj co dobry czas Pe ny kod tego skryptu znajduje si poni ej
ltphp session_start()
include dbconnectphp
$time = $_GET[time]
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
147
$level = $_GET[level]
if (isset($time) ampamp isset($level)) Obiekt JSON $json = array(top=gtarray() intop=gtfalse)
$query = SELECT FROM scores WHERE level=$level ORDER BY time ASC LIMIT 5 $result = mysqli_query($link $query) $i=0
while ($obj = mysqli_fetch_object($result)) if ($json[intop] ampamp $time lt $obj-gttime) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
$i++ if ($i lt 5) array_push($json[top] array(time=gt$obj-gttime name=gt$obj- gtname)) $i++
if ($i lt 5 ampamp $json[intop]) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
mysqli_free_result($result) echo json_encode($json) mysqli_close($link)gt
Na listingu zosta y wyroacute nione te fragmenty ktoacutere odpowiadaj za operacje na wyniku gracza
Wy wietlanie listy najlepszych wynikoacutewPo stronie klienta wygenerujemy ekran przedstawiaj cy wynik list najlepszych graczy orazpole s u ce do wprowadzenia nazwy u ytkownika je li uda o mu si uzyska wystarczaj codobry czas Kod ten przedstawia si nast puj co
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
148
var finishedTime = Mathround((Datenow() - levelStart) 1000) $ajax( dataType json url highscorephp data level currentLevel time finishedTime async false success function(json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + ltinput id=timeScore type=hidden value=+jsontop[i] time+gtltinputgt + ltinput id=level type=hidden value= +currentLevel+gtltinputgt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )fail(function(a b c) var toto = toto )
Kod generuj cy list zosta wyroacute niony Tworzymy pole w ktoacuterym gracz mo e wpisa swojnazw oraz dwa ukryte pola przechowuj ce numer poziomu i punktacj Umieszczamy turoacutewnie odsy acz s u cy do zatwierdzenia wyniku Kod obs uguj cy ten odsy acz znajdujesi poni ej
$(levelEnd)on(click saveScore function() $get(savephp name $(name)val() time $(timeScore)val() level $(level)val() function() $(saveScore)fadeOut(500) ) return false)
Pobieramy tu warto ci z poacutel i przekazujemy je na serwer Po ich przes aniu usuwamy przyciskzatwierdzania aby da zna u ytkownikowi e proces si zako czy
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
149
Mechanizmy utrudniaj ce oszukiwanieNie istnieje idealne rozwi zanie uniemo liwiaj ce oszukiwanie Problem ten jest szczegoacutelnieistotny w grach tworzonych w JavaScripcie poniewa bardzo atwo uzyska dost p do koduroacuted owego Mo na oczywi cie przekszta ci kod do nieczytelnej postaci ale to nie powstrzyma
zdeterminowanego oszusta a jedynie spowolni jego prac Istnieje jednak kilka innych technikdzi ki ktoacuterym proacuteby oszustw staj si trudniejsze i mniej op acalne
Weryfikacja po stronie serweraNajprostszym sposobem na utrudnienie oszukiwania jest przeniesienie cz ci kodu na serwerZrobili my tak z mechanizmem walki w grze tworzonej w rozdziale 7 W przypadku gry plat-formowej musieliby my przesy a na serwer informacje o wciskaniu klawiszy steruj cych po-staci na podstawie ktoacuterych skrypt okre la by jego nowe po o enie
W wi kszo ci przypadkoacutew nie da si zastosowa takiego rozwi zania w tego typu grach alemo na stworzy skrypt ktoacutery b dzie weryfikowa punktacj gracza po stronie serwera Wystarczyw kilku miejscach planszy umie ci niewidoczne punkty kontrolne po osi gni ciu ktoacuterych naserwer jest przesy ana stosowna informacja Dzi ki temu je li u ytkownik przes a na serwerpunktacj ale nie trafi y tam wcze niej informacje z punktoacutew kontrolnych wiemy e co jestnie tak Mo na te zastosowa podobne rozwi zanie ale bazuj ce na przyk ad na liczbie skokoacutewlub pora ek gracza
Tak czy inaczej trzeba wprowadzi w grze jak kolwiek form weryfikacji wynikoacutew Nie majednego najlepszego rozwi zania Musisz jednak pami ta by zastosowany mechanizm niewykry proacuteby oszustwa tam gdzie go nie ma czyli eby uczciwy gracz nie zosta o nie pos -dzony Istotny jest roacutewnie nak ad pracy wymagany do zaimplementowania tego typu mecha-nizmoacutew tak by praca nad nimi nie zaj a przypadkiem wi cej czasu ni tworzenie samej gry
W przedstawionym poni ej przyk adzie zastosujemy proste rozwi zanie Znamy maksymalnpr dko z jak mo e si porusza gracz wiemy te ile ma do przej cia wi c atwo jest obliczyminimalny czas potrzebny na zako czenie poziomu Wystarczy poroacutewna wynik gracza z twarto ci i sprawdzi czy nie jest mniejszy
Aby to zrobi trzeba uzupe ni skrypt highscorephp
gracz mo e przej 7 pikseli w 30 ms -gt 2331$minTime = array( 1 =gt 15 3500 2331 2 =gt 15 3500 2331 3 =gt 42 9800 2331 4 =gt 23 5460 2331)$timeValid = ($minTime[intval($level)] lt intval($time))while ($obj = mysqli_fetch_object($result))
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
150
if ($json[intop] ampamp $time lt $obj-gttime ampamp $timeValid)
Je li wynik osi gni ty przez gracza zosta uznany za nieprawdziwy zostanie wy wietlony alegracz nie b dzie moacuteg wpisa swojej nazwy
Mniej czytelne zmienneInnym rozwi zaniem jest zmniejszenie czytelno ci zmiennych tak by utrudni analiz danychprzesy anych na serwer oraz ich modyfikacj (dane te s w naszym przypadku zapisane w ukry-tych polach formularza) Rozwi zanie to wydaje si dobre ale niestety nietrudno jest obej ta-kie zabezpieczenia Na poni szym rysunku zosta o przedstawione okno inspektora przegl darkiChrome
Jedn z naczelnych zasad jest unikanie przechowywania istotnych informacji w elementachznajduj cych si w strukturze DOM poniewa maj do nich dost p wszyscy u ytkownicy nawettacy ktoacuterzy z programowaniem maj niewiele do czynienia W zwi zku z tym usuniemy jez wywo ania skryptu savephp i zapiszemy je w sesji W pliku highscorephp musimy doda na-st puj cy kod
if ($json[intop] ampamp $time lt $obj-gttime ampamp $timeValid) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
151
$_SESSION[level] = $level $_SESSION[time] = $time
$i++
W skrypcie savephp musimy z sesji odczyta poziom i czas
$name = $_GET[name]$time = $_SESSION[time]$level = $_SESSION[level]
Te proste zmiany wystarcz by utrudni oszukiwanie w naszej grze
Zaciemnianie koduZaciemnianie kodu (ang obfuscating) jest bardzo prost technik ale przy tym ca kiem sku-teczn Przekszta cony w ten sposoacuteb kod trudno analizowa poniewa jest nieczytelny dlaludzi Poni ej znajduje si fragment kodu odpowiedzialnego za tablic wynikoacutew
if (status == finished) gameState = menu $(level_nb_2)html(currentLevel) $(level_nb_1)html(currentLevel + 1)
var finishedTime = Mathround((Datenow() - levelStart) 1000) $ajax( dataType json url highscorephp data level currentLevel time finishedTime async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + ltinput id=timeScore type=hidden value=+jsontop[i] time+gtltinputgt + ltinput id=level type=hidden value= +currentLevel+gtltinputgt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
152
$(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) gfx(group 0)
tilemap = loadNextLevel(group) gfx(playerdiv 0) gfy(playerdiv 0) gfsetAnimation(playerdiv playerAnimjump) ) status = stand
Ten sam kod poddany operacji zaciemniania (za pomoc narz dzia UglifyJS) wygl da nast puj co
if(finished==status)gameState=menu$(level_nb_2)html(currentLevel)$(level_nb_1)html(currentLevel+1)varfinishedTime=Mathround((Datenow()-levelStart)1e3)$ajax(dataTypejsonurlhighscorephpdatalevelcurrentLeveltimefinishedTimeasync1successfunction(a)for(var b=c=0atoplengthgtcc++)b+=aintopampampapos===cltinput id=name placeholder=_____ size=5gtltinput id=timeScore type=hidden value=+atop[c]time+gtltinputgt+ltinput id=level type=hidden value=+currentLevel+gtltinputgt+ +minSec(atop[c]time)+ lta id=saveScorehref=gtsubmitltagt ltbrgt+atop[c]name+ +minSec(atop[c]time)+ltbrgt$(top_list)html(b))fail(function())$(time)html(minSec(finishedTime))$(levelEnd)fadeIn(2e3function()$(backgroundFront)css(background-position0px0px)$(backgroundBack)css(background-position0px 0px)gfx(group0)tilemap=loadNextLevel(group)gfx(playerdiv0)gfy(playerdiv0)gfsetAnimation(playerdivplayerAnimjump))status=stand
Z ca pewno ci analiza takiego kodu jest du o trudniejsza a zyskujemy przy okazji co jeszczemdashprzetworzony w ten sposoacuteb kod jest kroacutetszy ni orygina
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
153
Mniej czytelny protokoacute sieciowyChocia poprawili my kod dzia aj cy po stronie klienta nadal istnieje mo liwo uzyskania do-st pu do warto ci przesy anych zmiennych poprzez analiz ruchu sieciowego Na poni szymrysunku zosta o przedstawione okno aplikacji nas uchuj cej ktoacutera wy wietla dane przesy ane pozako czeniu poziomu
Jest to problem poniewa w celu oszustwa u ytkownik nie musi modyfikowa kodu mdash wystarczysfa szowa pakiet przesy any na serwer Istniej trzy proste sposoby na utrudnienie analizowaniatransmitowanych danych
1 Nadawanie zmiennym przypadkowych nazw tak by na ich podstawie nie da o siokre li ich przeznaczenia
2 Kodowanie zawarto ci zmiennych U ytkownik zna przewa nie osi gni ty przez siebiewynik wi c na jego podstawie mo e znale w transmitowanych danych odpowiednizmienn i j zmodyfikowa Dzi ki zakodowaniu tej warto ci zadanie to stanie sitrudniejsze
3 Dodanie wielu przypadkowych zmiennych Dzi ki temu trudniej si domy li ktoacuteraz nich przechowuje istotne dane
Podobnie jak w przypadku wcze niej opisywanych metod te roacutewnie jedynie utrudniaj proacutebyoszustwa ale nie daj stuprocentowego zabezpieczenia Roacutewnoczesne zastosowanie kilkurozwi za mo e zniech ci nawet najbardziej zdeterminowanych oszustoacutew Poni ej znaj-dziesz propozycj implementacji ka dego z nich
Kodowanie warto ciZaczniemy od kodowania warto ci Mo na to zrobi na wiele sposoboacutew roacute ni cych si uzy-skiwanym stopniem bezpiecze stwa W naszym przypadku wystarczy utrudni odszukaniewyniku na li cie przesy anych zmiennych w zwi zku z czym nie musimy wprowadza adnej
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
154
skomplikowanej metody kodowania W kodzie klienta u yjemy operacji przesuni cia w lewo(ltlt) a na serwerze mdash przesuni cia w prawo (gtgt)
Oto kod skryptu dzia aj cego na kliencie
$ajax( dataType json url highscorephp data level currentLevel time finishedTime ltlt 1 async false success function (json) )
Odpowiedni fragment skryptu na serwerze
$time = intval($_GET[time]) gtgt 1
Aby jeszcze bardziej zmyli u ytkownika warto t prze lemy w wielu innych zmiennychktoacutere nie b d w ogoacutele brane pod uwag po stronie serwera
Przypadkowe nazwy zmiennychNie trzeba tu wiele wyja nia mdash wystarczy zmieni nazw zmiennej Je li chcesz jeszczebardziej utrudni zadanie oszustom mo esz zmienia t nazw przy ka dym daniu Poni ejpodstawowa wersja kodu
$ajax( dataType json url highscorephp data Nmyzsf currentLevel WfBCLQ finishedTime ltlt 1 async false success function (json) )
Kod po stronie serwera przyjmie nast puj c posta
$time = intval($_GET[WfBCLQ]) gtgt 1$level = $_GET[Nmyzsf]
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
155
Dodatkowe przypadkowe zmienneNazwy zmiennych nie oddaj ju znaczenia przechowywanych przez nie warto ci ale to niewszystko poniewa stosunkowo atwo sprawdzi ktoacutera z nich odpowiada za wynik Musimy wi cdoda wi cej zmiennych ktoacuterych zadaniem jest wprowadzenie oszusta w b d Przyk adowerozwi zanie zosta o przedstawione na poni szym listingu
$ajax( dataType json url highscorephp data sXZZUj Mathround(200Mathrandom()) enHf8F Mathround(200Mathrandom()) eZnqBG currentLevel avFanB Mathround(200Mathrandom()) zkpCfb currentLevel PCXFTR Mathround(200Mathrandom()) Nmyzsf currentLevel FYGswh Mathround(200Mathrandom()) C3kaTz finishedTime ltlt 1 gU7buf finishedTime ykN65g Mathround(200Mathrandom()) Q5jUZm Mathround(200Mathrandom()) bb5d7V Mathround(200Mathrandom()) WTsrdm finishedTime ltlt 1 bCW5Dg currentLevel AFM8MN Mathround(200Mathrandom()) FUHt6K Mathround(200Mathrandom()) WfBCLQ finishedTime ltlt 1 d8mzVn Mathround(200Mathrandom()) bHxNpb Mathround(200Mathrandom()) MWcmCz finishedTime ZAat42 Mathround(200Mathrandom()) async false success function (json) )
W kodzie serwera nie trzeba nic zmienia poniewa dodatkowe zmienne s po prostu igno-rowane Mo na oczywi cie jeszcze bardziej skomplikowa spraw i wprowadzi dodatkowezale no ci mi dzy zmiennymi Nale y jednak ca y czas pami ta ktoacutere zmienne przechowujistotne dane by roacutewnie sobie nie utrudni zadania
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
156
Integracja z TwitteremTwitter daje mo liwo dzielenia si z innymi kroacutetkimi informacjami W przypadku gier mo emyz niego skorzysta na dwa sposoby
mo emy umo liwi graczowi zalogowanie si do gry za pomoc nazwy u ytkownikai has a z Twittera
mo emy da mo liwo publikowania tweetoacutew z wynikami lub informacjamio post pach w grze
Zajmiemy si teraz zaimplementowaniem tych dwoacutech funkcji
Podstawy TwitteraIstnieje bardzo prosty sposoacuteb korzystania z Twittera ktoacutery nie wymaga znajomo ci adnegoAPI Je li u ytkownik jest zalogowany za po rednictwem odpowiednio przygotowanego adresuURL mo na opublikowa tweet URL powinien by zbudowany w nast puj cy sposoacuteb
httptwittercomhomestatus=Przyk adowy tweet
Wyroacute niony fragment adresu to tekst tweeta Na ekranie tablicy wynikoacutew obok przyciskuZatwierd umie cimy odsy acz Tweetnij
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmit ltagt + lta id=tweetScore target=_blank href=http twittercomhomestatus=+escape(W a nie uda o mi si sko czy +currentLevel+ poziom gry Yet Another Platformer w +minSec(jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
157
Najistotniejszy jest wyroacute niony fragment kodu bo to dzi ki niemu dzieje si to co powinno Za-stosowali my tu javascriptow funkcj escape by dostarczany test by poprawnie sformatowany
Jak wida bardzo atwo zaimplementowa to rozwi zanie ale trzeba wiedzie o kilku ograni-czeniach
Je li u ytkownik nie jest zalogowany pojawi si ekran logowania Twittera Na ekranie tablicy wynikoacutew nie mo na u y nazwy u ytkownika z Twittera
W zwi zku z tym nawet je li u ytkownik b dzie chcia tweetn swoacutej wyniki tak b dzie musia poda swoj nazw w grze
Publikowanie ka dego tweeta powoduje otwarcie nowego okna przegl darkiw ktoacuterym u ytkownik musi potwierdzi t operacj
Je li chcieliby my umo liwi u ytkownikowi zalogowanie si i automatyczne publikowanietweetoacutew bez konieczno ci ka dorazowego otwierania nowego okna musimy skorzysta z APITwittera
Pe ny dost p do API TwitteraNajpe niejsza integracja gry z Twitterem wymaga zapytania u ytkownika o zgod na po czeniejego konta z gr Mo na w tym celu skorzysta z mechanizmu OAuth ktoacutery jest otwartym stan-dardem uwierzytelniania stosowanym przez wiele firm takich jak Twitter Google czy Facebook
Aby da u ytkownikom mo liwo zalogowania si za po rednictwem Twittera musimy lekkozmodyfikowa ekran pocz tkowy
Je li gracz kliknie cze Rozpocznij gr zacznie od razu rozgrywk Je li z kolei kliknie Zalogujprzez Twittera b dzie si musia zalogowa za po rednictwem Twittera po czym nast pi powroacutetdo gry
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
158
Rejestrowanie gry w TwitterzeZanim przejdziemy dalej musimy zarejestrowa gr w Twitterze Aby to zrobi musisz sizalogowa na stron Twittera dla deweloperoacutew (httpsdevtwittercom) a nast pnie kliknpozycj My applications (moje aplikacje) w menu profilu
Nale y utworzy now aplikacj ( cze Create a new application) wype ni wszystkie wymaganepola oraz wyrazi zgod na warunki licencyjne (Rules of the Road) Po zatwierdzeniu wprowa-dzonych danych zostanie wy wietlona strona zawieraj ca dane utworzonej aplikacji
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
159
Trzeba zwroacuteci uwag na dwie informacje ktoacutere na rysunku zosta y otoczone ramk poniewab d potrzebne poacute niej Nale y wykona jeszcze jedn drobn modyfikacj konfiguracjiPrzejd do zak adki Settings (ustawienia) i przyjrzyj si sekcji Application Type (typ aplikacji)Domy lnie jest zaznaczone pole Read only (tylko do odczytu) Je li chcesz w imieniu graczapublikowa tweety musisz wybra opcj Read and Write
W ten sposoacuteb przygotowali my konto na Twitterze do integracji z gr
Pomocnicza bibliotekaKod realizuj cy komunikacj z API Twittera mo na napisa samemu w PHP ale to dosy mud-na praca Na szcz cie jest dost pnych wiele bibliotek ktoacutere mog to upro ci Jedn z nichprzeznaczon dla PHP jest twitteroauth (httpsgithubcomabrahamtwitteroauth) Istniejoczywi cie biblioteki dla innych j zykoacutew koniecznie zajrzyj do dokumentacji Twittera abydowiedzie si wi cej na ten temat
Du zalet biblioteki twitteroauth jest to e mo na j zainstalowa na prawie ka dym serwerzeobs uguj cym PHP Wystarczy skopiowa bibliotek do tego samego katalogu w ktoacuterym znajdujsi skrypty gry W naszym przypadku b dzie to podkatalog twitter
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
160
Musimy zacz od skonfigurowania biblioteki Przydatny b dzie przyk adowy skrypt konfigura-cyjny config-samplephp dost pny w podanym repozytorium Znajduje si w nim kod definiuj cytrzy sta e
define(CONSUMER_KEY (1))define(CONSUMER_SECRET (2))define(OAUTH_CALLBACK (3))
W miejscach (1) i (2) trzeba wpisa warto ci wy wietlone na stronie informacji o utworzonejaplikacji Twittera W miejscu (3) nale y poda adres URL skryptu zwrotnego callbackphp
Ostatnim krokiem jest zmodyfikowanie skryptu callbackphp tak by zawiera prawid oweprzekierowanie do g oacutewnego pliku naszej gry
header(Location indexphp)
UwierzytelnianieNa poni szym diagramie zosta przedstawiony sposoacuteb przeprowadzania uwierzytelniania i auto-ryzacji u ytkownikoacutew w grze za po rednictwem Twittera
W praktyce nie jest to tak skomplikowane na jakie wygl da przede wszystkim dlatego ewi kszo jest ju zaimplementowana w bibliotece twitteroauth Zajmiemy si utworzeniemstrony logowania wy wietlanej po klikni ciu przycisku Zaloguj przez Twittera U yjemy zwy-k ego odsy acza kieruj cego do pliku redirectphp Kiedy u ytkownik kliknie to cze po razpierwszy zostanie przekierowany na stron Twittera na ktoacuterej b dzie moacuteg autoryzowa dost pdo konta
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
161
Po wyra eniu zgody nast pi przekierowanie na adres ktoacutery zosta ustawiony w pliku callbackphpJe li u ytkownik ju raz wyrazi zgod na autoryzacj b dzie moacuteg od razu si zalogowa
W skryptach JavaScript bardzo przyda nam si teraz informacja o tym czy gracz jest po czonyczy nie Aby j uzyska musimy przekszta ci g oacutewny dokument HTML gry w plik PHP i umie-ci na jego pocz tku nast puj cy kod
ltphpsession_start()
require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
Pobranie tokenoacutew u 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-gtget(accountverify_credentials)gt
W tym kodzie rozpoczynamy sesj do czamy dwa pliki biblioteki twitteroauth oraz odczytuje-my token sesji Je li token jest ustawiony oznacza to e u ytkownik jest zalogowany do Twittera
Nast pnie serwer czy si z Twitterem aby pobra obiekt u ytkownika Tak to wygl da postronie serwera ale kod JavaScript wci nie ma informacji o zalogowaniu W zwi zku z tymmusimy utworzy skrypt przesy aj cy dane do kodu klienckiego
ltscript type=textjavascriptgtltphp if($_SESSION[status] == verified) gt var twitter = true var twitterName = ltphp print $user-gtscreen_name gtltphp else gt var twitter = falseltphp gtltscriptgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
162
Je li gracz jest zalogowany do Twittera globalna zmienna twitter ma warto true a zmiennatwitterName zawiera nazw u ytkownika
Ostatnim o co nale y zadba jest poinformowanie u ytkownika o pomy lnym zalogowaniu zapomoc Twittera i umo liwienie wylogowania si W tym celu musimy wprowadzi drobnzmian w kodzie odpowiedzialnym za ekran pocz tkowy wy wietlany po zalogowaniu
ltdiv id=startScreen class=screengt ltphp if($_SESSION[status] = verified) gt lta class=button tweetLink href=twitterredirectphpgtZaloguj przez Twitteraltagt ltphp else gt lta class=button tweetLink href=twitterclearsessionsphpgtWyloguj z Twitteraltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Po wprowadzeniu powy szych modyfikacji mo na uzna e uwierzytelnianie przez Twitterajest zaimplementowane
Publikowanie najlepszych wynikoacutew na TwitterzeTeraz kiedy gracz jest ju zalogowany do Twittera mo na publikowa jego wyniki w znaczniewygodniejszy sposoacuteb ni poprzednio Zaczniemy od utworzenia po stronie serwera skryptutwitterPostphp w ktoacuterym u yjemy interfejsu statusesupdate API Twittera
Spoacutejrzmy na kompletny skrypt
ltphpsession_start()require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
$time = $_SESSION[time]$level = $_SESSION[level]if (isset($time) ampamp isset($level)) Pobranie tokenoacutew u ytkownika z sesji $access_token = $_SESSION[access_token] $connection = new TwitterOAuth(CONSUMER_KEY CONSUMER_SECRET $access_token[oauth_token] $access_token[oauth_token_secret])
$parameters = array(status =gt W a nie uda o mi si sko czy $level poziom gry Yet Another Platformer w $time sekund) $status = $connection-gtpost(statusesupdate $parameters)gt
Najprawdopodobniej rozpoznajesz wi kszo kodu z powy szego listingu ktoacutery dodali my napocz tku skryptu ekranu pocz tkowego (tylko wyroacute niony kod jest nowy) W ostatnich dwoacutechwierszach tworzymy a nast pnie przesy amy do Twittera tekst ktoacutery chcemy opublikowa co
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
163
mdash jak wida mdash jest ca kiem proste Musimy jednak zaj si jeszcze jednym Poniewa graczjest zalogowany znamy jego nazw wi c mo emy j wykorzysta na ekranie tablicy wynikoacutew
W kodzie klienta utworzymy troch inn od dotychczasowej wersj tablicy wynikoacutew
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) if (twitter) top += ltinput id=name type=hidden value=+twitterName+gt + twitterName + + minSec(jsontop[i]time) + lta id=saveScore href=gtZatwierd ltagt + lta id=tweetScore href=gtTweetnijltagt ltbrgt else top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt + lta target=_blank href=httptwittercomhome status=+escape(w a nie uda o mi si sko czy +current Level+ poziom gry Yet Another Platformer w +minSec (jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Tworzymy tu niewidoczne pole wej ciowe przechowuj ce nazw u ytkownika pochodz cz Twittera Nast pnie wypisujemy t nazw na ekranie tablicy wynikoacutew Zwroacute uwag e niemusieli my w ogoacutele zmienia kodu po stronie serwera
Tyle na temat integracji z Twitterem Je eli chcesz dowiedzie si wi cej i rozszerzy funk-cjonalno gry zajrzyj do dokumentacji API Twittera
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
164
Integracja z FacebookiemIntegracja z Facebookiem i Twitterem jest w wielu aspektach podobna Facebook jest jednakw du o wi kszym stopniu nastawiony na gry Zajmiemy si implementacj osi gni dla zalo-gowanych u ytkownikoacutew Skorzystamy z SDK Facebooka dla PHP ale s roacutewnie dost pnerozwi zania dla innych j zykoacutew
Tak jak w przypadku Twittera tu roacutewnie musimy zacz od zarejestrowania aplikacji w Fa-cebooku W tym celu trzeba si zalogowa do serwisu dla deweloperoacutew (httpsdevelopers
facebookcom) i klikn pozycj Apps1
Nast pnie nale y klikn cze Create New App i wype ni obowi zkowe pola formularza Poich zatwierdzeniu pojawi si ekran z informacjami dotycz cymi nowej aplikacji Podobnie jakby o w przypadku Twittera tu roacutewnie najwa niejsze s dwie warto ci co wida na rysunku
1 Aby moacutec tworzy aplikacje trzeba si zarejestrowa jako programista W tym celu musisz klikn przycisk
Register as a Developer mdash przyp t um
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
165
Na powy szym zrzucie strza k zosta a oznaczona sekcja umo liwiaj ca wyboacuter sposobu inte-gracji aplikacji z Facebookiem Aby uzyska pe ny dost p do interfejsu Open Graph API Fa-cebooka ktoacutery umo liwia mi dzy innymi publikowanie osi gni trzeba zaznaczy pozycjAplikacja na Facebooku
Dzi ki temu gra mo e by uruchamiana w ramce (iframe) wewn trz strony Facebooka Jednakaby to by o mo liwe konieczny jest prawid owy certyfikat dla HTTPS obowi zuj cy w dome-nie w ktoacuterej jest dost pna gra Je li jednak chcemy by gra by a adowana z naszego serweranie ma tych wymaga ale i tak trzeba wpisa adres w odpowiednim polu (aby adres zostauznany za poprawny nale y poda https nawet je li nie ma si certyfikatu)
Jest jeszcze jedno co nale y zrobi by aplikacja mog a publikowa osi gni cia mdash nale y jzarejestrowa jako gr W tym celu wystarczy klikn pozycj Informacje o aplikacji a na-st pnie w sekcji Informacje o aplikacji w polach Kategoria ustawi pozycj Gry i ustali gatunekgry co wida na poni szym rysunku
Uwierzytelnianie przez FacebookaPodstawowy mechanizm uwierzytelniania jest bardzo podobny do tego z Twittera ale istniejepewna roacute nica w podej ciu do dost pu W przypadku Twittera mo na by o zdecydowa czyaplikacja ma prawa tylko do odczytu czy roacutewnie zapisu Facebook oferuje znacznie bogatszemo liwo ci ustalania poziomoacutew dost pu przy czym decyduje si o nich w czasie logowania
Kod odpowiedzialny za uwierzytelnianie zosta przedstawiony na poni szym listingu Tu roacutewnie jak w przypadku Twittera musimy umie ci na pocz tku skryptu kod pobieraj cy obiekt bie-
cego u ytkownika
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
166
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()gt
Wyroacute niony wiersz kodu odpowiada za wskazanie e z poziomu gry b dziemy chcieli publiko-wa wpisy na osi czasu u ytkownika W miejscach (1) i (2) nale y wpisa warto ci wy wietlonena stronie konfiguracji aplikacji w Facebooku
Je li zmienna $facebookUser to null oznacza to e u ytkownik jest ju zalogowany W prze-ciwnym przypadku musimy wy wietli przycisk logowania Musimy wi c napisa kod podobnydo tego ktoacutery s u y do wy wietlenia przycisku logowania za po rednictwem Twittera
ltdiv id=startScreen class=screengt ltphp if ($facebookUser) $loginUrl = $facebook-gtgetLoginUrl(array( scope =gt $scope redirect_uri =gt $app_url )) gt lta class=button tweetLink href=ltphp print $loginUrl gtgtZaloguj przez Facebookaltagt ltphp else $logoutUrl = $facebook-gtgetLogoutUrl(array( next =gt $app_url )) gt lta class=button tweetLink href=ltphp print $logoutUrlgtgtWyloguj z Facebookaltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
Spis tre ci
O autorze 9
O recenzencie 10
Wst p 11
Co znajdziesz w ksi ce 11Co b dzie Ci potrzebne 12Dla kogo jest ta ksi ka 12Przyj te konwencje 13Kod przyk adoacutew 14
Rozdzia 1 jQuery w grach 15
Jak u ywa biblioteki jQuery 15Przesuwanie elementoacutew 17Obs uga zdarze 19Wi zanie danych z elementami DOM 21Manipulowanie struktur DOM 21Ciekawo to pierwszy stopie dohellip 23Podsumowanie 23
Rozdzia 2 Tworzymy pierwsz gr 25
Jak pracowa z ksi k 26Przejd my do konkretoacutew mdash gra 26Zaczynamy od podstaw 27Inicjalizowanie gry 37G oacutewna p tla gry 39Wykrywanie kolizji 42Podsumowanie 45
Kup książkę Poleć książkę
Spis tre ci
6
Rozdzia 3 Lepiej i szybciej ale niekoniecznie trudniej 47
Interwa y i odmierzanie czasu 48Odpytywanie klawiatury 53Fragmenty HTML 55Unikanie przebudowywania struktury DOM 56Przemieszczanie spritersquooacutew za pomoc przekszta ce CSS 57Zastosowanie requestAnimationFrame zamiast interwa oacutew 58Podsumowanie 59
Rozdzia 4 Wskakujemy na g bsz wod 61
Od czane elementy div 61Grupy 63Przekszta cenia spritersquooacutew 64Mapy kafelkoacutew 68Wykrywanie kolizji 71Piszemy kod gry 75Podsumowanie 85
Rozdzia 5 Zmieniamy perspektyw 87
Optymalizowanie mapy kafelkoacutew dla gier z perspektyw mapy 88Sortowanie przes aniania 94Wykrywanie kolizji 96Kompletna gra 103Izometryczne kafelki 104Podsumowanie 105
Rozdzia 6 Dodajemy kolejne poziomy 107
Implementowanie gry z o onej z wielu plikoacutew 108Modyfikujemy gr platformow 117Podsumowanie 121
Rozdzia 7 Tworzymy gr typu multiplayer 123
World of ArrsquoPiGi 124Zarz dzanie kontem gracza 124Synchronizacja graczy 132Sterowanie przeciwnikami 137Podsumowanie 141
Rozdzia 8 Wkraczamy w sieci spo eczno ciowe 143
Tworzenie prostej tablicy wynikoacutew 144Mechanizmy utrudniaj ce oszukiwanie 149Integracja z Twitterem 156Integracja z Facebookiem 164Podsumowanie 171
Kup książkę Poleć książkę
Spis tre ci
7
Rozdzia 9 Tworzymy gr mobiln 173
Jak sprawi by gra dobrze dzia a a na urz dzeniach mobilnych 174Sterowanie dotykiem 180Integracja gry z ekranem domowym 188Korzystanie z informacji o orientacji urz dzenia 191Korzystanie z trybu offline 192Lokalne sk adowanie danych 193Podsumowanie 193
Rozdzia 10 Ujarzmiamy d wi k 195
Abstrakcyjna biblioteka obs ugi d wi ku 196Osadzanie d wi ku 198Element audio 200Web Audio API 204Zastosowanie Flasha 211Generowanie efektoacutew d wi kowych 214Podsumowanie 214
Skorowidz 215
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
8
Wkraczamy w siecispo eczno ciowe
Ju w najwcze niejszych grach wideo by o stosowane pewne rozwi zanie zapewniaj ce nies ab-n ce zainteresowanie graczy Chodzi o tablic wynikoacutew Dzi ki niej gracz stara si osi gn zaka dym razem lepszy rezultat mdash od swojego poprzedniego wyniku osi gni przyjacioacute czyinnych graczy z ca ego wiata
Sieci spo eczno ciowe nada y nowy wymiar temu prostemu pomys owi poniewa osi gni tyrezultat mo na opublikowa na osi czasu albo w tweecie Ma to wiele zalet a jedn z nich jestz ca pewno ci to e je eli kto zamie ci swoacutej wynik jego znajomi z du ym prawdopodo-bie stwem b d roacutewnie chcieli zagra w t gr (i osi gn lepszy rezultat)
W tym rozdziale prac rozpoczniemy od przygotowania skryptu tablicy wynikoacutew dzia aj cegopo stronie serwera Zastosujemy tu techniki znane z poprzedniego rozdzia u Nast pnie zaj-miemy si umo liwieniem zalogowania si do gry za pomoc konta na Twitterze oraz umiesz-czaniem tweetoacutew z wynikami
Ostatnia cz rozdzia u jest po wi cona integracji gry z Facebookiem publikowaniu wydarzena osi czasu u ytkownika oraz tworzeniu osi gni
Podczas korzystania z serwisoacutew takich jak Facebook czy Twitter trzeba zwraca szczegoacutelnuwag by post powa zgodnie z ustalonymi tam zasadami oraz na bie co ledzi wszelkieaktualizacje dzi ki czemu gra b dzie zawsze poprawnie funkcjonowa a Aplikacje i gry ktoacuterenie spe niaj wymaga s zazwyczaj blokowane
Dowiesz si jak korzysta z tych dwoacutech konkretnych sieci spo eczno ciowych ale musiszwiedzie e mechanizm stoj cy za wi kszo ci innych tego typu serwisoacutew jest podobny
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
144
W tym rozdziale zostan omoacutewione nast puj ce zagadnienia tworzenie prostej tablicy wynikoacutew wprowadzanie mechanizmoacutew utrudniaj cych oszukiwanie integracja gry z Twitterem umo liwiaj ca publikowanie wynikoacutew integracja gry z Facebookiem pozwalaj ca na zdobywanie osi gni
Tworzenie prostej tablicy wynikoacutewJak si mo na domy li utworzenie tablicy wynikoacutew b dzie wymaga o bazy danych w ktoacuterejb dzie przechowywana punktacja Podobnie jak w poprzednim rozdziale do implementacjigry po stronie serwera u yjemy j zyka PHP i bazy danych MySQL Jednak w przeciwie -stwie do problemu omoacutewionego w poprzednim rozdziale realizacja tablicy wynikoacutew dlawielu graczy jest o wiele prostsza Wynika to st d e nie wymaga zbyt wielu zasoboacutew serweraa operacje na bazie danych nie s wykonywane zbyt cz sto Mo na za o y e dla ka degogracza danie b dzie zg aszane co mniej wi cej 10 sekund a nie mdash jak w przypadku gryMMORPG z poprzedniego rozdzia u mdash kilka razy w ci gu sekundy
Przede wszystkim musimy ustali co b dzie pe ni o funkcj punktacji w grze Zastosujemynajprostsze rozwi zanie czyli zdecydujemy si na czas (wyra ony w sekundach) w ktoacuterymgracz przeszed plansz Poni szy diagram ilustruje algorytm implementowanego mechanizmu
Na potrzeby interfejsu u ytkownika b dziemy musieli utworzy dwa ekrany Post pimy taksamo jak w poprzednim rozdziale czyli u yjemy elementoacutew div ktoacutere b dziemy wy wietlalub ukrywa
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
145
Pierwszy ekran s u y do poinformowania o rozpocz ciu poziomu i daje graczowi czas naprzygotowanie si Drugi ekran jest troch bardziej z o ony Wy wietlane s na nim uzyskanywynik lista pi ciu najlepszych graczy oraz je li aktualny wynik gracza kwalifikuje si do listynajlepszych pole umo liwiaj ce wpisanie si na ni Przyk adowy wygl d tego ekranu zostaprzedstawiony poni ej
Zdecydowali my si na takie rozwi zanie mdash pytanie o nazw u ytkownika nie na pocz tkugry ale dopiero po uzyskaniu wystarczaj cej liczby punktoacutew mdash by odtworzy zachowanie kla-sycznych gier
Podsumowuj c serwer musi obs u y dwie dodatkowe operacje pobranie pi ciu najlepszych wynikoacutew dla danego poziomu zapisanie punktacji dla danego poziomu
Zaimplementujemy je w osobnych plikach highscorephp oraz savephp
Zapisywanie wynikoacutewTabela w bazie danych musi si sk ada z trzech kolumn
level mdash liczba ca kowita okre laj ca numer poziomu gry name mdash a cuch znakoacutew przechowuj cy nazw u ytkownika time mdash liczba ca kowita odpowiadaj ca liczbie sekund ktoacutera up yn a od rozpocz cia
poziomu do jego zako czenia
Skrypt zapisuj cy wyniki jest bardzo prosty Wystarczy e na serwer prze lemy nazw u yt-kownika liczb punktoacutew oraz poziom Otrzymane dane zapiszemy w bazie danych za pomocnast puj cej kwerendy
INSERT INTO scores (level name time) VALUES (1 Krysia 36)
Pozosta a cz skryptu jest bardzo podobna do tego z czym mieli my do czynienia w po-przednich rozdzia ach wi c nie b dziemy tu zamieszcza kodu Pe n wersj skryptu znaj-dziesz w plikach do czonych do ksi ki
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
146
Pobieranie listy najlepszych wynikoacutewAby pobra wyniki z serwera wystarczy przekaza mu numer poziomu a on zwroacuteci punktacj Zastosowali my tu jednak troch bardziej skomplikowany mechanizm Ustalamy dodatkowoczy bie cy u ytkownik zakwalifikowa si na list i mdash je li tak mdash obliczamy na ktoacuterymmiejscu Dzi ki temu b dziemy mogli roacutewnie zaimplementowa zabezpieczenia przeciw-dzia aj ce oszustwom
Musimy wi c dostarczy do serwera poziom oraz uzyskany czas a on zwroacuteci plik JSON zawie-raj cy wszystkie dane niezb dne do wygenerowania tablicy wynikoacutew Format tego pliku przed-stawia si nast puj co
top[ name Tymek time 18 name Anna time 20 time 22 name Jacek time 25 ] intop true pos 2
Jak mo na zauwa y wprowadzili my pole intop ktoacutere informuje czy bie cy u ytkownikznalaz si na li cie pi ciu najlepszych Je li ma ono warto true do czane jest kolejne pole mdashpos ktoacutere przechowuje indeks rezultatu gracza w tablicy wynikoacutew (top) Wszystkie pozosta eelementy tablicy top odpowiadaj uporz dkowanym rosn co wynikom uzyskanym przez innychgraczy Je li pole intop ma warto false tablica top przechowuje jedynie wyniki innych graczy
Pierwszym krokiem b dzie wykonanie poni szego zapytania SQL
SELECT FROM scores WHERE level=1 ORDER BY time ASC LIMIT 5
Jest ono bardzo podobne do poprzednich ale na ko cu (fragment zapisany wyroacute nionym kodem)znajduje si modyfikator wymuszaj cy posortowanie wynikoacutew wzgl dem kolumny time w po-rz dku rosn cym (ORDER BY time ASC) oraz ograniczaj cy liczb zwracanych rekordoacutew do pi ciu(LIMIT 5)
W drugiej kolejno ci trzeba si zaj wygenerowaniem pliku JSON na podstawie danychotrzymanych z kwerendy Jedynym ciekawym fragmentem jest wstawienie wyniku graczaje li uzyska wystarczaj co dobry czas Pe ny kod tego skryptu znajduje si poni ej
ltphp session_start()
include dbconnectphp
$time = $_GET[time]
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
147
$level = $_GET[level]
if (isset($time) ampamp isset($level)) Obiekt JSON $json = array(top=gtarray() intop=gtfalse)
$query = SELECT FROM scores WHERE level=$level ORDER BY time ASC LIMIT 5 $result = mysqli_query($link $query) $i=0
while ($obj = mysqli_fetch_object($result)) if ($json[intop] ampamp $time lt $obj-gttime) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
$i++ if ($i lt 5) array_push($json[top] array(time=gt$obj-gttime name=gt$obj- gtname)) $i++
if ($i lt 5 ampamp $json[intop]) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
mysqli_free_result($result) echo json_encode($json) mysqli_close($link)gt
Na listingu zosta y wyroacute nione te fragmenty ktoacutere odpowiadaj za operacje na wyniku gracza
Wy wietlanie listy najlepszych wynikoacutewPo stronie klienta wygenerujemy ekran przedstawiaj cy wynik list najlepszych graczy orazpole s u ce do wprowadzenia nazwy u ytkownika je li uda o mu si uzyska wystarczaj codobry czas Kod ten przedstawia si nast puj co
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
148
var finishedTime = Mathround((Datenow() - levelStart) 1000) $ajax( dataType json url highscorephp data level currentLevel time finishedTime async false success function(json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + ltinput id=timeScore type=hidden value=+jsontop[i] time+gtltinputgt + ltinput id=level type=hidden value= +currentLevel+gtltinputgt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )fail(function(a b c) var toto = toto )
Kod generuj cy list zosta wyroacute niony Tworzymy pole w ktoacuterym gracz mo e wpisa swojnazw oraz dwa ukryte pola przechowuj ce numer poziomu i punktacj Umieszczamy turoacutewnie odsy acz s u cy do zatwierdzenia wyniku Kod obs uguj cy ten odsy acz znajdujesi poni ej
$(levelEnd)on(click saveScore function() $get(savephp name $(name)val() time $(timeScore)val() level $(level)val() function() $(saveScore)fadeOut(500) ) return false)
Pobieramy tu warto ci z poacutel i przekazujemy je na serwer Po ich przes aniu usuwamy przyciskzatwierdzania aby da zna u ytkownikowi e proces si zako czy
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
149
Mechanizmy utrudniaj ce oszukiwanieNie istnieje idealne rozwi zanie uniemo liwiaj ce oszukiwanie Problem ten jest szczegoacutelnieistotny w grach tworzonych w JavaScripcie poniewa bardzo atwo uzyska dost p do koduroacuted owego Mo na oczywi cie przekszta ci kod do nieczytelnej postaci ale to nie powstrzyma
zdeterminowanego oszusta a jedynie spowolni jego prac Istnieje jednak kilka innych technikdzi ki ktoacuterym proacuteby oszustw staj si trudniejsze i mniej op acalne
Weryfikacja po stronie serweraNajprostszym sposobem na utrudnienie oszukiwania jest przeniesienie cz ci kodu na serwerZrobili my tak z mechanizmem walki w grze tworzonej w rozdziale 7 W przypadku gry plat-formowej musieliby my przesy a na serwer informacje o wciskaniu klawiszy steruj cych po-staci na podstawie ktoacuterych skrypt okre la by jego nowe po o enie
W wi kszo ci przypadkoacutew nie da si zastosowa takiego rozwi zania w tego typu grach alemo na stworzy skrypt ktoacutery b dzie weryfikowa punktacj gracza po stronie serwera Wystarczyw kilku miejscach planszy umie ci niewidoczne punkty kontrolne po osi gni ciu ktoacuterych naserwer jest przesy ana stosowna informacja Dzi ki temu je li u ytkownik przes a na serwerpunktacj ale nie trafi y tam wcze niej informacje z punktoacutew kontrolnych wiemy e co jestnie tak Mo na te zastosowa podobne rozwi zanie ale bazuj ce na przyk ad na liczbie skokoacutewlub pora ek gracza
Tak czy inaczej trzeba wprowadzi w grze jak kolwiek form weryfikacji wynikoacutew Nie majednego najlepszego rozwi zania Musisz jednak pami ta by zastosowany mechanizm niewykry proacuteby oszustwa tam gdzie go nie ma czyli eby uczciwy gracz nie zosta o nie pos -dzony Istotny jest roacutewnie nak ad pracy wymagany do zaimplementowania tego typu mecha-nizmoacutew tak by praca nad nimi nie zaj a przypadkiem wi cej czasu ni tworzenie samej gry
W przedstawionym poni ej przyk adzie zastosujemy proste rozwi zanie Znamy maksymalnpr dko z jak mo e si porusza gracz wiemy te ile ma do przej cia wi c atwo jest obliczyminimalny czas potrzebny na zako czenie poziomu Wystarczy poroacutewna wynik gracza z twarto ci i sprawdzi czy nie jest mniejszy
Aby to zrobi trzeba uzupe ni skrypt highscorephp
gracz mo e przej 7 pikseli w 30 ms -gt 2331$minTime = array( 1 =gt 15 3500 2331 2 =gt 15 3500 2331 3 =gt 42 9800 2331 4 =gt 23 5460 2331)$timeValid = ($minTime[intval($level)] lt intval($time))while ($obj = mysqli_fetch_object($result))
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
150
if ($json[intop] ampamp $time lt $obj-gttime ampamp $timeValid)
Je li wynik osi gni ty przez gracza zosta uznany za nieprawdziwy zostanie wy wietlony alegracz nie b dzie moacuteg wpisa swojej nazwy
Mniej czytelne zmienneInnym rozwi zaniem jest zmniejszenie czytelno ci zmiennych tak by utrudni analiz danychprzesy anych na serwer oraz ich modyfikacj (dane te s w naszym przypadku zapisane w ukry-tych polach formularza) Rozwi zanie to wydaje si dobre ale niestety nietrudno jest obej ta-kie zabezpieczenia Na poni szym rysunku zosta o przedstawione okno inspektora przegl darkiChrome
Jedn z naczelnych zasad jest unikanie przechowywania istotnych informacji w elementachznajduj cych si w strukturze DOM poniewa maj do nich dost p wszyscy u ytkownicy nawettacy ktoacuterzy z programowaniem maj niewiele do czynienia W zwi zku z tym usuniemy jez wywo ania skryptu savephp i zapiszemy je w sesji W pliku highscorephp musimy doda na-st puj cy kod
if ($json[intop] ampamp $time lt $obj-gttime ampamp $timeValid) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
151
$_SESSION[level] = $level $_SESSION[time] = $time
$i++
W skrypcie savephp musimy z sesji odczyta poziom i czas
$name = $_GET[name]$time = $_SESSION[time]$level = $_SESSION[level]
Te proste zmiany wystarcz by utrudni oszukiwanie w naszej grze
Zaciemnianie koduZaciemnianie kodu (ang obfuscating) jest bardzo prost technik ale przy tym ca kiem sku-teczn Przekszta cony w ten sposoacuteb kod trudno analizowa poniewa jest nieczytelny dlaludzi Poni ej znajduje si fragment kodu odpowiedzialnego za tablic wynikoacutew
if (status == finished) gameState = menu $(level_nb_2)html(currentLevel) $(level_nb_1)html(currentLevel + 1)
var finishedTime = Mathround((Datenow() - levelStart) 1000) $ajax( dataType json url highscorephp data level currentLevel time finishedTime async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + ltinput id=timeScore type=hidden value=+jsontop[i] time+gtltinputgt + ltinput id=level type=hidden value= +currentLevel+gtltinputgt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
152
$(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) gfx(group 0)
tilemap = loadNextLevel(group) gfx(playerdiv 0) gfy(playerdiv 0) gfsetAnimation(playerdiv playerAnimjump) ) status = stand
Ten sam kod poddany operacji zaciemniania (za pomoc narz dzia UglifyJS) wygl da nast puj co
if(finished==status)gameState=menu$(level_nb_2)html(currentLevel)$(level_nb_1)html(currentLevel+1)varfinishedTime=Mathround((Datenow()-levelStart)1e3)$ajax(dataTypejsonurlhighscorephpdatalevelcurrentLeveltimefinishedTimeasync1successfunction(a)for(var b=c=0atoplengthgtcc++)b+=aintopampampapos===cltinput id=name placeholder=_____ size=5gtltinput id=timeScore type=hidden value=+atop[c]time+gtltinputgt+ltinput id=level type=hidden value=+currentLevel+gtltinputgt+ +minSec(atop[c]time)+ lta id=saveScorehref=gtsubmitltagt ltbrgt+atop[c]name+ +minSec(atop[c]time)+ltbrgt$(top_list)html(b))fail(function())$(time)html(minSec(finishedTime))$(levelEnd)fadeIn(2e3function()$(backgroundFront)css(background-position0px0px)$(backgroundBack)css(background-position0px 0px)gfx(group0)tilemap=loadNextLevel(group)gfx(playerdiv0)gfy(playerdiv0)gfsetAnimation(playerdivplayerAnimjump))status=stand
Z ca pewno ci analiza takiego kodu jest du o trudniejsza a zyskujemy przy okazji co jeszczemdashprzetworzony w ten sposoacuteb kod jest kroacutetszy ni orygina
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
153
Mniej czytelny protokoacute sieciowyChocia poprawili my kod dzia aj cy po stronie klienta nadal istnieje mo liwo uzyskania do-st pu do warto ci przesy anych zmiennych poprzez analiz ruchu sieciowego Na poni szymrysunku zosta o przedstawione okno aplikacji nas uchuj cej ktoacutera wy wietla dane przesy ane pozako czeniu poziomu
Jest to problem poniewa w celu oszustwa u ytkownik nie musi modyfikowa kodu mdash wystarczysfa szowa pakiet przesy any na serwer Istniej trzy proste sposoby na utrudnienie analizowaniatransmitowanych danych
1 Nadawanie zmiennym przypadkowych nazw tak by na ich podstawie nie da o siokre li ich przeznaczenia
2 Kodowanie zawarto ci zmiennych U ytkownik zna przewa nie osi gni ty przez siebiewynik wi c na jego podstawie mo e znale w transmitowanych danych odpowiednizmienn i j zmodyfikowa Dzi ki zakodowaniu tej warto ci zadanie to stanie sitrudniejsze
3 Dodanie wielu przypadkowych zmiennych Dzi ki temu trudniej si domy li ktoacuteraz nich przechowuje istotne dane
Podobnie jak w przypadku wcze niej opisywanych metod te roacutewnie jedynie utrudniaj proacutebyoszustwa ale nie daj stuprocentowego zabezpieczenia Roacutewnoczesne zastosowanie kilkurozwi za mo e zniech ci nawet najbardziej zdeterminowanych oszustoacutew Poni ej znaj-dziesz propozycj implementacji ka dego z nich
Kodowanie warto ciZaczniemy od kodowania warto ci Mo na to zrobi na wiele sposoboacutew roacute ni cych si uzy-skiwanym stopniem bezpiecze stwa W naszym przypadku wystarczy utrudni odszukaniewyniku na li cie przesy anych zmiennych w zwi zku z czym nie musimy wprowadza adnej
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
154
skomplikowanej metody kodowania W kodzie klienta u yjemy operacji przesuni cia w lewo(ltlt) a na serwerze mdash przesuni cia w prawo (gtgt)
Oto kod skryptu dzia aj cego na kliencie
$ajax( dataType json url highscorephp data level currentLevel time finishedTime ltlt 1 async false success function (json) )
Odpowiedni fragment skryptu na serwerze
$time = intval($_GET[time]) gtgt 1
Aby jeszcze bardziej zmyli u ytkownika warto t prze lemy w wielu innych zmiennychktoacutere nie b d w ogoacutele brane pod uwag po stronie serwera
Przypadkowe nazwy zmiennychNie trzeba tu wiele wyja nia mdash wystarczy zmieni nazw zmiennej Je li chcesz jeszczebardziej utrudni zadanie oszustom mo esz zmienia t nazw przy ka dym daniu Poni ejpodstawowa wersja kodu
$ajax( dataType json url highscorephp data Nmyzsf currentLevel WfBCLQ finishedTime ltlt 1 async false success function (json) )
Kod po stronie serwera przyjmie nast puj c posta
$time = intval($_GET[WfBCLQ]) gtgt 1$level = $_GET[Nmyzsf]
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
155
Dodatkowe przypadkowe zmienneNazwy zmiennych nie oddaj ju znaczenia przechowywanych przez nie warto ci ale to niewszystko poniewa stosunkowo atwo sprawdzi ktoacutera z nich odpowiada za wynik Musimy wi cdoda wi cej zmiennych ktoacuterych zadaniem jest wprowadzenie oszusta w b d Przyk adowerozwi zanie zosta o przedstawione na poni szym listingu
$ajax( dataType json url highscorephp data sXZZUj Mathround(200Mathrandom()) enHf8F Mathround(200Mathrandom()) eZnqBG currentLevel avFanB Mathround(200Mathrandom()) zkpCfb currentLevel PCXFTR Mathround(200Mathrandom()) Nmyzsf currentLevel FYGswh Mathround(200Mathrandom()) C3kaTz finishedTime ltlt 1 gU7buf finishedTime ykN65g Mathround(200Mathrandom()) Q5jUZm Mathround(200Mathrandom()) bb5d7V Mathround(200Mathrandom()) WTsrdm finishedTime ltlt 1 bCW5Dg currentLevel AFM8MN Mathround(200Mathrandom()) FUHt6K Mathround(200Mathrandom()) WfBCLQ finishedTime ltlt 1 d8mzVn Mathround(200Mathrandom()) bHxNpb Mathround(200Mathrandom()) MWcmCz finishedTime ZAat42 Mathround(200Mathrandom()) async false success function (json) )
W kodzie serwera nie trzeba nic zmienia poniewa dodatkowe zmienne s po prostu igno-rowane Mo na oczywi cie jeszcze bardziej skomplikowa spraw i wprowadzi dodatkowezale no ci mi dzy zmiennymi Nale y jednak ca y czas pami ta ktoacutere zmienne przechowujistotne dane by roacutewnie sobie nie utrudni zadania
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
156
Integracja z TwitteremTwitter daje mo liwo dzielenia si z innymi kroacutetkimi informacjami W przypadku gier mo emyz niego skorzysta na dwa sposoby
mo emy umo liwi graczowi zalogowanie si do gry za pomoc nazwy u ytkownikai has a z Twittera
mo emy da mo liwo publikowania tweetoacutew z wynikami lub informacjamio post pach w grze
Zajmiemy si teraz zaimplementowaniem tych dwoacutech funkcji
Podstawy TwitteraIstnieje bardzo prosty sposoacuteb korzystania z Twittera ktoacutery nie wymaga znajomo ci adnegoAPI Je li u ytkownik jest zalogowany za po rednictwem odpowiednio przygotowanego adresuURL mo na opublikowa tweet URL powinien by zbudowany w nast puj cy sposoacuteb
httptwittercomhomestatus=Przyk adowy tweet
Wyroacute niony fragment adresu to tekst tweeta Na ekranie tablicy wynikoacutew obok przyciskuZatwierd umie cimy odsy acz Tweetnij
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmit ltagt + lta id=tweetScore target=_blank href=http twittercomhomestatus=+escape(W a nie uda o mi si sko czy +currentLevel+ poziom gry Yet Another Platformer w +minSec(jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
157
Najistotniejszy jest wyroacute niony fragment kodu bo to dzi ki niemu dzieje si to co powinno Za-stosowali my tu javascriptow funkcj escape by dostarczany test by poprawnie sformatowany
Jak wida bardzo atwo zaimplementowa to rozwi zanie ale trzeba wiedzie o kilku ograni-czeniach
Je li u ytkownik nie jest zalogowany pojawi si ekran logowania Twittera Na ekranie tablicy wynikoacutew nie mo na u y nazwy u ytkownika z Twittera
W zwi zku z tym nawet je li u ytkownik b dzie chcia tweetn swoacutej wyniki tak b dzie musia poda swoj nazw w grze
Publikowanie ka dego tweeta powoduje otwarcie nowego okna przegl darkiw ktoacuterym u ytkownik musi potwierdzi t operacj
Je li chcieliby my umo liwi u ytkownikowi zalogowanie si i automatyczne publikowanietweetoacutew bez konieczno ci ka dorazowego otwierania nowego okna musimy skorzysta z APITwittera
Pe ny dost p do API TwitteraNajpe niejsza integracja gry z Twitterem wymaga zapytania u ytkownika o zgod na po czeniejego konta z gr Mo na w tym celu skorzysta z mechanizmu OAuth ktoacutery jest otwartym stan-dardem uwierzytelniania stosowanym przez wiele firm takich jak Twitter Google czy Facebook
Aby da u ytkownikom mo liwo zalogowania si za po rednictwem Twittera musimy lekkozmodyfikowa ekran pocz tkowy
Je li gracz kliknie cze Rozpocznij gr zacznie od razu rozgrywk Je li z kolei kliknie Zalogujprzez Twittera b dzie si musia zalogowa za po rednictwem Twittera po czym nast pi powroacutetdo gry
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
158
Rejestrowanie gry w TwitterzeZanim przejdziemy dalej musimy zarejestrowa gr w Twitterze Aby to zrobi musisz sizalogowa na stron Twittera dla deweloperoacutew (httpsdevtwittercom) a nast pnie kliknpozycj My applications (moje aplikacje) w menu profilu
Nale y utworzy now aplikacj ( cze Create a new application) wype ni wszystkie wymaganepola oraz wyrazi zgod na warunki licencyjne (Rules of the Road) Po zatwierdzeniu wprowa-dzonych danych zostanie wy wietlona strona zawieraj ca dane utworzonej aplikacji
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
159
Trzeba zwroacuteci uwag na dwie informacje ktoacutere na rysunku zosta y otoczone ramk poniewab d potrzebne poacute niej Nale y wykona jeszcze jedn drobn modyfikacj konfiguracjiPrzejd do zak adki Settings (ustawienia) i przyjrzyj si sekcji Application Type (typ aplikacji)Domy lnie jest zaznaczone pole Read only (tylko do odczytu) Je li chcesz w imieniu graczapublikowa tweety musisz wybra opcj Read and Write
W ten sposoacuteb przygotowali my konto na Twitterze do integracji z gr
Pomocnicza bibliotekaKod realizuj cy komunikacj z API Twittera mo na napisa samemu w PHP ale to dosy mud-na praca Na szcz cie jest dost pnych wiele bibliotek ktoacutere mog to upro ci Jedn z nichprzeznaczon dla PHP jest twitteroauth (httpsgithubcomabrahamtwitteroauth) Istniejoczywi cie biblioteki dla innych j zykoacutew koniecznie zajrzyj do dokumentacji Twittera abydowiedzie si wi cej na ten temat
Du zalet biblioteki twitteroauth jest to e mo na j zainstalowa na prawie ka dym serwerzeobs uguj cym PHP Wystarczy skopiowa bibliotek do tego samego katalogu w ktoacuterym znajdujsi skrypty gry W naszym przypadku b dzie to podkatalog twitter
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
160
Musimy zacz od skonfigurowania biblioteki Przydatny b dzie przyk adowy skrypt konfigura-cyjny config-samplephp dost pny w podanym repozytorium Znajduje si w nim kod definiuj cytrzy sta e
define(CONSUMER_KEY (1))define(CONSUMER_SECRET (2))define(OAUTH_CALLBACK (3))
W miejscach (1) i (2) trzeba wpisa warto ci wy wietlone na stronie informacji o utworzonejaplikacji Twittera W miejscu (3) nale y poda adres URL skryptu zwrotnego callbackphp
Ostatnim krokiem jest zmodyfikowanie skryptu callbackphp tak by zawiera prawid oweprzekierowanie do g oacutewnego pliku naszej gry
header(Location indexphp)
UwierzytelnianieNa poni szym diagramie zosta przedstawiony sposoacuteb przeprowadzania uwierzytelniania i auto-ryzacji u ytkownikoacutew w grze za po rednictwem Twittera
W praktyce nie jest to tak skomplikowane na jakie wygl da przede wszystkim dlatego ewi kszo jest ju zaimplementowana w bibliotece twitteroauth Zajmiemy si utworzeniemstrony logowania wy wietlanej po klikni ciu przycisku Zaloguj przez Twittera U yjemy zwy-k ego odsy acza kieruj cego do pliku redirectphp Kiedy u ytkownik kliknie to cze po razpierwszy zostanie przekierowany na stron Twittera na ktoacuterej b dzie moacuteg autoryzowa dost pdo konta
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
161
Po wyra eniu zgody nast pi przekierowanie na adres ktoacutery zosta ustawiony w pliku callbackphpJe li u ytkownik ju raz wyrazi zgod na autoryzacj b dzie moacuteg od razu si zalogowa
W skryptach JavaScript bardzo przyda nam si teraz informacja o tym czy gracz jest po czonyczy nie Aby j uzyska musimy przekszta ci g oacutewny dokument HTML gry w plik PHP i umie-ci na jego pocz tku nast puj cy kod
ltphpsession_start()
require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
Pobranie tokenoacutew u 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-gtget(accountverify_credentials)gt
W tym kodzie rozpoczynamy sesj do czamy dwa pliki biblioteki twitteroauth oraz odczytuje-my token sesji Je li token jest ustawiony oznacza to e u ytkownik jest zalogowany do Twittera
Nast pnie serwer czy si z Twitterem aby pobra obiekt u ytkownika Tak to wygl da postronie serwera ale kod JavaScript wci nie ma informacji o zalogowaniu W zwi zku z tymmusimy utworzy skrypt przesy aj cy dane do kodu klienckiego
ltscript type=textjavascriptgtltphp if($_SESSION[status] == verified) gt var twitter = true var twitterName = ltphp print $user-gtscreen_name gtltphp else gt var twitter = falseltphp gtltscriptgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
162
Je li gracz jest zalogowany do Twittera globalna zmienna twitter ma warto true a zmiennatwitterName zawiera nazw u ytkownika
Ostatnim o co nale y zadba jest poinformowanie u ytkownika o pomy lnym zalogowaniu zapomoc Twittera i umo liwienie wylogowania si W tym celu musimy wprowadzi drobnzmian w kodzie odpowiedzialnym za ekran pocz tkowy wy wietlany po zalogowaniu
ltdiv id=startScreen class=screengt ltphp if($_SESSION[status] = verified) gt lta class=button tweetLink href=twitterredirectphpgtZaloguj przez Twitteraltagt ltphp else gt lta class=button tweetLink href=twitterclearsessionsphpgtWyloguj z Twitteraltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Po wprowadzeniu powy szych modyfikacji mo na uzna e uwierzytelnianie przez Twitterajest zaimplementowane
Publikowanie najlepszych wynikoacutew na TwitterzeTeraz kiedy gracz jest ju zalogowany do Twittera mo na publikowa jego wyniki w znaczniewygodniejszy sposoacuteb ni poprzednio Zaczniemy od utworzenia po stronie serwera skryptutwitterPostphp w ktoacuterym u yjemy interfejsu statusesupdate API Twittera
Spoacutejrzmy na kompletny skrypt
ltphpsession_start()require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
$time = $_SESSION[time]$level = $_SESSION[level]if (isset($time) ampamp isset($level)) Pobranie tokenoacutew u ytkownika z sesji $access_token = $_SESSION[access_token] $connection = new TwitterOAuth(CONSUMER_KEY CONSUMER_SECRET $access_token[oauth_token] $access_token[oauth_token_secret])
$parameters = array(status =gt W a nie uda o mi si sko czy $level poziom gry Yet Another Platformer w $time sekund) $status = $connection-gtpost(statusesupdate $parameters)gt
Najprawdopodobniej rozpoznajesz wi kszo kodu z powy szego listingu ktoacutery dodali my napocz tku skryptu ekranu pocz tkowego (tylko wyroacute niony kod jest nowy) W ostatnich dwoacutechwierszach tworzymy a nast pnie przesy amy do Twittera tekst ktoacutery chcemy opublikowa co
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
163
mdash jak wida mdash jest ca kiem proste Musimy jednak zaj si jeszcze jednym Poniewa graczjest zalogowany znamy jego nazw wi c mo emy j wykorzysta na ekranie tablicy wynikoacutew
W kodzie klienta utworzymy troch inn od dotychczasowej wersj tablicy wynikoacutew
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) if (twitter) top += ltinput id=name type=hidden value=+twitterName+gt + twitterName + + minSec(jsontop[i]time) + lta id=saveScore href=gtZatwierd ltagt + lta id=tweetScore href=gtTweetnijltagt ltbrgt else top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt + lta target=_blank href=httptwittercomhome status=+escape(w a nie uda o mi si sko czy +current Level+ poziom gry Yet Another Platformer w +minSec (jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Tworzymy tu niewidoczne pole wej ciowe przechowuj ce nazw u ytkownika pochodz cz Twittera Nast pnie wypisujemy t nazw na ekranie tablicy wynikoacutew Zwroacute uwag e niemusieli my w ogoacutele zmienia kodu po stronie serwera
Tyle na temat integracji z Twitterem Je eli chcesz dowiedzie si wi cej i rozszerzy funk-cjonalno gry zajrzyj do dokumentacji API Twittera
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
164
Integracja z FacebookiemIntegracja z Facebookiem i Twitterem jest w wielu aspektach podobna Facebook jest jednakw du o wi kszym stopniu nastawiony na gry Zajmiemy si implementacj osi gni dla zalo-gowanych u ytkownikoacutew Skorzystamy z SDK Facebooka dla PHP ale s roacutewnie dost pnerozwi zania dla innych j zykoacutew
Tak jak w przypadku Twittera tu roacutewnie musimy zacz od zarejestrowania aplikacji w Fa-cebooku W tym celu trzeba si zalogowa do serwisu dla deweloperoacutew (httpsdevelopers
facebookcom) i klikn pozycj Apps1
Nast pnie nale y klikn cze Create New App i wype ni obowi zkowe pola formularza Poich zatwierdzeniu pojawi si ekran z informacjami dotycz cymi nowej aplikacji Podobnie jakby o w przypadku Twittera tu roacutewnie najwa niejsze s dwie warto ci co wida na rysunku
1 Aby moacutec tworzy aplikacje trzeba si zarejestrowa jako programista W tym celu musisz klikn przycisk
Register as a Developer mdash przyp t um
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
165
Na powy szym zrzucie strza k zosta a oznaczona sekcja umo liwiaj ca wyboacuter sposobu inte-gracji aplikacji z Facebookiem Aby uzyska pe ny dost p do interfejsu Open Graph API Fa-cebooka ktoacutery umo liwia mi dzy innymi publikowanie osi gni trzeba zaznaczy pozycjAplikacja na Facebooku
Dzi ki temu gra mo e by uruchamiana w ramce (iframe) wewn trz strony Facebooka Jednakaby to by o mo liwe konieczny jest prawid owy certyfikat dla HTTPS obowi zuj cy w dome-nie w ktoacuterej jest dost pna gra Je li jednak chcemy by gra by a adowana z naszego serweranie ma tych wymaga ale i tak trzeba wpisa adres w odpowiednim polu (aby adres zostauznany za poprawny nale y poda https nawet je li nie ma si certyfikatu)
Jest jeszcze jedno co nale y zrobi by aplikacja mog a publikowa osi gni cia mdash nale y jzarejestrowa jako gr W tym celu wystarczy klikn pozycj Informacje o aplikacji a na-st pnie w sekcji Informacje o aplikacji w polach Kategoria ustawi pozycj Gry i ustali gatunekgry co wida na poni szym rysunku
Uwierzytelnianie przez FacebookaPodstawowy mechanizm uwierzytelniania jest bardzo podobny do tego z Twittera ale istniejepewna roacute nica w podej ciu do dost pu W przypadku Twittera mo na by o zdecydowa czyaplikacja ma prawa tylko do odczytu czy roacutewnie zapisu Facebook oferuje znacznie bogatszemo liwo ci ustalania poziomoacutew dost pu przy czym decyduje si o nich w czasie logowania
Kod odpowiedzialny za uwierzytelnianie zosta przedstawiony na poni szym listingu Tu roacutewnie jak w przypadku Twittera musimy umie ci na pocz tku skryptu kod pobieraj cy obiekt bie-
cego u ytkownika
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
166
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()gt
Wyroacute niony wiersz kodu odpowiada za wskazanie e z poziomu gry b dziemy chcieli publiko-wa wpisy na osi czasu u ytkownika W miejscach (1) i (2) nale y wpisa warto ci wy wietlonena stronie konfiguracji aplikacji w Facebooku
Je li zmienna $facebookUser to null oznacza to e u ytkownik jest ju zalogowany W prze-ciwnym przypadku musimy wy wietli przycisk logowania Musimy wi c napisa kod podobnydo tego ktoacutery s u y do wy wietlenia przycisku logowania za po rednictwem Twittera
ltdiv id=startScreen class=screengt ltphp if ($facebookUser) $loginUrl = $facebook-gtgetLoginUrl(array( scope =gt $scope redirect_uri =gt $app_url )) gt lta class=button tweetLink href=ltphp print $loginUrl gtgtZaloguj przez Facebookaltagt ltphp else $logoutUrl = $facebook-gtgetLogoutUrl(array( next =gt $app_url )) gt lta class=button tweetLink href=ltphp print $logoutUrlgtgtWyloguj z Facebookaltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
Spis tre ci
6
Rozdzia 3 Lepiej i szybciej ale niekoniecznie trudniej 47
Interwa y i odmierzanie czasu 48Odpytywanie klawiatury 53Fragmenty HTML 55Unikanie przebudowywania struktury DOM 56Przemieszczanie spritersquooacutew za pomoc przekszta ce CSS 57Zastosowanie requestAnimationFrame zamiast interwa oacutew 58Podsumowanie 59
Rozdzia 4 Wskakujemy na g bsz wod 61
Od czane elementy div 61Grupy 63Przekszta cenia spritersquooacutew 64Mapy kafelkoacutew 68Wykrywanie kolizji 71Piszemy kod gry 75Podsumowanie 85
Rozdzia 5 Zmieniamy perspektyw 87
Optymalizowanie mapy kafelkoacutew dla gier z perspektyw mapy 88Sortowanie przes aniania 94Wykrywanie kolizji 96Kompletna gra 103Izometryczne kafelki 104Podsumowanie 105
Rozdzia 6 Dodajemy kolejne poziomy 107
Implementowanie gry z o onej z wielu plikoacutew 108Modyfikujemy gr platformow 117Podsumowanie 121
Rozdzia 7 Tworzymy gr typu multiplayer 123
World of ArrsquoPiGi 124Zarz dzanie kontem gracza 124Synchronizacja graczy 132Sterowanie przeciwnikami 137Podsumowanie 141
Rozdzia 8 Wkraczamy w sieci spo eczno ciowe 143
Tworzenie prostej tablicy wynikoacutew 144Mechanizmy utrudniaj ce oszukiwanie 149Integracja z Twitterem 156Integracja z Facebookiem 164Podsumowanie 171
Kup książkę Poleć książkę
Spis tre ci
7
Rozdzia 9 Tworzymy gr mobiln 173
Jak sprawi by gra dobrze dzia a a na urz dzeniach mobilnych 174Sterowanie dotykiem 180Integracja gry z ekranem domowym 188Korzystanie z informacji o orientacji urz dzenia 191Korzystanie z trybu offline 192Lokalne sk adowanie danych 193Podsumowanie 193
Rozdzia 10 Ujarzmiamy d wi k 195
Abstrakcyjna biblioteka obs ugi d wi ku 196Osadzanie d wi ku 198Element audio 200Web Audio API 204Zastosowanie Flasha 211Generowanie efektoacutew d wi kowych 214Podsumowanie 214
Skorowidz 215
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
8
Wkraczamy w siecispo eczno ciowe
Ju w najwcze niejszych grach wideo by o stosowane pewne rozwi zanie zapewniaj ce nies ab-n ce zainteresowanie graczy Chodzi o tablic wynikoacutew Dzi ki niej gracz stara si osi gn zaka dym razem lepszy rezultat mdash od swojego poprzedniego wyniku osi gni przyjacioacute czyinnych graczy z ca ego wiata
Sieci spo eczno ciowe nada y nowy wymiar temu prostemu pomys owi poniewa osi gni tyrezultat mo na opublikowa na osi czasu albo w tweecie Ma to wiele zalet a jedn z nich jestz ca pewno ci to e je eli kto zamie ci swoacutej wynik jego znajomi z du ym prawdopodo-bie stwem b d roacutewnie chcieli zagra w t gr (i osi gn lepszy rezultat)
W tym rozdziale prac rozpoczniemy od przygotowania skryptu tablicy wynikoacutew dzia aj cegopo stronie serwera Zastosujemy tu techniki znane z poprzedniego rozdzia u Nast pnie zaj-miemy si umo liwieniem zalogowania si do gry za pomoc konta na Twitterze oraz umiesz-czaniem tweetoacutew z wynikami
Ostatnia cz rozdzia u jest po wi cona integracji gry z Facebookiem publikowaniu wydarzena osi czasu u ytkownika oraz tworzeniu osi gni
Podczas korzystania z serwisoacutew takich jak Facebook czy Twitter trzeba zwraca szczegoacutelnuwag by post powa zgodnie z ustalonymi tam zasadami oraz na bie co ledzi wszelkieaktualizacje dzi ki czemu gra b dzie zawsze poprawnie funkcjonowa a Aplikacje i gry ktoacuterenie spe niaj wymaga s zazwyczaj blokowane
Dowiesz si jak korzysta z tych dwoacutech konkretnych sieci spo eczno ciowych ale musiszwiedzie e mechanizm stoj cy za wi kszo ci innych tego typu serwisoacutew jest podobny
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
144
W tym rozdziale zostan omoacutewione nast puj ce zagadnienia tworzenie prostej tablicy wynikoacutew wprowadzanie mechanizmoacutew utrudniaj cych oszukiwanie integracja gry z Twitterem umo liwiaj ca publikowanie wynikoacutew integracja gry z Facebookiem pozwalaj ca na zdobywanie osi gni
Tworzenie prostej tablicy wynikoacutewJak si mo na domy li utworzenie tablicy wynikoacutew b dzie wymaga o bazy danych w ktoacuterejb dzie przechowywana punktacja Podobnie jak w poprzednim rozdziale do implementacjigry po stronie serwera u yjemy j zyka PHP i bazy danych MySQL Jednak w przeciwie -stwie do problemu omoacutewionego w poprzednim rozdziale realizacja tablicy wynikoacutew dlawielu graczy jest o wiele prostsza Wynika to st d e nie wymaga zbyt wielu zasoboacutew serweraa operacje na bazie danych nie s wykonywane zbyt cz sto Mo na za o y e dla ka degogracza danie b dzie zg aszane co mniej wi cej 10 sekund a nie mdash jak w przypadku gryMMORPG z poprzedniego rozdzia u mdash kilka razy w ci gu sekundy
Przede wszystkim musimy ustali co b dzie pe ni o funkcj punktacji w grze Zastosujemynajprostsze rozwi zanie czyli zdecydujemy si na czas (wyra ony w sekundach) w ktoacuterymgracz przeszed plansz Poni szy diagram ilustruje algorytm implementowanego mechanizmu
Na potrzeby interfejsu u ytkownika b dziemy musieli utworzy dwa ekrany Post pimy taksamo jak w poprzednim rozdziale czyli u yjemy elementoacutew div ktoacutere b dziemy wy wietlalub ukrywa
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
145
Pierwszy ekran s u y do poinformowania o rozpocz ciu poziomu i daje graczowi czas naprzygotowanie si Drugi ekran jest troch bardziej z o ony Wy wietlane s na nim uzyskanywynik lista pi ciu najlepszych graczy oraz je li aktualny wynik gracza kwalifikuje si do listynajlepszych pole umo liwiaj ce wpisanie si na ni Przyk adowy wygl d tego ekranu zostaprzedstawiony poni ej
Zdecydowali my si na takie rozwi zanie mdash pytanie o nazw u ytkownika nie na pocz tkugry ale dopiero po uzyskaniu wystarczaj cej liczby punktoacutew mdash by odtworzy zachowanie kla-sycznych gier
Podsumowuj c serwer musi obs u y dwie dodatkowe operacje pobranie pi ciu najlepszych wynikoacutew dla danego poziomu zapisanie punktacji dla danego poziomu
Zaimplementujemy je w osobnych plikach highscorephp oraz savephp
Zapisywanie wynikoacutewTabela w bazie danych musi si sk ada z trzech kolumn
level mdash liczba ca kowita okre laj ca numer poziomu gry name mdash a cuch znakoacutew przechowuj cy nazw u ytkownika time mdash liczba ca kowita odpowiadaj ca liczbie sekund ktoacutera up yn a od rozpocz cia
poziomu do jego zako czenia
Skrypt zapisuj cy wyniki jest bardzo prosty Wystarczy e na serwer prze lemy nazw u yt-kownika liczb punktoacutew oraz poziom Otrzymane dane zapiszemy w bazie danych za pomocnast puj cej kwerendy
INSERT INTO scores (level name time) VALUES (1 Krysia 36)
Pozosta a cz skryptu jest bardzo podobna do tego z czym mieli my do czynienia w po-przednich rozdzia ach wi c nie b dziemy tu zamieszcza kodu Pe n wersj skryptu znaj-dziesz w plikach do czonych do ksi ki
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
146
Pobieranie listy najlepszych wynikoacutewAby pobra wyniki z serwera wystarczy przekaza mu numer poziomu a on zwroacuteci punktacj Zastosowali my tu jednak troch bardziej skomplikowany mechanizm Ustalamy dodatkowoczy bie cy u ytkownik zakwalifikowa si na list i mdash je li tak mdash obliczamy na ktoacuterymmiejscu Dzi ki temu b dziemy mogli roacutewnie zaimplementowa zabezpieczenia przeciw-dzia aj ce oszustwom
Musimy wi c dostarczy do serwera poziom oraz uzyskany czas a on zwroacuteci plik JSON zawie-raj cy wszystkie dane niezb dne do wygenerowania tablicy wynikoacutew Format tego pliku przed-stawia si nast puj co
top[ name Tymek time 18 name Anna time 20 time 22 name Jacek time 25 ] intop true pos 2
Jak mo na zauwa y wprowadzili my pole intop ktoacutere informuje czy bie cy u ytkownikznalaz si na li cie pi ciu najlepszych Je li ma ono warto true do czane jest kolejne pole mdashpos ktoacutere przechowuje indeks rezultatu gracza w tablicy wynikoacutew (top) Wszystkie pozosta eelementy tablicy top odpowiadaj uporz dkowanym rosn co wynikom uzyskanym przez innychgraczy Je li pole intop ma warto false tablica top przechowuje jedynie wyniki innych graczy
Pierwszym krokiem b dzie wykonanie poni szego zapytania SQL
SELECT FROM scores WHERE level=1 ORDER BY time ASC LIMIT 5
Jest ono bardzo podobne do poprzednich ale na ko cu (fragment zapisany wyroacute nionym kodem)znajduje si modyfikator wymuszaj cy posortowanie wynikoacutew wzgl dem kolumny time w po-rz dku rosn cym (ORDER BY time ASC) oraz ograniczaj cy liczb zwracanych rekordoacutew do pi ciu(LIMIT 5)
W drugiej kolejno ci trzeba si zaj wygenerowaniem pliku JSON na podstawie danychotrzymanych z kwerendy Jedynym ciekawym fragmentem jest wstawienie wyniku graczaje li uzyska wystarczaj co dobry czas Pe ny kod tego skryptu znajduje si poni ej
ltphp session_start()
include dbconnectphp
$time = $_GET[time]
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
147
$level = $_GET[level]
if (isset($time) ampamp isset($level)) Obiekt JSON $json = array(top=gtarray() intop=gtfalse)
$query = SELECT FROM scores WHERE level=$level ORDER BY time ASC LIMIT 5 $result = mysqli_query($link $query) $i=0
while ($obj = mysqli_fetch_object($result)) if ($json[intop] ampamp $time lt $obj-gttime) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
$i++ if ($i lt 5) array_push($json[top] array(time=gt$obj-gttime name=gt$obj- gtname)) $i++
if ($i lt 5 ampamp $json[intop]) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
mysqli_free_result($result) echo json_encode($json) mysqli_close($link)gt
Na listingu zosta y wyroacute nione te fragmenty ktoacutere odpowiadaj za operacje na wyniku gracza
Wy wietlanie listy najlepszych wynikoacutewPo stronie klienta wygenerujemy ekran przedstawiaj cy wynik list najlepszych graczy orazpole s u ce do wprowadzenia nazwy u ytkownika je li uda o mu si uzyska wystarczaj codobry czas Kod ten przedstawia si nast puj co
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
148
var finishedTime = Mathround((Datenow() - levelStart) 1000) $ajax( dataType json url highscorephp data level currentLevel time finishedTime async false success function(json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + ltinput id=timeScore type=hidden value=+jsontop[i] time+gtltinputgt + ltinput id=level type=hidden value= +currentLevel+gtltinputgt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )fail(function(a b c) var toto = toto )
Kod generuj cy list zosta wyroacute niony Tworzymy pole w ktoacuterym gracz mo e wpisa swojnazw oraz dwa ukryte pola przechowuj ce numer poziomu i punktacj Umieszczamy turoacutewnie odsy acz s u cy do zatwierdzenia wyniku Kod obs uguj cy ten odsy acz znajdujesi poni ej
$(levelEnd)on(click saveScore function() $get(savephp name $(name)val() time $(timeScore)val() level $(level)val() function() $(saveScore)fadeOut(500) ) return false)
Pobieramy tu warto ci z poacutel i przekazujemy je na serwer Po ich przes aniu usuwamy przyciskzatwierdzania aby da zna u ytkownikowi e proces si zako czy
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
149
Mechanizmy utrudniaj ce oszukiwanieNie istnieje idealne rozwi zanie uniemo liwiaj ce oszukiwanie Problem ten jest szczegoacutelnieistotny w grach tworzonych w JavaScripcie poniewa bardzo atwo uzyska dost p do koduroacuted owego Mo na oczywi cie przekszta ci kod do nieczytelnej postaci ale to nie powstrzyma
zdeterminowanego oszusta a jedynie spowolni jego prac Istnieje jednak kilka innych technikdzi ki ktoacuterym proacuteby oszustw staj si trudniejsze i mniej op acalne
Weryfikacja po stronie serweraNajprostszym sposobem na utrudnienie oszukiwania jest przeniesienie cz ci kodu na serwerZrobili my tak z mechanizmem walki w grze tworzonej w rozdziale 7 W przypadku gry plat-formowej musieliby my przesy a na serwer informacje o wciskaniu klawiszy steruj cych po-staci na podstawie ktoacuterych skrypt okre la by jego nowe po o enie
W wi kszo ci przypadkoacutew nie da si zastosowa takiego rozwi zania w tego typu grach alemo na stworzy skrypt ktoacutery b dzie weryfikowa punktacj gracza po stronie serwera Wystarczyw kilku miejscach planszy umie ci niewidoczne punkty kontrolne po osi gni ciu ktoacuterych naserwer jest przesy ana stosowna informacja Dzi ki temu je li u ytkownik przes a na serwerpunktacj ale nie trafi y tam wcze niej informacje z punktoacutew kontrolnych wiemy e co jestnie tak Mo na te zastosowa podobne rozwi zanie ale bazuj ce na przyk ad na liczbie skokoacutewlub pora ek gracza
Tak czy inaczej trzeba wprowadzi w grze jak kolwiek form weryfikacji wynikoacutew Nie majednego najlepszego rozwi zania Musisz jednak pami ta by zastosowany mechanizm niewykry proacuteby oszustwa tam gdzie go nie ma czyli eby uczciwy gracz nie zosta o nie pos -dzony Istotny jest roacutewnie nak ad pracy wymagany do zaimplementowania tego typu mecha-nizmoacutew tak by praca nad nimi nie zaj a przypadkiem wi cej czasu ni tworzenie samej gry
W przedstawionym poni ej przyk adzie zastosujemy proste rozwi zanie Znamy maksymalnpr dko z jak mo e si porusza gracz wiemy te ile ma do przej cia wi c atwo jest obliczyminimalny czas potrzebny na zako czenie poziomu Wystarczy poroacutewna wynik gracza z twarto ci i sprawdzi czy nie jest mniejszy
Aby to zrobi trzeba uzupe ni skrypt highscorephp
gracz mo e przej 7 pikseli w 30 ms -gt 2331$minTime = array( 1 =gt 15 3500 2331 2 =gt 15 3500 2331 3 =gt 42 9800 2331 4 =gt 23 5460 2331)$timeValid = ($minTime[intval($level)] lt intval($time))while ($obj = mysqli_fetch_object($result))
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
150
if ($json[intop] ampamp $time lt $obj-gttime ampamp $timeValid)
Je li wynik osi gni ty przez gracza zosta uznany za nieprawdziwy zostanie wy wietlony alegracz nie b dzie moacuteg wpisa swojej nazwy
Mniej czytelne zmienneInnym rozwi zaniem jest zmniejszenie czytelno ci zmiennych tak by utrudni analiz danychprzesy anych na serwer oraz ich modyfikacj (dane te s w naszym przypadku zapisane w ukry-tych polach formularza) Rozwi zanie to wydaje si dobre ale niestety nietrudno jest obej ta-kie zabezpieczenia Na poni szym rysunku zosta o przedstawione okno inspektora przegl darkiChrome
Jedn z naczelnych zasad jest unikanie przechowywania istotnych informacji w elementachznajduj cych si w strukturze DOM poniewa maj do nich dost p wszyscy u ytkownicy nawettacy ktoacuterzy z programowaniem maj niewiele do czynienia W zwi zku z tym usuniemy jez wywo ania skryptu savephp i zapiszemy je w sesji W pliku highscorephp musimy doda na-st puj cy kod
if ($json[intop] ampamp $time lt $obj-gttime ampamp $timeValid) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
151
$_SESSION[level] = $level $_SESSION[time] = $time
$i++
W skrypcie savephp musimy z sesji odczyta poziom i czas
$name = $_GET[name]$time = $_SESSION[time]$level = $_SESSION[level]
Te proste zmiany wystarcz by utrudni oszukiwanie w naszej grze
Zaciemnianie koduZaciemnianie kodu (ang obfuscating) jest bardzo prost technik ale przy tym ca kiem sku-teczn Przekszta cony w ten sposoacuteb kod trudno analizowa poniewa jest nieczytelny dlaludzi Poni ej znajduje si fragment kodu odpowiedzialnego za tablic wynikoacutew
if (status == finished) gameState = menu $(level_nb_2)html(currentLevel) $(level_nb_1)html(currentLevel + 1)
var finishedTime = Mathround((Datenow() - levelStart) 1000) $ajax( dataType json url highscorephp data level currentLevel time finishedTime async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + ltinput id=timeScore type=hidden value=+jsontop[i] time+gtltinputgt + ltinput id=level type=hidden value= +currentLevel+gtltinputgt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
152
$(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) gfx(group 0)
tilemap = loadNextLevel(group) gfx(playerdiv 0) gfy(playerdiv 0) gfsetAnimation(playerdiv playerAnimjump) ) status = stand
Ten sam kod poddany operacji zaciemniania (za pomoc narz dzia UglifyJS) wygl da nast puj co
if(finished==status)gameState=menu$(level_nb_2)html(currentLevel)$(level_nb_1)html(currentLevel+1)varfinishedTime=Mathround((Datenow()-levelStart)1e3)$ajax(dataTypejsonurlhighscorephpdatalevelcurrentLeveltimefinishedTimeasync1successfunction(a)for(var b=c=0atoplengthgtcc++)b+=aintopampampapos===cltinput id=name placeholder=_____ size=5gtltinput id=timeScore type=hidden value=+atop[c]time+gtltinputgt+ltinput id=level type=hidden value=+currentLevel+gtltinputgt+ +minSec(atop[c]time)+ lta id=saveScorehref=gtsubmitltagt ltbrgt+atop[c]name+ +minSec(atop[c]time)+ltbrgt$(top_list)html(b))fail(function())$(time)html(minSec(finishedTime))$(levelEnd)fadeIn(2e3function()$(backgroundFront)css(background-position0px0px)$(backgroundBack)css(background-position0px 0px)gfx(group0)tilemap=loadNextLevel(group)gfx(playerdiv0)gfy(playerdiv0)gfsetAnimation(playerdivplayerAnimjump))status=stand
Z ca pewno ci analiza takiego kodu jest du o trudniejsza a zyskujemy przy okazji co jeszczemdashprzetworzony w ten sposoacuteb kod jest kroacutetszy ni orygina
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
153
Mniej czytelny protokoacute sieciowyChocia poprawili my kod dzia aj cy po stronie klienta nadal istnieje mo liwo uzyskania do-st pu do warto ci przesy anych zmiennych poprzez analiz ruchu sieciowego Na poni szymrysunku zosta o przedstawione okno aplikacji nas uchuj cej ktoacutera wy wietla dane przesy ane pozako czeniu poziomu
Jest to problem poniewa w celu oszustwa u ytkownik nie musi modyfikowa kodu mdash wystarczysfa szowa pakiet przesy any na serwer Istniej trzy proste sposoby na utrudnienie analizowaniatransmitowanych danych
1 Nadawanie zmiennym przypadkowych nazw tak by na ich podstawie nie da o siokre li ich przeznaczenia
2 Kodowanie zawarto ci zmiennych U ytkownik zna przewa nie osi gni ty przez siebiewynik wi c na jego podstawie mo e znale w transmitowanych danych odpowiednizmienn i j zmodyfikowa Dzi ki zakodowaniu tej warto ci zadanie to stanie sitrudniejsze
3 Dodanie wielu przypadkowych zmiennych Dzi ki temu trudniej si domy li ktoacuteraz nich przechowuje istotne dane
Podobnie jak w przypadku wcze niej opisywanych metod te roacutewnie jedynie utrudniaj proacutebyoszustwa ale nie daj stuprocentowego zabezpieczenia Roacutewnoczesne zastosowanie kilkurozwi za mo e zniech ci nawet najbardziej zdeterminowanych oszustoacutew Poni ej znaj-dziesz propozycj implementacji ka dego z nich
Kodowanie warto ciZaczniemy od kodowania warto ci Mo na to zrobi na wiele sposoboacutew roacute ni cych si uzy-skiwanym stopniem bezpiecze stwa W naszym przypadku wystarczy utrudni odszukaniewyniku na li cie przesy anych zmiennych w zwi zku z czym nie musimy wprowadza adnej
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
154
skomplikowanej metody kodowania W kodzie klienta u yjemy operacji przesuni cia w lewo(ltlt) a na serwerze mdash przesuni cia w prawo (gtgt)
Oto kod skryptu dzia aj cego na kliencie
$ajax( dataType json url highscorephp data level currentLevel time finishedTime ltlt 1 async false success function (json) )
Odpowiedni fragment skryptu na serwerze
$time = intval($_GET[time]) gtgt 1
Aby jeszcze bardziej zmyli u ytkownika warto t prze lemy w wielu innych zmiennychktoacutere nie b d w ogoacutele brane pod uwag po stronie serwera
Przypadkowe nazwy zmiennychNie trzeba tu wiele wyja nia mdash wystarczy zmieni nazw zmiennej Je li chcesz jeszczebardziej utrudni zadanie oszustom mo esz zmienia t nazw przy ka dym daniu Poni ejpodstawowa wersja kodu
$ajax( dataType json url highscorephp data Nmyzsf currentLevel WfBCLQ finishedTime ltlt 1 async false success function (json) )
Kod po stronie serwera przyjmie nast puj c posta
$time = intval($_GET[WfBCLQ]) gtgt 1$level = $_GET[Nmyzsf]
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
155
Dodatkowe przypadkowe zmienneNazwy zmiennych nie oddaj ju znaczenia przechowywanych przez nie warto ci ale to niewszystko poniewa stosunkowo atwo sprawdzi ktoacutera z nich odpowiada za wynik Musimy wi cdoda wi cej zmiennych ktoacuterych zadaniem jest wprowadzenie oszusta w b d Przyk adowerozwi zanie zosta o przedstawione na poni szym listingu
$ajax( dataType json url highscorephp data sXZZUj Mathround(200Mathrandom()) enHf8F Mathround(200Mathrandom()) eZnqBG currentLevel avFanB Mathround(200Mathrandom()) zkpCfb currentLevel PCXFTR Mathround(200Mathrandom()) Nmyzsf currentLevel FYGswh Mathround(200Mathrandom()) C3kaTz finishedTime ltlt 1 gU7buf finishedTime ykN65g Mathround(200Mathrandom()) Q5jUZm Mathround(200Mathrandom()) bb5d7V Mathround(200Mathrandom()) WTsrdm finishedTime ltlt 1 bCW5Dg currentLevel AFM8MN Mathround(200Mathrandom()) FUHt6K Mathround(200Mathrandom()) WfBCLQ finishedTime ltlt 1 d8mzVn Mathround(200Mathrandom()) bHxNpb Mathround(200Mathrandom()) MWcmCz finishedTime ZAat42 Mathround(200Mathrandom()) async false success function (json) )
W kodzie serwera nie trzeba nic zmienia poniewa dodatkowe zmienne s po prostu igno-rowane Mo na oczywi cie jeszcze bardziej skomplikowa spraw i wprowadzi dodatkowezale no ci mi dzy zmiennymi Nale y jednak ca y czas pami ta ktoacutere zmienne przechowujistotne dane by roacutewnie sobie nie utrudni zadania
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
156
Integracja z TwitteremTwitter daje mo liwo dzielenia si z innymi kroacutetkimi informacjami W przypadku gier mo emyz niego skorzysta na dwa sposoby
mo emy umo liwi graczowi zalogowanie si do gry za pomoc nazwy u ytkownikai has a z Twittera
mo emy da mo liwo publikowania tweetoacutew z wynikami lub informacjamio post pach w grze
Zajmiemy si teraz zaimplementowaniem tych dwoacutech funkcji
Podstawy TwitteraIstnieje bardzo prosty sposoacuteb korzystania z Twittera ktoacutery nie wymaga znajomo ci adnegoAPI Je li u ytkownik jest zalogowany za po rednictwem odpowiednio przygotowanego adresuURL mo na opublikowa tweet URL powinien by zbudowany w nast puj cy sposoacuteb
httptwittercomhomestatus=Przyk adowy tweet
Wyroacute niony fragment adresu to tekst tweeta Na ekranie tablicy wynikoacutew obok przyciskuZatwierd umie cimy odsy acz Tweetnij
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmit ltagt + lta id=tweetScore target=_blank href=http twittercomhomestatus=+escape(W a nie uda o mi si sko czy +currentLevel+ poziom gry Yet Another Platformer w +minSec(jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
157
Najistotniejszy jest wyroacute niony fragment kodu bo to dzi ki niemu dzieje si to co powinno Za-stosowali my tu javascriptow funkcj escape by dostarczany test by poprawnie sformatowany
Jak wida bardzo atwo zaimplementowa to rozwi zanie ale trzeba wiedzie o kilku ograni-czeniach
Je li u ytkownik nie jest zalogowany pojawi si ekran logowania Twittera Na ekranie tablicy wynikoacutew nie mo na u y nazwy u ytkownika z Twittera
W zwi zku z tym nawet je li u ytkownik b dzie chcia tweetn swoacutej wyniki tak b dzie musia poda swoj nazw w grze
Publikowanie ka dego tweeta powoduje otwarcie nowego okna przegl darkiw ktoacuterym u ytkownik musi potwierdzi t operacj
Je li chcieliby my umo liwi u ytkownikowi zalogowanie si i automatyczne publikowanietweetoacutew bez konieczno ci ka dorazowego otwierania nowego okna musimy skorzysta z APITwittera
Pe ny dost p do API TwitteraNajpe niejsza integracja gry z Twitterem wymaga zapytania u ytkownika o zgod na po czeniejego konta z gr Mo na w tym celu skorzysta z mechanizmu OAuth ktoacutery jest otwartym stan-dardem uwierzytelniania stosowanym przez wiele firm takich jak Twitter Google czy Facebook
Aby da u ytkownikom mo liwo zalogowania si za po rednictwem Twittera musimy lekkozmodyfikowa ekran pocz tkowy
Je li gracz kliknie cze Rozpocznij gr zacznie od razu rozgrywk Je li z kolei kliknie Zalogujprzez Twittera b dzie si musia zalogowa za po rednictwem Twittera po czym nast pi powroacutetdo gry
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
158
Rejestrowanie gry w TwitterzeZanim przejdziemy dalej musimy zarejestrowa gr w Twitterze Aby to zrobi musisz sizalogowa na stron Twittera dla deweloperoacutew (httpsdevtwittercom) a nast pnie kliknpozycj My applications (moje aplikacje) w menu profilu
Nale y utworzy now aplikacj ( cze Create a new application) wype ni wszystkie wymaganepola oraz wyrazi zgod na warunki licencyjne (Rules of the Road) Po zatwierdzeniu wprowa-dzonych danych zostanie wy wietlona strona zawieraj ca dane utworzonej aplikacji
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
159
Trzeba zwroacuteci uwag na dwie informacje ktoacutere na rysunku zosta y otoczone ramk poniewab d potrzebne poacute niej Nale y wykona jeszcze jedn drobn modyfikacj konfiguracjiPrzejd do zak adki Settings (ustawienia) i przyjrzyj si sekcji Application Type (typ aplikacji)Domy lnie jest zaznaczone pole Read only (tylko do odczytu) Je li chcesz w imieniu graczapublikowa tweety musisz wybra opcj Read and Write
W ten sposoacuteb przygotowali my konto na Twitterze do integracji z gr
Pomocnicza bibliotekaKod realizuj cy komunikacj z API Twittera mo na napisa samemu w PHP ale to dosy mud-na praca Na szcz cie jest dost pnych wiele bibliotek ktoacutere mog to upro ci Jedn z nichprzeznaczon dla PHP jest twitteroauth (httpsgithubcomabrahamtwitteroauth) Istniejoczywi cie biblioteki dla innych j zykoacutew koniecznie zajrzyj do dokumentacji Twittera abydowiedzie si wi cej na ten temat
Du zalet biblioteki twitteroauth jest to e mo na j zainstalowa na prawie ka dym serwerzeobs uguj cym PHP Wystarczy skopiowa bibliotek do tego samego katalogu w ktoacuterym znajdujsi skrypty gry W naszym przypadku b dzie to podkatalog twitter
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
160
Musimy zacz od skonfigurowania biblioteki Przydatny b dzie przyk adowy skrypt konfigura-cyjny config-samplephp dost pny w podanym repozytorium Znajduje si w nim kod definiuj cytrzy sta e
define(CONSUMER_KEY (1))define(CONSUMER_SECRET (2))define(OAUTH_CALLBACK (3))
W miejscach (1) i (2) trzeba wpisa warto ci wy wietlone na stronie informacji o utworzonejaplikacji Twittera W miejscu (3) nale y poda adres URL skryptu zwrotnego callbackphp
Ostatnim krokiem jest zmodyfikowanie skryptu callbackphp tak by zawiera prawid oweprzekierowanie do g oacutewnego pliku naszej gry
header(Location indexphp)
UwierzytelnianieNa poni szym diagramie zosta przedstawiony sposoacuteb przeprowadzania uwierzytelniania i auto-ryzacji u ytkownikoacutew w grze za po rednictwem Twittera
W praktyce nie jest to tak skomplikowane na jakie wygl da przede wszystkim dlatego ewi kszo jest ju zaimplementowana w bibliotece twitteroauth Zajmiemy si utworzeniemstrony logowania wy wietlanej po klikni ciu przycisku Zaloguj przez Twittera U yjemy zwy-k ego odsy acza kieruj cego do pliku redirectphp Kiedy u ytkownik kliknie to cze po razpierwszy zostanie przekierowany na stron Twittera na ktoacuterej b dzie moacuteg autoryzowa dost pdo konta
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
161
Po wyra eniu zgody nast pi przekierowanie na adres ktoacutery zosta ustawiony w pliku callbackphpJe li u ytkownik ju raz wyrazi zgod na autoryzacj b dzie moacuteg od razu si zalogowa
W skryptach JavaScript bardzo przyda nam si teraz informacja o tym czy gracz jest po czonyczy nie Aby j uzyska musimy przekszta ci g oacutewny dokument HTML gry w plik PHP i umie-ci na jego pocz tku nast puj cy kod
ltphpsession_start()
require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
Pobranie tokenoacutew u 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-gtget(accountverify_credentials)gt
W tym kodzie rozpoczynamy sesj do czamy dwa pliki biblioteki twitteroauth oraz odczytuje-my token sesji Je li token jest ustawiony oznacza to e u ytkownik jest zalogowany do Twittera
Nast pnie serwer czy si z Twitterem aby pobra obiekt u ytkownika Tak to wygl da postronie serwera ale kod JavaScript wci nie ma informacji o zalogowaniu W zwi zku z tymmusimy utworzy skrypt przesy aj cy dane do kodu klienckiego
ltscript type=textjavascriptgtltphp if($_SESSION[status] == verified) gt var twitter = true var twitterName = ltphp print $user-gtscreen_name gtltphp else gt var twitter = falseltphp gtltscriptgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
162
Je li gracz jest zalogowany do Twittera globalna zmienna twitter ma warto true a zmiennatwitterName zawiera nazw u ytkownika
Ostatnim o co nale y zadba jest poinformowanie u ytkownika o pomy lnym zalogowaniu zapomoc Twittera i umo liwienie wylogowania si W tym celu musimy wprowadzi drobnzmian w kodzie odpowiedzialnym za ekran pocz tkowy wy wietlany po zalogowaniu
ltdiv id=startScreen class=screengt ltphp if($_SESSION[status] = verified) gt lta class=button tweetLink href=twitterredirectphpgtZaloguj przez Twitteraltagt ltphp else gt lta class=button tweetLink href=twitterclearsessionsphpgtWyloguj z Twitteraltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Po wprowadzeniu powy szych modyfikacji mo na uzna e uwierzytelnianie przez Twitterajest zaimplementowane
Publikowanie najlepszych wynikoacutew na TwitterzeTeraz kiedy gracz jest ju zalogowany do Twittera mo na publikowa jego wyniki w znaczniewygodniejszy sposoacuteb ni poprzednio Zaczniemy od utworzenia po stronie serwera skryptutwitterPostphp w ktoacuterym u yjemy interfejsu statusesupdate API Twittera
Spoacutejrzmy na kompletny skrypt
ltphpsession_start()require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
$time = $_SESSION[time]$level = $_SESSION[level]if (isset($time) ampamp isset($level)) Pobranie tokenoacutew u ytkownika z sesji $access_token = $_SESSION[access_token] $connection = new TwitterOAuth(CONSUMER_KEY CONSUMER_SECRET $access_token[oauth_token] $access_token[oauth_token_secret])
$parameters = array(status =gt W a nie uda o mi si sko czy $level poziom gry Yet Another Platformer w $time sekund) $status = $connection-gtpost(statusesupdate $parameters)gt
Najprawdopodobniej rozpoznajesz wi kszo kodu z powy szego listingu ktoacutery dodali my napocz tku skryptu ekranu pocz tkowego (tylko wyroacute niony kod jest nowy) W ostatnich dwoacutechwierszach tworzymy a nast pnie przesy amy do Twittera tekst ktoacutery chcemy opublikowa co
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
163
mdash jak wida mdash jest ca kiem proste Musimy jednak zaj si jeszcze jednym Poniewa graczjest zalogowany znamy jego nazw wi c mo emy j wykorzysta na ekranie tablicy wynikoacutew
W kodzie klienta utworzymy troch inn od dotychczasowej wersj tablicy wynikoacutew
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) if (twitter) top += ltinput id=name type=hidden value=+twitterName+gt + twitterName + + minSec(jsontop[i]time) + lta id=saveScore href=gtZatwierd ltagt + lta id=tweetScore href=gtTweetnijltagt ltbrgt else top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt + lta target=_blank href=httptwittercomhome status=+escape(w a nie uda o mi si sko czy +current Level+ poziom gry Yet Another Platformer w +minSec (jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Tworzymy tu niewidoczne pole wej ciowe przechowuj ce nazw u ytkownika pochodz cz Twittera Nast pnie wypisujemy t nazw na ekranie tablicy wynikoacutew Zwroacute uwag e niemusieli my w ogoacutele zmienia kodu po stronie serwera
Tyle na temat integracji z Twitterem Je eli chcesz dowiedzie si wi cej i rozszerzy funk-cjonalno gry zajrzyj do dokumentacji API Twittera
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
164
Integracja z FacebookiemIntegracja z Facebookiem i Twitterem jest w wielu aspektach podobna Facebook jest jednakw du o wi kszym stopniu nastawiony na gry Zajmiemy si implementacj osi gni dla zalo-gowanych u ytkownikoacutew Skorzystamy z SDK Facebooka dla PHP ale s roacutewnie dost pnerozwi zania dla innych j zykoacutew
Tak jak w przypadku Twittera tu roacutewnie musimy zacz od zarejestrowania aplikacji w Fa-cebooku W tym celu trzeba si zalogowa do serwisu dla deweloperoacutew (httpsdevelopers
facebookcom) i klikn pozycj Apps1
Nast pnie nale y klikn cze Create New App i wype ni obowi zkowe pola formularza Poich zatwierdzeniu pojawi si ekran z informacjami dotycz cymi nowej aplikacji Podobnie jakby o w przypadku Twittera tu roacutewnie najwa niejsze s dwie warto ci co wida na rysunku
1 Aby moacutec tworzy aplikacje trzeba si zarejestrowa jako programista W tym celu musisz klikn przycisk
Register as a Developer mdash przyp t um
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
165
Na powy szym zrzucie strza k zosta a oznaczona sekcja umo liwiaj ca wyboacuter sposobu inte-gracji aplikacji z Facebookiem Aby uzyska pe ny dost p do interfejsu Open Graph API Fa-cebooka ktoacutery umo liwia mi dzy innymi publikowanie osi gni trzeba zaznaczy pozycjAplikacja na Facebooku
Dzi ki temu gra mo e by uruchamiana w ramce (iframe) wewn trz strony Facebooka Jednakaby to by o mo liwe konieczny jest prawid owy certyfikat dla HTTPS obowi zuj cy w dome-nie w ktoacuterej jest dost pna gra Je li jednak chcemy by gra by a adowana z naszego serweranie ma tych wymaga ale i tak trzeba wpisa adres w odpowiednim polu (aby adres zostauznany za poprawny nale y poda https nawet je li nie ma si certyfikatu)
Jest jeszcze jedno co nale y zrobi by aplikacja mog a publikowa osi gni cia mdash nale y jzarejestrowa jako gr W tym celu wystarczy klikn pozycj Informacje o aplikacji a na-st pnie w sekcji Informacje o aplikacji w polach Kategoria ustawi pozycj Gry i ustali gatunekgry co wida na poni szym rysunku
Uwierzytelnianie przez FacebookaPodstawowy mechanizm uwierzytelniania jest bardzo podobny do tego z Twittera ale istniejepewna roacute nica w podej ciu do dost pu W przypadku Twittera mo na by o zdecydowa czyaplikacja ma prawa tylko do odczytu czy roacutewnie zapisu Facebook oferuje znacznie bogatszemo liwo ci ustalania poziomoacutew dost pu przy czym decyduje si o nich w czasie logowania
Kod odpowiedzialny za uwierzytelnianie zosta przedstawiony na poni szym listingu Tu roacutewnie jak w przypadku Twittera musimy umie ci na pocz tku skryptu kod pobieraj cy obiekt bie-
cego u ytkownika
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
166
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()gt
Wyroacute niony wiersz kodu odpowiada za wskazanie e z poziomu gry b dziemy chcieli publiko-wa wpisy na osi czasu u ytkownika W miejscach (1) i (2) nale y wpisa warto ci wy wietlonena stronie konfiguracji aplikacji w Facebooku
Je li zmienna $facebookUser to null oznacza to e u ytkownik jest ju zalogowany W prze-ciwnym przypadku musimy wy wietli przycisk logowania Musimy wi c napisa kod podobnydo tego ktoacutery s u y do wy wietlenia przycisku logowania za po rednictwem Twittera
ltdiv id=startScreen class=screengt ltphp if ($facebookUser) $loginUrl = $facebook-gtgetLoginUrl(array( scope =gt $scope redirect_uri =gt $app_url )) gt lta class=button tweetLink href=ltphp print $loginUrl gtgtZaloguj przez Facebookaltagt ltphp else $logoutUrl = $facebook-gtgetLogoutUrl(array( next =gt $app_url )) gt lta class=button tweetLink href=ltphp print $logoutUrlgtgtWyloguj z Facebookaltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
Spis tre ci
7
Rozdzia 9 Tworzymy gr mobiln 173
Jak sprawi by gra dobrze dzia a a na urz dzeniach mobilnych 174Sterowanie dotykiem 180Integracja gry z ekranem domowym 188Korzystanie z informacji o orientacji urz dzenia 191Korzystanie z trybu offline 192Lokalne sk adowanie danych 193Podsumowanie 193
Rozdzia 10 Ujarzmiamy d wi k 195
Abstrakcyjna biblioteka obs ugi d wi ku 196Osadzanie d wi ku 198Element audio 200Web Audio API 204Zastosowanie Flasha 211Generowanie efektoacutew d wi kowych 214Podsumowanie 214
Skorowidz 215
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
8
Wkraczamy w siecispo eczno ciowe
Ju w najwcze niejszych grach wideo by o stosowane pewne rozwi zanie zapewniaj ce nies ab-n ce zainteresowanie graczy Chodzi o tablic wynikoacutew Dzi ki niej gracz stara si osi gn zaka dym razem lepszy rezultat mdash od swojego poprzedniego wyniku osi gni przyjacioacute czyinnych graczy z ca ego wiata
Sieci spo eczno ciowe nada y nowy wymiar temu prostemu pomys owi poniewa osi gni tyrezultat mo na opublikowa na osi czasu albo w tweecie Ma to wiele zalet a jedn z nich jestz ca pewno ci to e je eli kto zamie ci swoacutej wynik jego znajomi z du ym prawdopodo-bie stwem b d roacutewnie chcieli zagra w t gr (i osi gn lepszy rezultat)
W tym rozdziale prac rozpoczniemy od przygotowania skryptu tablicy wynikoacutew dzia aj cegopo stronie serwera Zastosujemy tu techniki znane z poprzedniego rozdzia u Nast pnie zaj-miemy si umo liwieniem zalogowania si do gry za pomoc konta na Twitterze oraz umiesz-czaniem tweetoacutew z wynikami
Ostatnia cz rozdzia u jest po wi cona integracji gry z Facebookiem publikowaniu wydarzena osi czasu u ytkownika oraz tworzeniu osi gni
Podczas korzystania z serwisoacutew takich jak Facebook czy Twitter trzeba zwraca szczegoacutelnuwag by post powa zgodnie z ustalonymi tam zasadami oraz na bie co ledzi wszelkieaktualizacje dzi ki czemu gra b dzie zawsze poprawnie funkcjonowa a Aplikacje i gry ktoacuterenie spe niaj wymaga s zazwyczaj blokowane
Dowiesz si jak korzysta z tych dwoacutech konkretnych sieci spo eczno ciowych ale musiszwiedzie e mechanizm stoj cy za wi kszo ci innych tego typu serwisoacutew jest podobny
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
144
W tym rozdziale zostan omoacutewione nast puj ce zagadnienia tworzenie prostej tablicy wynikoacutew wprowadzanie mechanizmoacutew utrudniaj cych oszukiwanie integracja gry z Twitterem umo liwiaj ca publikowanie wynikoacutew integracja gry z Facebookiem pozwalaj ca na zdobywanie osi gni
Tworzenie prostej tablicy wynikoacutewJak si mo na domy li utworzenie tablicy wynikoacutew b dzie wymaga o bazy danych w ktoacuterejb dzie przechowywana punktacja Podobnie jak w poprzednim rozdziale do implementacjigry po stronie serwera u yjemy j zyka PHP i bazy danych MySQL Jednak w przeciwie -stwie do problemu omoacutewionego w poprzednim rozdziale realizacja tablicy wynikoacutew dlawielu graczy jest o wiele prostsza Wynika to st d e nie wymaga zbyt wielu zasoboacutew serweraa operacje na bazie danych nie s wykonywane zbyt cz sto Mo na za o y e dla ka degogracza danie b dzie zg aszane co mniej wi cej 10 sekund a nie mdash jak w przypadku gryMMORPG z poprzedniego rozdzia u mdash kilka razy w ci gu sekundy
Przede wszystkim musimy ustali co b dzie pe ni o funkcj punktacji w grze Zastosujemynajprostsze rozwi zanie czyli zdecydujemy si na czas (wyra ony w sekundach) w ktoacuterymgracz przeszed plansz Poni szy diagram ilustruje algorytm implementowanego mechanizmu
Na potrzeby interfejsu u ytkownika b dziemy musieli utworzy dwa ekrany Post pimy taksamo jak w poprzednim rozdziale czyli u yjemy elementoacutew div ktoacutere b dziemy wy wietlalub ukrywa
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
145
Pierwszy ekran s u y do poinformowania o rozpocz ciu poziomu i daje graczowi czas naprzygotowanie si Drugi ekran jest troch bardziej z o ony Wy wietlane s na nim uzyskanywynik lista pi ciu najlepszych graczy oraz je li aktualny wynik gracza kwalifikuje si do listynajlepszych pole umo liwiaj ce wpisanie si na ni Przyk adowy wygl d tego ekranu zostaprzedstawiony poni ej
Zdecydowali my si na takie rozwi zanie mdash pytanie o nazw u ytkownika nie na pocz tkugry ale dopiero po uzyskaniu wystarczaj cej liczby punktoacutew mdash by odtworzy zachowanie kla-sycznych gier
Podsumowuj c serwer musi obs u y dwie dodatkowe operacje pobranie pi ciu najlepszych wynikoacutew dla danego poziomu zapisanie punktacji dla danego poziomu
Zaimplementujemy je w osobnych plikach highscorephp oraz savephp
Zapisywanie wynikoacutewTabela w bazie danych musi si sk ada z trzech kolumn
level mdash liczba ca kowita okre laj ca numer poziomu gry name mdash a cuch znakoacutew przechowuj cy nazw u ytkownika time mdash liczba ca kowita odpowiadaj ca liczbie sekund ktoacutera up yn a od rozpocz cia
poziomu do jego zako czenia
Skrypt zapisuj cy wyniki jest bardzo prosty Wystarczy e na serwer prze lemy nazw u yt-kownika liczb punktoacutew oraz poziom Otrzymane dane zapiszemy w bazie danych za pomocnast puj cej kwerendy
INSERT INTO scores (level name time) VALUES (1 Krysia 36)
Pozosta a cz skryptu jest bardzo podobna do tego z czym mieli my do czynienia w po-przednich rozdzia ach wi c nie b dziemy tu zamieszcza kodu Pe n wersj skryptu znaj-dziesz w plikach do czonych do ksi ki
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
146
Pobieranie listy najlepszych wynikoacutewAby pobra wyniki z serwera wystarczy przekaza mu numer poziomu a on zwroacuteci punktacj Zastosowali my tu jednak troch bardziej skomplikowany mechanizm Ustalamy dodatkowoczy bie cy u ytkownik zakwalifikowa si na list i mdash je li tak mdash obliczamy na ktoacuterymmiejscu Dzi ki temu b dziemy mogli roacutewnie zaimplementowa zabezpieczenia przeciw-dzia aj ce oszustwom
Musimy wi c dostarczy do serwera poziom oraz uzyskany czas a on zwroacuteci plik JSON zawie-raj cy wszystkie dane niezb dne do wygenerowania tablicy wynikoacutew Format tego pliku przed-stawia si nast puj co
top[ name Tymek time 18 name Anna time 20 time 22 name Jacek time 25 ] intop true pos 2
Jak mo na zauwa y wprowadzili my pole intop ktoacutere informuje czy bie cy u ytkownikznalaz si na li cie pi ciu najlepszych Je li ma ono warto true do czane jest kolejne pole mdashpos ktoacutere przechowuje indeks rezultatu gracza w tablicy wynikoacutew (top) Wszystkie pozosta eelementy tablicy top odpowiadaj uporz dkowanym rosn co wynikom uzyskanym przez innychgraczy Je li pole intop ma warto false tablica top przechowuje jedynie wyniki innych graczy
Pierwszym krokiem b dzie wykonanie poni szego zapytania SQL
SELECT FROM scores WHERE level=1 ORDER BY time ASC LIMIT 5
Jest ono bardzo podobne do poprzednich ale na ko cu (fragment zapisany wyroacute nionym kodem)znajduje si modyfikator wymuszaj cy posortowanie wynikoacutew wzgl dem kolumny time w po-rz dku rosn cym (ORDER BY time ASC) oraz ograniczaj cy liczb zwracanych rekordoacutew do pi ciu(LIMIT 5)
W drugiej kolejno ci trzeba si zaj wygenerowaniem pliku JSON na podstawie danychotrzymanych z kwerendy Jedynym ciekawym fragmentem jest wstawienie wyniku graczaje li uzyska wystarczaj co dobry czas Pe ny kod tego skryptu znajduje si poni ej
ltphp session_start()
include dbconnectphp
$time = $_GET[time]
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
147
$level = $_GET[level]
if (isset($time) ampamp isset($level)) Obiekt JSON $json = array(top=gtarray() intop=gtfalse)
$query = SELECT FROM scores WHERE level=$level ORDER BY time ASC LIMIT 5 $result = mysqli_query($link $query) $i=0
while ($obj = mysqli_fetch_object($result)) if ($json[intop] ampamp $time lt $obj-gttime) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
$i++ if ($i lt 5) array_push($json[top] array(time=gt$obj-gttime name=gt$obj- gtname)) $i++
if ($i lt 5 ampamp $json[intop]) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
mysqli_free_result($result) echo json_encode($json) mysqli_close($link)gt
Na listingu zosta y wyroacute nione te fragmenty ktoacutere odpowiadaj za operacje na wyniku gracza
Wy wietlanie listy najlepszych wynikoacutewPo stronie klienta wygenerujemy ekran przedstawiaj cy wynik list najlepszych graczy orazpole s u ce do wprowadzenia nazwy u ytkownika je li uda o mu si uzyska wystarczaj codobry czas Kod ten przedstawia si nast puj co
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
148
var finishedTime = Mathround((Datenow() - levelStart) 1000) $ajax( dataType json url highscorephp data level currentLevel time finishedTime async false success function(json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + ltinput id=timeScore type=hidden value=+jsontop[i] time+gtltinputgt + ltinput id=level type=hidden value= +currentLevel+gtltinputgt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )fail(function(a b c) var toto = toto )
Kod generuj cy list zosta wyroacute niony Tworzymy pole w ktoacuterym gracz mo e wpisa swojnazw oraz dwa ukryte pola przechowuj ce numer poziomu i punktacj Umieszczamy turoacutewnie odsy acz s u cy do zatwierdzenia wyniku Kod obs uguj cy ten odsy acz znajdujesi poni ej
$(levelEnd)on(click saveScore function() $get(savephp name $(name)val() time $(timeScore)val() level $(level)val() function() $(saveScore)fadeOut(500) ) return false)
Pobieramy tu warto ci z poacutel i przekazujemy je na serwer Po ich przes aniu usuwamy przyciskzatwierdzania aby da zna u ytkownikowi e proces si zako czy
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
149
Mechanizmy utrudniaj ce oszukiwanieNie istnieje idealne rozwi zanie uniemo liwiaj ce oszukiwanie Problem ten jest szczegoacutelnieistotny w grach tworzonych w JavaScripcie poniewa bardzo atwo uzyska dost p do koduroacuted owego Mo na oczywi cie przekszta ci kod do nieczytelnej postaci ale to nie powstrzyma
zdeterminowanego oszusta a jedynie spowolni jego prac Istnieje jednak kilka innych technikdzi ki ktoacuterym proacuteby oszustw staj si trudniejsze i mniej op acalne
Weryfikacja po stronie serweraNajprostszym sposobem na utrudnienie oszukiwania jest przeniesienie cz ci kodu na serwerZrobili my tak z mechanizmem walki w grze tworzonej w rozdziale 7 W przypadku gry plat-formowej musieliby my przesy a na serwer informacje o wciskaniu klawiszy steruj cych po-staci na podstawie ktoacuterych skrypt okre la by jego nowe po o enie
W wi kszo ci przypadkoacutew nie da si zastosowa takiego rozwi zania w tego typu grach alemo na stworzy skrypt ktoacutery b dzie weryfikowa punktacj gracza po stronie serwera Wystarczyw kilku miejscach planszy umie ci niewidoczne punkty kontrolne po osi gni ciu ktoacuterych naserwer jest przesy ana stosowna informacja Dzi ki temu je li u ytkownik przes a na serwerpunktacj ale nie trafi y tam wcze niej informacje z punktoacutew kontrolnych wiemy e co jestnie tak Mo na te zastosowa podobne rozwi zanie ale bazuj ce na przyk ad na liczbie skokoacutewlub pora ek gracza
Tak czy inaczej trzeba wprowadzi w grze jak kolwiek form weryfikacji wynikoacutew Nie majednego najlepszego rozwi zania Musisz jednak pami ta by zastosowany mechanizm niewykry proacuteby oszustwa tam gdzie go nie ma czyli eby uczciwy gracz nie zosta o nie pos -dzony Istotny jest roacutewnie nak ad pracy wymagany do zaimplementowania tego typu mecha-nizmoacutew tak by praca nad nimi nie zaj a przypadkiem wi cej czasu ni tworzenie samej gry
W przedstawionym poni ej przyk adzie zastosujemy proste rozwi zanie Znamy maksymalnpr dko z jak mo e si porusza gracz wiemy te ile ma do przej cia wi c atwo jest obliczyminimalny czas potrzebny na zako czenie poziomu Wystarczy poroacutewna wynik gracza z twarto ci i sprawdzi czy nie jest mniejszy
Aby to zrobi trzeba uzupe ni skrypt highscorephp
gracz mo e przej 7 pikseli w 30 ms -gt 2331$minTime = array( 1 =gt 15 3500 2331 2 =gt 15 3500 2331 3 =gt 42 9800 2331 4 =gt 23 5460 2331)$timeValid = ($minTime[intval($level)] lt intval($time))while ($obj = mysqli_fetch_object($result))
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
150
if ($json[intop] ampamp $time lt $obj-gttime ampamp $timeValid)
Je li wynik osi gni ty przez gracza zosta uznany za nieprawdziwy zostanie wy wietlony alegracz nie b dzie moacuteg wpisa swojej nazwy
Mniej czytelne zmienneInnym rozwi zaniem jest zmniejszenie czytelno ci zmiennych tak by utrudni analiz danychprzesy anych na serwer oraz ich modyfikacj (dane te s w naszym przypadku zapisane w ukry-tych polach formularza) Rozwi zanie to wydaje si dobre ale niestety nietrudno jest obej ta-kie zabezpieczenia Na poni szym rysunku zosta o przedstawione okno inspektora przegl darkiChrome
Jedn z naczelnych zasad jest unikanie przechowywania istotnych informacji w elementachznajduj cych si w strukturze DOM poniewa maj do nich dost p wszyscy u ytkownicy nawettacy ktoacuterzy z programowaniem maj niewiele do czynienia W zwi zku z tym usuniemy jez wywo ania skryptu savephp i zapiszemy je w sesji W pliku highscorephp musimy doda na-st puj cy kod
if ($json[intop] ampamp $time lt $obj-gttime ampamp $timeValid) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
151
$_SESSION[level] = $level $_SESSION[time] = $time
$i++
W skrypcie savephp musimy z sesji odczyta poziom i czas
$name = $_GET[name]$time = $_SESSION[time]$level = $_SESSION[level]
Te proste zmiany wystarcz by utrudni oszukiwanie w naszej grze
Zaciemnianie koduZaciemnianie kodu (ang obfuscating) jest bardzo prost technik ale przy tym ca kiem sku-teczn Przekszta cony w ten sposoacuteb kod trudno analizowa poniewa jest nieczytelny dlaludzi Poni ej znajduje si fragment kodu odpowiedzialnego za tablic wynikoacutew
if (status == finished) gameState = menu $(level_nb_2)html(currentLevel) $(level_nb_1)html(currentLevel + 1)
var finishedTime = Mathround((Datenow() - levelStart) 1000) $ajax( dataType json url highscorephp data level currentLevel time finishedTime async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + ltinput id=timeScore type=hidden value=+jsontop[i] time+gtltinputgt + ltinput id=level type=hidden value= +currentLevel+gtltinputgt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
152
$(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) gfx(group 0)
tilemap = loadNextLevel(group) gfx(playerdiv 0) gfy(playerdiv 0) gfsetAnimation(playerdiv playerAnimjump) ) status = stand
Ten sam kod poddany operacji zaciemniania (za pomoc narz dzia UglifyJS) wygl da nast puj co
if(finished==status)gameState=menu$(level_nb_2)html(currentLevel)$(level_nb_1)html(currentLevel+1)varfinishedTime=Mathround((Datenow()-levelStart)1e3)$ajax(dataTypejsonurlhighscorephpdatalevelcurrentLeveltimefinishedTimeasync1successfunction(a)for(var b=c=0atoplengthgtcc++)b+=aintopampampapos===cltinput id=name placeholder=_____ size=5gtltinput id=timeScore type=hidden value=+atop[c]time+gtltinputgt+ltinput id=level type=hidden value=+currentLevel+gtltinputgt+ +minSec(atop[c]time)+ lta id=saveScorehref=gtsubmitltagt ltbrgt+atop[c]name+ +minSec(atop[c]time)+ltbrgt$(top_list)html(b))fail(function())$(time)html(minSec(finishedTime))$(levelEnd)fadeIn(2e3function()$(backgroundFront)css(background-position0px0px)$(backgroundBack)css(background-position0px 0px)gfx(group0)tilemap=loadNextLevel(group)gfx(playerdiv0)gfy(playerdiv0)gfsetAnimation(playerdivplayerAnimjump))status=stand
Z ca pewno ci analiza takiego kodu jest du o trudniejsza a zyskujemy przy okazji co jeszczemdashprzetworzony w ten sposoacuteb kod jest kroacutetszy ni orygina
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
153
Mniej czytelny protokoacute sieciowyChocia poprawili my kod dzia aj cy po stronie klienta nadal istnieje mo liwo uzyskania do-st pu do warto ci przesy anych zmiennych poprzez analiz ruchu sieciowego Na poni szymrysunku zosta o przedstawione okno aplikacji nas uchuj cej ktoacutera wy wietla dane przesy ane pozako czeniu poziomu
Jest to problem poniewa w celu oszustwa u ytkownik nie musi modyfikowa kodu mdash wystarczysfa szowa pakiet przesy any na serwer Istniej trzy proste sposoby na utrudnienie analizowaniatransmitowanych danych
1 Nadawanie zmiennym przypadkowych nazw tak by na ich podstawie nie da o siokre li ich przeznaczenia
2 Kodowanie zawarto ci zmiennych U ytkownik zna przewa nie osi gni ty przez siebiewynik wi c na jego podstawie mo e znale w transmitowanych danych odpowiednizmienn i j zmodyfikowa Dzi ki zakodowaniu tej warto ci zadanie to stanie sitrudniejsze
3 Dodanie wielu przypadkowych zmiennych Dzi ki temu trudniej si domy li ktoacuteraz nich przechowuje istotne dane
Podobnie jak w przypadku wcze niej opisywanych metod te roacutewnie jedynie utrudniaj proacutebyoszustwa ale nie daj stuprocentowego zabezpieczenia Roacutewnoczesne zastosowanie kilkurozwi za mo e zniech ci nawet najbardziej zdeterminowanych oszustoacutew Poni ej znaj-dziesz propozycj implementacji ka dego z nich
Kodowanie warto ciZaczniemy od kodowania warto ci Mo na to zrobi na wiele sposoboacutew roacute ni cych si uzy-skiwanym stopniem bezpiecze stwa W naszym przypadku wystarczy utrudni odszukaniewyniku na li cie przesy anych zmiennych w zwi zku z czym nie musimy wprowadza adnej
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
154
skomplikowanej metody kodowania W kodzie klienta u yjemy operacji przesuni cia w lewo(ltlt) a na serwerze mdash przesuni cia w prawo (gtgt)
Oto kod skryptu dzia aj cego na kliencie
$ajax( dataType json url highscorephp data level currentLevel time finishedTime ltlt 1 async false success function (json) )
Odpowiedni fragment skryptu na serwerze
$time = intval($_GET[time]) gtgt 1
Aby jeszcze bardziej zmyli u ytkownika warto t prze lemy w wielu innych zmiennychktoacutere nie b d w ogoacutele brane pod uwag po stronie serwera
Przypadkowe nazwy zmiennychNie trzeba tu wiele wyja nia mdash wystarczy zmieni nazw zmiennej Je li chcesz jeszczebardziej utrudni zadanie oszustom mo esz zmienia t nazw przy ka dym daniu Poni ejpodstawowa wersja kodu
$ajax( dataType json url highscorephp data Nmyzsf currentLevel WfBCLQ finishedTime ltlt 1 async false success function (json) )
Kod po stronie serwera przyjmie nast puj c posta
$time = intval($_GET[WfBCLQ]) gtgt 1$level = $_GET[Nmyzsf]
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
155
Dodatkowe przypadkowe zmienneNazwy zmiennych nie oddaj ju znaczenia przechowywanych przez nie warto ci ale to niewszystko poniewa stosunkowo atwo sprawdzi ktoacutera z nich odpowiada za wynik Musimy wi cdoda wi cej zmiennych ktoacuterych zadaniem jest wprowadzenie oszusta w b d Przyk adowerozwi zanie zosta o przedstawione na poni szym listingu
$ajax( dataType json url highscorephp data sXZZUj Mathround(200Mathrandom()) enHf8F Mathround(200Mathrandom()) eZnqBG currentLevel avFanB Mathround(200Mathrandom()) zkpCfb currentLevel PCXFTR Mathround(200Mathrandom()) Nmyzsf currentLevel FYGswh Mathround(200Mathrandom()) C3kaTz finishedTime ltlt 1 gU7buf finishedTime ykN65g Mathround(200Mathrandom()) Q5jUZm Mathround(200Mathrandom()) bb5d7V Mathround(200Mathrandom()) WTsrdm finishedTime ltlt 1 bCW5Dg currentLevel AFM8MN Mathround(200Mathrandom()) FUHt6K Mathround(200Mathrandom()) WfBCLQ finishedTime ltlt 1 d8mzVn Mathround(200Mathrandom()) bHxNpb Mathround(200Mathrandom()) MWcmCz finishedTime ZAat42 Mathround(200Mathrandom()) async false success function (json) )
W kodzie serwera nie trzeba nic zmienia poniewa dodatkowe zmienne s po prostu igno-rowane Mo na oczywi cie jeszcze bardziej skomplikowa spraw i wprowadzi dodatkowezale no ci mi dzy zmiennymi Nale y jednak ca y czas pami ta ktoacutere zmienne przechowujistotne dane by roacutewnie sobie nie utrudni zadania
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
156
Integracja z TwitteremTwitter daje mo liwo dzielenia si z innymi kroacutetkimi informacjami W przypadku gier mo emyz niego skorzysta na dwa sposoby
mo emy umo liwi graczowi zalogowanie si do gry za pomoc nazwy u ytkownikai has a z Twittera
mo emy da mo liwo publikowania tweetoacutew z wynikami lub informacjamio post pach w grze
Zajmiemy si teraz zaimplementowaniem tych dwoacutech funkcji
Podstawy TwitteraIstnieje bardzo prosty sposoacuteb korzystania z Twittera ktoacutery nie wymaga znajomo ci adnegoAPI Je li u ytkownik jest zalogowany za po rednictwem odpowiednio przygotowanego adresuURL mo na opublikowa tweet URL powinien by zbudowany w nast puj cy sposoacuteb
httptwittercomhomestatus=Przyk adowy tweet
Wyroacute niony fragment adresu to tekst tweeta Na ekranie tablicy wynikoacutew obok przyciskuZatwierd umie cimy odsy acz Tweetnij
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmit ltagt + lta id=tweetScore target=_blank href=http twittercomhomestatus=+escape(W a nie uda o mi si sko czy +currentLevel+ poziom gry Yet Another Platformer w +minSec(jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
157
Najistotniejszy jest wyroacute niony fragment kodu bo to dzi ki niemu dzieje si to co powinno Za-stosowali my tu javascriptow funkcj escape by dostarczany test by poprawnie sformatowany
Jak wida bardzo atwo zaimplementowa to rozwi zanie ale trzeba wiedzie o kilku ograni-czeniach
Je li u ytkownik nie jest zalogowany pojawi si ekran logowania Twittera Na ekranie tablicy wynikoacutew nie mo na u y nazwy u ytkownika z Twittera
W zwi zku z tym nawet je li u ytkownik b dzie chcia tweetn swoacutej wyniki tak b dzie musia poda swoj nazw w grze
Publikowanie ka dego tweeta powoduje otwarcie nowego okna przegl darkiw ktoacuterym u ytkownik musi potwierdzi t operacj
Je li chcieliby my umo liwi u ytkownikowi zalogowanie si i automatyczne publikowanietweetoacutew bez konieczno ci ka dorazowego otwierania nowego okna musimy skorzysta z APITwittera
Pe ny dost p do API TwitteraNajpe niejsza integracja gry z Twitterem wymaga zapytania u ytkownika o zgod na po czeniejego konta z gr Mo na w tym celu skorzysta z mechanizmu OAuth ktoacutery jest otwartym stan-dardem uwierzytelniania stosowanym przez wiele firm takich jak Twitter Google czy Facebook
Aby da u ytkownikom mo liwo zalogowania si za po rednictwem Twittera musimy lekkozmodyfikowa ekran pocz tkowy
Je li gracz kliknie cze Rozpocznij gr zacznie od razu rozgrywk Je li z kolei kliknie Zalogujprzez Twittera b dzie si musia zalogowa za po rednictwem Twittera po czym nast pi powroacutetdo gry
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
158
Rejestrowanie gry w TwitterzeZanim przejdziemy dalej musimy zarejestrowa gr w Twitterze Aby to zrobi musisz sizalogowa na stron Twittera dla deweloperoacutew (httpsdevtwittercom) a nast pnie kliknpozycj My applications (moje aplikacje) w menu profilu
Nale y utworzy now aplikacj ( cze Create a new application) wype ni wszystkie wymaganepola oraz wyrazi zgod na warunki licencyjne (Rules of the Road) Po zatwierdzeniu wprowa-dzonych danych zostanie wy wietlona strona zawieraj ca dane utworzonej aplikacji
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
159
Trzeba zwroacuteci uwag na dwie informacje ktoacutere na rysunku zosta y otoczone ramk poniewab d potrzebne poacute niej Nale y wykona jeszcze jedn drobn modyfikacj konfiguracjiPrzejd do zak adki Settings (ustawienia) i przyjrzyj si sekcji Application Type (typ aplikacji)Domy lnie jest zaznaczone pole Read only (tylko do odczytu) Je li chcesz w imieniu graczapublikowa tweety musisz wybra opcj Read and Write
W ten sposoacuteb przygotowali my konto na Twitterze do integracji z gr
Pomocnicza bibliotekaKod realizuj cy komunikacj z API Twittera mo na napisa samemu w PHP ale to dosy mud-na praca Na szcz cie jest dost pnych wiele bibliotek ktoacutere mog to upro ci Jedn z nichprzeznaczon dla PHP jest twitteroauth (httpsgithubcomabrahamtwitteroauth) Istniejoczywi cie biblioteki dla innych j zykoacutew koniecznie zajrzyj do dokumentacji Twittera abydowiedzie si wi cej na ten temat
Du zalet biblioteki twitteroauth jest to e mo na j zainstalowa na prawie ka dym serwerzeobs uguj cym PHP Wystarczy skopiowa bibliotek do tego samego katalogu w ktoacuterym znajdujsi skrypty gry W naszym przypadku b dzie to podkatalog twitter
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
160
Musimy zacz od skonfigurowania biblioteki Przydatny b dzie przyk adowy skrypt konfigura-cyjny config-samplephp dost pny w podanym repozytorium Znajduje si w nim kod definiuj cytrzy sta e
define(CONSUMER_KEY (1))define(CONSUMER_SECRET (2))define(OAUTH_CALLBACK (3))
W miejscach (1) i (2) trzeba wpisa warto ci wy wietlone na stronie informacji o utworzonejaplikacji Twittera W miejscu (3) nale y poda adres URL skryptu zwrotnego callbackphp
Ostatnim krokiem jest zmodyfikowanie skryptu callbackphp tak by zawiera prawid oweprzekierowanie do g oacutewnego pliku naszej gry
header(Location indexphp)
UwierzytelnianieNa poni szym diagramie zosta przedstawiony sposoacuteb przeprowadzania uwierzytelniania i auto-ryzacji u ytkownikoacutew w grze za po rednictwem Twittera
W praktyce nie jest to tak skomplikowane na jakie wygl da przede wszystkim dlatego ewi kszo jest ju zaimplementowana w bibliotece twitteroauth Zajmiemy si utworzeniemstrony logowania wy wietlanej po klikni ciu przycisku Zaloguj przez Twittera U yjemy zwy-k ego odsy acza kieruj cego do pliku redirectphp Kiedy u ytkownik kliknie to cze po razpierwszy zostanie przekierowany na stron Twittera na ktoacuterej b dzie moacuteg autoryzowa dost pdo konta
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
161
Po wyra eniu zgody nast pi przekierowanie na adres ktoacutery zosta ustawiony w pliku callbackphpJe li u ytkownik ju raz wyrazi zgod na autoryzacj b dzie moacuteg od razu si zalogowa
W skryptach JavaScript bardzo przyda nam si teraz informacja o tym czy gracz jest po czonyczy nie Aby j uzyska musimy przekszta ci g oacutewny dokument HTML gry w plik PHP i umie-ci na jego pocz tku nast puj cy kod
ltphpsession_start()
require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
Pobranie tokenoacutew u 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-gtget(accountverify_credentials)gt
W tym kodzie rozpoczynamy sesj do czamy dwa pliki biblioteki twitteroauth oraz odczytuje-my token sesji Je li token jest ustawiony oznacza to e u ytkownik jest zalogowany do Twittera
Nast pnie serwer czy si z Twitterem aby pobra obiekt u ytkownika Tak to wygl da postronie serwera ale kod JavaScript wci nie ma informacji o zalogowaniu W zwi zku z tymmusimy utworzy skrypt przesy aj cy dane do kodu klienckiego
ltscript type=textjavascriptgtltphp if($_SESSION[status] == verified) gt var twitter = true var twitterName = ltphp print $user-gtscreen_name gtltphp else gt var twitter = falseltphp gtltscriptgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
162
Je li gracz jest zalogowany do Twittera globalna zmienna twitter ma warto true a zmiennatwitterName zawiera nazw u ytkownika
Ostatnim o co nale y zadba jest poinformowanie u ytkownika o pomy lnym zalogowaniu zapomoc Twittera i umo liwienie wylogowania si W tym celu musimy wprowadzi drobnzmian w kodzie odpowiedzialnym za ekran pocz tkowy wy wietlany po zalogowaniu
ltdiv id=startScreen class=screengt ltphp if($_SESSION[status] = verified) gt lta class=button tweetLink href=twitterredirectphpgtZaloguj przez Twitteraltagt ltphp else gt lta class=button tweetLink href=twitterclearsessionsphpgtWyloguj z Twitteraltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Po wprowadzeniu powy szych modyfikacji mo na uzna e uwierzytelnianie przez Twitterajest zaimplementowane
Publikowanie najlepszych wynikoacutew na TwitterzeTeraz kiedy gracz jest ju zalogowany do Twittera mo na publikowa jego wyniki w znaczniewygodniejszy sposoacuteb ni poprzednio Zaczniemy od utworzenia po stronie serwera skryptutwitterPostphp w ktoacuterym u yjemy interfejsu statusesupdate API Twittera
Spoacutejrzmy na kompletny skrypt
ltphpsession_start()require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
$time = $_SESSION[time]$level = $_SESSION[level]if (isset($time) ampamp isset($level)) Pobranie tokenoacutew u ytkownika z sesji $access_token = $_SESSION[access_token] $connection = new TwitterOAuth(CONSUMER_KEY CONSUMER_SECRET $access_token[oauth_token] $access_token[oauth_token_secret])
$parameters = array(status =gt W a nie uda o mi si sko czy $level poziom gry Yet Another Platformer w $time sekund) $status = $connection-gtpost(statusesupdate $parameters)gt
Najprawdopodobniej rozpoznajesz wi kszo kodu z powy szego listingu ktoacutery dodali my napocz tku skryptu ekranu pocz tkowego (tylko wyroacute niony kod jest nowy) W ostatnich dwoacutechwierszach tworzymy a nast pnie przesy amy do Twittera tekst ktoacutery chcemy opublikowa co
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
163
mdash jak wida mdash jest ca kiem proste Musimy jednak zaj si jeszcze jednym Poniewa graczjest zalogowany znamy jego nazw wi c mo emy j wykorzysta na ekranie tablicy wynikoacutew
W kodzie klienta utworzymy troch inn od dotychczasowej wersj tablicy wynikoacutew
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) if (twitter) top += ltinput id=name type=hidden value=+twitterName+gt + twitterName + + minSec(jsontop[i]time) + lta id=saveScore href=gtZatwierd ltagt + lta id=tweetScore href=gtTweetnijltagt ltbrgt else top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt + lta target=_blank href=httptwittercomhome status=+escape(w a nie uda o mi si sko czy +current Level+ poziom gry Yet Another Platformer w +minSec (jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Tworzymy tu niewidoczne pole wej ciowe przechowuj ce nazw u ytkownika pochodz cz Twittera Nast pnie wypisujemy t nazw na ekranie tablicy wynikoacutew Zwroacute uwag e niemusieli my w ogoacutele zmienia kodu po stronie serwera
Tyle na temat integracji z Twitterem Je eli chcesz dowiedzie si wi cej i rozszerzy funk-cjonalno gry zajrzyj do dokumentacji API Twittera
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
164
Integracja z FacebookiemIntegracja z Facebookiem i Twitterem jest w wielu aspektach podobna Facebook jest jednakw du o wi kszym stopniu nastawiony na gry Zajmiemy si implementacj osi gni dla zalo-gowanych u ytkownikoacutew Skorzystamy z SDK Facebooka dla PHP ale s roacutewnie dost pnerozwi zania dla innych j zykoacutew
Tak jak w przypadku Twittera tu roacutewnie musimy zacz od zarejestrowania aplikacji w Fa-cebooku W tym celu trzeba si zalogowa do serwisu dla deweloperoacutew (httpsdevelopers
facebookcom) i klikn pozycj Apps1
Nast pnie nale y klikn cze Create New App i wype ni obowi zkowe pola formularza Poich zatwierdzeniu pojawi si ekran z informacjami dotycz cymi nowej aplikacji Podobnie jakby o w przypadku Twittera tu roacutewnie najwa niejsze s dwie warto ci co wida na rysunku
1 Aby moacutec tworzy aplikacje trzeba si zarejestrowa jako programista W tym celu musisz klikn przycisk
Register as a Developer mdash przyp t um
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
165
Na powy szym zrzucie strza k zosta a oznaczona sekcja umo liwiaj ca wyboacuter sposobu inte-gracji aplikacji z Facebookiem Aby uzyska pe ny dost p do interfejsu Open Graph API Fa-cebooka ktoacutery umo liwia mi dzy innymi publikowanie osi gni trzeba zaznaczy pozycjAplikacja na Facebooku
Dzi ki temu gra mo e by uruchamiana w ramce (iframe) wewn trz strony Facebooka Jednakaby to by o mo liwe konieczny jest prawid owy certyfikat dla HTTPS obowi zuj cy w dome-nie w ktoacuterej jest dost pna gra Je li jednak chcemy by gra by a adowana z naszego serweranie ma tych wymaga ale i tak trzeba wpisa adres w odpowiednim polu (aby adres zostauznany za poprawny nale y poda https nawet je li nie ma si certyfikatu)
Jest jeszcze jedno co nale y zrobi by aplikacja mog a publikowa osi gni cia mdash nale y jzarejestrowa jako gr W tym celu wystarczy klikn pozycj Informacje o aplikacji a na-st pnie w sekcji Informacje o aplikacji w polach Kategoria ustawi pozycj Gry i ustali gatunekgry co wida na poni szym rysunku
Uwierzytelnianie przez FacebookaPodstawowy mechanizm uwierzytelniania jest bardzo podobny do tego z Twittera ale istniejepewna roacute nica w podej ciu do dost pu W przypadku Twittera mo na by o zdecydowa czyaplikacja ma prawa tylko do odczytu czy roacutewnie zapisu Facebook oferuje znacznie bogatszemo liwo ci ustalania poziomoacutew dost pu przy czym decyduje si o nich w czasie logowania
Kod odpowiedzialny za uwierzytelnianie zosta przedstawiony na poni szym listingu Tu roacutewnie jak w przypadku Twittera musimy umie ci na pocz tku skryptu kod pobieraj cy obiekt bie-
cego u ytkownika
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
166
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()gt
Wyroacute niony wiersz kodu odpowiada za wskazanie e z poziomu gry b dziemy chcieli publiko-wa wpisy na osi czasu u ytkownika W miejscach (1) i (2) nale y wpisa warto ci wy wietlonena stronie konfiguracji aplikacji w Facebooku
Je li zmienna $facebookUser to null oznacza to e u ytkownik jest ju zalogowany W prze-ciwnym przypadku musimy wy wietli przycisk logowania Musimy wi c napisa kod podobnydo tego ktoacutery s u y do wy wietlenia przycisku logowania za po rednictwem Twittera
ltdiv id=startScreen class=screengt ltphp if ($facebookUser) $loginUrl = $facebook-gtgetLoginUrl(array( scope =gt $scope redirect_uri =gt $app_url )) gt lta class=button tweetLink href=ltphp print $loginUrl gtgtZaloguj przez Facebookaltagt ltphp else $logoutUrl = $facebook-gtgetLogoutUrl(array( next =gt $app_url )) gt lta class=button tweetLink href=ltphp print $logoutUrlgtgtWyloguj z Facebookaltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
Spis tre ci
8
Kup książkę Poleć książkę
8
Wkraczamy w siecispo eczno ciowe
Ju w najwcze niejszych grach wideo by o stosowane pewne rozwi zanie zapewniaj ce nies ab-n ce zainteresowanie graczy Chodzi o tablic wynikoacutew Dzi ki niej gracz stara si osi gn zaka dym razem lepszy rezultat mdash od swojego poprzedniego wyniku osi gni przyjacioacute czyinnych graczy z ca ego wiata
Sieci spo eczno ciowe nada y nowy wymiar temu prostemu pomys owi poniewa osi gni tyrezultat mo na opublikowa na osi czasu albo w tweecie Ma to wiele zalet a jedn z nich jestz ca pewno ci to e je eli kto zamie ci swoacutej wynik jego znajomi z du ym prawdopodo-bie stwem b d roacutewnie chcieli zagra w t gr (i osi gn lepszy rezultat)
W tym rozdziale prac rozpoczniemy od przygotowania skryptu tablicy wynikoacutew dzia aj cegopo stronie serwera Zastosujemy tu techniki znane z poprzedniego rozdzia u Nast pnie zaj-miemy si umo liwieniem zalogowania si do gry za pomoc konta na Twitterze oraz umiesz-czaniem tweetoacutew z wynikami
Ostatnia cz rozdzia u jest po wi cona integracji gry z Facebookiem publikowaniu wydarzena osi czasu u ytkownika oraz tworzeniu osi gni
Podczas korzystania z serwisoacutew takich jak Facebook czy Twitter trzeba zwraca szczegoacutelnuwag by post powa zgodnie z ustalonymi tam zasadami oraz na bie co ledzi wszelkieaktualizacje dzi ki czemu gra b dzie zawsze poprawnie funkcjonowa a Aplikacje i gry ktoacuterenie spe niaj wymaga s zazwyczaj blokowane
Dowiesz si jak korzysta z tych dwoacutech konkretnych sieci spo eczno ciowych ale musiszwiedzie e mechanizm stoj cy za wi kszo ci innych tego typu serwisoacutew jest podobny
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
144
W tym rozdziale zostan omoacutewione nast puj ce zagadnienia tworzenie prostej tablicy wynikoacutew wprowadzanie mechanizmoacutew utrudniaj cych oszukiwanie integracja gry z Twitterem umo liwiaj ca publikowanie wynikoacutew integracja gry z Facebookiem pozwalaj ca na zdobywanie osi gni
Tworzenie prostej tablicy wynikoacutewJak si mo na domy li utworzenie tablicy wynikoacutew b dzie wymaga o bazy danych w ktoacuterejb dzie przechowywana punktacja Podobnie jak w poprzednim rozdziale do implementacjigry po stronie serwera u yjemy j zyka PHP i bazy danych MySQL Jednak w przeciwie -stwie do problemu omoacutewionego w poprzednim rozdziale realizacja tablicy wynikoacutew dlawielu graczy jest o wiele prostsza Wynika to st d e nie wymaga zbyt wielu zasoboacutew serweraa operacje na bazie danych nie s wykonywane zbyt cz sto Mo na za o y e dla ka degogracza danie b dzie zg aszane co mniej wi cej 10 sekund a nie mdash jak w przypadku gryMMORPG z poprzedniego rozdzia u mdash kilka razy w ci gu sekundy
Przede wszystkim musimy ustali co b dzie pe ni o funkcj punktacji w grze Zastosujemynajprostsze rozwi zanie czyli zdecydujemy si na czas (wyra ony w sekundach) w ktoacuterymgracz przeszed plansz Poni szy diagram ilustruje algorytm implementowanego mechanizmu
Na potrzeby interfejsu u ytkownika b dziemy musieli utworzy dwa ekrany Post pimy taksamo jak w poprzednim rozdziale czyli u yjemy elementoacutew div ktoacutere b dziemy wy wietlalub ukrywa
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
145
Pierwszy ekran s u y do poinformowania o rozpocz ciu poziomu i daje graczowi czas naprzygotowanie si Drugi ekran jest troch bardziej z o ony Wy wietlane s na nim uzyskanywynik lista pi ciu najlepszych graczy oraz je li aktualny wynik gracza kwalifikuje si do listynajlepszych pole umo liwiaj ce wpisanie si na ni Przyk adowy wygl d tego ekranu zostaprzedstawiony poni ej
Zdecydowali my si na takie rozwi zanie mdash pytanie o nazw u ytkownika nie na pocz tkugry ale dopiero po uzyskaniu wystarczaj cej liczby punktoacutew mdash by odtworzy zachowanie kla-sycznych gier
Podsumowuj c serwer musi obs u y dwie dodatkowe operacje pobranie pi ciu najlepszych wynikoacutew dla danego poziomu zapisanie punktacji dla danego poziomu
Zaimplementujemy je w osobnych plikach highscorephp oraz savephp
Zapisywanie wynikoacutewTabela w bazie danych musi si sk ada z trzech kolumn
level mdash liczba ca kowita okre laj ca numer poziomu gry name mdash a cuch znakoacutew przechowuj cy nazw u ytkownika time mdash liczba ca kowita odpowiadaj ca liczbie sekund ktoacutera up yn a od rozpocz cia
poziomu do jego zako czenia
Skrypt zapisuj cy wyniki jest bardzo prosty Wystarczy e na serwer prze lemy nazw u yt-kownika liczb punktoacutew oraz poziom Otrzymane dane zapiszemy w bazie danych za pomocnast puj cej kwerendy
INSERT INTO scores (level name time) VALUES (1 Krysia 36)
Pozosta a cz skryptu jest bardzo podobna do tego z czym mieli my do czynienia w po-przednich rozdzia ach wi c nie b dziemy tu zamieszcza kodu Pe n wersj skryptu znaj-dziesz w plikach do czonych do ksi ki
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
146
Pobieranie listy najlepszych wynikoacutewAby pobra wyniki z serwera wystarczy przekaza mu numer poziomu a on zwroacuteci punktacj Zastosowali my tu jednak troch bardziej skomplikowany mechanizm Ustalamy dodatkowoczy bie cy u ytkownik zakwalifikowa si na list i mdash je li tak mdash obliczamy na ktoacuterymmiejscu Dzi ki temu b dziemy mogli roacutewnie zaimplementowa zabezpieczenia przeciw-dzia aj ce oszustwom
Musimy wi c dostarczy do serwera poziom oraz uzyskany czas a on zwroacuteci plik JSON zawie-raj cy wszystkie dane niezb dne do wygenerowania tablicy wynikoacutew Format tego pliku przed-stawia si nast puj co
top[ name Tymek time 18 name Anna time 20 time 22 name Jacek time 25 ] intop true pos 2
Jak mo na zauwa y wprowadzili my pole intop ktoacutere informuje czy bie cy u ytkownikznalaz si na li cie pi ciu najlepszych Je li ma ono warto true do czane jest kolejne pole mdashpos ktoacutere przechowuje indeks rezultatu gracza w tablicy wynikoacutew (top) Wszystkie pozosta eelementy tablicy top odpowiadaj uporz dkowanym rosn co wynikom uzyskanym przez innychgraczy Je li pole intop ma warto false tablica top przechowuje jedynie wyniki innych graczy
Pierwszym krokiem b dzie wykonanie poni szego zapytania SQL
SELECT FROM scores WHERE level=1 ORDER BY time ASC LIMIT 5
Jest ono bardzo podobne do poprzednich ale na ko cu (fragment zapisany wyroacute nionym kodem)znajduje si modyfikator wymuszaj cy posortowanie wynikoacutew wzgl dem kolumny time w po-rz dku rosn cym (ORDER BY time ASC) oraz ograniczaj cy liczb zwracanych rekordoacutew do pi ciu(LIMIT 5)
W drugiej kolejno ci trzeba si zaj wygenerowaniem pliku JSON na podstawie danychotrzymanych z kwerendy Jedynym ciekawym fragmentem jest wstawienie wyniku graczaje li uzyska wystarczaj co dobry czas Pe ny kod tego skryptu znajduje si poni ej
ltphp session_start()
include dbconnectphp
$time = $_GET[time]
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
147
$level = $_GET[level]
if (isset($time) ampamp isset($level)) Obiekt JSON $json = array(top=gtarray() intop=gtfalse)
$query = SELECT FROM scores WHERE level=$level ORDER BY time ASC LIMIT 5 $result = mysqli_query($link $query) $i=0
while ($obj = mysqli_fetch_object($result)) if ($json[intop] ampamp $time lt $obj-gttime) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
$i++ if ($i lt 5) array_push($json[top] array(time=gt$obj-gttime name=gt$obj- gtname)) $i++
if ($i lt 5 ampamp $json[intop]) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
mysqli_free_result($result) echo json_encode($json) mysqli_close($link)gt
Na listingu zosta y wyroacute nione te fragmenty ktoacutere odpowiadaj za operacje na wyniku gracza
Wy wietlanie listy najlepszych wynikoacutewPo stronie klienta wygenerujemy ekran przedstawiaj cy wynik list najlepszych graczy orazpole s u ce do wprowadzenia nazwy u ytkownika je li uda o mu si uzyska wystarczaj codobry czas Kod ten przedstawia si nast puj co
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
148
var finishedTime = Mathround((Datenow() - levelStart) 1000) $ajax( dataType json url highscorephp data level currentLevel time finishedTime async false success function(json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + ltinput id=timeScore type=hidden value=+jsontop[i] time+gtltinputgt + ltinput id=level type=hidden value= +currentLevel+gtltinputgt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )fail(function(a b c) var toto = toto )
Kod generuj cy list zosta wyroacute niony Tworzymy pole w ktoacuterym gracz mo e wpisa swojnazw oraz dwa ukryte pola przechowuj ce numer poziomu i punktacj Umieszczamy turoacutewnie odsy acz s u cy do zatwierdzenia wyniku Kod obs uguj cy ten odsy acz znajdujesi poni ej
$(levelEnd)on(click saveScore function() $get(savephp name $(name)val() time $(timeScore)val() level $(level)val() function() $(saveScore)fadeOut(500) ) return false)
Pobieramy tu warto ci z poacutel i przekazujemy je na serwer Po ich przes aniu usuwamy przyciskzatwierdzania aby da zna u ytkownikowi e proces si zako czy
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
149
Mechanizmy utrudniaj ce oszukiwanieNie istnieje idealne rozwi zanie uniemo liwiaj ce oszukiwanie Problem ten jest szczegoacutelnieistotny w grach tworzonych w JavaScripcie poniewa bardzo atwo uzyska dost p do koduroacuted owego Mo na oczywi cie przekszta ci kod do nieczytelnej postaci ale to nie powstrzyma
zdeterminowanego oszusta a jedynie spowolni jego prac Istnieje jednak kilka innych technikdzi ki ktoacuterym proacuteby oszustw staj si trudniejsze i mniej op acalne
Weryfikacja po stronie serweraNajprostszym sposobem na utrudnienie oszukiwania jest przeniesienie cz ci kodu na serwerZrobili my tak z mechanizmem walki w grze tworzonej w rozdziale 7 W przypadku gry plat-formowej musieliby my przesy a na serwer informacje o wciskaniu klawiszy steruj cych po-staci na podstawie ktoacuterych skrypt okre la by jego nowe po o enie
W wi kszo ci przypadkoacutew nie da si zastosowa takiego rozwi zania w tego typu grach alemo na stworzy skrypt ktoacutery b dzie weryfikowa punktacj gracza po stronie serwera Wystarczyw kilku miejscach planszy umie ci niewidoczne punkty kontrolne po osi gni ciu ktoacuterych naserwer jest przesy ana stosowna informacja Dzi ki temu je li u ytkownik przes a na serwerpunktacj ale nie trafi y tam wcze niej informacje z punktoacutew kontrolnych wiemy e co jestnie tak Mo na te zastosowa podobne rozwi zanie ale bazuj ce na przyk ad na liczbie skokoacutewlub pora ek gracza
Tak czy inaczej trzeba wprowadzi w grze jak kolwiek form weryfikacji wynikoacutew Nie majednego najlepszego rozwi zania Musisz jednak pami ta by zastosowany mechanizm niewykry proacuteby oszustwa tam gdzie go nie ma czyli eby uczciwy gracz nie zosta o nie pos -dzony Istotny jest roacutewnie nak ad pracy wymagany do zaimplementowania tego typu mecha-nizmoacutew tak by praca nad nimi nie zaj a przypadkiem wi cej czasu ni tworzenie samej gry
W przedstawionym poni ej przyk adzie zastosujemy proste rozwi zanie Znamy maksymalnpr dko z jak mo e si porusza gracz wiemy te ile ma do przej cia wi c atwo jest obliczyminimalny czas potrzebny na zako czenie poziomu Wystarczy poroacutewna wynik gracza z twarto ci i sprawdzi czy nie jest mniejszy
Aby to zrobi trzeba uzupe ni skrypt highscorephp
gracz mo e przej 7 pikseli w 30 ms -gt 2331$minTime = array( 1 =gt 15 3500 2331 2 =gt 15 3500 2331 3 =gt 42 9800 2331 4 =gt 23 5460 2331)$timeValid = ($minTime[intval($level)] lt intval($time))while ($obj = mysqli_fetch_object($result))
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
150
if ($json[intop] ampamp $time lt $obj-gttime ampamp $timeValid)
Je li wynik osi gni ty przez gracza zosta uznany za nieprawdziwy zostanie wy wietlony alegracz nie b dzie moacuteg wpisa swojej nazwy
Mniej czytelne zmienneInnym rozwi zaniem jest zmniejszenie czytelno ci zmiennych tak by utrudni analiz danychprzesy anych na serwer oraz ich modyfikacj (dane te s w naszym przypadku zapisane w ukry-tych polach formularza) Rozwi zanie to wydaje si dobre ale niestety nietrudno jest obej ta-kie zabezpieczenia Na poni szym rysunku zosta o przedstawione okno inspektora przegl darkiChrome
Jedn z naczelnych zasad jest unikanie przechowywania istotnych informacji w elementachznajduj cych si w strukturze DOM poniewa maj do nich dost p wszyscy u ytkownicy nawettacy ktoacuterzy z programowaniem maj niewiele do czynienia W zwi zku z tym usuniemy jez wywo ania skryptu savephp i zapiszemy je w sesji W pliku highscorephp musimy doda na-st puj cy kod
if ($json[intop] ampamp $time lt $obj-gttime ampamp $timeValid) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
151
$_SESSION[level] = $level $_SESSION[time] = $time
$i++
W skrypcie savephp musimy z sesji odczyta poziom i czas
$name = $_GET[name]$time = $_SESSION[time]$level = $_SESSION[level]
Te proste zmiany wystarcz by utrudni oszukiwanie w naszej grze
Zaciemnianie koduZaciemnianie kodu (ang obfuscating) jest bardzo prost technik ale przy tym ca kiem sku-teczn Przekszta cony w ten sposoacuteb kod trudno analizowa poniewa jest nieczytelny dlaludzi Poni ej znajduje si fragment kodu odpowiedzialnego za tablic wynikoacutew
if (status == finished) gameState = menu $(level_nb_2)html(currentLevel) $(level_nb_1)html(currentLevel + 1)
var finishedTime = Mathround((Datenow() - levelStart) 1000) $ajax( dataType json url highscorephp data level currentLevel time finishedTime async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + ltinput id=timeScore type=hidden value=+jsontop[i] time+gtltinputgt + ltinput id=level type=hidden value= +currentLevel+gtltinputgt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
152
$(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) gfx(group 0)
tilemap = loadNextLevel(group) gfx(playerdiv 0) gfy(playerdiv 0) gfsetAnimation(playerdiv playerAnimjump) ) status = stand
Ten sam kod poddany operacji zaciemniania (za pomoc narz dzia UglifyJS) wygl da nast puj co
if(finished==status)gameState=menu$(level_nb_2)html(currentLevel)$(level_nb_1)html(currentLevel+1)varfinishedTime=Mathround((Datenow()-levelStart)1e3)$ajax(dataTypejsonurlhighscorephpdatalevelcurrentLeveltimefinishedTimeasync1successfunction(a)for(var b=c=0atoplengthgtcc++)b+=aintopampampapos===cltinput id=name placeholder=_____ size=5gtltinput id=timeScore type=hidden value=+atop[c]time+gtltinputgt+ltinput id=level type=hidden value=+currentLevel+gtltinputgt+ +minSec(atop[c]time)+ lta id=saveScorehref=gtsubmitltagt ltbrgt+atop[c]name+ +minSec(atop[c]time)+ltbrgt$(top_list)html(b))fail(function())$(time)html(minSec(finishedTime))$(levelEnd)fadeIn(2e3function()$(backgroundFront)css(background-position0px0px)$(backgroundBack)css(background-position0px 0px)gfx(group0)tilemap=loadNextLevel(group)gfx(playerdiv0)gfy(playerdiv0)gfsetAnimation(playerdivplayerAnimjump))status=stand
Z ca pewno ci analiza takiego kodu jest du o trudniejsza a zyskujemy przy okazji co jeszczemdashprzetworzony w ten sposoacuteb kod jest kroacutetszy ni orygina
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
153
Mniej czytelny protokoacute sieciowyChocia poprawili my kod dzia aj cy po stronie klienta nadal istnieje mo liwo uzyskania do-st pu do warto ci przesy anych zmiennych poprzez analiz ruchu sieciowego Na poni szymrysunku zosta o przedstawione okno aplikacji nas uchuj cej ktoacutera wy wietla dane przesy ane pozako czeniu poziomu
Jest to problem poniewa w celu oszustwa u ytkownik nie musi modyfikowa kodu mdash wystarczysfa szowa pakiet przesy any na serwer Istniej trzy proste sposoby na utrudnienie analizowaniatransmitowanych danych
1 Nadawanie zmiennym przypadkowych nazw tak by na ich podstawie nie da o siokre li ich przeznaczenia
2 Kodowanie zawarto ci zmiennych U ytkownik zna przewa nie osi gni ty przez siebiewynik wi c na jego podstawie mo e znale w transmitowanych danych odpowiednizmienn i j zmodyfikowa Dzi ki zakodowaniu tej warto ci zadanie to stanie sitrudniejsze
3 Dodanie wielu przypadkowych zmiennych Dzi ki temu trudniej si domy li ktoacuteraz nich przechowuje istotne dane
Podobnie jak w przypadku wcze niej opisywanych metod te roacutewnie jedynie utrudniaj proacutebyoszustwa ale nie daj stuprocentowego zabezpieczenia Roacutewnoczesne zastosowanie kilkurozwi za mo e zniech ci nawet najbardziej zdeterminowanych oszustoacutew Poni ej znaj-dziesz propozycj implementacji ka dego z nich
Kodowanie warto ciZaczniemy od kodowania warto ci Mo na to zrobi na wiele sposoboacutew roacute ni cych si uzy-skiwanym stopniem bezpiecze stwa W naszym przypadku wystarczy utrudni odszukaniewyniku na li cie przesy anych zmiennych w zwi zku z czym nie musimy wprowadza adnej
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
154
skomplikowanej metody kodowania W kodzie klienta u yjemy operacji przesuni cia w lewo(ltlt) a na serwerze mdash przesuni cia w prawo (gtgt)
Oto kod skryptu dzia aj cego na kliencie
$ajax( dataType json url highscorephp data level currentLevel time finishedTime ltlt 1 async false success function (json) )
Odpowiedni fragment skryptu na serwerze
$time = intval($_GET[time]) gtgt 1
Aby jeszcze bardziej zmyli u ytkownika warto t prze lemy w wielu innych zmiennychktoacutere nie b d w ogoacutele brane pod uwag po stronie serwera
Przypadkowe nazwy zmiennychNie trzeba tu wiele wyja nia mdash wystarczy zmieni nazw zmiennej Je li chcesz jeszczebardziej utrudni zadanie oszustom mo esz zmienia t nazw przy ka dym daniu Poni ejpodstawowa wersja kodu
$ajax( dataType json url highscorephp data Nmyzsf currentLevel WfBCLQ finishedTime ltlt 1 async false success function (json) )
Kod po stronie serwera przyjmie nast puj c posta
$time = intval($_GET[WfBCLQ]) gtgt 1$level = $_GET[Nmyzsf]
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
155
Dodatkowe przypadkowe zmienneNazwy zmiennych nie oddaj ju znaczenia przechowywanych przez nie warto ci ale to niewszystko poniewa stosunkowo atwo sprawdzi ktoacutera z nich odpowiada za wynik Musimy wi cdoda wi cej zmiennych ktoacuterych zadaniem jest wprowadzenie oszusta w b d Przyk adowerozwi zanie zosta o przedstawione na poni szym listingu
$ajax( dataType json url highscorephp data sXZZUj Mathround(200Mathrandom()) enHf8F Mathround(200Mathrandom()) eZnqBG currentLevel avFanB Mathround(200Mathrandom()) zkpCfb currentLevel PCXFTR Mathround(200Mathrandom()) Nmyzsf currentLevel FYGswh Mathround(200Mathrandom()) C3kaTz finishedTime ltlt 1 gU7buf finishedTime ykN65g Mathround(200Mathrandom()) Q5jUZm Mathround(200Mathrandom()) bb5d7V Mathround(200Mathrandom()) WTsrdm finishedTime ltlt 1 bCW5Dg currentLevel AFM8MN Mathround(200Mathrandom()) FUHt6K Mathround(200Mathrandom()) WfBCLQ finishedTime ltlt 1 d8mzVn Mathround(200Mathrandom()) bHxNpb Mathround(200Mathrandom()) MWcmCz finishedTime ZAat42 Mathround(200Mathrandom()) async false success function (json) )
W kodzie serwera nie trzeba nic zmienia poniewa dodatkowe zmienne s po prostu igno-rowane Mo na oczywi cie jeszcze bardziej skomplikowa spraw i wprowadzi dodatkowezale no ci mi dzy zmiennymi Nale y jednak ca y czas pami ta ktoacutere zmienne przechowujistotne dane by roacutewnie sobie nie utrudni zadania
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
156
Integracja z TwitteremTwitter daje mo liwo dzielenia si z innymi kroacutetkimi informacjami W przypadku gier mo emyz niego skorzysta na dwa sposoby
mo emy umo liwi graczowi zalogowanie si do gry za pomoc nazwy u ytkownikai has a z Twittera
mo emy da mo liwo publikowania tweetoacutew z wynikami lub informacjamio post pach w grze
Zajmiemy si teraz zaimplementowaniem tych dwoacutech funkcji
Podstawy TwitteraIstnieje bardzo prosty sposoacuteb korzystania z Twittera ktoacutery nie wymaga znajomo ci adnegoAPI Je li u ytkownik jest zalogowany za po rednictwem odpowiednio przygotowanego adresuURL mo na opublikowa tweet URL powinien by zbudowany w nast puj cy sposoacuteb
httptwittercomhomestatus=Przyk adowy tweet
Wyroacute niony fragment adresu to tekst tweeta Na ekranie tablicy wynikoacutew obok przyciskuZatwierd umie cimy odsy acz Tweetnij
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmit ltagt + lta id=tweetScore target=_blank href=http twittercomhomestatus=+escape(W a nie uda o mi si sko czy +currentLevel+ poziom gry Yet Another Platformer w +minSec(jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
157
Najistotniejszy jest wyroacute niony fragment kodu bo to dzi ki niemu dzieje si to co powinno Za-stosowali my tu javascriptow funkcj escape by dostarczany test by poprawnie sformatowany
Jak wida bardzo atwo zaimplementowa to rozwi zanie ale trzeba wiedzie o kilku ograni-czeniach
Je li u ytkownik nie jest zalogowany pojawi si ekran logowania Twittera Na ekranie tablicy wynikoacutew nie mo na u y nazwy u ytkownika z Twittera
W zwi zku z tym nawet je li u ytkownik b dzie chcia tweetn swoacutej wyniki tak b dzie musia poda swoj nazw w grze
Publikowanie ka dego tweeta powoduje otwarcie nowego okna przegl darkiw ktoacuterym u ytkownik musi potwierdzi t operacj
Je li chcieliby my umo liwi u ytkownikowi zalogowanie si i automatyczne publikowanietweetoacutew bez konieczno ci ka dorazowego otwierania nowego okna musimy skorzysta z APITwittera
Pe ny dost p do API TwitteraNajpe niejsza integracja gry z Twitterem wymaga zapytania u ytkownika o zgod na po czeniejego konta z gr Mo na w tym celu skorzysta z mechanizmu OAuth ktoacutery jest otwartym stan-dardem uwierzytelniania stosowanym przez wiele firm takich jak Twitter Google czy Facebook
Aby da u ytkownikom mo liwo zalogowania si za po rednictwem Twittera musimy lekkozmodyfikowa ekran pocz tkowy
Je li gracz kliknie cze Rozpocznij gr zacznie od razu rozgrywk Je li z kolei kliknie Zalogujprzez Twittera b dzie si musia zalogowa za po rednictwem Twittera po czym nast pi powroacutetdo gry
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
158
Rejestrowanie gry w TwitterzeZanim przejdziemy dalej musimy zarejestrowa gr w Twitterze Aby to zrobi musisz sizalogowa na stron Twittera dla deweloperoacutew (httpsdevtwittercom) a nast pnie kliknpozycj My applications (moje aplikacje) w menu profilu
Nale y utworzy now aplikacj ( cze Create a new application) wype ni wszystkie wymaganepola oraz wyrazi zgod na warunki licencyjne (Rules of the Road) Po zatwierdzeniu wprowa-dzonych danych zostanie wy wietlona strona zawieraj ca dane utworzonej aplikacji
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
159
Trzeba zwroacuteci uwag na dwie informacje ktoacutere na rysunku zosta y otoczone ramk poniewab d potrzebne poacute niej Nale y wykona jeszcze jedn drobn modyfikacj konfiguracjiPrzejd do zak adki Settings (ustawienia) i przyjrzyj si sekcji Application Type (typ aplikacji)Domy lnie jest zaznaczone pole Read only (tylko do odczytu) Je li chcesz w imieniu graczapublikowa tweety musisz wybra opcj Read and Write
W ten sposoacuteb przygotowali my konto na Twitterze do integracji z gr
Pomocnicza bibliotekaKod realizuj cy komunikacj z API Twittera mo na napisa samemu w PHP ale to dosy mud-na praca Na szcz cie jest dost pnych wiele bibliotek ktoacutere mog to upro ci Jedn z nichprzeznaczon dla PHP jest twitteroauth (httpsgithubcomabrahamtwitteroauth) Istniejoczywi cie biblioteki dla innych j zykoacutew koniecznie zajrzyj do dokumentacji Twittera abydowiedzie si wi cej na ten temat
Du zalet biblioteki twitteroauth jest to e mo na j zainstalowa na prawie ka dym serwerzeobs uguj cym PHP Wystarczy skopiowa bibliotek do tego samego katalogu w ktoacuterym znajdujsi skrypty gry W naszym przypadku b dzie to podkatalog twitter
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
160
Musimy zacz od skonfigurowania biblioteki Przydatny b dzie przyk adowy skrypt konfigura-cyjny config-samplephp dost pny w podanym repozytorium Znajduje si w nim kod definiuj cytrzy sta e
define(CONSUMER_KEY (1))define(CONSUMER_SECRET (2))define(OAUTH_CALLBACK (3))
W miejscach (1) i (2) trzeba wpisa warto ci wy wietlone na stronie informacji o utworzonejaplikacji Twittera W miejscu (3) nale y poda adres URL skryptu zwrotnego callbackphp
Ostatnim krokiem jest zmodyfikowanie skryptu callbackphp tak by zawiera prawid oweprzekierowanie do g oacutewnego pliku naszej gry
header(Location indexphp)
UwierzytelnianieNa poni szym diagramie zosta przedstawiony sposoacuteb przeprowadzania uwierzytelniania i auto-ryzacji u ytkownikoacutew w grze za po rednictwem Twittera
W praktyce nie jest to tak skomplikowane na jakie wygl da przede wszystkim dlatego ewi kszo jest ju zaimplementowana w bibliotece twitteroauth Zajmiemy si utworzeniemstrony logowania wy wietlanej po klikni ciu przycisku Zaloguj przez Twittera U yjemy zwy-k ego odsy acza kieruj cego do pliku redirectphp Kiedy u ytkownik kliknie to cze po razpierwszy zostanie przekierowany na stron Twittera na ktoacuterej b dzie moacuteg autoryzowa dost pdo konta
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
161
Po wyra eniu zgody nast pi przekierowanie na adres ktoacutery zosta ustawiony w pliku callbackphpJe li u ytkownik ju raz wyrazi zgod na autoryzacj b dzie moacuteg od razu si zalogowa
W skryptach JavaScript bardzo przyda nam si teraz informacja o tym czy gracz jest po czonyczy nie Aby j uzyska musimy przekszta ci g oacutewny dokument HTML gry w plik PHP i umie-ci na jego pocz tku nast puj cy kod
ltphpsession_start()
require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
Pobranie tokenoacutew u 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-gtget(accountverify_credentials)gt
W tym kodzie rozpoczynamy sesj do czamy dwa pliki biblioteki twitteroauth oraz odczytuje-my token sesji Je li token jest ustawiony oznacza to e u ytkownik jest zalogowany do Twittera
Nast pnie serwer czy si z Twitterem aby pobra obiekt u ytkownika Tak to wygl da postronie serwera ale kod JavaScript wci nie ma informacji o zalogowaniu W zwi zku z tymmusimy utworzy skrypt przesy aj cy dane do kodu klienckiego
ltscript type=textjavascriptgtltphp if($_SESSION[status] == verified) gt var twitter = true var twitterName = ltphp print $user-gtscreen_name gtltphp else gt var twitter = falseltphp gtltscriptgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
162
Je li gracz jest zalogowany do Twittera globalna zmienna twitter ma warto true a zmiennatwitterName zawiera nazw u ytkownika
Ostatnim o co nale y zadba jest poinformowanie u ytkownika o pomy lnym zalogowaniu zapomoc Twittera i umo liwienie wylogowania si W tym celu musimy wprowadzi drobnzmian w kodzie odpowiedzialnym za ekran pocz tkowy wy wietlany po zalogowaniu
ltdiv id=startScreen class=screengt ltphp if($_SESSION[status] = verified) gt lta class=button tweetLink href=twitterredirectphpgtZaloguj przez Twitteraltagt ltphp else gt lta class=button tweetLink href=twitterclearsessionsphpgtWyloguj z Twitteraltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Po wprowadzeniu powy szych modyfikacji mo na uzna e uwierzytelnianie przez Twitterajest zaimplementowane
Publikowanie najlepszych wynikoacutew na TwitterzeTeraz kiedy gracz jest ju zalogowany do Twittera mo na publikowa jego wyniki w znaczniewygodniejszy sposoacuteb ni poprzednio Zaczniemy od utworzenia po stronie serwera skryptutwitterPostphp w ktoacuterym u yjemy interfejsu statusesupdate API Twittera
Spoacutejrzmy na kompletny skrypt
ltphpsession_start()require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
$time = $_SESSION[time]$level = $_SESSION[level]if (isset($time) ampamp isset($level)) Pobranie tokenoacutew u ytkownika z sesji $access_token = $_SESSION[access_token] $connection = new TwitterOAuth(CONSUMER_KEY CONSUMER_SECRET $access_token[oauth_token] $access_token[oauth_token_secret])
$parameters = array(status =gt W a nie uda o mi si sko czy $level poziom gry Yet Another Platformer w $time sekund) $status = $connection-gtpost(statusesupdate $parameters)gt
Najprawdopodobniej rozpoznajesz wi kszo kodu z powy szego listingu ktoacutery dodali my napocz tku skryptu ekranu pocz tkowego (tylko wyroacute niony kod jest nowy) W ostatnich dwoacutechwierszach tworzymy a nast pnie przesy amy do Twittera tekst ktoacutery chcemy opublikowa co
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
163
mdash jak wida mdash jest ca kiem proste Musimy jednak zaj si jeszcze jednym Poniewa graczjest zalogowany znamy jego nazw wi c mo emy j wykorzysta na ekranie tablicy wynikoacutew
W kodzie klienta utworzymy troch inn od dotychczasowej wersj tablicy wynikoacutew
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) if (twitter) top += ltinput id=name type=hidden value=+twitterName+gt + twitterName + + minSec(jsontop[i]time) + lta id=saveScore href=gtZatwierd ltagt + lta id=tweetScore href=gtTweetnijltagt ltbrgt else top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt + lta target=_blank href=httptwittercomhome status=+escape(w a nie uda o mi si sko czy +current Level+ poziom gry Yet Another Platformer w +minSec (jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Tworzymy tu niewidoczne pole wej ciowe przechowuj ce nazw u ytkownika pochodz cz Twittera Nast pnie wypisujemy t nazw na ekranie tablicy wynikoacutew Zwroacute uwag e niemusieli my w ogoacutele zmienia kodu po stronie serwera
Tyle na temat integracji z Twitterem Je eli chcesz dowiedzie si wi cej i rozszerzy funk-cjonalno gry zajrzyj do dokumentacji API Twittera
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
164
Integracja z FacebookiemIntegracja z Facebookiem i Twitterem jest w wielu aspektach podobna Facebook jest jednakw du o wi kszym stopniu nastawiony na gry Zajmiemy si implementacj osi gni dla zalo-gowanych u ytkownikoacutew Skorzystamy z SDK Facebooka dla PHP ale s roacutewnie dost pnerozwi zania dla innych j zykoacutew
Tak jak w przypadku Twittera tu roacutewnie musimy zacz od zarejestrowania aplikacji w Fa-cebooku W tym celu trzeba si zalogowa do serwisu dla deweloperoacutew (httpsdevelopers
facebookcom) i klikn pozycj Apps1
Nast pnie nale y klikn cze Create New App i wype ni obowi zkowe pola formularza Poich zatwierdzeniu pojawi si ekran z informacjami dotycz cymi nowej aplikacji Podobnie jakby o w przypadku Twittera tu roacutewnie najwa niejsze s dwie warto ci co wida na rysunku
1 Aby moacutec tworzy aplikacje trzeba si zarejestrowa jako programista W tym celu musisz klikn przycisk
Register as a Developer mdash przyp t um
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
165
Na powy szym zrzucie strza k zosta a oznaczona sekcja umo liwiaj ca wyboacuter sposobu inte-gracji aplikacji z Facebookiem Aby uzyska pe ny dost p do interfejsu Open Graph API Fa-cebooka ktoacutery umo liwia mi dzy innymi publikowanie osi gni trzeba zaznaczy pozycjAplikacja na Facebooku
Dzi ki temu gra mo e by uruchamiana w ramce (iframe) wewn trz strony Facebooka Jednakaby to by o mo liwe konieczny jest prawid owy certyfikat dla HTTPS obowi zuj cy w dome-nie w ktoacuterej jest dost pna gra Je li jednak chcemy by gra by a adowana z naszego serweranie ma tych wymaga ale i tak trzeba wpisa adres w odpowiednim polu (aby adres zostauznany za poprawny nale y poda https nawet je li nie ma si certyfikatu)
Jest jeszcze jedno co nale y zrobi by aplikacja mog a publikowa osi gni cia mdash nale y jzarejestrowa jako gr W tym celu wystarczy klikn pozycj Informacje o aplikacji a na-st pnie w sekcji Informacje o aplikacji w polach Kategoria ustawi pozycj Gry i ustali gatunekgry co wida na poni szym rysunku
Uwierzytelnianie przez FacebookaPodstawowy mechanizm uwierzytelniania jest bardzo podobny do tego z Twittera ale istniejepewna roacute nica w podej ciu do dost pu W przypadku Twittera mo na by o zdecydowa czyaplikacja ma prawa tylko do odczytu czy roacutewnie zapisu Facebook oferuje znacznie bogatszemo liwo ci ustalania poziomoacutew dost pu przy czym decyduje si o nich w czasie logowania
Kod odpowiedzialny za uwierzytelnianie zosta przedstawiony na poni szym listingu Tu roacutewnie jak w przypadku Twittera musimy umie ci na pocz tku skryptu kod pobieraj cy obiekt bie-
cego u ytkownika
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
166
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()gt
Wyroacute niony wiersz kodu odpowiada za wskazanie e z poziomu gry b dziemy chcieli publiko-wa wpisy na osi czasu u ytkownika W miejscach (1) i (2) nale y wpisa warto ci wy wietlonena stronie konfiguracji aplikacji w Facebooku
Je li zmienna $facebookUser to null oznacza to e u ytkownik jest ju zalogowany W prze-ciwnym przypadku musimy wy wietli przycisk logowania Musimy wi c napisa kod podobnydo tego ktoacutery s u y do wy wietlenia przycisku logowania za po rednictwem Twittera
ltdiv id=startScreen class=screengt ltphp if ($facebookUser) $loginUrl = $facebook-gtgetLoginUrl(array( scope =gt $scope redirect_uri =gt $app_url )) gt lta class=button tweetLink href=ltphp print $loginUrl gtgtZaloguj przez Facebookaltagt ltphp else $logoutUrl = $facebook-gtgetLogoutUrl(array( next =gt $app_url )) gt lta class=button tweetLink href=ltphp print $logoutUrlgtgtWyloguj z Facebookaltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
8
Wkraczamy w siecispo eczno ciowe
Ju w najwcze niejszych grach wideo by o stosowane pewne rozwi zanie zapewniaj ce nies ab-n ce zainteresowanie graczy Chodzi o tablic wynikoacutew Dzi ki niej gracz stara si osi gn zaka dym razem lepszy rezultat mdash od swojego poprzedniego wyniku osi gni przyjacioacute czyinnych graczy z ca ego wiata
Sieci spo eczno ciowe nada y nowy wymiar temu prostemu pomys owi poniewa osi gni tyrezultat mo na opublikowa na osi czasu albo w tweecie Ma to wiele zalet a jedn z nich jestz ca pewno ci to e je eli kto zamie ci swoacutej wynik jego znajomi z du ym prawdopodo-bie stwem b d roacutewnie chcieli zagra w t gr (i osi gn lepszy rezultat)
W tym rozdziale prac rozpoczniemy od przygotowania skryptu tablicy wynikoacutew dzia aj cegopo stronie serwera Zastosujemy tu techniki znane z poprzedniego rozdzia u Nast pnie zaj-miemy si umo liwieniem zalogowania si do gry za pomoc konta na Twitterze oraz umiesz-czaniem tweetoacutew z wynikami
Ostatnia cz rozdzia u jest po wi cona integracji gry z Facebookiem publikowaniu wydarzena osi czasu u ytkownika oraz tworzeniu osi gni
Podczas korzystania z serwisoacutew takich jak Facebook czy Twitter trzeba zwraca szczegoacutelnuwag by post powa zgodnie z ustalonymi tam zasadami oraz na bie co ledzi wszelkieaktualizacje dzi ki czemu gra b dzie zawsze poprawnie funkcjonowa a Aplikacje i gry ktoacuterenie spe niaj wymaga s zazwyczaj blokowane
Dowiesz si jak korzysta z tych dwoacutech konkretnych sieci spo eczno ciowych ale musiszwiedzie e mechanizm stoj cy za wi kszo ci innych tego typu serwisoacutew jest podobny
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
144
W tym rozdziale zostan omoacutewione nast puj ce zagadnienia tworzenie prostej tablicy wynikoacutew wprowadzanie mechanizmoacutew utrudniaj cych oszukiwanie integracja gry z Twitterem umo liwiaj ca publikowanie wynikoacutew integracja gry z Facebookiem pozwalaj ca na zdobywanie osi gni
Tworzenie prostej tablicy wynikoacutewJak si mo na domy li utworzenie tablicy wynikoacutew b dzie wymaga o bazy danych w ktoacuterejb dzie przechowywana punktacja Podobnie jak w poprzednim rozdziale do implementacjigry po stronie serwera u yjemy j zyka PHP i bazy danych MySQL Jednak w przeciwie -stwie do problemu omoacutewionego w poprzednim rozdziale realizacja tablicy wynikoacutew dlawielu graczy jest o wiele prostsza Wynika to st d e nie wymaga zbyt wielu zasoboacutew serweraa operacje na bazie danych nie s wykonywane zbyt cz sto Mo na za o y e dla ka degogracza danie b dzie zg aszane co mniej wi cej 10 sekund a nie mdash jak w przypadku gryMMORPG z poprzedniego rozdzia u mdash kilka razy w ci gu sekundy
Przede wszystkim musimy ustali co b dzie pe ni o funkcj punktacji w grze Zastosujemynajprostsze rozwi zanie czyli zdecydujemy si na czas (wyra ony w sekundach) w ktoacuterymgracz przeszed plansz Poni szy diagram ilustruje algorytm implementowanego mechanizmu
Na potrzeby interfejsu u ytkownika b dziemy musieli utworzy dwa ekrany Post pimy taksamo jak w poprzednim rozdziale czyli u yjemy elementoacutew div ktoacutere b dziemy wy wietlalub ukrywa
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
145
Pierwszy ekran s u y do poinformowania o rozpocz ciu poziomu i daje graczowi czas naprzygotowanie si Drugi ekran jest troch bardziej z o ony Wy wietlane s na nim uzyskanywynik lista pi ciu najlepszych graczy oraz je li aktualny wynik gracza kwalifikuje si do listynajlepszych pole umo liwiaj ce wpisanie si na ni Przyk adowy wygl d tego ekranu zostaprzedstawiony poni ej
Zdecydowali my si na takie rozwi zanie mdash pytanie o nazw u ytkownika nie na pocz tkugry ale dopiero po uzyskaniu wystarczaj cej liczby punktoacutew mdash by odtworzy zachowanie kla-sycznych gier
Podsumowuj c serwer musi obs u y dwie dodatkowe operacje pobranie pi ciu najlepszych wynikoacutew dla danego poziomu zapisanie punktacji dla danego poziomu
Zaimplementujemy je w osobnych plikach highscorephp oraz savephp
Zapisywanie wynikoacutewTabela w bazie danych musi si sk ada z trzech kolumn
level mdash liczba ca kowita okre laj ca numer poziomu gry name mdash a cuch znakoacutew przechowuj cy nazw u ytkownika time mdash liczba ca kowita odpowiadaj ca liczbie sekund ktoacutera up yn a od rozpocz cia
poziomu do jego zako czenia
Skrypt zapisuj cy wyniki jest bardzo prosty Wystarczy e na serwer prze lemy nazw u yt-kownika liczb punktoacutew oraz poziom Otrzymane dane zapiszemy w bazie danych za pomocnast puj cej kwerendy
INSERT INTO scores (level name time) VALUES (1 Krysia 36)
Pozosta a cz skryptu jest bardzo podobna do tego z czym mieli my do czynienia w po-przednich rozdzia ach wi c nie b dziemy tu zamieszcza kodu Pe n wersj skryptu znaj-dziesz w plikach do czonych do ksi ki
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
146
Pobieranie listy najlepszych wynikoacutewAby pobra wyniki z serwera wystarczy przekaza mu numer poziomu a on zwroacuteci punktacj Zastosowali my tu jednak troch bardziej skomplikowany mechanizm Ustalamy dodatkowoczy bie cy u ytkownik zakwalifikowa si na list i mdash je li tak mdash obliczamy na ktoacuterymmiejscu Dzi ki temu b dziemy mogli roacutewnie zaimplementowa zabezpieczenia przeciw-dzia aj ce oszustwom
Musimy wi c dostarczy do serwera poziom oraz uzyskany czas a on zwroacuteci plik JSON zawie-raj cy wszystkie dane niezb dne do wygenerowania tablicy wynikoacutew Format tego pliku przed-stawia si nast puj co
top[ name Tymek time 18 name Anna time 20 time 22 name Jacek time 25 ] intop true pos 2
Jak mo na zauwa y wprowadzili my pole intop ktoacutere informuje czy bie cy u ytkownikznalaz si na li cie pi ciu najlepszych Je li ma ono warto true do czane jest kolejne pole mdashpos ktoacutere przechowuje indeks rezultatu gracza w tablicy wynikoacutew (top) Wszystkie pozosta eelementy tablicy top odpowiadaj uporz dkowanym rosn co wynikom uzyskanym przez innychgraczy Je li pole intop ma warto false tablica top przechowuje jedynie wyniki innych graczy
Pierwszym krokiem b dzie wykonanie poni szego zapytania SQL
SELECT FROM scores WHERE level=1 ORDER BY time ASC LIMIT 5
Jest ono bardzo podobne do poprzednich ale na ko cu (fragment zapisany wyroacute nionym kodem)znajduje si modyfikator wymuszaj cy posortowanie wynikoacutew wzgl dem kolumny time w po-rz dku rosn cym (ORDER BY time ASC) oraz ograniczaj cy liczb zwracanych rekordoacutew do pi ciu(LIMIT 5)
W drugiej kolejno ci trzeba si zaj wygenerowaniem pliku JSON na podstawie danychotrzymanych z kwerendy Jedynym ciekawym fragmentem jest wstawienie wyniku graczaje li uzyska wystarczaj co dobry czas Pe ny kod tego skryptu znajduje si poni ej
ltphp session_start()
include dbconnectphp
$time = $_GET[time]
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
147
$level = $_GET[level]
if (isset($time) ampamp isset($level)) Obiekt JSON $json = array(top=gtarray() intop=gtfalse)
$query = SELECT FROM scores WHERE level=$level ORDER BY time ASC LIMIT 5 $result = mysqli_query($link $query) $i=0
while ($obj = mysqli_fetch_object($result)) if ($json[intop] ampamp $time lt $obj-gttime) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
$i++ if ($i lt 5) array_push($json[top] array(time=gt$obj-gttime name=gt$obj- gtname)) $i++
if ($i lt 5 ampamp $json[intop]) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
mysqli_free_result($result) echo json_encode($json) mysqli_close($link)gt
Na listingu zosta y wyroacute nione te fragmenty ktoacutere odpowiadaj za operacje na wyniku gracza
Wy wietlanie listy najlepszych wynikoacutewPo stronie klienta wygenerujemy ekran przedstawiaj cy wynik list najlepszych graczy orazpole s u ce do wprowadzenia nazwy u ytkownika je li uda o mu si uzyska wystarczaj codobry czas Kod ten przedstawia si nast puj co
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
148
var finishedTime = Mathround((Datenow() - levelStart) 1000) $ajax( dataType json url highscorephp data level currentLevel time finishedTime async false success function(json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + ltinput id=timeScore type=hidden value=+jsontop[i] time+gtltinputgt + ltinput id=level type=hidden value= +currentLevel+gtltinputgt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )fail(function(a b c) var toto = toto )
Kod generuj cy list zosta wyroacute niony Tworzymy pole w ktoacuterym gracz mo e wpisa swojnazw oraz dwa ukryte pola przechowuj ce numer poziomu i punktacj Umieszczamy turoacutewnie odsy acz s u cy do zatwierdzenia wyniku Kod obs uguj cy ten odsy acz znajdujesi poni ej
$(levelEnd)on(click saveScore function() $get(savephp name $(name)val() time $(timeScore)val() level $(level)val() function() $(saveScore)fadeOut(500) ) return false)
Pobieramy tu warto ci z poacutel i przekazujemy je na serwer Po ich przes aniu usuwamy przyciskzatwierdzania aby da zna u ytkownikowi e proces si zako czy
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
149
Mechanizmy utrudniaj ce oszukiwanieNie istnieje idealne rozwi zanie uniemo liwiaj ce oszukiwanie Problem ten jest szczegoacutelnieistotny w grach tworzonych w JavaScripcie poniewa bardzo atwo uzyska dost p do koduroacuted owego Mo na oczywi cie przekszta ci kod do nieczytelnej postaci ale to nie powstrzyma
zdeterminowanego oszusta a jedynie spowolni jego prac Istnieje jednak kilka innych technikdzi ki ktoacuterym proacuteby oszustw staj si trudniejsze i mniej op acalne
Weryfikacja po stronie serweraNajprostszym sposobem na utrudnienie oszukiwania jest przeniesienie cz ci kodu na serwerZrobili my tak z mechanizmem walki w grze tworzonej w rozdziale 7 W przypadku gry plat-formowej musieliby my przesy a na serwer informacje o wciskaniu klawiszy steruj cych po-staci na podstawie ktoacuterych skrypt okre la by jego nowe po o enie
W wi kszo ci przypadkoacutew nie da si zastosowa takiego rozwi zania w tego typu grach alemo na stworzy skrypt ktoacutery b dzie weryfikowa punktacj gracza po stronie serwera Wystarczyw kilku miejscach planszy umie ci niewidoczne punkty kontrolne po osi gni ciu ktoacuterych naserwer jest przesy ana stosowna informacja Dzi ki temu je li u ytkownik przes a na serwerpunktacj ale nie trafi y tam wcze niej informacje z punktoacutew kontrolnych wiemy e co jestnie tak Mo na te zastosowa podobne rozwi zanie ale bazuj ce na przyk ad na liczbie skokoacutewlub pora ek gracza
Tak czy inaczej trzeba wprowadzi w grze jak kolwiek form weryfikacji wynikoacutew Nie majednego najlepszego rozwi zania Musisz jednak pami ta by zastosowany mechanizm niewykry proacuteby oszustwa tam gdzie go nie ma czyli eby uczciwy gracz nie zosta o nie pos -dzony Istotny jest roacutewnie nak ad pracy wymagany do zaimplementowania tego typu mecha-nizmoacutew tak by praca nad nimi nie zaj a przypadkiem wi cej czasu ni tworzenie samej gry
W przedstawionym poni ej przyk adzie zastosujemy proste rozwi zanie Znamy maksymalnpr dko z jak mo e si porusza gracz wiemy te ile ma do przej cia wi c atwo jest obliczyminimalny czas potrzebny na zako czenie poziomu Wystarczy poroacutewna wynik gracza z twarto ci i sprawdzi czy nie jest mniejszy
Aby to zrobi trzeba uzupe ni skrypt highscorephp
gracz mo e przej 7 pikseli w 30 ms -gt 2331$minTime = array( 1 =gt 15 3500 2331 2 =gt 15 3500 2331 3 =gt 42 9800 2331 4 =gt 23 5460 2331)$timeValid = ($minTime[intval($level)] lt intval($time))while ($obj = mysqli_fetch_object($result))
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
150
if ($json[intop] ampamp $time lt $obj-gttime ampamp $timeValid)
Je li wynik osi gni ty przez gracza zosta uznany za nieprawdziwy zostanie wy wietlony alegracz nie b dzie moacuteg wpisa swojej nazwy
Mniej czytelne zmienneInnym rozwi zaniem jest zmniejszenie czytelno ci zmiennych tak by utrudni analiz danychprzesy anych na serwer oraz ich modyfikacj (dane te s w naszym przypadku zapisane w ukry-tych polach formularza) Rozwi zanie to wydaje si dobre ale niestety nietrudno jest obej ta-kie zabezpieczenia Na poni szym rysunku zosta o przedstawione okno inspektora przegl darkiChrome
Jedn z naczelnych zasad jest unikanie przechowywania istotnych informacji w elementachznajduj cych si w strukturze DOM poniewa maj do nich dost p wszyscy u ytkownicy nawettacy ktoacuterzy z programowaniem maj niewiele do czynienia W zwi zku z tym usuniemy jez wywo ania skryptu savephp i zapiszemy je w sesji W pliku highscorephp musimy doda na-st puj cy kod
if ($json[intop] ampamp $time lt $obj-gttime ampamp $timeValid) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
151
$_SESSION[level] = $level $_SESSION[time] = $time
$i++
W skrypcie savephp musimy z sesji odczyta poziom i czas
$name = $_GET[name]$time = $_SESSION[time]$level = $_SESSION[level]
Te proste zmiany wystarcz by utrudni oszukiwanie w naszej grze
Zaciemnianie koduZaciemnianie kodu (ang obfuscating) jest bardzo prost technik ale przy tym ca kiem sku-teczn Przekszta cony w ten sposoacuteb kod trudno analizowa poniewa jest nieczytelny dlaludzi Poni ej znajduje si fragment kodu odpowiedzialnego za tablic wynikoacutew
if (status == finished) gameState = menu $(level_nb_2)html(currentLevel) $(level_nb_1)html(currentLevel + 1)
var finishedTime = Mathround((Datenow() - levelStart) 1000) $ajax( dataType json url highscorephp data level currentLevel time finishedTime async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + ltinput id=timeScore type=hidden value=+jsontop[i] time+gtltinputgt + ltinput id=level type=hidden value= +currentLevel+gtltinputgt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
152
$(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) gfx(group 0)
tilemap = loadNextLevel(group) gfx(playerdiv 0) gfy(playerdiv 0) gfsetAnimation(playerdiv playerAnimjump) ) status = stand
Ten sam kod poddany operacji zaciemniania (za pomoc narz dzia UglifyJS) wygl da nast puj co
if(finished==status)gameState=menu$(level_nb_2)html(currentLevel)$(level_nb_1)html(currentLevel+1)varfinishedTime=Mathround((Datenow()-levelStart)1e3)$ajax(dataTypejsonurlhighscorephpdatalevelcurrentLeveltimefinishedTimeasync1successfunction(a)for(var b=c=0atoplengthgtcc++)b+=aintopampampapos===cltinput id=name placeholder=_____ size=5gtltinput id=timeScore type=hidden value=+atop[c]time+gtltinputgt+ltinput id=level type=hidden value=+currentLevel+gtltinputgt+ +minSec(atop[c]time)+ lta id=saveScorehref=gtsubmitltagt ltbrgt+atop[c]name+ +minSec(atop[c]time)+ltbrgt$(top_list)html(b))fail(function())$(time)html(minSec(finishedTime))$(levelEnd)fadeIn(2e3function()$(backgroundFront)css(background-position0px0px)$(backgroundBack)css(background-position0px 0px)gfx(group0)tilemap=loadNextLevel(group)gfx(playerdiv0)gfy(playerdiv0)gfsetAnimation(playerdivplayerAnimjump))status=stand
Z ca pewno ci analiza takiego kodu jest du o trudniejsza a zyskujemy przy okazji co jeszczemdashprzetworzony w ten sposoacuteb kod jest kroacutetszy ni orygina
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
153
Mniej czytelny protokoacute sieciowyChocia poprawili my kod dzia aj cy po stronie klienta nadal istnieje mo liwo uzyskania do-st pu do warto ci przesy anych zmiennych poprzez analiz ruchu sieciowego Na poni szymrysunku zosta o przedstawione okno aplikacji nas uchuj cej ktoacutera wy wietla dane przesy ane pozako czeniu poziomu
Jest to problem poniewa w celu oszustwa u ytkownik nie musi modyfikowa kodu mdash wystarczysfa szowa pakiet przesy any na serwer Istniej trzy proste sposoby na utrudnienie analizowaniatransmitowanych danych
1 Nadawanie zmiennym przypadkowych nazw tak by na ich podstawie nie da o siokre li ich przeznaczenia
2 Kodowanie zawarto ci zmiennych U ytkownik zna przewa nie osi gni ty przez siebiewynik wi c na jego podstawie mo e znale w transmitowanych danych odpowiednizmienn i j zmodyfikowa Dzi ki zakodowaniu tej warto ci zadanie to stanie sitrudniejsze
3 Dodanie wielu przypadkowych zmiennych Dzi ki temu trudniej si domy li ktoacuteraz nich przechowuje istotne dane
Podobnie jak w przypadku wcze niej opisywanych metod te roacutewnie jedynie utrudniaj proacutebyoszustwa ale nie daj stuprocentowego zabezpieczenia Roacutewnoczesne zastosowanie kilkurozwi za mo e zniech ci nawet najbardziej zdeterminowanych oszustoacutew Poni ej znaj-dziesz propozycj implementacji ka dego z nich
Kodowanie warto ciZaczniemy od kodowania warto ci Mo na to zrobi na wiele sposoboacutew roacute ni cych si uzy-skiwanym stopniem bezpiecze stwa W naszym przypadku wystarczy utrudni odszukaniewyniku na li cie przesy anych zmiennych w zwi zku z czym nie musimy wprowadza adnej
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
154
skomplikowanej metody kodowania W kodzie klienta u yjemy operacji przesuni cia w lewo(ltlt) a na serwerze mdash przesuni cia w prawo (gtgt)
Oto kod skryptu dzia aj cego na kliencie
$ajax( dataType json url highscorephp data level currentLevel time finishedTime ltlt 1 async false success function (json) )
Odpowiedni fragment skryptu na serwerze
$time = intval($_GET[time]) gtgt 1
Aby jeszcze bardziej zmyli u ytkownika warto t prze lemy w wielu innych zmiennychktoacutere nie b d w ogoacutele brane pod uwag po stronie serwera
Przypadkowe nazwy zmiennychNie trzeba tu wiele wyja nia mdash wystarczy zmieni nazw zmiennej Je li chcesz jeszczebardziej utrudni zadanie oszustom mo esz zmienia t nazw przy ka dym daniu Poni ejpodstawowa wersja kodu
$ajax( dataType json url highscorephp data Nmyzsf currentLevel WfBCLQ finishedTime ltlt 1 async false success function (json) )
Kod po stronie serwera przyjmie nast puj c posta
$time = intval($_GET[WfBCLQ]) gtgt 1$level = $_GET[Nmyzsf]
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
155
Dodatkowe przypadkowe zmienneNazwy zmiennych nie oddaj ju znaczenia przechowywanych przez nie warto ci ale to niewszystko poniewa stosunkowo atwo sprawdzi ktoacutera z nich odpowiada za wynik Musimy wi cdoda wi cej zmiennych ktoacuterych zadaniem jest wprowadzenie oszusta w b d Przyk adowerozwi zanie zosta o przedstawione na poni szym listingu
$ajax( dataType json url highscorephp data sXZZUj Mathround(200Mathrandom()) enHf8F Mathround(200Mathrandom()) eZnqBG currentLevel avFanB Mathround(200Mathrandom()) zkpCfb currentLevel PCXFTR Mathround(200Mathrandom()) Nmyzsf currentLevel FYGswh Mathround(200Mathrandom()) C3kaTz finishedTime ltlt 1 gU7buf finishedTime ykN65g Mathround(200Mathrandom()) Q5jUZm Mathround(200Mathrandom()) bb5d7V Mathround(200Mathrandom()) WTsrdm finishedTime ltlt 1 bCW5Dg currentLevel AFM8MN Mathround(200Mathrandom()) FUHt6K Mathround(200Mathrandom()) WfBCLQ finishedTime ltlt 1 d8mzVn Mathround(200Mathrandom()) bHxNpb Mathround(200Mathrandom()) MWcmCz finishedTime ZAat42 Mathround(200Mathrandom()) async false success function (json) )
W kodzie serwera nie trzeba nic zmienia poniewa dodatkowe zmienne s po prostu igno-rowane Mo na oczywi cie jeszcze bardziej skomplikowa spraw i wprowadzi dodatkowezale no ci mi dzy zmiennymi Nale y jednak ca y czas pami ta ktoacutere zmienne przechowujistotne dane by roacutewnie sobie nie utrudni zadania
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
156
Integracja z TwitteremTwitter daje mo liwo dzielenia si z innymi kroacutetkimi informacjami W przypadku gier mo emyz niego skorzysta na dwa sposoby
mo emy umo liwi graczowi zalogowanie si do gry za pomoc nazwy u ytkownikai has a z Twittera
mo emy da mo liwo publikowania tweetoacutew z wynikami lub informacjamio post pach w grze
Zajmiemy si teraz zaimplementowaniem tych dwoacutech funkcji
Podstawy TwitteraIstnieje bardzo prosty sposoacuteb korzystania z Twittera ktoacutery nie wymaga znajomo ci adnegoAPI Je li u ytkownik jest zalogowany za po rednictwem odpowiednio przygotowanego adresuURL mo na opublikowa tweet URL powinien by zbudowany w nast puj cy sposoacuteb
httptwittercomhomestatus=Przyk adowy tweet
Wyroacute niony fragment adresu to tekst tweeta Na ekranie tablicy wynikoacutew obok przyciskuZatwierd umie cimy odsy acz Tweetnij
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmit ltagt + lta id=tweetScore target=_blank href=http twittercomhomestatus=+escape(W a nie uda o mi si sko czy +currentLevel+ poziom gry Yet Another Platformer w +minSec(jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
157
Najistotniejszy jest wyroacute niony fragment kodu bo to dzi ki niemu dzieje si to co powinno Za-stosowali my tu javascriptow funkcj escape by dostarczany test by poprawnie sformatowany
Jak wida bardzo atwo zaimplementowa to rozwi zanie ale trzeba wiedzie o kilku ograni-czeniach
Je li u ytkownik nie jest zalogowany pojawi si ekran logowania Twittera Na ekranie tablicy wynikoacutew nie mo na u y nazwy u ytkownika z Twittera
W zwi zku z tym nawet je li u ytkownik b dzie chcia tweetn swoacutej wyniki tak b dzie musia poda swoj nazw w grze
Publikowanie ka dego tweeta powoduje otwarcie nowego okna przegl darkiw ktoacuterym u ytkownik musi potwierdzi t operacj
Je li chcieliby my umo liwi u ytkownikowi zalogowanie si i automatyczne publikowanietweetoacutew bez konieczno ci ka dorazowego otwierania nowego okna musimy skorzysta z APITwittera
Pe ny dost p do API TwitteraNajpe niejsza integracja gry z Twitterem wymaga zapytania u ytkownika o zgod na po czeniejego konta z gr Mo na w tym celu skorzysta z mechanizmu OAuth ktoacutery jest otwartym stan-dardem uwierzytelniania stosowanym przez wiele firm takich jak Twitter Google czy Facebook
Aby da u ytkownikom mo liwo zalogowania si za po rednictwem Twittera musimy lekkozmodyfikowa ekran pocz tkowy
Je li gracz kliknie cze Rozpocznij gr zacznie od razu rozgrywk Je li z kolei kliknie Zalogujprzez Twittera b dzie si musia zalogowa za po rednictwem Twittera po czym nast pi powroacutetdo gry
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
158
Rejestrowanie gry w TwitterzeZanim przejdziemy dalej musimy zarejestrowa gr w Twitterze Aby to zrobi musisz sizalogowa na stron Twittera dla deweloperoacutew (httpsdevtwittercom) a nast pnie kliknpozycj My applications (moje aplikacje) w menu profilu
Nale y utworzy now aplikacj ( cze Create a new application) wype ni wszystkie wymaganepola oraz wyrazi zgod na warunki licencyjne (Rules of the Road) Po zatwierdzeniu wprowa-dzonych danych zostanie wy wietlona strona zawieraj ca dane utworzonej aplikacji
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
159
Trzeba zwroacuteci uwag na dwie informacje ktoacutere na rysunku zosta y otoczone ramk poniewab d potrzebne poacute niej Nale y wykona jeszcze jedn drobn modyfikacj konfiguracjiPrzejd do zak adki Settings (ustawienia) i przyjrzyj si sekcji Application Type (typ aplikacji)Domy lnie jest zaznaczone pole Read only (tylko do odczytu) Je li chcesz w imieniu graczapublikowa tweety musisz wybra opcj Read and Write
W ten sposoacuteb przygotowali my konto na Twitterze do integracji z gr
Pomocnicza bibliotekaKod realizuj cy komunikacj z API Twittera mo na napisa samemu w PHP ale to dosy mud-na praca Na szcz cie jest dost pnych wiele bibliotek ktoacutere mog to upro ci Jedn z nichprzeznaczon dla PHP jest twitteroauth (httpsgithubcomabrahamtwitteroauth) Istniejoczywi cie biblioteki dla innych j zykoacutew koniecznie zajrzyj do dokumentacji Twittera abydowiedzie si wi cej na ten temat
Du zalet biblioteki twitteroauth jest to e mo na j zainstalowa na prawie ka dym serwerzeobs uguj cym PHP Wystarczy skopiowa bibliotek do tego samego katalogu w ktoacuterym znajdujsi skrypty gry W naszym przypadku b dzie to podkatalog twitter
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
160
Musimy zacz od skonfigurowania biblioteki Przydatny b dzie przyk adowy skrypt konfigura-cyjny config-samplephp dost pny w podanym repozytorium Znajduje si w nim kod definiuj cytrzy sta e
define(CONSUMER_KEY (1))define(CONSUMER_SECRET (2))define(OAUTH_CALLBACK (3))
W miejscach (1) i (2) trzeba wpisa warto ci wy wietlone na stronie informacji o utworzonejaplikacji Twittera W miejscu (3) nale y poda adres URL skryptu zwrotnego callbackphp
Ostatnim krokiem jest zmodyfikowanie skryptu callbackphp tak by zawiera prawid oweprzekierowanie do g oacutewnego pliku naszej gry
header(Location indexphp)
UwierzytelnianieNa poni szym diagramie zosta przedstawiony sposoacuteb przeprowadzania uwierzytelniania i auto-ryzacji u ytkownikoacutew w grze za po rednictwem Twittera
W praktyce nie jest to tak skomplikowane na jakie wygl da przede wszystkim dlatego ewi kszo jest ju zaimplementowana w bibliotece twitteroauth Zajmiemy si utworzeniemstrony logowania wy wietlanej po klikni ciu przycisku Zaloguj przez Twittera U yjemy zwy-k ego odsy acza kieruj cego do pliku redirectphp Kiedy u ytkownik kliknie to cze po razpierwszy zostanie przekierowany na stron Twittera na ktoacuterej b dzie moacuteg autoryzowa dost pdo konta
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
161
Po wyra eniu zgody nast pi przekierowanie na adres ktoacutery zosta ustawiony w pliku callbackphpJe li u ytkownik ju raz wyrazi zgod na autoryzacj b dzie moacuteg od razu si zalogowa
W skryptach JavaScript bardzo przyda nam si teraz informacja o tym czy gracz jest po czonyczy nie Aby j uzyska musimy przekszta ci g oacutewny dokument HTML gry w plik PHP i umie-ci na jego pocz tku nast puj cy kod
ltphpsession_start()
require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
Pobranie tokenoacutew u 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-gtget(accountverify_credentials)gt
W tym kodzie rozpoczynamy sesj do czamy dwa pliki biblioteki twitteroauth oraz odczytuje-my token sesji Je li token jest ustawiony oznacza to e u ytkownik jest zalogowany do Twittera
Nast pnie serwer czy si z Twitterem aby pobra obiekt u ytkownika Tak to wygl da postronie serwera ale kod JavaScript wci nie ma informacji o zalogowaniu W zwi zku z tymmusimy utworzy skrypt przesy aj cy dane do kodu klienckiego
ltscript type=textjavascriptgtltphp if($_SESSION[status] == verified) gt var twitter = true var twitterName = ltphp print $user-gtscreen_name gtltphp else gt var twitter = falseltphp gtltscriptgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
162
Je li gracz jest zalogowany do Twittera globalna zmienna twitter ma warto true a zmiennatwitterName zawiera nazw u ytkownika
Ostatnim o co nale y zadba jest poinformowanie u ytkownika o pomy lnym zalogowaniu zapomoc Twittera i umo liwienie wylogowania si W tym celu musimy wprowadzi drobnzmian w kodzie odpowiedzialnym za ekran pocz tkowy wy wietlany po zalogowaniu
ltdiv id=startScreen class=screengt ltphp if($_SESSION[status] = verified) gt lta class=button tweetLink href=twitterredirectphpgtZaloguj przez Twitteraltagt ltphp else gt lta class=button tweetLink href=twitterclearsessionsphpgtWyloguj z Twitteraltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Po wprowadzeniu powy szych modyfikacji mo na uzna e uwierzytelnianie przez Twitterajest zaimplementowane
Publikowanie najlepszych wynikoacutew na TwitterzeTeraz kiedy gracz jest ju zalogowany do Twittera mo na publikowa jego wyniki w znaczniewygodniejszy sposoacuteb ni poprzednio Zaczniemy od utworzenia po stronie serwera skryptutwitterPostphp w ktoacuterym u yjemy interfejsu statusesupdate API Twittera
Spoacutejrzmy na kompletny skrypt
ltphpsession_start()require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
$time = $_SESSION[time]$level = $_SESSION[level]if (isset($time) ampamp isset($level)) Pobranie tokenoacutew u ytkownika z sesji $access_token = $_SESSION[access_token] $connection = new TwitterOAuth(CONSUMER_KEY CONSUMER_SECRET $access_token[oauth_token] $access_token[oauth_token_secret])
$parameters = array(status =gt W a nie uda o mi si sko czy $level poziom gry Yet Another Platformer w $time sekund) $status = $connection-gtpost(statusesupdate $parameters)gt
Najprawdopodobniej rozpoznajesz wi kszo kodu z powy szego listingu ktoacutery dodali my napocz tku skryptu ekranu pocz tkowego (tylko wyroacute niony kod jest nowy) W ostatnich dwoacutechwierszach tworzymy a nast pnie przesy amy do Twittera tekst ktoacutery chcemy opublikowa co
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
163
mdash jak wida mdash jest ca kiem proste Musimy jednak zaj si jeszcze jednym Poniewa graczjest zalogowany znamy jego nazw wi c mo emy j wykorzysta na ekranie tablicy wynikoacutew
W kodzie klienta utworzymy troch inn od dotychczasowej wersj tablicy wynikoacutew
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) if (twitter) top += ltinput id=name type=hidden value=+twitterName+gt + twitterName + + minSec(jsontop[i]time) + lta id=saveScore href=gtZatwierd ltagt + lta id=tweetScore href=gtTweetnijltagt ltbrgt else top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt + lta target=_blank href=httptwittercomhome status=+escape(w a nie uda o mi si sko czy +current Level+ poziom gry Yet Another Platformer w +minSec (jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Tworzymy tu niewidoczne pole wej ciowe przechowuj ce nazw u ytkownika pochodz cz Twittera Nast pnie wypisujemy t nazw na ekranie tablicy wynikoacutew Zwroacute uwag e niemusieli my w ogoacutele zmienia kodu po stronie serwera
Tyle na temat integracji z Twitterem Je eli chcesz dowiedzie si wi cej i rozszerzy funk-cjonalno gry zajrzyj do dokumentacji API Twittera
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
164
Integracja z FacebookiemIntegracja z Facebookiem i Twitterem jest w wielu aspektach podobna Facebook jest jednakw du o wi kszym stopniu nastawiony na gry Zajmiemy si implementacj osi gni dla zalo-gowanych u ytkownikoacutew Skorzystamy z SDK Facebooka dla PHP ale s roacutewnie dost pnerozwi zania dla innych j zykoacutew
Tak jak w przypadku Twittera tu roacutewnie musimy zacz od zarejestrowania aplikacji w Fa-cebooku W tym celu trzeba si zalogowa do serwisu dla deweloperoacutew (httpsdevelopers
facebookcom) i klikn pozycj Apps1
Nast pnie nale y klikn cze Create New App i wype ni obowi zkowe pola formularza Poich zatwierdzeniu pojawi si ekran z informacjami dotycz cymi nowej aplikacji Podobnie jakby o w przypadku Twittera tu roacutewnie najwa niejsze s dwie warto ci co wida na rysunku
1 Aby moacutec tworzy aplikacje trzeba si zarejestrowa jako programista W tym celu musisz klikn przycisk
Register as a Developer mdash przyp t um
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
165
Na powy szym zrzucie strza k zosta a oznaczona sekcja umo liwiaj ca wyboacuter sposobu inte-gracji aplikacji z Facebookiem Aby uzyska pe ny dost p do interfejsu Open Graph API Fa-cebooka ktoacutery umo liwia mi dzy innymi publikowanie osi gni trzeba zaznaczy pozycjAplikacja na Facebooku
Dzi ki temu gra mo e by uruchamiana w ramce (iframe) wewn trz strony Facebooka Jednakaby to by o mo liwe konieczny jest prawid owy certyfikat dla HTTPS obowi zuj cy w dome-nie w ktoacuterej jest dost pna gra Je li jednak chcemy by gra by a adowana z naszego serweranie ma tych wymaga ale i tak trzeba wpisa adres w odpowiednim polu (aby adres zostauznany za poprawny nale y poda https nawet je li nie ma si certyfikatu)
Jest jeszcze jedno co nale y zrobi by aplikacja mog a publikowa osi gni cia mdash nale y jzarejestrowa jako gr W tym celu wystarczy klikn pozycj Informacje o aplikacji a na-st pnie w sekcji Informacje o aplikacji w polach Kategoria ustawi pozycj Gry i ustali gatunekgry co wida na poni szym rysunku
Uwierzytelnianie przez FacebookaPodstawowy mechanizm uwierzytelniania jest bardzo podobny do tego z Twittera ale istniejepewna roacute nica w podej ciu do dost pu W przypadku Twittera mo na by o zdecydowa czyaplikacja ma prawa tylko do odczytu czy roacutewnie zapisu Facebook oferuje znacznie bogatszemo liwo ci ustalania poziomoacutew dost pu przy czym decyduje si o nich w czasie logowania
Kod odpowiedzialny za uwierzytelnianie zosta przedstawiony na poni szym listingu Tu roacutewnie jak w przypadku Twittera musimy umie ci na pocz tku skryptu kod pobieraj cy obiekt bie-
cego u ytkownika
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
166
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()gt
Wyroacute niony wiersz kodu odpowiada za wskazanie e z poziomu gry b dziemy chcieli publiko-wa wpisy na osi czasu u ytkownika W miejscach (1) i (2) nale y wpisa warto ci wy wietlonena stronie konfiguracji aplikacji w Facebooku
Je li zmienna $facebookUser to null oznacza to e u ytkownik jest ju zalogowany W prze-ciwnym przypadku musimy wy wietli przycisk logowania Musimy wi c napisa kod podobnydo tego ktoacutery s u y do wy wietlenia przycisku logowania za po rednictwem Twittera
ltdiv id=startScreen class=screengt ltphp if ($facebookUser) $loginUrl = $facebook-gtgetLoginUrl(array( scope =gt $scope redirect_uri =gt $app_url )) gt lta class=button tweetLink href=ltphp print $loginUrl gtgtZaloguj przez Facebookaltagt ltphp else $logoutUrl = $facebook-gtgetLogoutUrl(array( next =gt $app_url )) gt lta class=button tweetLink href=ltphp print $logoutUrlgtgtWyloguj z Facebookaltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
144
W tym rozdziale zostan omoacutewione nast puj ce zagadnienia tworzenie prostej tablicy wynikoacutew wprowadzanie mechanizmoacutew utrudniaj cych oszukiwanie integracja gry z Twitterem umo liwiaj ca publikowanie wynikoacutew integracja gry z Facebookiem pozwalaj ca na zdobywanie osi gni
Tworzenie prostej tablicy wynikoacutewJak si mo na domy li utworzenie tablicy wynikoacutew b dzie wymaga o bazy danych w ktoacuterejb dzie przechowywana punktacja Podobnie jak w poprzednim rozdziale do implementacjigry po stronie serwera u yjemy j zyka PHP i bazy danych MySQL Jednak w przeciwie -stwie do problemu omoacutewionego w poprzednim rozdziale realizacja tablicy wynikoacutew dlawielu graczy jest o wiele prostsza Wynika to st d e nie wymaga zbyt wielu zasoboacutew serweraa operacje na bazie danych nie s wykonywane zbyt cz sto Mo na za o y e dla ka degogracza danie b dzie zg aszane co mniej wi cej 10 sekund a nie mdash jak w przypadku gryMMORPG z poprzedniego rozdzia u mdash kilka razy w ci gu sekundy
Przede wszystkim musimy ustali co b dzie pe ni o funkcj punktacji w grze Zastosujemynajprostsze rozwi zanie czyli zdecydujemy si na czas (wyra ony w sekundach) w ktoacuterymgracz przeszed plansz Poni szy diagram ilustruje algorytm implementowanego mechanizmu
Na potrzeby interfejsu u ytkownika b dziemy musieli utworzy dwa ekrany Post pimy taksamo jak w poprzednim rozdziale czyli u yjemy elementoacutew div ktoacutere b dziemy wy wietlalub ukrywa
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
145
Pierwszy ekran s u y do poinformowania o rozpocz ciu poziomu i daje graczowi czas naprzygotowanie si Drugi ekran jest troch bardziej z o ony Wy wietlane s na nim uzyskanywynik lista pi ciu najlepszych graczy oraz je li aktualny wynik gracza kwalifikuje si do listynajlepszych pole umo liwiaj ce wpisanie si na ni Przyk adowy wygl d tego ekranu zostaprzedstawiony poni ej
Zdecydowali my si na takie rozwi zanie mdash pytanie o nazw u ytkownika nie na pocz tkugry ale dopiero po uzyskaniu wystarczaj cej liczby punktoacutew mdash by odtworzy zachowanie kla-sycznych gier
Podsumowuj c serwer musi obs u y dwie dodatkowe operacje pobranie pi ciu najlepszych wynikoacutew dla danego poziomu zapisanie punktacji dla danego poziomu
Zaimplementujemy je w osobnych plikach highscorephp oraz savephp
Zapisywanie wynikoacutewTabela w bazie danych musi si sk ada z trzech kolumn
level mdash liczba ca kowita okre laj ca numer poziomu gry name mdash a cuch znakoacutew przechowuj cy nazw u ytkownika time mdash liczba ca kowita odpowiadaj ca liczbie sekund ktoacutera up yn a od rozpocz cia
poziomu do jego zako czenia
Skrypt zapisuj cy wyniki jest bardzo prosty Wystarczy e na serwer prze lemy nazw u yt-kownika liczb punktoacutew oraz poziom Otrzymane dane zapiszemy w bazie danych za pomocnast puj cej kwerendy
INSERT INTO scores (level name time) VALUES (1 Krysia 36)
Pozosta a cz skryptu jest bardzo podobna do tego z czym mieli my do czynienia w po-przednich rozdzia ach wi c nie b dziemy tu zamieszcza kodu Pe n wersj skryptu znaj-dziesz w plikach do czonych do ksi ki
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
146
Pobieranie listy najlepszych wynikoacutewAby pobra wyniki z serwera wystarczy przekaza mu numer poziomu a on zwroacuteci punktacj Zastosowali my tu jednak troch bardziej skomplikowany mechanizm Ustalamy dodatkowoczy bie cy u ytkownik zakwalifikowa si na list i mdash je li tak mdash obliczamy na ktoacuterymmiejscu Dzi ki temu b dziemy mogli roacutewnie zaimplementowa zabezpieczenia przeciw-dzia aj ce oszustwom
Musimy wi c dostarczy do serwera poziom oraz uzyskany czas a on zwroacuteci plik JSON zawie-raj cy wszystkie dane niezb dne do wygenerowania tablicy wynikoacutew Format tego pliku przed-stawia si nast puj co
top[ name Tymek time 18 name Anna time 20 time 22 name Jacek time 25 ] intop true pos 2
Jak mo na zauwa y wprowadzili my pole intop ktoacutere informuje czy bie cy u ytkownikznalaz si na li cie pi ciu najlepszych Je li ma ono warto true do czane jest kolejne pole mdashpos ktoacutere przechowuje indeks rezultatu gracza w tablicy wynikoacutew (top) Wszystkie pozosta eelementy tablicy top odpowiadaj uporz dkowanym rosn co wynikom uzyskanym przez innychgraczy Je li pole intop ma warto false tablica top przechowuje jedynie wyniki innych graczy
Pierwszym krokiem b dzie wykonanie poni szego zapytania SQL
SELECT FROM scores WHERE level=1 ORDER BY time ASC LIMIT 5
Jest ono bardzo podobne do poprzednich ale na ko cu (fragment zapisany wyroacute nionym kodem)znajduje si modyfikator wymuszaj cy posortowanie wynikoacutew wzgl dem kolumny time w po-rz dku rosn cym (ORDER BY time ASC) oraz ograniczaj cy liczb zwracanych rekordoacutew do pi ciu(LIMIT 5)
W drugiej kolejno ci trzeba si zaj wygenerowaniem pliku JSON na podstawie danychotrzymanych z kwerendy Jedynym ciekawym fragmentem jest wstawienie wyniku graczaje li uzyska wystarczaj co dobry czas Pe ny kod tego skryptu znajduje si poni ej
ltphp session_start()
include dbconnectphp
$time = $_GET[time]
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
147
$level = $_GET[level]
if (isset($time) ampamp isset($level)) Obiekt JSON $json = array(top=gtarray() intop=gtfalse)
$query = SELECT FROM scores WHERE level=$level ORDER BY time ASC LIMIT 5 $result = mysqli_query($link $query) $i=0
while ($obj = mysqli_fetch_object($result)) if ($json[intop] ampamp $time lt $obj-gttime) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
$i++ if ($i lt 5) array_push($json[top] array(time=gt$obj-gttime name=gt$obj- gtname)) $i++
if ($i lt 5 ampamp $json[intop]) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
mysqli_free_result($result) echo json_encode($json) mysqli_close($link)gt
Na listingu zosta y wyroacute nione te fragmenty ktoacutere odpowiadaj za operacje na wyniku gracza
Wy wietlanie listy najlepszych wynikoacutewPo stronie klienta wygenerujemy ekran przedstawiaj cy wynik list najlepszych graczy orazpole s u ce do wprowadzenia nazwy u ytkownika je li uda o mu si uzyska wystarczaj codobry czas Kod ten przedstawia si nast puj co
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
148
var finishedTime = Mathround((Datenow() - levelStart) 1000) $ajax( dataType json url highscorephp data level currentLevel time finishedTime async false success function(json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + ltinput id=timeScore type=hidden value=+jsontop[i] time+gtltinputgt + ltinput id=level type=hidden value= +currentLevel+gtltinputgt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )fail(function(a b c) var toto = toto )
Kod generuj cy list zosta wyroacute niony Tworzymy pole w ktoacuterym gracz mo e wpisa swojnazw oraz dwa ukryte pola przechowuj ce numer poziomu i punktacj Umieszczamy turoacutewnie odsy acz s u cy do zatwierdzenia wyniku Kod obs uguj cy ten odsy acz znajdujesi poni ej
$(levelEnd)on(click saveScore function() $get(savephp name $(name)val() time $(timeScore)val() level $(level)val() function() $(saveScore)fadeOut(500) ) return false)
Pobieramy tu warto ci z poacutel i przekazujemy je na serwer Po ich przes aniu usuwamy przyciskzatwierdzania aby da zna u ytkownikowi e proces si zako czy
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
149
Mechanizmy utrudniaj ce oszukiwanieNie istnieje idealne rozwi zanie uniemo liwiaj ce oszukiwanie Problem ten jest szczegoacutelnieistotny w grach tworzonych w JavaScripcie poniewa bardzo atwo uzyska dost p do koduroacuted owego Mo na oczywi cie przekszta ci kod do nieczytelnej postaci ale to nie powstrzyma
zdeterminowanego oszusta a jedynie spowolni jego prac Istnieje jednak kilka innych technikdzi ki ktoacuterym proacuteby oszustw staj si trudniejsze i mniej op acalne
Weryfikacja po stronie serweraNajprostszym sposobem na utrudnienie oszukiwania jest przeniesienie cz ci kodu na serwerZrobili my tak z mechanizmem walki w grze tworzonej w rozdziale 7 W przypadku gry plat-formowej musieliby my przesy a na serwer informacje o wciskaniu klawiszy steruj cych po-staci na podstawie ktoacuterych skrypt okre la by jego nowe po o enie
W wi kszo ci przypadkoacutew nie da si zastosowa takiego rozwi zania w tego typu grach alemo na stworzy skrypt ktoacutery b dzie weryfikowa punktacj gracza po stronie serwera Wystarczyw kilku miejscach planszy umie ci niewidoczne punkty kontrolne po osi gni ciu ktoacuterych naserwer jest przesy ana stosowna informacja Dzi ki temu je li u ytkownik przes a na serwerpunktacj ale nie trafi y tam wcze niej informacje z punktoacutew kontrolnych wiemy e co jestnie tak Mo na te zastosowa podobne rozwi zanie ale bazuj ce na przyk ad na liczbie skokoacutewlub pora ek gracza
Tak czy inaczej trzeba wprowadzi w grze jak kolwiek form weryfikacji wynikoacutew Nie majednego najlepszego rozwi zania Musisz jednak pami ta by zastosowany mechanizm niewykry proacuteby oszustwa tam gdzie go nie ma czyli eby uczciwy gracz nie zosta o nie pos -dzony Istotny jest roacutewnie nak ad pracy wymagany do zaimplementowania tego typu mecha-nizmoacutew tak by praca nad nimi nie zaj a przypadkiem wi cej czasu ni tworzenie samej gry
W przedstawionym poni ej przyk adzie zastosujemy proste rozwi zanie Znamy maksymalnpr dko z jak mo e si porusza gracz wiemy te ile ma do przej cia wi c atwo jest obliczyminimalny czas potrzebny na zako czenie poziomu Wystarczy poroacutewna wynik gracza z twarto ci i sprawdzi czy nie jest mniejszy
Aby to zrobi trzeba uzupe ni skrypt highscorephp
gracz mo e przej 7 pikseli w 30 ms -gt 2331$minTime = array( 1 =gt 15 3500 2331 2 =gt 15 3500 2331 3 =gt 42 9800 2331 4 =gt 23 5460 2331)$timeValid = ($minTime[intval($level)] lt intval($time))while ($obj = mysqli_fetch_object($result))
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
150
if ($json[intop] ampamp $time lt $obj-gttime ampamp $timeValid)
Je li wynik osi gni ty przez gracza zosta uznany za nieprawdziwy zostanie wy wietlony alegracz nie b dzie moacuteg wpisa swojej nazwy
Mniej czytelne zmienneInnym rozwi zaniem jest zmniejszenie czytelno ci zmiennych tak by utrudni analiz danychprzesy anych na serwer oraz ich modyfikacj (dane te s w naszym przypadku zapisane w ukry-tych polach formularza) Rozwi zanie to wydaje si dobre ale niestety nietrudno jest obej ta-kie zabezpieczenia Na poni szym rysunku zosta o przedstawione okno inspektora przegl darkiChrome
Jedn z naczelnych zasad jest unikanie przechowywania istotnych informacji w elementachznajduj cych si w strukturze DOM poniewa maj do nich dost p wszyscy u ytkownicy nawettacy ktoacuterzy z programowaniem maj niewiele do czynienia W zwi zku z tym usuniemy jez wywo ania skryptu savephp i zapiszemy je w sesji W pliku highscorephp musimy doda na-st puj cy kod
if ($json[intop] ampamp $time lt $obj-gttime ampamp $timeValid) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
151
$_SESSION[level] = $level $_SESSION[time] = $time
$i++
W skrypcie savephp musimy z sesji odczyta poziom i czas
$name = $_GET[name]$time = $_SESSION[time]$level = $_SESSION[level]
Te proste zmiany wystarcz by utrudni oszukiwanie w naszej grze
Zaciemnianie koduZaciemnianie kodu (ang obfuscating) jest bardzo prost technik ale przy tym ca kiem sku-teczn Przekszta cony w ten sposoacuteb kod trudno analizowa poniewa jest nieczytelny dlaludzi Poni ej znajduje si fragment kodu odpowiedzialnego za tablic wynikoacutew
if (status == finished) gameState = menu $(level_nb_2)html(currentLevel) $(level_nb_1)html(currentLevel + 1)
var finishedTime = Mathround((Datenow() - levelStart) 1000) $ajax( dataType json url highscorephp data level currentLevel time finishedTime async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + ltinput id=timeScore type=hidden value=+jsontop[i] time+gtltinputgt + ltinput id=level type=hidden value= +currentLevel+gtltinputgt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
152
$(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) gfx(group 0)
tilemap = loadNextLevel(group) gfx(playerdiv 0) gfy(playerdiv 0) gfsetAnimation(playerdiv playerAnimjump) ) status = stand
Ten sam kod poddany operacji zaciemniania (za pomoc narz dzia UglifyJS) wygl da nast puj co
if(finished==status)gameState=menu$(level_nb_2)html(currentLevel)$(level_nb_1)html(currentLevel+1)varfinishedTime=Mathround((Datenow()-levelStart)1e3)$ajax(dataTypejsonurlhighscorephpdatalevelcurrentLeveltimefinishedTimeasync1successfunction(a)for(var b=c=0atoplengthgtcc++)b+=aintopampampapos===cltinput id=name placeholder=_____ size=5gtltinput id=timeScore type=hidden value=+atop[c]time+gtltinputgt+ltinput id=level type=hidden value=+currentLevel+gtltinputgt+ +minSec(atop[c]time)+ lta id=saveScorehref=gtsubmitltagt ltbrgt+atop[c]name+ +minSec(atop[c]time)+ltbrgt$(top_list)html(b))fail(function())$(time)html(minSec(finishedTime))$(levelEnd)fadeIn(2e3function()$(backgroundFront)css(background-position0px0px)$(backgroundBack)css(background-position0px 0px)gfx(group0)tilemap=loadNextLevel(group)gfx(playerdiv0)gfy(playerdiv0)gfsetAnimation(playerdivplayerAnimjump))status=stand
Z ca pewno ci analiza takiego kodu jest du o trudniejsza a zyskujemy przy okazji co jeszczemdashprzetworzony w ten sposoacuteb kod jest kroacutetszy ni orygina
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
153
Mniej czytelny protokoacute sieciowyChocia poprawili my kod dzia aj cy po stronie klienta nadal istnieje mo liwo uzyskania do-st pu do warto ci przesy anych zmiennych poprzez analiz ruchu sieciowego Na poni szymrysunku zosta o przedstawione okno aplikacji nas uchuj cej ktoacutera wy wietla dane przesy ane pozako czeniu poziomu
Jest to problem poniewa w celu oszustwa u ytkownik nie musi modyfikowa kodu mdash wystarczysfa szowa pakiet przesy any na serwer Istniej trzy proste sposoby na utrudnienie analizowaniatransmitowanych danych
1 Nadawanie zmiennym przypadkowych nazw tak by na ich podstawie nie da o siokre li ich przeznaczenia
2 Kodowanie zawarto ci zmiennych U ytkownik zna przewa nie osi gni ty przez siebiewynik wi c na jego podstawie mo e znale w transmitowanych danych odpowiednizmienn i j zmodyfikowa Dzi ki zakodowaniu tej warto ci zadanie to stanie sitrudniejsze
3 Dodanie wielu przypadkowych zmiennych Dzi ki temu trudniej si domy li ktoacuteraz nich przechowuje istotne dane
Podobnie jak w przypadku wcze niej opisywanych metod te roacutewnie jedynie utrudniaj proacutebyoszustwa ale nie daj stuprocentowego zabezpieczenia Roacutewnoczesne zastosowanie kilkurozwi za mo e zniech ci nawet najbardziej zdeterminowanych oszustoacutew Poni ej znaj-dziesz propozycj implementacji ka dego z nich
Kodowanie warto ciZaczniemy od kodowania warto ci Mo na to zrobi na wiele sposoboacutew roacute ni cych si uzy-skiwanym stopniem bezpiecze stwa W naszym przypadku wystarczy utrudni odszukaniewyniku na li cie przesy anych zmiennych w zwi zku z czym nie musimy wprowadza adnej
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
154
skomplikowanej metody kodowania W kodzie klienta u yjemy operacji przesuni cia w lewo(ltlt) a na serwerze mdash przesuni cia w prawo (gtgt)
Oto kod skryptu dzia aj cego na kliencie
$ajax( dataType json url highscorephp data level currentLevel time finishedTime ltlt 1 async false success function (json) )
Odpowiedni fragment skryptu na serwerze
$time = intval($_GET[time]) gtgt 1
Aby jeszcze bardziej zmyli u ytkownika warto t prze lemy w wielu innych zmiennychktoacutere nie b d w ogoacutele brane pod uwag po stronie serwera
Przypadkowe nazwy zmiennychNie trzeba tu wiele wyja nia mdash wystarczy zmieni nazw zmiennej Je li chcesz jeszczebardziej utrudni zadanie oszustom mo esz zmienia t nazw przy ka dym daniu Poni ejpodstawowa wersja kodu
$ajax( dataType json url highscorephp data Nmyzsf currentLevel WfBCLQ finishedTime ltlt 1 async false success function (json) )
Kod po stronie serwera przyjmie nast puj c posta
$time = intval($_GET[WfBCLQ]) gtgt 1$level = $_GET[Nmyzsf]
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
155
Dodatkowe przypadkowe zmienneNazwy zmiennych nie oddaj ju znaczenia przechowywanych przez nie warto ci ale to niewszystko poniewa stosunkowo atwo sprawdzi ktoacutera z nich odpowiada za wynik Musimy wi cdoda wi cej zmiennych ktoacuterych zadaniem jest wprowadzenie oszusta w b d Przyk adowerozwi zanie zosta o przedstawione na poni szym listingu
$ajax( dataType json url highscorephp data sXZZUj Mathround(200Mathrandom()) enHf8F Mathround(200Mathrandom()) eZnqBG currentLevel avFanB Mathround(200Mathrandom()) zkpCfb currentLevel PCXFTR Mathround(200Mathrandom()) Nmyzsf currentLevel FYGswh Mathround(200Mathrandom()) C3kaTz finishedTime ltlt 1 gU7buf finishedTime ykN65g Mathround(200Mathrandom()) Q5jUZm Mathround(200Mathrandom()) bb5d7V Mathround(200Mathrandom()) WTsrdm finishedTime ltlt 1 bCW5Dg currentLevel AFM8MN Mathround(200Mathrandom()) FUHt6K Mathround(200Mathrandom()) WfBCLQ finishedTime ltlt 1 d8mzVn Mathround(200Mathrandom()) bHxNpb Mathround(200Mathrandom()) MWcmCz finishedTime ZAat42 Mathround(200Mathrandom()) async false success function (json) )
W kodzie serwera nie trzeba nic zmienia poniewa dodatkowe zmienne s po prostu igno-rowane Mo na oczywi cie jeszcze bardziej skomplikowa spraw i wprowadzi dodatkowezale no ci mi dzy zmiennymi Nale y jednak ca y czas pami ta ktoacutere zmienne przechowujistotne dane by roacutewnie sobie nie utrudni zadania
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
156
Integracja z TwitteremTwitter daje mo liwo dzielenia si z innymi kroacutetkimi informacjami W przypadku gier mo emyz niego skorzysta na dwa sposoby
mo emy umo liwi graczowi zalogowanie si do gry za pomoc nazwy u ytkownikai has a z Twittera
mo emy da mo liwo publikowania tweetoacutew z wynikami lub informacjamio post pach w grze
Zajmiemy si teraz zaimplementowaniem tych dwoacutech funkcji
Podstawy TwitteraIstnieje bardzo prosty sposoacuteb korzystania z Twittera ktoacutery nie wymaga znajomo ci adnegoAPI Je li u ytkownik jest zalogowany za po rednictwem odpowiednio przygotowanego adresuURL mo na opublikowa tweet URL powinien by zbudowany w nast puj cy sposoacuteb
httptwittercomhomestatus=Przyk adowy tweet
Wyroacute niony fragment adresu to tekst tweeta Na ekranie tablicy wynikoacutew obok przyciskuZatwierd umie cimy odsy acz Tweetnij
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmit ltagt + lta id=tweetScore target=_blank href=http twittercomhomestatus=+escape(W a nie uda o mi si sko czy +currentLevel+ poziom gry Yet Another Platformer w +minSec(jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
157
Najistotniejszy jest wyroacute niony fragment kodu bo to dzi ki niemu dzieje si to co powinno Za-stosowali my tu javascriptow funkcj escape by dostarczany test by poprawnie sformatowany
Jak wida bardzo atwo zaimplementowa to rozwi zanie ale trzeba wiedzie o kilku ograni-czeniach
Je li u ytkownik nie jest zalogowany pojawi si ekran logowania Twittera Na ekranie tablicy wynikoacutew nie mo na u y nazwy u ytkownika z Twittera
W zwi zku z tym nawet je li u ytkownik b dzie chcia tweetn swoacutej wyniki tak b dzie musia poda swoj nazw w grze
Publikowanie ka dego tweeta powoduje otwarcie nowego okna przegl darkiw ktoacuterym u ytkownik musi potwierdzi t operacj
Je li chcieliby my umo liwi u ytkownikowi zalogowanie si i automatyczne publikowanietweetoacutew bez konieczno ci ka dorazowego otwierania nowego okna musimy skorzysta z APITwittera
Pe ny dost p do API TwitteraNajpe niejsza integracja gry z Twitterem wymaga zapytania u ytkownika o zgod na po czeniejego konta z gr Mo na w tym celu skorzysta z mechanizmu OAuth ktoacutery jest otwartym stan-dardem uwierzytelniania stosowanym przez wiele firm takich jak Twitter Google czy Facebook
Aby da u ytkownikom mo liwo zalogowania si za po rednictwem Twittera musimy lekkozmodyfikowa ekran pocz tkowy
Je li gracz kliknie cze Rozpocznij gr zacznie od razu rozgrywk Je li z kolei kliknie Zalogujprzez Twittera b dzie si musia zalogowa za po rednictwem Twittera po czym nast pi powroacutetdo gry
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
158
Rejestrowanie gry w TwitterzeZanim przejdziemy dalej musimy zarejestrowa gr w Twitterze Aby to zrobi musisz sizalogowa na stron Twittera dla deweloperoacutew (httpsdevtwittercom) a nast pnie kliknpozycj My applications (moje aplikacje) w menu profilu
Nale y utworzy now aplikacj ( cze Create a new application) wype ni wszystkie wymaganepola oraz wyrazi zgod na warunki licencyjne (Rules of the Road) Po zatwierdzeniu wprowa-dzonych danych zostanie wy wietlona strona zawieraj ca dane utworzonej aplikacji
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
159
Trzeba zwroacuteci uwag na dwie informacje ktoacutere na rysunku zosta y otoczone ramk poniewab d potrzebne poacute niej Nale y wykona jeszcze jedn drobn modyfikacj konfiguracjiPrzejd do zak adki Settings (ustawienia) i przyjrzyj si sekcji Application Type (typ aplikacji)Domy lnie jest zaznaczone pole Read only (tylko do odczytu) Je li chcesz w imieniu graczapublikowa tweety musisz wybra opcj Read and Write
W ten sposoacuteb przygotowali my konto na Twitterze do integracji z gr
Pomocnicza bibliotekaKod realizuj cy komunikacj z API Twittera mo na napisa samemu w PHP ale to dosy mud-na praca Na szcz cie jest dost pnych wiele bibliotek ktoacutere mog to upro ci Jedn z nichprzeznaczon dla PHP jest twitteroauth (httpsgithubcomabrahamtwitteroauth) Istniejoczywi cie biblioteki dla innych j zykoacutew koniecznie zajrzyj do dokumentacji Twittera abydowiedzie si wi cej na ten temat
Du zalet biblioteki twitteroauth jest to e mo na j zainstalowa na prawie ka dym serwerzeobs uguj cym PHP Wystarczy skopiowa bibliotek do tego samego katalogu w ktoacuterym znajdujsi skrypty gry W naszym przypadku b dzie to podkatalog twitter
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
160
Musimy zacz od skonfigurowania biblioteki Przydatny b dzie przyk adowy skrypt konfigura-cyjny config-samplephp dost pny w podanym repozytorium Znajduje si w nim kod definiuj cytrzy sta e
define(CONSUMER_KEY (1))define(CONSUMER_SECRET (2))define(OAUTH_CALLBACK (3))
W miejscach (1) i (2) trzeba wpisa warto ci wy wietlone na stronie informacji o utworzonejaplikacji Twittera W miejscu (3) nale y poda adres URL skryptu zwrotnego callbackphp
Ostatnim krokiem jest zmodyfikowanie skryptu callbackphp tak by zawiera prawid oweprzekierowanie do g oacutewnego pliku naszej gry
header(Location indexphp)
UwierzytelnianieNa poni szym diagramie zosta przedstawiony sposoacuteb przeprowadzania uwierzytelniania i auto-ryzacji u ytkownikoacutew w grze za po rednictwem Twittera
W praktyce nie jest to tak skomplikowane na jakie wygl da przede wszystkim dlatego ewi kszo jest ju zaimplementowana w bibliotece twitteroauth Zajmiemy si utworzeniemstrony logowania wy wietlanej po klikni ciu przycisku Zaloguj przez Twittera U yjemy zwy-k ego odsy acza kieruj cego do pliku redirectphp Kiedy u ytkownik kliknie to cze po razpierwszy zostanie przekierowany na stron Twittera na ktoacuterej b dzie moacuteg autoryzowa dost pdo konta
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
161
Po wyra eniu zgody nast pi przekierowanie na adres ktoacutery zosta ustawiony w pliku callbackphpJe li u ytkownik ju raz wyrazi zgod na autoryzacj b dzie moacuteg od razu si zalogowa
W skryptach JavaScript bardzo przyda nam si teraz informacja o tym czy gracz jest po czonyczy nie Aby j uzyska musimy przekszta ci g oacutewny dokument HTML gry w plik PHP i umie-ci na jego pocz tku nast puj cy kod
ltphpsession_start()
require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
Pobranie tokenoacutew u 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-gtget(accountverify_credentials)gt
W tym kodzie rozpoczynamy sesj do czamy dwa pliki biblioteki twitteroauth oraz odczytuje-my token sesji Je li token jest ustawiony oznacza to e u ytkownik jest zalogowany do Twittera
Nast pnie serwer czy si z Twitterem aby pobra obiekt u ytkownika Tak to wygl da postronie serwera ale kod JavaScript wci nie ma informacji o zalogowaniu W zwi zku z tymmusimy utworzy skrypt przesy aj cy dane do kodu klienckiego
ltscript type=textjavascriptgtltphp if($_SESSION[status] == verified) gt var twitter = true var twitterName = ltphp print $user-gtscreen_name gtltphp else gt var twitter = falseltphp gtltscriptgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
162
Je li gracz jest zalogowany do Twittera globalna zmienna twitter ma warto true a zmiennatwitterName zawiera nazw u ytkownika
Ostatnim o co nale y zadba jest poinformowanie u ytkownika o pomy lnym zalogowaniu zapomoc Twittera i umo liwienie wylogowania si W tym celu musimy wprowadzi drobnzmian w kodzie odpowiedzialnym za ekran pocz tkowy wy wietlany po zalogowaniu
ltdiv id=startScreen class=screengt ltphp if($_SESSION[status] = verified) gt lta class=button tweetLink href=twitterredirectphpgtZaloguj przez Twitteraltagt ltphp else gt lta class=button tweetLink href=twitterclearsessionsphpgtWyloguj z Twitteraltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Po wprowadzeniu powy szych modyfikacji mo na uzna e uwierzytelnianie przez Twitterajest zaimplementowane
Publikowanie najlepszych wynikoacutew na TwitterzeTeraz kiedy gracz jest ju zalogowany do Twittera mo na publikowa jego wyniki w znaczniewygodniejszy sposoacuteb ni poprzednio Zaczniemy od utworzenia po stronie serwera skryptutwitterPostphp w ktoacuterym u yjemy interfejsu statusesupdate API Twittera
Spoacutejrzmy na kompletny skrypt
ltphpsession_start()require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
$time = $_SESSION[time]$level = $_SESSION[level]if (isset($time) ampamp isset($level)) Pobranie tokenoacutew u ytkownika z sesji $access_token = $_SESSION[access_token] $connection = new TwitterOAuth(CONSUMER_KEY CONSUMER_SECRET $access_token[oauth_token] $access_token[oauth_token_secret])
$parameters = array(status =gt W a nie uda o mi si sko czy $level poziom gry Yet Another Platformer w $time sekund) $status = $connection-gtpost(statusesupdate $parameters)gt
Najprawdopodobniej rozpoznajesz wi kszo kodu z powy szego listingu ktoacutery dodali my napocz tku skryptu ekranu pocz tkowego (tylko wyroacute niony kod jest nowy) W ostatnich dwoacutechwierszach tworzymy a nast pnie przesy amy do Twittera tekst ktoacutery chcemy opublikowa co
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
163
mdash jak wida mdash jest ca kiem proste Musimy jednak zaj si jeszcze jednym Poniewa graczjest zalogowany znamy jego nazw wi c mo emy j wykorzysta na ekranie tablicy wynikoacutew
W kodzie klienta utworzymy troch inn od dotychczasowej wersj tablicy wynikoacutew
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) if (twitter) top += ltinput id=name type=hidden value=+twitterName+gt + twitterName + + minSec(jsontop[i]time) + lta id=saveScore href=gtZatwierd ltagt + lta id=tweetScore href=gtTweetnijltagt ltbrgt else top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt + lta target=_blank href=httptwittercomhome status=+escape(w a nie uda o mi si sko czy +current Level+ poziom gry Yet Another Platformer w +minSec (jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Tworzymy tu niewidoczne pole wej ciowe przechowuj ce nazw u ytkownika pochodz cz Twittera Nast pnie wypisujemy t nazw na ekranie tablicy wynikoacutew Zwroacute uwag e niemusieli my w ogoacutele zmienia kodu po stronie serwera
Tyle na temat integracji z Twitterem Je eli chcesz dowiedzie si wi cej i rozszerzy funk-cjonalno gry zajrzyj do dokumentacji API Twittera
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
164
Integracja z FacebookiemIntegracja z Facebookiem i Twitterem jest w wielu aspektach podobna Facebook jest jednakw du o wi kszym stopniu nastawiony na gry Zajmiemy si implementacj osi gni dla zalo-gowanych u ytkownikoacutew Skorzystamy z SDK Facebooka dla PHP ale s roacutewnie dost pnerozwi zania dla innych j zykoacutew
Tak jak w przypadku Twittera tu roacutewnie musimy zacz od zarejestrowania aplikacji w Fa-cebooku W tym celu trzeba si zalogowa do serwisu dla deweloperoacutew (httpsdevelopers
facebookcom) i klikn pozycj Apps1
Nast pnie nale y klikn cze Create New App i wype ni obowi zkowe pola formularza Poich zatwierdzeniu pojawi si ekran z informacjami dotycz cymi nowej aplikacji Podobnie jakby o w przypadku Twittera tu roacutewnie najwa niejsze s dwie warto ci co wida na rysunku
1 Aby moacutec tworzy aplikacje trzeba si zarejestrowa jako programista W tym celu musisz klikn przycisk
Register as a Developer mdash przyp t um
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
165
Na powy szym zrzucie strza k zosta a oznaczona sekcja umo liwiaj ca wyboacuter sposobu inte-gracji aplikacji z Facebookiem Aby uzyska pe ny dost p do interfejsu Open Graph API Fa-cebooka ktoacutery umo liwia mi dzy innymi publikowanie osi gni trzeba zaznaczy pozycjAplikacja na Facebooku
Dzi ki temu gra mo e by uruchamiana w ramce (iframe) wewn trz strony Facebooka Jednakaby to by o mo liwe konieczny jest prawid owy certyfikat dla HTTPS obowi zuj cy w dome-nie w ktoacuterej jest dost pna gra Je li jednak chcemy by gra by a adowana z naszego serweranie ma tych wymaga ale i tak trzeba wpisa adres w odpowiednim polu (aby adres zostauznany za poprawny nale y poda https nawet je li nie ma si certyfikatu)
Jest jeszcze jedno co nale y zrobi by aplikacja mog a publikowa osi gni cia mdash nale y jzarejestrowa jako gr W tym celu wystarczy klikn pozycj Informacje o aplikacji a na-st pnie w sekcji Informacje o aplikacji w polach Kategoria ustawi pozycj Gry i ustali gatunekgry co wida na poni szym rysunku
Uwierzytelnianie przez FacebookaPodstawowy mechanizm uwierzytelniania jest bardzo podobny do tego z Twittera ale istniejepewna roacute nica w podej ciu do dost pu W przypadku Twittera mo na by o zdecydowa czyaplikacja ma prawa tylko do odczytu czy roacutewnie zapisu Facebook oferuje znacznie bogatszemo liwo ci ustalania poziomoacutew dost pu przy czym decyduje si o nich w czasie logowania
Kod odpowiedzialny za uwierzytelnianie zosta przedstawiony na poni szym listingu Tu roacutewnie jak w przypadku Twittera musimy umie ci na pocz tku skryptu kod pobieraj cy obiekt bie-
cego u ytkownika
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
166
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()gt
Wyroacute niony wiersz kodu odpowiada za wskazanie e z poziomu gry b dziemy chcieli publiko-wa wpisy na osi czasu u ytkownika W miejscach (1) i (2) nale y wpisa warto ci wy wietlonena stronie konfiguracji aplikacji w Facebooku
Je li zmienna $facebookUser to null oznacza to e u ytkownik jest ju zalogowany W prze-ciwnym przypadku musimy wy wietli przycisk logowania Musimy wi c napisa kod podobnydo tego ktoacutery s u y do wy wietlenia przycisku logowania za po rednictwem Twittera
ltdiv id=startScreen class=screengt ltphp if ($facebookUser) $loginUrl = $facebook-gtgetLoginUrl(array( scope =gt $scope redirect_uri =gt $app_url )) gt lta class=button tweetLink href=ltphp print $loginUrl gtgtZaloguj przez Facebookaltagt ltphp else $logoutUrl = $facebook-gtgetLogoutUrl(array( next =gt $app_url )) gt lta class=button tweetLink href=ltphp print $logoutUrlgtgtWyloguj z Facebookaltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
145
Pierwszy ekran s u y do poinformowania o rozpocz ciu poziomu i daje graczowi czas naprzygotowanie si Drugi ekran jest troch bardziej z o ony Wy wietlane s na nim uzyskanywynik lista pi ciu najlepszych graczy oraz je li aktualny wynik gracza kwalifikuje si do listynajlepszych pole umo liwiaj ce wpisanie si na ni Przyk adowy wygl d tego ekranu zostaprzedstawiony poni ej
Zdecydowali my si na takie rozwi zanie mdash pytanie o nazw u ytkownika nie na pocz tkugry ale dopiero po uzyskaniu wystarczaj cej liczby punktoacutew mdash by odtworzy zachowanie kla-sycznych gier
Podsumowuj c serwer musi obs u y dwie dodatkowe operacje pobranie pi ciu najlepszych wynikoacutew dla danego poziomu zapisanie punktacji dla danego poziomu
Zaimplementujemy je w osobnych plikach highscorephp oraz savephp
Zapisywanie wynikoacutewTabela w bazie danych musi si sk ada z trzech kolumn
level mdash liczba ca kowita okre laj ca numer poziomu gry name mdash a cuch znakoacutew przechowuj cy nazw u ytkownika time mdash liczba ca kowita odpowiadaj ca liczbie sekund ktoacutera up yn a od rozpocz cia
poziomu do jego zako czenia
Skrypt zapisuj cy wyniki jest bardzo prosty Wystarczy e na serwer prze lemy nazw u yt-kownika liczb punktoacutew oraz poziom Otrzymane dane zapiszemy w bazie danych za pomocnast puj cej kwerendy
INSERT INTO scores (level name time) VALUES (1 Krysia 36)
Pozosta a cz skryptu jest bardzo podobna do tego z czym mieli my do czynienia w po-przednich rozdzia ach wi c nie b dziemy tu zamieszcza kodu Pe n wersj skryptu znaj-dziesz w plikach do czonych do ksi ki
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
146
Pobieranie listy najlepszych wynikoacutewAby pobra wyniki z serwera wystarczy przekaza mu numer poziomu a on zwroacuteci punktacj Zastosowali my tu jednak troch bardziej skomplikowany mechanizm Ustalamy dodatkowoczy bie cy u ytkownik zakwalifikowa si na list i mdash je li tak mdash obliczamy na ktoacuterymmiejscu Dzi ki temu b dziemy mogli roacutewnie zaimplementowa zabezpieczenia przeciw-dzia aj ce oszustwom
Musimy wi c dostarczy do serwera poziom oraz uzyskany czas a on zwroacuteci plik JSON zawie-raj cy wszystkie dane niezb dne do wygenerowania tablicy wynikoacutew Format tego pliku przed-stawia si nast puj co
top[ name Tymek time 18 name Anna time 20 time 22 name Jacek time 25 ] intop true pos 2
Jak mo na zauwa y wprowadzili my pole intop ktoacutere informuje czy bie cy u ytkownikznalaz si na li cie pi ciu najlepszych Je li ma ono warto true do czane jest kolejne pole mdashpos ktoacutere przechowuje indeks rezultatu gracza w tablicy wynikoacutew (top) Wszystkie pozosta eelementy tablicy top odpowiadaj uporz dkowanym rosn co wynikom uzyskanym przez innychgraczy Je li pole intop ma warto false tablica top przechowuje jedynie wyniki innych graczy
Pierwszym krokiem b dzie wykonanie poni szego zapytania SQL
SELECT FROM scores WHERE level=1 ORDER BY time ASC LIMIT 5
Jest ono bardzo podobne do poprzednich ale na ko cu (fragment zapisany wyroacute nionym kodem)znajduje si modyfikator wymuszaj cy posortowanie wynikoacutew wzgl dem kolumny time w po-rz dku rosn cym (ORDER BY time ASC) oraz ograniczaj cy liczb zwracanych rekordoacutew do pi ciu(LIMIT 5)
W drugiej kolejno ci trzeba si zaj wygenerowaniem pliku JSON na podstawie danychotrzymanych z kwerendy Jedynym ciekawym fragmentem jest wstawienie wyniku graczaje li uzyska wystarczaj co dobry czas Pe ny kod tego skryptu znajduje si poni ej
ltphp session_start()
include dbconnectphp
$time = $_GET[time]
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
147
$level = $_GET[level]
if (isset($time) ampamp isset($level)) Obiekt JSON $json = array(top=gtarray() intop=gtfalse)
$query = SELECT FROM scores WHERE level=$level ORDER BY time ASC LIMIT 5 $result = mysqli_query($link $query) $i=0
while ($obj = mysqli_fetch_object($result)) if ($json[intop] ampamp $time lt $obj-gttime) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
$i++ if ($i lt 5) array_push($json[top] array(time=gt$obj-gttime name=gt$obj- gtname)) $i++
if ($i lt 5 ampamp $json[intop]) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
mysqli_free_result($result) echo json_encode($json) mysqli_close($link)gt
Na listingu zosta y wyroacute nione te fragmenty ktoacutere odpowiadaj za operacje na wyniku gracza
Wy wietlanie listy najlepszych wynikoacutewPo stronie klienta wygenerujemy ekran przedstawiaj cy wynik list najlepszych graczy orazpole s u ce do wprowadzenia nazwy u ytkownika je li uda o mu si uzyska wystarczaj codobry czas Kod ten przedstawia si nast puj co
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
148
var finishedTime = Mathround((Datenow() - levelStart) 1000) $ajax( dataType json url highscorephp data level currentLevel time finishedTime async false success function(json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + ltinput id=timeScore type=hidden value=+jsontop[i] time+gtltinputgt + ltinput id=level type=hidden value= +currentLevel+gtltinputgt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )fail(function(a b c) var toto = toto )
Kod generuj cy list zosta wyroacute niony Tworzymy pole w ktoacuterym gracz mo e wpisa swojnazw oraz dwa ukryte pola przechowuj ce numer poziomu i punktacj Umieszczamy turoacutewnie odsy acz s u cy do zatwierdzenia wyniku Kod obs uguj cy ten odsy acz znajdujesi poni ej
$(levelEnd)on(click saveScore function() $get(savephp name $(name)val() time $(timeScore)val() level $(level)val() function() $(saveScore)fadeOut(500) ) return false)
Pobieramy tu warto ci z poacutel i przekazujemy je na serwer Po ich przes aniu usuwamy przyciskzatwierdzania aby da zna u ytkownikowi e proces si zako czy
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
149
Mechanizmy utrudniaj ce oszukiwanieNie istnieje idealne rozwi zanie uniemo liwiaj ce oszukiwanie Problem ten jest szczegoacutelnieistotny w grach tworzonych w JavaScripcie poniewa bardzo atwo uzyska dost p do koduroacuted owego Mo na oczywi cie przekszta ci kod do nieczytelnej postaci ale to nie powstrzyma
zdeterminowanego oszusta a jedynie spowolni jego prac Istnieje jednak kilka innych technikdzi ki ktoacuterym proacuteby oszustw staj si trudniejsze i mniej op acalne
Weryfikacja po stronie serweraNajprostszym sposobem na utrudnienie oszukiwania jest przeniesienie cz ci kodu na serwerZrobili my tak z mechanizmem walki w grze tworzonej w rozdziale 7 W przypadku gry plat-formowej musieliby my przesy a na serwer informacje o wciskaniu klawiszy steruj cych po-staci na podstawie ktoacuterych skrypt okre la by jego nowe po o enie
W wi kszo ci przypadkoacutew nie da si zastosowa takiego rozwi zania w tego typu grach alemo na stworzy skrypt ktoacutery b dzie weryfikowa punktacj gracza po stronie serwera Wystarczyw kilku miejscach planszy umie ci niewidoczne punkty kontrolne po osi gni ciu ktoacuterych naserwer jest przesy ana stosowna informacja Dzi ki temu je li u ytkownik przes a na serwerpunktacj ale nie trafi y tam wcze niej informacje z punktoacutew kontrolnych wiemy e co jestnie tak Mo na te zastosowa podobne rozwi zanie ale bazuj ce na przyk ad na liczbie skokoacutewlub pora ek gracza
Tak czy inaczej trzeba wprowadzi w grze jak kolwiek form weryfikacji wynikoacutew Nie majednego najlepszego rozwi zania Musisz jednak pami ta by zastosowany mechanizm niewykry proacuteby oszustwa tam gdzie go nie ma czyli eby uczciwy gracz nie zosta o nie pos -dzony Istotny jest roacutewnie nak ad pracy wymagany do zaimplementowania tego typu mecha-nizmoacutew tak by praca nad nimi nie zaj a przypadkiem wi cej czasu ni tworzenie samej gry
W przedstawionym poni ej przyk adzie zastosujemy proste rozwi zanie Znamy maksymalnpr dko z jak mo e si porusza gracz wiemy te ile ma do przej cia wi c atwo jest obliczyminimalny czas potrzebny na zako czenie poziomu Wystarczy poroacutewna wynik gracza z twarto ci i sprawdzi czy nie jest mniejszy
Aby to zrobi trzeba uzupe ni skrypt highscorephp
gracz mo e przej 7 pikseli w 30 ms -gt 2331$minTime = array( 1 =gt 15 3500 2331 2 =gt 15 3500 2331 3 =gt 42 9800 2331 4 =gt 23 5460 2331)$timeValid = ($minTime[intval($level)] lt intval($time))while ($obj = mysqli_fetch_object($result))
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
150
if ($json[intop] ampamp $time lt $obj-gttime ampamp $timeValid)
Je li wynik osi gni ty przez gracza zosta uznany za nieprawdziwy zostanie wy wietlony alegracz nie b dzie moacuteg wpisa swojej nazwy
Mniej czytelne zmienneInnym rozwi zaniem jest zmniejszenie czytelno ci zmiennych tak by utrudni analiz danychprzesy anych na serwer oraz ich modyfikacj (dane te s w naszym przypadku zapisane w ukry-tych polach formularza) Rozwi zanie to wydaje si dobre ale niestety nietrudno jest obej ta-kie zabezpieczenia Na poni szym rysunku zosta o przedstawione okno inspektora przegl darkiChrome
Jedn z naczelnych zasad jest unikanie przechowywania istotnych informacji w elementachznajduj cych si w strukturze DOM poniewa maj do nich dost p wszyscy u ytkownicy nawettacy ktoacuterzy z programowaniem maj niewiele do czynienia W zwi zku z tym usuniemy jez wywo ania skryptu savephp i zapiszemy je w sesji W pliku highscorephp musimy doda na-st puj cy kod
if ($json[intop] ampamp $time lt $obj-gttime ampamp $timeValid) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
151
$_SESSION[level] = $level $_SESSION[time] = $time
$i++
W skrypcie savephp musimy z sesji odczyta poziom i czas
$name = $_GET[name]$time = $_SESSION[time]$level = $_SESSION[level]
Te proste zmiany wystarcz by utrudni oszukiwanie w naszej grze
Zaciemnianie koduZaciemnianie kodu (ang obfuscating) jest bardzo prost technik ale przy tym ca kiem sku-teczn Przekszta cony w ten sposoacuteb kod trudno analizowa poniewa jest nieczytelny dlaludzi Poni ej znajduje si fragment kodu odpowiedzialnego za tablic wynikoacutew
if (status == finished) gameState = menu $(level_nb_2)html(currentLevel) $(level_nb_1)html(currentLevel + 1)
var finishedTime = Mathround((Datenow() - levelStart) 1000) $ajax( dataType json url highscorephp data level currentLevel time finishedTime async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + ltinput id=timeScore type=hidden value=+jsontop[i] time+gtltinputgt + ltinput id=level type=hidden value= +currentLevel+gtltinputgt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
152
$(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) gfx(group 0)
tilemap = loadNextLevel(group) gfx(playerdiv 0) gfy(playerdiv 0) gfsetAnimation(playerdiv playerAnimjump) ) status = stand
Ten sam kod poddany operacji zaciemniania (za pomoc narz dzia UglifyJS) wygl da nast puj co
if(finished==status)gameState=menu$(level_nb_2)html(currentLevel)$(level_nb_1)html(currentLevel+1)varfinishedTime=Mathround((Datenow()-levelStart)1e3)$ajax(dataTypejsonurlhighscorephpdatalevelcurrentLeveltimefinishedTimeasync1successfunction(a)for(var b=c=0atoplengthgtcc++)b+=aintopampampapos===cltinput id=name placeholder=_____ size=5gtltinput id=timeScore type=hidden value=+atop[c]time+gtltinputgt+ltinput id=level type=hidden value=+currentLevel+gtltinputgt+ +minSec(atop[c]time)+ lta id=saveScorehref=gtsubmitltagt ltbrgt+atop[c]name+ +minSec(atop[c]time)+ltbrgt$(top_list)html(b))fail(function())$(time)html(minSec(finishedTime))$(levelEnd)fadeIn(2e3function()$(backgroundFront)css(background-position0px0px)$(backgroundBack)css(background-position0px 0px)gfx(group0)tilemap=loadNextLevel(group)gfx(playerdiv0)gfy(playerdiv0)gfsetAnimation(playerdivplayerAnimjump))status=stand
Z ca pewno ci analiza takiego kodu jest du o trudniejsza a zyskujemy przy okazji co jeszczemdashprzetworzony w ten sposoacuteb kod jest kroacutetszy ni orygina
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
153
Mniej czytelny protokoacute sieciowyChocia poprawili my kod dzia aj cy po stronie klienta nadal istnieje mo liwo uzyskania do-st pu do warto ci przesy anych zmiennych poprzez analiz ruchu sieciowego Na poni szymrysunku zosta o przedstawione okno aplikacji nas uchuj cej ktoacutera wy wietla dane przesy ane pozako czeniu poziomu
Jest to problem poniewa w celu oszustwa u ytkownik nie musi modyfikowa kodu mdash wystarczysfa szowa pakiet przesy any na serwer Istniej trzy proste sposoby na utrudnienie analizowaniatransmitowanych danych
1 Nadawanie zmiennym przypadkowych nazw tak by na ich podstawie nie da o siokre li ich przeznaczenia
2 Kodowanie zawarto ci zmiennych U ytkownik zna przewa nie osi gni ty przez siebiewynik wi c na jego podstawie mo e znale w transmitowanych danych odpowiednizmienn i j zmodyfikowa Dzi ki zakodowaniu tej warto ci zadanie to stanie sitrudniejsze
3 Dodanie wielu przypadkowych zmiennych Dzi ki temu trudniej si domy li ktoacuteraz nich przechowuje istotne dane
Podobnie jak w przypadku wcze niej opisywanych metod te roacutewnie jedynie utrudniaj proacutebyoszustwa ale nie daj stuprocentowego zabezpieczenia Roacutewnoczesne zastosowanie kilkurozwi za mo e zniech ci nawet najbardziej zdeterminowanych oszustoacutew Poni ej znaj-dziesz propozycj implementacji ka dego z nich
Kodowanie warto ciZaczniemy od kodowania warto ci Mo na to zrobi na wiele sposoboacutew roacute ni cych si uzy-skiwanym stopniem bezpiecze stwa W naszym przypadku wystarczy utrudni odszukaniewyniku na li cie przesy anych zmiennych w zwi zku z czym nie musimy wprowadza adnej
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
154
skomplikowanej metody kodowania W kodzie klienta u yjemy operacji przesuni cia w lewo(ltlt) a na serwerze mdash przesuni cia w prawo (gtgt)
Oto kod skryptu dzia aj cego na kliencie
$ajax( dataType json url highscorephp data level currentLevel time finishedTime ltlt 1 async false success function (json) )
Odpowiedni fragment skryptu na serwerze
$time = intval($_GET[time]) gtgt 1
Aby jeszcze bardziej zmyli u ytkownika warto t prze lemy w wielu innych zmiennychktoacutere nie b d w ogoacutele brane pod uwag po stronie serwera
Przypadkowe nazwy zmiennychNie trzeba tu wiele wyja nia mdash wystarczy zmieni nazw zmiennej Je li chcesz jeszczebardziej utrudni zadanie oszustom mo esz zmienia t nazw przy ka dym daniu Poni ejpodstawowa wersja kodu
$ajax( dataType json url highscorephp data Nmyzsf currentLevel WfBCLQ finishedTime ltlt 1 async false success function (json) )
Kod po stronie serwera przyjmie nast puj c posta
$time = intval($_GET[WfBCLQ]) gtgt 1$level = $_GET[Nmyzsf]
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
155
Dodatkowe przypadkowe zmienneNazwy zmiennych nie oddaj ju znaczenia przechowywanych przez nie warto ci ale to niewszystko poniewa stosunkowo atwo sprawdzi ktoacutera z nich odpowiada za wynik Musimy wi cdoda wi cej zmiennych ktoacuterych zadaniem jest wprowadzenie oszusta w b d Przyk adowerozwi zanie zosta o przedstawione na poni szym listingu
$ajax( dataType json url highscorephp data sXZZUj Mathround(200Mathrandom()) enHf8F Mathround(200Mathrandom()) eZnqBG currentLevel avFanB Mathround(200Mathrandom()) zkpCfb currentLevel PCXFTR Mathround(200Mathrandom()) Nmyzsf currentLevel FYGswh Mathround(200Mathrandom()) C3kaTz finishedTime ltlt 1 gU7buf finishedTime ykN65g Mathround(200Mathrandom()) Q5jUZm Mathround(200Mathrandom()) bb5d7V Mathround(200Mathrandom()) WTsrdm finishedTime ltlt 1 bCW5Dg currentLevel AFM8MN Mathround(200Mathrandom()) FUHt6K Mathround(200Mathrandom()) WfBCLQ finishedTime ltlt 1 d8mzVn Mathround(200Mathrandom()) bHxNpb Mathround(200Mathrandom()) MWcmCz finishedTime ZAat42 Mathround(200Mathrandom()) async false success function (json) )
W kodzie serwera nie trzeba nic zmienia poniewa dodatkowe zmienne s po prostu igno-rowane Mo na oczywi cie jeszcze bardziej skomplikowa spraw i wprowadzi dodatkowezale no ci mi dzy zmiennymi Nale y jednak ca y czas pami ta ktoacutere zmienne przechowujistotne dane by roacutewnie sobie nie utrudni zadania
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
156
Integracja z TwitteremTwitter daje mo liwo dzielenia si z innymi kroacutetkimi informacjami W przypadku gier mo emyz niego skorzysta na dwa sposoby
mo emy umo liwi graczowi zalogowanie si do gry za pomoc nazwy u ytkownikai has a z Twittera
mo emy da mo liwo publikowania tweetoacutew z wynikami lub informacjamio post pach w grze
Zajmiemy si teraz zaimplementowaniem tych dwoacutech funkcji
Podstawy TwitteraIstnieje bardzo prosty sposoacuteb korzystania z Twittera ktoacutery nie wymaga znajomo ci adnegoAPI Je li u ytkownik jest zalogowany za po rednictwem odpowiednio przygotowanego adresuURL mo na opublikowa tweet URL powinien by zbudowany w nast puj cy sposoacuteb
httptwittercomhomestatus=Przyk adowy tweet
Wyroacute niony fragment adresu to tekst tweeta Na ekranie tablicy wynikoacutew obok przyciskuZatwierd umie cimy odsy acz Tweetnij
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmit ltagt + lta id=tweetScore target=_blank href=http twittercomhomestatus=+escape(W a nie uda o mi si sko czy +currentLevel+ poziom gry Yet Another Platformer w +minSec(jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
157
Najistotniejszy jest wyroacute niony fragment kodu bo to dzi ki niemu dzieje si to co powinno Za-stosowali my tu javascriptow funkcj escape by dostarczany test by poprawnie sformatowany
Jak wida bardzo atwo zaimplementowa to rozwi zanie ale trzeba wiedzie o kilku ograni-czeniach
Je li u ytkownik nie jest zalogowany pojawi si ekran logowania Twittera Na ekranie tablicy wynikoacutew nie mo na u y nazwy u ytkownika z Twittera
W zwi zku z tym nawet je li u ytkownik b dzie chcia tweetn swoacutej wyniki tak b dzie musia poda swoj nazw w grze
Publikowanie ka dego tweeta powoduje otwarcie nowego okna przegl darkiw ktoacuterym u ytkownik musi potwierdzi t operacj
Je li chcieliby my umo liwi u ytkownikowi zalogowanie si i automatyczne publikowanietweetoacutew bez konieczno ci ka dorazowego otwierania nowego okna musimy skorzysta z APITwittera
Pe ny dost p do API TwitteraNajpe niejsza integracja gry z Twitterem wymaga zapytania u ytkownika o zgod na po czeniejego konta z gr Mo na w tym celu skorzysta z mechanizmu OAuth ktoacutery jest otwartym stan-dardem uwierzytelniania stosowanym przez wiele firm takich jak Twitter Google czy Facebook
Aby da u ytkownikom mo liwo zalogowania si za po rednictwem Twittera musimy lekkozmodyfikowa ekran pocz tkowy
Je li gracz kliknie cze Rozpocznij gr zacznie od razu rozgrywk Je li z kolei kliknie Zalogujprzez Twittera b dzie si musia zalogowa za po rednictwem Twittera po czym nast pi powroacutetdo gry
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
158
Rejestrowanie gry w TwitterzeZanim przejdziemy dalej musimy zarejestrowa gr w Twitterze Aby to zrobi musisz sizalogowa na stron Twittera dla deweloperoacutew (httpsdevtwittercom) a nast pnie kliknpozycj My applications (moje aplikacje) w menu profilu
Nale y utworzy now aplikacj ( cze Create a new application) wype ni wszystkie wymaganepola oraz wyrazi zgod na warunki licencyjne (Rules of the Road) Po zatwierdzeniu wprowa-dzonych danych zostanie wy wietlona strona zawieraj ca dane utworzonej aplikacji
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
159
Trzeba zwroacuteci uwag na dwie informacje ktoacutere na rysunku zosta y otoczone ramk poniewab d potrzebne poacute niej Nale y wykona jeszcze jedn drobn modyfikacj konfiguracjiPrzejd do zak adki Settings (ustawienia) i przyjrzyj si sekcji Application Type (typ aplikacji)Domy lnie jest zaznaczone pole Read only (tylko do odczytu) Je li chcesz w imieniu graczapublikowa tweety musisz wybra opcj Read and Write
W ten sposoacuteb przygotowali my konto na Twitterze do integracji z gr
Pomocnicza bibliotekaKod realizuj cy komunikacj z API Twittera mo na napisa samemu w PHP ale to dosy mud-na praca Na szcz cie jest dost pnych wiele bibliotek ktoacutere mog to upro ci Jedn z nichprzeznaczon dla PHP jest twitteroauth (httpsgithubcomabrahamtwitteroauth) Istniejoczywi cie biblioteki dla innych j zykoacutew koniecznie zajrzyj do dokumentacji Twittera abydowiedzie si wi cej na ten temat
Du zalet biblioteki twitteroauth jest to e mo na j zainstalowa na prawie ka dym serwerzeobs uguj cym PHP Wystarczy skopiowa bibliotek do tego samego katalogu w ktoacuterym znajdujsi skrypty gry W naszym przypadku b dzie to podkatalog twitter
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
160
Musimy zacz od skonfigurowania biblioteki Przydatny b dzie przyk adowy skrypt konfigura-cyjny config-samplephp dost pny w podanym repozytorium Znajduje si w nim kod definiuj cytrzy sta e
define(CONSUMER_KEY (1))define(CONSUMER_SECRET (2))define(OAUTH_CALLBACK (3))
W miejscach (1) i (2) trzeba wpisa warto ci wy wietlone na stronie informacji o utworzonejaplikacji Twittera W miejscu (3) nale y poda adres URL skryptu zwrotnego callbackphp
Ostatnim krokiem jest zmodyfikowanie skryptu callbackphp tak by zawiera prawid oweprzekierowanie do g oacutewnego pliku naszej gry
header(Location indexphp)
UwierzytelnianieNa poni szym diagramie zosta przedstawiony sposoacuteb przeprowadzania uwierzytelniania i auto-ryzacji u ytkownikoacutew w grze za po rednictwem Twittera
W praktyce nie jest to tak skomplikowane na jakie wygl da przede wszystkim dlatego ewi kszo jest ju zaimplementowana w bibliotece twitteroauth Zajmiemy si utworzeniemstrony logowania wy wietlanej po klikni ciu przycisku Zaloguj przez Twittera U yjemy zwy-k ego odsy acza kieruj cego do pliku redirectphp Kiedy u ytkownik kliknie to cze po razpierwszy zostanie przekierowany na stron Twittera na ktoacuterej b dzie moacuteg autoryzowa dost pdo konta
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
161
Po wyra eniu zgody nast pi przekierowanie na adres ktoacutery zosta ustawiony w pliku callbackphpJe li u ytkownik ju raz wyrazi zgod na autoryzacj b dzie moacuteg od razu si zalogowa
W skryptach JavaScript bardzo przyda nam si teraz informacja o tym czy gracz jest po czonyczy nie Aby j uzyska musimy przekszta ci g oacutewny dokument HTML gry w plik PHP i umie-ci na jego pocz tku nast puj cy kod
ltphpsession_start()
require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
Pobranie tokenoacutew u 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-gtget(accountverify_credentials)gt
W tym kodzie rozpoczynamy sesj do czamy dwa pliki biblioteki twitteroauth oraz odczytuje-my token sesji Je li token jest ustawiony oznacza to e u ytkownik jest zalogowany do Twittera
Nast pnie serwer czy si z Twitterem aby pobra obiekt u ytkownika Tak to wygl da postronie serwera ale kod JavaScript wci nie ma informacji o zalogowaniu W zwi zku z tymmusimy utworzy skrypt przesy aj cy dane do kodu klienckiego
ltscript type=textjavascriptgtltphp if($_SESSION[status] == verified) gt var twitter = true var twitterName = ltphp print $user-gtscreen_name gtltphp else gt var twitter = falseltphp gtltscriptgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
162
Je li gracz jest zalogowany do Twittera globalna zmienna twitter ma warto true a zmiennatwitterName zawiera nazw u ytkownika
Ostatnim o co nale y zadba jest poinformowanie u ytkownika o pomy lnym zalogowaniu zapomoc Twittera i umo liwienie wylogowania si W tym celu musimy wprowadzi drobnzmian w kodzie odpowiedzialnym za ekran pocz tkowy wy wietlany po zalogowaniu
ltdiv id=startScreen class=screengt ltphp if($_SESSION[status] = verified) gt lta class=button tweetLink href=twitterredirectphpgtZaloguj przez Twitteraltagt ltphp else gt lta class=button tweetLink href=twitterclearsessionsphpgtWyloguj z Twitteraltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Po wprowadzeniu powy szych modyfikacji mo na uzna e uwierzytelnianie przez Twitterajest zaimplementowane
Publikowanie najlepszych wynikoacutew na TwitterzeTeraz kiedy gracz jest ju zalogowany do Twittera mo na publikowa jego wyniki w znaczniewygodniejszy sposoacuteb ni poprzednio Zaczniemy od utworzenia po stronie serwera skryptutwitterPostphp w ktoacuterym u yjemy interfejsu statusesupdate API Twittera
Spoacutejrzmy na kompletny skrypt
ltphpsession_start()require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
$time = $_SESSION[time]$level = $_SESSION[level]if (isset($time) ampamp isset($level)) Pobranie tokenoacutew u ytkownika z sesji $access_token = $_SESSION[access_token] $connection = new TwitterOAuth(CONSUMER_KEY CONSUMER_SECRET $access_token[oauth_token] $access_token[oauth_token_secret])
$parameters = array(status =gt W a nie uda o mi si sko czy $level poziom gry Yet Another Platformer w $time sekund) $status = $connection-gtpost(statusesupdate $parameters)gt
Najprawdopodobniej rozpoznajesz wi kszo kodu z powy szego listingu ktoacutery dodali my napocz tku skryptu ekranu pocz tkowego (tylko wyroacute niony kod jest nowy) W ostatnich dwoacutechwierszach tworzymy a nast pnie przesy amy do Twittera tekst ktoacutery chcemy opublikowa co
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
163
mdash jak wida mdash jest ca kiem proste Musimy jednak zaj si jeszcze jednym Poniewa graczjest zalogowany znamy jego nazw wi c mo emy j wykorzysta na ekranie tablicy wynikoacutew
W kodzie klienta utworzymy troch inn od dotychczasowej wersj tablicy wynikoacutew
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) if (twitter) top += ltinput id=name type=hidden value=+twitterName+gt + twitterName + + minSec(jsontop[i]time) + lta id=saveScore href=gtZatwierd ltagt + lta id=tweetScore href=gtTweetnijltagt ltbrgt else top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt + lta target=_blank href=httptwittercomhome status=+escape(w a nie uda o mi si sko czy +current Level+ poziom gry Yet Another Platformer w +minSec (jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Tworzymy tu niewidoczne pole wej ciowe przechowuj ce nazw u ytkownika pochodz cz Twittera Nast pnie wypisujemy t nazw na ekranie tablicy wynikoacutew Zwroacute uwag e niemusieli my w ogoacutele zmienia kodu po stronie serwera
Tyle na temat integracji z Twitterem Je eli chcesz dowiedzie si wi cej i rozszerzy funk-cjonalno gry zajrzyj do dokumentacji API Twittera
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
164
Integracja z FacebookiemIntegracja z Facebookiem i Twitterem jest w wielu aspektach podobna Facebook jest jednakw du o wi kszym stopniu nastawiony na gry Zajmiemy si implementacj osi gni dla zalo-gowanych u ytkownikoacutew Skorzystamy z SDK Facebooka dla PHP ale s roacutewnie dost pnerozwi zania dla innych j zykoacutew
Tak jak w przypadku Twittera tu roacutewnie musimy zacz od zarejestrowania aplikacji w Fa-cebooku W tym celu trzeba si zalogowa do serwisu dla deweloperoacutew (httpsdevelopers
facebookcom) i klikn pozycj Apps1
Nast pnie nale y klikn cze Create New App i wype ni obowi zkowe pola formularza Poich zatwierdzeniu pojawi si ekran z informacjami dotycz cymi nowej aplikacji Podobnie jakby o w przypadku Twittera tu roacutewnie najwa niejsze s dwie warto ci co wida na rysunku
1 Aby moacutec tworzy aplikacje trzeba si zarejestrowa jako programista W tym celu musisz klikn przycisk
Register as a Developer mdash przyp t um
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
165
Na powy szym zrzucie strza k zosta a oznaczona sekcja umo liwiaj ca wyboacuter sposobu inte-gracji aplikacji z Facebookiem Aby uzyska pe ny dost p do interfejsu Open Graph API Fa-cebooka ktoacutery umo liwia mi dzy innymi publikowanie osi gni trzeba zaznaczy pozycjAplikacja na Facebooku
Dzi ki temu gra mo e by uruchamiana w ramce (iframe) wewn trz strony Facebooka Jednakaby to by o mo liwe konieczny jest prawid owy certyfikat dla HTTPS obowi zuj cy w dome-nie w ktoacuterej jest dost pna gra Je li jednak chcemy by gra by a adowana z naszego serweranie ma tych wymaga ale i tak trzeba wpisa adres w odpowiednim polu (aby adres zostauznany za poprawny nale y poda https nawet je li nie ma si certyfikatu)
Jest jeszcze jedno co nale y zrobi by aplikacja mog a publikowa osi gni cia mdash nale y jzarejestrowa jako gr W tym celu wystarczy klikn pozycj Informacje o aplikacji a na-st pnie w sekcji Informacje o aplikacji w polach Kategoria ustawi pozycj Gry i ustali gatunekgry co wida na poni szym rysunku
Uwierzytelnianie przez FacebookaPodstawowy mechanizm uwierzytelniania jest bardzo podobny do tego z Twittera ale istniejepewna roacute nica w podej ciu do dost pu W przypadku Twittera mo na by o zdecydowa czyaplikacja ma prawa tylko do odczytu czy roacutewnie zapisu Facebook oferuje znacznie bogatszemo liwo ci ustalania poziomoacutew dost pu przy czym decyduje si o nich w czasie logowania
Kod odpowiedzialny za uwierzytelnianie zosta przedstawiony na poni szym listingu Tu roacutewnie jak w przypadku Twittera musimy umie ci na pocz tku skryptu kod pobieraj cy obiekt bie-
cego u ytkownika
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
166
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()gt
Wyroacute niony wiersz kodu odpowiada za wskazanie e z poziomu gry b dziemy chcieli publiko-wa wpisy na osi czasu u ytkownika W miejscach (1) i (2) nale y wpisa warto ci wy wietlonena stronie konfiguracji aplikacji w Facebooku
Je li zmienna $facebookUser to null oznacza to e u ytkownik jest ju zalogowany W prze-ciwnym przypadku musimy wy wietli przycisk logowania Musimy wi c napisa kod podobnydo tego ktoacutery s u y do wy wietlenia przycisku logowania za po rednictwem Twittera
ltdiv id=startScreen class=screengt ltphp if ($facebookUser) $loginUrl = $facebook-gtgetLoginUrl(array( scope =gt $scope redirect_uri =gt $app_url )) gt lta class=button tweetLink href=ltphp print $loginUrl gtgtZaloguj przez Facebookaltagt ltphp else $logoutUrl = $facebook-gtgetLogoutUrl(array( next =gt $app_url )) gt lta class=button tweetLink href=ltphp print $logoutUrlgtgtWyloguj z Facebookaltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
146
Pobieranie listy najlepszych wynikoacutewAby pobra wyniki z serwera wystarczy przekaza mu numer poziomu a on zwroacuteci punktacj Zastosowali my tu jednak troch bardziej skomplikowany mechanizm Ustalamy dodatkowoczy bie cy u ytkownik zakwalifikowa si na list i mdash je li tak mdash obliczamy na ktoacuterymmiejscu Dzi ki temu b dziemy mogli roacutewnie zaimplementowa zabezpieczenia przeciw-dzia aj ce oszustwom
Musimy wi c dostarczy do serwera poziom oraz uzyskany czas a on zwroacuteci plik JSON zawie-raj cy wszystkie dane niezb dne do wygenerowania tablicy wynikoacutew Format tego pliku przed-stawia si nast puj co
top[ name Tymek time 18 name Anna time 20 time 22 name Jacek time 25 ] intop true pos 2
Jak mo na zauwa y wprowadzili my pole intop ktoacutere informuje czy bie cy u ytkownikznalaz si na li cie pi ciu najlepszych Je li ma ono warto true do czane jest kolejne pole mdashpos ktoacutere przechowuje indeks rezultatu gracza w tablicy wynikoacutew (top) Wszystkie pozosta eelementy tablicy top odpowiadaj uporz dkowanym rosn co wynikom uzyskanym przez innychgraczy Je li pole intop ma warto false tablica top przechowuje jedynie wyniki innych graczy
Pierwszym krokiem b dzie wykonanie poni szego zapytania SQL
SELECT FROM scores WHERE level=1 ORDER BY time ASC LIMIT 5
Jest ono bardzo podobne do poprzednich ale na ko cu (fragment zapisany wyroacute nionym kodem)znajduje si modyfikator wymuszaj cy posortowanie wynikoacutew wzgl dem kolumny time w po-rz dku rosn cym (ORDER BY time ASC) oraz ograniczaj cy liczb zwracanych rekordoacutew do pi ciu(LIMIT 5)
W drugiej kolejno ci trzeba si zaj wygenerowaniem pliku JSON na podstawie danychotrzymanych z kwerendy Jedynym ciekawym fragmentem jest wstawienie wyniku graczaje li uzyska wystarczaj co dobry czas Pe ny kod tego skryptu znajduje si poni ej
ltphp session_start()
include dbconnectphp
$time = $_GET[time]
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
147
$level = $_GET[level]
if (isset($time) ampamp isset($level)) Obiekt JSON $json = array(top=gtarray() intop=gtfalse)
$query = SELECT FROM scores WHERE level=$level ORDER BY time ASC LIMIT 5 $result = mysqli_query($link $query) $i=0
while ($obj = mysqli_fetch_object($result)) if ($json[intop] ampamp $time lt $obj-gttime) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
$i++ if ($i lt 5) array_push($json[top] array(time=gt$obj-gttime name=gt$obj- gtname)) $i++
if ($i lt 5 ampamp $json[intop]) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
mysqli_free_result($result) echo json_encode($json) mysqli_close($link)gt
Na listingu zosta y wyroacute nione te fragmenty ktoacutere odpowiadaj za operacje na wyniku gracza
Wy wietlanie listy najlepszych wynikoacutewPo stronie klienta wygenerujemy ekran przedstawiaj cy wynik list najlepszych graczy orazpole s u ce do wprowadzenia nazwy u ytkownika je li uda o mu si uzyska wystarczaj codobry czas Kod ten przedstawia si nast puj co
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
148
var finishedTime = Mathround((Datenow() - levelStart) 1000) $ajax( dataType json url highscorephp data level currentLevel time finishedTime async false success function(json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + ltinput id=timeScore type=hidden value=+jsontop[i] time+gtltinputgt + ltinput id=level type=hidden value= +currentLevel+gtltinputgt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )fail(function(a b c) var toto = toto )
Kod generuj cy list zosta wyroacute niony Tworzymy pole w ktoacuterym gracz mo e wpisa swojnazw oraz dwa ukryte pola przechowuj ce numer poziomu i punktacj Umieszczamy turoacutewnie odsy acz s u cy do zatwierdzenia wyniku Kod obs uguj cy ten odsy acz znajdujesi poni ej
$(levelEnd)on(click saveScore function() $get(savephp name $(name)val() time $(timeScore)val() level $(level)val() function() $(saveScore)fadeOut(500) ) return false)
Pobieramy tu warto ci z poacutel i przekazujemy je na serwer Po ich przes aniu usuwamy przyciskzatwierdzania aby da zna u ytkownikowi e proces si zako czy
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
149
Mechanizmy utrudniaj ce oszukiwanieNie istnieje idealne rozwi zanie uniemo liwiaj ce oszukiwanie Problem ten jest szczegoacutelnieistotny w grach tworzonych w JavaScripcie poniewa bardzo atwo uzyska dost p do koduroacuted owego Mo na oczywi cie przekszta ci kod do nieczytelnej postaci ale to nie powstrzyma
zdeterminowanego oszusta a jedynie spowolni jego prac Istnieje jednak kilka innych technikdzi ki ktoacuterym proacuteby oszustw staj si trudniejsze i mniej op acalne
Weryfikacja po stronie serweraNajprostszym sposobem na utrudnienie oszukiwania jest przeniesienie cz ci kodu na serwerZrobili my tak z mechanizmem walki w grze tworzonej w rozdziale 7 W przypadku gry plat-formowej musieliby my przesy a na serwer informacje o wciskaniu klawiszy steruj cych po-staci na podstawie ktoacuterych skrypt okre la by jego nowe po o enie
W wi kszo ci przypadkoacutew nie da si zastosowa takiego rozwi zania w tego typu grach alemo na stworzy skrypt ktoacutery b dzie weryfikowa punktacj gracza po stronie serwera Wystarczyw kilku miejscach planszy umie ci niewidoczne punkty kontrolne po osi gni ciu ktoacuterych naserwer jest przesy ana stosowna informacja Dzi ki temu je li u ytkownik przes a na serwerpunktacj ale nie trafi y tam wcze niej informacje z punktoacutew kontrolnych wiemy e co jestnie tak Mo na te zastosowa podobne rozwi zanie ale bazuj ce na przyk ad na liczbie skokoacutewlub pora ek gracza
Tak czy inaczej trzeba wprowadzi w grze jak kolwiek form weryfikacji wynikoacutew Nie majednego najlepszego rozwi zania Musisz jednak pami ta by zastosowany mechanizm niewykry proacuteby oszustwa tam gdzie go nie ma czyli eby uczciwy gracz nie zosta o nie pos -dzony Istotny jest roacutewnie nak ad pracy wymagany do zaimplementowania tego typu mecha-nizmoacutew tak by praca nad nimi nie zaj a przypadkiem wi cej czasu ni tworzenie samej gry
W przedstawionym poni ej przyk adzie zastosujemy proste rozwi zanie Znamy maksymalnpr dko z jak mo e si porusza gracz wiemy te ile ma do przej cia wi c atwo jest obliczyminimalny czas potrzebny na zako czenie poziomu Wystarczy poroacutewna wynik gracza z twarto ci i sprawdzi czy nie jest mniejszy
Aby to zrobi trzeba uzupe ni skrypt highscorephp
gracz mo e przej 7 pikseli w 30 ms -gt 2331$minTime = array( 1 =gt 15 3500 2331 2 =gt 15 3500 2331 3 =gt 42 9800 2331 4 =gt 23 5460 2331)$timeValid = ($minTime[intval($level)] lt intval($time))while ($obj = mysqli_fetch_object($result))
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
150
if ($json[intop] ampamp $time lt $obj-gttime ampamp $timeValid)
Je li wynik osi gni ty przez gracza zosta uznany za nieprawdziwy zostanie wy wietlony alegracz nie b dzie moacuteg wpisa swojej nazwy
Mniej czytelne zmienneInnym rozwi zaniem jest zmniejszenie czytelno ci zmiennych tak by utrudni analiz danychprzesy anych na serwer oraz ich modyfikacj (dane te s w naszym przypadku zapisane w ukry-tych polach formularza) Rozwi zanie to wydaje si dobre ale niestety nietrudno jest obej ta-kie zabezpieczenia Na poni szym rysunku zosta o przedstawione okno inspektora przegl darkiChrome
Jedn z naczelnych zasad jest unikanie przechowywania istotnych informacji w elementachznajduj cych si w strukturze DOM poniewa maj do nich dost p wszyscy u ytkownicy nawettacy ktoacuterzy z programowaniem maj niewiele do czynienia W zwi zku z tym usuniemy jez wywo ania skryptu savephp i zapiszemy je w sesji W pliku highscorephp musimy doda na-st puj cy kod
if ($json[intop] ampamp $time lt $obj-gttime ampamp $timeValid) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
151
$_SESSION[level] = $level $_SESSION[time] = $time
$i++
W skrypcie savephp musimy z sesji odczyta poziom i czas
$name = $_GET[name]$time = $_SESSION[time]$level = $_SESSION[level]
Te proste zmiany wystarcz by utrudni oszukiwanie w naszej grze
Zaciemnianie koduZaciemnianie kodu (ang obfuscating) jest bardzo prost technik ale przy tym ca kiem sku-teczn Przekszta cony w ten sposoacuteb kod trudno analizowa poniewa jest nieczytelny dlaludzi Poni ej znajduje si fragment kodu odpowiedzialnego za tablic wynikoacutew
if (status == finished) gameState = menu $(level_nb_2)html(currentLevel) $(level_nb_1)html(currentLevel + 1)
var finishedTime = Mathround((Datenow() - levelStart) 1000) $ajax( dataType json url highscorephp data level currentLevel time finishedTime async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + ltinput id=timeScore type=hidden value=+jsontop[i] time+gtltinputgt + ltinput id=level type=hidden value= +currentLevel+gtltinputgt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
152
$(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) gfx(group 0)
tilemap = loadNextLevel(group) gfx(playerdiv 0) gfy(playerdiv 0) gfsetAnimation(playerdiv playerAnimjump) ) status = stand
Ten sam kod poddany operacji zaciemniania (za pomoc narz dzia UglifyJS) wygl da nast puj co
if(finished==status)gameState=menu$(level_nb_2)html(currentLevel)$(level_nb_1)html(currentLevel+1)varfinishedTime=Mathround((Datenow()-levelStart)1e3)$ajax(dataTypejsonurlhighscorephpdatalevelcurrentLeveltimefinishedTimeasync1successfunction(a)for(var b=c=0atoplengthgtcc++)b+=aintopampampapos===cltinput id=name placeholder=_____ size=5gtltinput id=timeScore type=hidden value=+atop[c]time+gtltinputgt+ltinput id=level type=hidden value=+currentLevel+gtltinputgt+ +minSec(atop[c]time)+ lta id=saveScorehref=gtsubmitltagt ltbrgt+atop[c]name+ +minSec(atop[c]time)+ltbrgt$(top_list)html(b))fail(function())$(time)html(minSec(finishedTime))$(levelEnd)fadeIn(2e3function()$(backgroundFront)css(background-position0px0px)$(backgroundBack)css(background-position0px 0px)gfx(group0)tilemap=loadNextLevel(group)gfx(playerdiv0)gfy(playerdiv0)gfsetAnimation(playerdivplayerAnimjump))status=stand
Z ca pewno ci analiza takiego kodu jest du o trudniejsza a zyskujemy przy okazji co jeszczemdashprzetworzony w ten sposoacuteb kod jest kroacutetszy ni orygina
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
153
Mniej czytelny protokoacute sieciowyChocia poprawili my kod dzia aj cy po stronie klienta nadal istnieje mo liwo uzyskania do-st pu do warto ci przesy anych zmiennych poprzez analiz ruchu sieciowego Na poni szymrysunku zosta o przedstawione okno aplikacji nas uchuj cej ktoacutera wy wietla dane przesy ane pozako czeniu poziomu
Jest to problem poniewa w celu oszustwa u ytkownik nie musi modyfikowa kodu mdash wystarczysfa szowa pakiet przesy any na serwer Istniej trzy proste sposoby na utrudnienie analizowaniatransmitowanych danych
1 Nadawanie zmiennym przypadkowych nazw tak by na ich podstawie nie da o siokre li ich przeznaczenia
2 Kodowanie zawarto ci zmiennych U ytkownik zna przewa nie osi gni ty przez siebiewynik wi c na jego podstawie mo e znale w transmitowanych danych odpowiednizmienn i j zmodyfikowa Dzi ki zakodowaniu tej warto ci zadanie to stanie sitrudniejsze
3 Dodanie wielu przypadkowych zmiennych Dzi ki temu trudniej si domy li ktoacuteraz nich przechowuje istotne dane
Podobnie jak w przypadku wcze niej opisywanych metod te roacutewnie jedynie utrudniaj proacutebyoszustwa ale nie daj stuprocentowego zabezpieczenia Roacutewnoczesne zastosowanie kilkurozwi za mo e zniech ci nawet najbardziej zdeterminowanych oszustoacutew Poni ej znaj-dziesz propozycj implementacji ka dego z nich
Kodowanie warto ciZaczniemy od kodowania warto ci Mo na to zrobi na wiele sposoboacutew roacute ni cych si uzy-skiwanym stopniem bezpiecze stwa W naszym przypadku wystarczy utrudni odszukaniewyniku na li cie przesy anych zmiennych w zwi zku z czym nie musimy wprowadza adnej
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
154
skomplikowanej metody kodowania W kodzie klienta u yjemy operacji przesuni cia w lewo(ltlt) a na serwerze mdash przesuni cia w prawo (gtgt)
Oto kod skryptu dzia aj cego na kliencie
$ajax( dataType json url highscorephp data level currentLevel time finishedTime ltlt 1 async false success function (json) )
Odpowiedni fragment skryptu na serwerze
$time = intval($_GET[time]) gtgt 1
Aby jeszcze bardziej zmyli u ytkownika warto t prze lemy w wielu innych zmiennychktoacutere nie b d w ogoacutele brane pod uwag po stronie serwera
Przypadkowe nazwy zmiennychNie trzeba tu wiele wyja nia mdash wystarczy zmieni nazw zmiennej Je li chcesz jeszczebardziej utrudni zadanie oszustom mo esz zmienia t nazw przy ka dym daniu Poni ejpodstawowa wersja kodu
$ajax( dataType json url highscorephp data Nmyzsf currentLevel WfBCLQ finishedTime ltlt 1 async false success function (json) )
Kod po stronie serwera przyjmie nast puj c posta
$time = intval($_GET[WfBCLQ]) gtgt 1$level = $_GET[Nmyzsf]
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
155
Dodatkowe przypadkowe zmienneNazwy zmiennych nie oddaj ju znaczenia przechowywanych przez nie warto ci ale to niewszystko poniewa stosunkowo atwo sprawdzi ktoacutera z nich odpowiada za wynik Musimy wi cdoda wi cej zmiennych ktoacuterych zadaniem jest wprowadzenie oszusta w b d Przyk adowerozwi zanie zosta o przedstawione na poni szym listingu
$ajax( dataType json url highscorephp data sXZZUj Mathround(200Mathrandom()) enHf8F Mathround(200Mathrandom()) eZnqBG currentLevel avFanB Mathround(200Mathrandom()) zkpCfb currentLevel PCXFTR Mathround(200Mathrandom()) Nmyzsf currentLevel FYGswh Mathround(200Mathrandom()) C3kaTz finishedTime ltlt 1 gU7buf finishedTime ykN65g Mathround(200Mathrandom()) Q5jUZm Mathround(200Mathrandom()) bb5d7V Mathround(200Mathrandom()) WTsrdm finishedTime ltlt 1 bCW5Dg currentLevel AFM8MN Mathround(200Mathrandom()) FUHt6K Mathround(200Mathrandom()) WfBCLQ finishedTime ltlt 1 d8mzVn Mathround(200Mathrandom()) bHxNpb Mathround(200Mathrandom()) MWcmCz finishedTime ZAat42 Mathround(200Mathrandom()) async false success function (json) )
W kodzie serwera nie trzeba nic zmienia poniewa dodatkowe zmienne s po prostu igno-rowane Mo na oczywi cie jeszcze bardziej skomplikowa spraw i wprowadzi dodatkowezale no ci mi dzy zmiennymi Nale y jednak ca y czas pami ta ktoacutere zmienne przechowujistotne dane by roacutewnie sobie nie utrudni zadania
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
156
Integracja z TwitteremTwitter daje mo liwo dzielenia si z innymi kroacutetkimi informacjami W przypadku gier mo emyz niego skorzysta na dwa sposoby
mo emy umo liwi graczowi zalogowanie si do gry za pomoc nazwy u ytkownikai has a z Twittera
mo emy da mo liwo publikowania tweetoacutew z wynikami lub informacjamio post pach w grze
Zajmiemy si teraz zaimplementowaniem tych dwoacutech funkcji
Podstawy TwitteraIstnieje bardzo prosty sposoacuteb korzystania z Twittera ktoacutery nie wymaga znajomo ci adnegoAPI Je li u ytkownik jest zalogowany za po rednictwem odpowiednio przygotowanego adresuURL mo na opublikowa tweet URL powinien by zbudowany w nast puj cy sposoacuteb
httptwittercomhomestatus=Przyk adowy tweet
Wyroacute niony fragment adresu to tekst tweeta Na ekranie tablicy wynikoacutew obok przyciskuZatwierd umie cimy odsy acz Tweetnij
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmit ltagt + lta id=tweetScore target=_blank href=http twittercomhomestatus=+escape(W a nie uda o mi si sko czy +currentLevel+ poziom gry Yet Another Platformer w +minSec(jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
157
Najistotniejszy jest wyroacute niony fragment kodu bo to dzi ki niemu dzieje si to co powinno Za-stosowali my tu javascriptow funkcj escape by dostarczany test by poprawnie sformatowany
Jak wida bardzo atwo zaimplementowa to rozwi zanie ale trzeba wiedzie o kilku ograni-czeniach
Je li u ytkownik nie jest zalogowany pojawi si ekran logowania Twittera Na ekranie tablicy wynikoacutew nie mo na u y nazwy u ytkownika z Twittera
W zwi zku z tym nawet je li u ytkownik b dzie chcia tweetn swoacutej wyniki tak b dzie musia poda swoj nazw w grze
Publikowanie ka dego tweeta powoduje otwarcie nowego okna przegl darkiw ktoacuterym u ytkownik musi potwierdzi t operacj
Je li chcieliby my umo liwi u ytkownikowi zalogowanie si i automatyczne publikowanietweetoacutew bez konieczno ci ka dorazowego otwierania nowego okna musimy skorzysta z APITwittera
Pe ny dost p do API TwitteraNajpe niejsza integracja gry z Twitterem wymaga zapytania u ytkownika o zgod na po czeniejego konta z gr Mo na w tym celu skorzysta z mechanizmu OAuth ktoacutery jest otwartym stan-dardem uwierzytelniania stosowanym przez wiele firm takich jak Twitter Google czy Facebook
Aby da u ytkownikom mo liwo zalogowania si za po rednictwem Twittera musimy lekkozmodyfikowa ekran pocz tkowy
Je li gracz kliknie cze Rozpocznij gr zacznie od razu rozgrywk Je li z kolei kliknie Zalogujprzez Twittera b dzie si musia zalogowa za po rednictwem Twittera po czym nast pi powroacutetdo gry
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
158
Rejestrowanie gry w TwitterzeZanim przejdziemy dalej musimy zarejestrowa gr w Twitterze Aby to zrobi musisz sizalogowa na stron Twittera dla deweloperoacutew (httpsdevtwittercom) a nast pnie kliknpozycj My applications (moje aplikacje) w menu profilu
Nale y utworzy now aplikacj ( cze Create a new application) wype ni wszystkie wymaganepola oraz wyrazi zgod na warunki licencyjne (Rules of the Road) Po zatwierdzeniu wprowa-dzonych danych zostanie wy wietlona strona zawieraj ca dane utworzonej aplikacji
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
159
Trzeba zwroacuteci uwag na dwie informacje ktoacutere na rysunku zosta y otoczone ramk poniewab d potrzebne poacute niej Nale y wykona jeszcze jedn drobn modyfikacj konfiguracjiPrzejd do zak adki Settings (ustawienia) i przyjrzyj si sekcji Application Type (typ aplikacji)Domy lnie jest zaznaczone pole Read only (tylko do odczytu) Je li chcesz w imieniu graczapublikowa tweety musisz wybra opcj Read and Write
W ten sposoacuteb przygotowali my konto na Twitterze do integracji z gr
Pomocnicza bibliotekaKod realizuj cy komunikacj z API Twittera mo na napisa samemu w PHP ale to dosy mud-na praca Na szcz cie jest dost pnych wiele bibliotek ktoacutere mog to upro ci Jedn z nichprzeznaczon dla PHP jest twitteroauth (httpsgithubcomabrahamtwitteroauth) Istniejoczywi cie biblioteki dla innych j zykoacutew koniecznie zajrzyj do dokumentacji Twittera abydowiedzie si wi cej na ten temat
Du zalet biblioteki twitteroauth jest to e mo na j zainstalowa na prawie ka dym serwerzeobs uguj cym PHP Wystarczy skopiowa bibliotek do tego samego katalogu w ktoacuterym znajdujsi skrypty gry W naszym przypadku b dzie to podkatalog twitter
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
160
Musimy zacz od skonfigurowania biblioteki Przydatny b dzie przyk adowy skrypt konfigura-cyjny config-samplephp dost pny w podanym repozytorium Znajduje si w nim kod definiuj cytrzy sta e
define(CONSUMER_KEY (1))define(CONSUMER_SECRET (2))define(OAUTH_CALLBACK (3))
W miejscach (1) i (2) trzeba wpisa warto ci wy wietlone na stronie informacji o utworzonejaplikacji Twittera W miejscu (3) nale y poda adres URL skryptu zwrotnego callbackphp
Ostatnim krokiem jest zmodyfikowanie skryptu callbackphp tak by zawiera prawid oweprzekierowanie do g oacutewnego pliku naszej gry
header(Location indexphp)
UwierzytelnianieNa poni szym diagramie zosta przedstawiony sposoacuteb przeprowadzania uwierzytelniania i auto-ryzacji u ytkownikoacutew w grze za po rednictwem Twittera
W praktyce nie jest to tak skomplikowane na jakie wygl da przede wszystkim dlatego ewi kszo jest ju zaimplementowana w bibliotece twitteroauth Zajmiemy si utworzeniemstrony logowania wy wietlanej po klikni ciu przycisku Zaloguj przez Twittera U yjemy zwy-k ego odsy acza kieruj cego do pliku redirectphp Kiedy u ytkownik kliknie to cze po razpierwszy zostanie przekierowany na stron Twittera na ktoacuterej b dzie moacuteg autoryzowa dost pdo konta
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
161
Po wyra eniu zgody nast pi przekierowanie na adres ktoacutery zosta ustawiony w pliku callbackphpJe li u ytkownik ju raz wyrazi zgod na autoryzacj b dzie moacuteg od razu si zalogowa
W skryptach JavaScript bardzo przyda nam si teraz informacja o tym czy gracz jest po czonyczy nie Aby j uzyska musimy przekszta ci g oacutewny dokument HTML gry w plik PHP i umie-ci na jego pocz tku nast puj cy kod
ltphpsession_start()
require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
Pobranie tokenoacutew u 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-gtget(accountverify_credentials)gt
W tym kodzie rozpoczynamy sesj do czamy dwa pliki biblioteki twitteroauth oraz odczytuje-my token sesji Je li token jest ustawiony oznacza to e u ytkownik jest zalogowany do Twittera
Nast pnie serwer czy si z Twitterem aby pobra obiekt u ytkownika Tak to wygl da postronie serwera ale kod JavaScript wci nie ma informacji o zalogowaniu W zwi zku z tymmusimy utworzy skrypt przesy aj cy dane do kodu klienckiego
ltscript type=textjavascriptgtltphp if($_SESSION[status] == verified) gt var twitter = true var twitterName = ltphp print $user-gtscreen_name gtltphp else gt var twitter = falseltphp gtltscriptgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
162
Je li gracz jest zalogowany do Twittera globalna zmienna twitter ma warto true a zmiennatwitterName zawiera nazw u ytkownika
Ostatnim o co nale y zadba jest poinformowanie u ytkownika o pomy lnym zalogowaniu zapomoc Twittera i umo liwienie wylogowania si W tym celu musimy wprowadzi drobnzmian w kodzie odpowiedzialnym za ekran pocz tkowy wy wietlany po zalogowaniu
ltdiv id=startScreen class=screengt ltphp if($_SESSION[status] = verified) gt lta class=button tweetLink href=twitterredirectphpgtZaloguj przez Twitteraltagt ltphp else gt lta class=button tweetLink href=twitterclearsessionsphpgtWyloguj z Twitteraltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Po wprowadzeniu powy szych modyfikacji mo na uzna e uwierzytelnianie przez Twitterajest zaimplementowane
Publikowanie najlepszych wynikoacutew na TwitterzeTeraz kiedy gracz jest ju zalogowany do Twittera mo na publikowa jego wyniki w znaczniewygodniejszy sposoacuteb ni poprzednio Zaczniemy od utworzenia po stronie serwera skryptutwitterPostphp w ktoacuterym u yjemy interfejsu statusesupdate API Twittera
Spoacutejrzmy na kompletny skrypt
ltphpsession_start()require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
$time = $_SESSION[time]$level = $_SESSION[level]if (isset($time) ampamp isset($level)) Pobranie tokenoacutew u ytkownika z sesji $access_token = $_SESSION[access_token] $connection = new TwitterOAuth(CONSUMER_KEY CONSUMER_SECRET $access_token[oauth_token] $access_token[oauth_token_secret])
$parameters = array(status =gt W a nie uda o mi si sko czy $level poziom gry Yet Another Platformer w $time sekund) $status = $connection-gtpost(statusesupdate $parameters)gt
Najprawdopodobniej rozpoznajesz wi kszo kodu z powy szego listingu ktoacutery dodali my napocz tku skryptu ekranu pocz tkowego (tylko wyroacute niony kod jest nowy) W ostatnich dwoacutechwierszach tworzymy a nast pnie przesy amy do Twittera tekst ktoacutery chcemy opublikowa co
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
163
mdash jak wida mdash jest ca kiem proste Musimy jednak zaj si jeszcze jednym Poniewa graczjest zalogowany znamy jego nazw wi c mo emy j wykorzysta na ekranie tablicy wynikoacutew
W kodzie klienta utworzymy troch inn od dotychczasowej wersj tablicy wynikoacutew
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) if (twitter) top += ltinput id=name type=hidden value=+twitterName+gt + twitterName + + minSec(jsontop[i]time) + lta id=saveScore href=gtZatwierd ltagt + lta id=tweetScore href=gtTweetnijltagt ltbrgt else top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt + lta target=_blank href=httptwittercomhome status=+escape(w a nie uda o mi si sko czy +current Level+ poziom gry Yet Another Platformer w +minSec (jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Tworzymy tu niewidoczne pole wej ciowe przechowuj ce nazw u ytkownika pochodz cz Twittera Nast pnie wypisujemy t nazw na ekranie tablicy wynikoacutew Zwroacute uwag e niemusieli my w ogoacutele zmienia kodu po stronie serwera
Tyle na temat integracji z Twitterem Je eli chcesz dowiedzie si wi cej i rozszerzy funk-cjonalno gry zajrzyj do dokumentacji API Twittera
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
164
Integracja z FacebookiemIntegracja z Facebookiem i Twitterem jest w wielu aspektach podobna Facebook jest jednakw du o wi kszym stopniu nastawiony na gry Zajmiemy si implementacj osi gni dla zalo-gowanych u ytkownikoacutew Skorzystamy z SDK Facebooka dla PHP ale s roacutewnie dost pnerozwi zania dla innych j zykoacutew
Tak jak w przypadku Twittera tu roacutewnie musimy zacz od zarejestrowania aplikacji w Fa-cebooku W tym celu trzeba si zalogowa do serwisu dla deweloperoacutew (httpsdevelopers
facebookcom) i klikn pozycj Apps1
Nast pnie nale y klikn cze Create New App i wype ni obowi zkowe pola formularza Poich zatwierdzeniu pojawi si ekran z informacjami dotycz cymi nowej aplikacji Podobnie jakby o w przypadku Twittera tu roacutewnie najwa niejsze s dwie warto ci co wida na rysunku
1 Aby moacutec tworzy aplikacje trzeba si zarejestrowa jako programista W tym celu musisz klikn przycisk
Register as a Developer mdash przyp t um
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
165
Na powy szym zrzucie strza k zosta a oznaczona sekcja umo liwiaj ca wyboacuter sposobu inte-gracji aplikacji z Facebookiem Aby uzyska pe ny dost p do interfejsu Open Graph API Fa-cebooka ktoacutery umo liwia mi dzy innymi publikowanie osi gni trzeba zaznaczy pozycjAplikacja na Facebooku
Dzi ki temu gra mo e by uruchamiana w ramce (iframe) wewn trz strony Facebooka Jednakaby to by o mo liwe konieczny jest prawid owy certyfikat dla HTTPS obowi zuj cy w dome-nie w ktoacuterej jest dost pna gra Je li jednak chcemy by gra by a adowana z naszego serweranie ma tych wymaga ale i tak trzeba wpisa adres w odpowiednim polu (aby adres zostauznany za poprawny nale y poda https nawet je li nie ma si certyfikatu)
Jest jeszcze jedno co nale y zrobi by aplikacja mog a publikowa osi gni cia mdash nale y jzarejestrowa jako gr W tym celu wystarczy klikn pozycj Informacje o aplikacji a na-st pnie w sekcji Informacje o aplikacji w polach Kategoria ustawi pozycj Gry i ustali gatunekgry co wida na poni szym rysunku
Uwierzytelnianie przez FacebookaPodstawowy mechanizm uwierzytelniania jest bardzo podobny do tego z Twittera ale istniejepewna roacute nica w podej ciu do dost pu W przypadku Twittera mo na by o zdecydowa czyaplikacja ma prawa tylko do odczytu czy roacutewnie zapisu Facebook oferuje znacznie bogatszemo liwo ci ustalania poziomoacutew dost pu przy czym decyduje si o nich w czasie logowania
Kod odpowiedzialny za uwierzytelnianie zosta przedstawiony na poni szym listingu Tu roacutewnie jak w przypadku Twittera musimy umie ci na pocz tku skryptu kod pobieraj cy obiekt bie-
cego u ytkownika
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
166
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()gt
Wyroacute niony wiersz kodu odpowiada za wskazanie e z poziomu gry b dziemy chcieli publiko-wa wpisy na osi czasu u ytkownika W miejscach (1) i (2) nale y wpisa warto ci wy wietlonena stronie konfiguracji aplikacji w Facebooku
Je li zmienna $facebookUser to null oznacza to e u ytkownik jest ju zalogowany W prze-ciwnym przypadku musimy wy wietli przycisk logowania Musimy wi c napisa kod podobnydo tego ktoacutery s u y do wy wietlenia przycisku logowania za po rednictwem Twittera
ltdiv id=startScreen class=screengt ltphp if ($facebookUser) $loginUrl = $facebook-gtgetLoginUrl(array( scope =gt $scope redirect_uri =gt $app_url )) gt lta class=button tweetLink href=ltphp print $loginUrl gtgtZaloguj przez Facebookaltagt ltphp else $logoutUrl = $facebook-gtgetLogoutUrl(array( next =gt $app_url )) gt lta class=button tweetLink href=ltphp print $logoutUrlgtgtWyloguj z Facebookaltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
147
$level = $_GET[level]
if (isset($time) ampamp isset($level)) Obiekt JSON $json = array(top=gtarray() intop=gtfalse)
$query = SELECT FROM scores WHERE level=$level ORDER BY time ASC LIMIT 5 $result = mysqli_query($link $query) $i=0
while ($obj = mysqli_fetch_object($result)) if ($json[intop] ampamp $time lt $obj-gttime) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
$i++ if ($i lt 5) array_push($json[top] array(time=gt$obj-gttime name=gt$obj- gtname)) $i++
if ($i lt 5 ampamp $json[intop]) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
mysqli_free_result($result) echo json_encode($json) mysqli_close($link)gt
Na listingu zosta y wyroacute nione te fragmenty ktoacutere odpowiadaj za operacje na wyniku gracza
Wy wietlanie listy najlepszych wynikoacutewPo stronie klienta wygenerujemy ekran przedstawiaj cy wynik list najlepszych graczy orazpole s u ce do wprowadzenia nazwy u ytkownika je li uda o mu si uzyska wystarczaj codobry czas Kod ten przedstawia si nast puj co
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
148
var finishedTime = Mathround((Datenow() - levelStart) 1000) $ajax( dataType json url highscorephp data level currentLevel time finishedTime async false success function(json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + ltinput id=timeScore type=hidden value=+jsontop[i] time+gtltinputgt + ltinput id=level type=hidden value= +currentLevel+gtltinputgt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )fail(function(a b c) var toto = toto )
Kod generuj cy list zosta wyroacute niony Tworzymy pole w ktoacuterym gracz mo e wpisa swojnazw oraz dwa ukryte pola przechowuj ce numer poziomu i punktacj Umieszczamy turoacutewnie odsy acz s u cy do zatwierdzenia wyniku Kod obs uguj cy ten odsy acz znajdujesi poni ej
$(levelEnd)on(click saveScore function() $get(savephp name $(name)val() time $(timeScore)val() level $(level)val() function() $(saveScore)fadeOut(500) ) return false)
Pobieramy tu warto ci z poacutel i przekazujemy je na serwer Po ich przes aniu usuwamy przyciskzatwierdzania aby da zna u ytkownikowi e proces si zako czy
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
149
Mechanizmy utrudniaj ce oszukiwanieNie istnieje idealne rozwi zanie uniemo liwiaj ce oszukiwanie Problem ten jest szczegoacutelnieistotny w grach tworzonych w JavaScripcie poniewa bardzo atwo uzyska dost p do koduroacuted owego Mo na oczywi cie przekszta ci kod do nieczytelnej postaci ale to nie powstrzyma
zdeterminowanego oszusta a jedynie spowolni jego prac Istnieje jednak kilka innych technikdzi ki ktoacuterym proacuteby oszustw staj si trudniejsze i mniej op acalne
Weryfikacja po stronie serweraNajprostszym sposobem na utrudnienie oszukiwania jest przeniesienie cz ci kodu na serwerZrobili my tak z mechanizmem walki w grze tworzonej w rozdziale 7 W przypadku gry plat-formowej musieliby my przesy a na serwer informacje o wciskaniu klawiszy steruj cych po-staci na podstawie ktoacuterych skrypt okre la by jego nowe po o enie
W wi kszo ci przypadkoacutew nie da si zastosowa takiego rozwi zania w tego typu grach alemo na stworzy skrypt ktoacutery b dzie weryfikowa punktacj gracza po stronie serwera Wystarczyw kilku miejscach planszy umie ci niewidoczne punkty kontrolne po osi gni ciu ktoacuterych naserwer jest przesy ana stosowna informacja Dzi ki temu je li u ytkownik przes a na serwerpunktacj ale nie trafi y tam wcze niej informacje z punktoacutew kontrolnych wiemy e co jestnie tak Mo na te zastosowa podobne rozwi zanie ale bazuj ce na przyk ad na liczbie skokoacutewlub pora ek gracza
Tak czy inaczej trzeba wprowadzi w grze jak kolwiek form weryfikacji wynikoacutew Nie majednego najlepszego rozwi zania Musisz jednak pami ta by zastosowany mechanizm niewykry proacuteby oszustwa tam gdzie go nie ma czyli eby uczciwy gracz nie zosta o nie pos -dzony Istotny jest roacutewnie nak ad pracy wymagany do zaimplementowania tego typu mecha-nizmoacutew tak by praca nad nimi nie zaj a przypadkiem wi cej czasu ni tworzenie samej gry
W przedstawionym poni ej przyk adzie zastosujemy proste rozwi zanie Znamy maksymalnpr dko z jak mo e si porusza gracz wiemy te ile ma do przej cia wi c atwo jest obliczyminimalny czas potrzebny na zako czenie poziomu Wystarczy poroacutewna wynik gracza z twarto ci i sprawdzi czy nie jest mniejszy
Aby to zrobi trzeba uzupe ni skrypt highscorephp
gracz mo e przej 7 pikseli w 30 ms -gt 2331$minTime = array( 1 =gt 15 3500 2331 2 =gt 15 3500 2331 3 =gt 42 9800 2331 4 =gt 23 5460 2331)$timeValid = ($minTime[intval($level)] lt intval($time))while ($obj = mysqli_fetch_object($result))
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
150
if ($json[intop] ampamp $time lt $obj-gttime ampamp $timeValid)
Je li wynik osi gni ty przez gracza zosta uznany za nieprawdziwy zostanie wy wietlony alegracz nie b dzie moacuteg wpisa swojej nazwy
Mniej czytelne zmienneInnym rozwi zaniem jest zmniejszenie czytelno ci zmiennych tak by utrudni analiz danychprzesy anych na serwer oraz ich modyfikacj (dane te s w naszym przypadku zapisane w ukry-tych polach formularza) Rozwi zanie to wydaje si dobre ale niestety nietrudno jest obej ta-kie zabezpieczenia Na poni szym rysunku zosta o przedstawione okno inspektora przegl darkiChrome
Jedn z naczelnych zasad jest unikanie przechowywania istotnych informacji w elementachznajduj cych si w strukturze DOM poniewa maj do nich dost p wszyscy u ytkownicy nawettacy ktoacuterzy z programowaniem maj niewiele do czynienia W zwi zku z tym usuniemy jez wywo ania skryptu savephp i zapiszemy je w sesji W pliku highscorephp musimy doda na-st puj cy kod
if ($json[intop] ampamp $time lt $obj-gttime ampamp $timeValid) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
151
$_SESSION[level] = $level $_SESSION[time] = $time
$i++
W skrypcie savephp musimy z sesji odczyta poziom i czas
$name = $_GET[name]$time = $_SESSION[time]$level = $_SESSION[level]
Te proste zmiany wystarcz by utrudni oszukiwanie w naszej grze
Zaciemnianie koduZaciemnianie kodu (ang obfuscating) jest bardzo prost technik ale przy tym ca kiem sku-teczn Przekszta cony w ten sposoacuteb kod trudno analizowa poniewa jest nieczytelny dlaludzi Poni ej znajduje si fragment kodu odpowiedzialnego za tablic wynikoacutew
if (status == finished) gameState = menu $(level_nb_2)html(currentLevel) $(level_nb_1)html(currentLevel + 1)
var finishedTime = Mathround((Datenow() - levelStart) 1000) $ajax( dataType json url highscorephp data level currentLevel time finishedTime async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + ltinput id=timeScore type=hidden value=+jsontop[i] time+gtltinputgt + ltinput id=level type=hidden value= +currentLevel+gtltinputgt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
152
$(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) gfx(group 0)
tilemap = loadNextLevel(group) gfx(playerdiv 0) gfy(playerdiv 0) gfsetAnimation(playerdiv playerAnimjump) ) status = stand
Ten sam kod poddany operacji zaciemniania (za pomoc narz dzia UglifyJS) wygl da nast puj co
if(finished==status)gameState=menu$(level_nb_2)html(currentLevel)$(level_nb_1)html(currentLevel+1)varfinishedTime=Mathround((Datenow()-levelStart)1e3)$ajax(dataTypejsonurlhighscorephpdatalevelcurrentLeveltimefinishedTimeasync1successfunction(a)for(var b=c=0atoplengthgtcc++)b+=aintopampampapos===cltinput id=name placeholder=_____ size=5gtltinput id=timeScore type=hidden value=+atop[c]time+gtltinputgt+ltinput id=level type=hidden value=+currentLevel+gtltinputgt+ +minSec(atop[c]time)+ lta id=saveScorehref=gtsubmitltagt ltbrgt+atop[c]name+ +minSec(atop[c]time)+ltbrgt$(top_list)html(b))fail(function())$(time)html(minSec(finishedTime))$(levelEnd)fadeIn(2e3function()$(backgroundFront)css(background-position0px0px)$(backgroundBack)css(background-position0px 0px)gfx(group0)tilemap=loadNextLevel(group)gfx(playerdiv0)gfy(playerdiv0)gfsetAnimation(playerdivplayerAnimjump))status=stand
Z ca pewno ci analiza takiego kodu jest du o trudniejsza a zyskujemy przy okazji co jeszczemdashprzetworzony w ten sposoacuteb kod jest kroacutetszy ni orygina
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
153
Mniej czytelny protokoacute sieciowyChocia poprawili my kod dzia aj cy po stronie klienta nadal istnieje mo liwo uzyskania do-st pu do warto ci przesy anych zmiennych poprzez analiz ruchu sieciowego Na poni szymrysunku zosta o przedstawione okno aplikacji nas uchuj cej ktoacutera wy wietla dane przesy ane pozako czeniu poziomu
Jest to problem poniewa w celu oszustwa u ytkownik nie musi modyfikowa kodu mdash wystarczysfa szowa pakiet przesy any na serwer Istniej trzy proste sposoby na utrudnienie analizowaniatransmitowanych danych
1 Nadawanie zmiennym przypadkowych nazw tak by na ich podstawie nie da o siokre li ich przeznaczenia
2 Kodowanie zawarto ci zmiennych U ytkownik zna przewa nie osi gni ty przez siebiewynik wi c na jego podstawie mo e znale w transmitowanych danych odpowiednizmienn i j zmodyfikowa Dzi ki zakodowaniu tej warto ci zadanie to stanie sitrudniejsze
3 Dodanie wielu przypadkowych zmiennych Dzi ki temu trudniej si domy li ktoacuteraz nich przechowuje istotne dane
Podobnie jak w przypadku wcze niej opisywanych metod te roacutewnie jedynie utrudniaj proacutebyoszustwa ale nie daj stuprocentowego zabezpieczenia Roacutewnoczesne zastosowanie kilkurozwi za mo e zniech ci nawet najbardziej zdeterminowanych oszustoacutew Poni ej znaj-dziesz propozycj implementacji ka dego z nich
Kodowanie warto ciZaczniemy od kodowania warto ci Mo na to zrobi na wiele sposoboacutew roacute ni cych si uzy-skiwanym stopniem bezpiecze stwa W naszym przypadku wystarczy utrudni odszukaniewyniku na li cie przesy anych zmiennych w zwi zku z czym nie musimy wprowadza adnej
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
154
skomplikowanej metody kodowania W kodzie klienta u yjemy operacji przesuni cia w lewo(ltlt) a na serwerze mdash przesuni cia w prawo (gtgt)
Oto kod skryptu dzia aj cego na kliencie
$ajax( dataType json url highscorephp data level currentLevel time finishedTime ltlt 1 async false success function (json) )
Odpowiedni fragment skryptu na serwerze
$time = intval($_GET[time]) gtgt 1
Aby jeszcze bardziej zmyli u ytkownika warto t prze lemy w wielu innych zmiennychktoacutere nie b d w ogoacutele brane pod uwag po stronie serwera
Przypadkowe nazwy zmiennychNie trzeba tu wiele wyja nia mdash wystarczy zmieni nazw zmiennej Je li chcesz jeszczebardziej utrudni zadanie oszustom mo esz zmienia t nazw przy ka dym daniu Poni ejpodstawowa wersja kodu
$ajax( dataType json url highscorephp data Nmyzsf currentLevel WfBCLQ finishedTime ltlt 1 async false success function (json) )
Kod po stronie serwera przyjmie nast puj c posta
$time = intval($_GET[WfBCLQ]) gtgt 1$level = $_GET[Nmyzsf]
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
155
Dodatkowe przypadkowe zmienneNazwy zmiennych nie oddaj ju znaczenia przechowywanych przez nie warto ci ale to niewszystko poniewa stosunkowo atwo sprawdzi ktoacutera z nich odpowiada za wynik Musimy wi cdoda wi cej zmiennych ktoacuterych zadaniem jest wprowadzenie oszusta w b d Przyk adowerozwi zanie zosta o przedstawione na poni szym listingu
$ajax( dataType json url highscorephp data sXZZUj Mathround(200Mathrandom()) enHf8F Mathround(200Mathrandom()) eZnqBG currentLevel avFanB Mathround(200Mathrandom()) zkpCfb currentLevel PCXFTR Mathround(200Mathrandom()) Nmyzsf currentLevel FYGswh Mathround(200Mathrandom()) C3kaTz finishedTime ltlt 1 gU7buf finishedTime ykN65g Mathround(200Mathrandom()) Q5jUZm Mathround(200Mathrandom()) bb5d7V Mathround(200Mathrandom()) WTsrdm finishedTime ltlt 1 bCW5Dg currentLevel AFM8MN Mathround(200Mathrandom()) FUHt6K Mathround(200Mathrandom()) WfBCLQ finishedTime ltlt 1 d8mzVn Mathround(200Mathrandom()) bHxNpb Mathround(200Mathrandom()) MWcmCz finishedTime ZAat42 Mathround(200Mathrandom()) async false success function (json) )
W kodzie serwera nie trzeba nic zmienia poniewa dodatkowe zmienne s po prostu igno-rowane Mo na oczywi cie jeszcze bardziej skomplikowa spraw i wprowadzi dodatkowezale no ci mi dzy zmiennymi Nale y jednak ca y czas pami ta ktoacutere zmienne przechowujistotne dane by roacutewnie sobie nie utrudni zadania
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
156
Integracja z TwitteremTwitter daje mo liwo dzielenia si z innymi kroacutetkimi informacjami W przypadku gier mo emyz niego skorzysta na dwa sposoby
mo emy umo liwi graczowi zalogowanie si do gry za pomoc nazwy u ytkownikai has a z Twittera
mo emy da mo liwo publikowania tweetoacutew z wynikami lub informacjamio post pach w grze
Zajmiemy si teraz zaimplementowaniem tych dwoacutech funkcji
Podstawy TwitteraIstnieje bardzo prosty sposoacuteb korzystania z Twittera ktoacutery nie wymaga znajomo ci adnegoAPI Je li u ytkownik jest zalogowany za po rednictwem odpowiednio przygotowanego adresuURL mo na opublikowa tweet URL powinien by zbudowany w nast puj cy sposoacuteb
httptwittercomhomestatus=Przyk adowy tweet
Wyroacute niony fragment adresu to tekst tweeta Na ekranie tablicy wynikoacutew obok przyciskuZatwierd umie cimy odsy acz Tweetnij
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmit ltagt + lta id=tweetScore target=_blank href=http twittercomhomestatus=+escape(W a nie uda o mi si sko czy +currentLevel+ poziom gry Yet Another Platformer w +minSec(jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
157
Najistotniejszy jest wyroacute niony fragment kodu bo to dzi ki niemu dzieje si to co powinno Za-stosowali my tu javascriptow funkcj escape by dostarczany test by poprawnie sformatowany
Jak wida bardzo atwo zaimplementowa to rozwi zanie ale trzeba wiedzie o kilku ograni-czeniach
Je li u ytkownik nie jest zalogowany pojawi si ekran logowania Twittera Na ekranie tablicy wynikoacutew nie mo na u y nazwy u ytkownika z Twittera
W zwi zku z tym nawet je li u ytkownik b dzie chcia tweetn swoacutej wyniki tak b dzie musia poda swoj nazw w grze
Publikowanie ka dego tweeta powoduje otwarcie nowego okna przegl darkiw ktoacuterym u ytkownik musi potwierdzi t operacj
Je li chcieliby my umo liwi u ytkownikowi zalogowanie si i automatyczne publikowanietweetoacutew bez konieczno ci ka dorazowego otwierania nowego okna musimy skorzysta z APITwittera
Pe ny dost p do API TwitteraNajpe niejsza integracja gry z Twitterem wymaga zapytania u ytkownika o zgod na po czeniejego konta z gr Mo na w tym celu skorzysta z mechanizmu OAuth ktoacutery jest otwartym stan-dardem uwierzytelniania stosowanym przez wiele firm takich jak Twitter Google czy Facebook
Aby da u ytkownikom mo liwo zalogowania si za po rednictwem Twittera musimy lekkozmodyfikowa ekran pocz tkowy
Je li gracz kliknie cze Rozpocznij gr zacznie od razu rozgrywk Je li z kolei kliknie Zalogujprzez Twittera b dzie si musia zalogowa za po rednictwem Twittera po czym nast pi powroacutetdo gry
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
158
Rejestrowanie gry w TwitterzeZanim przejdziemy dalej musimy zarejestrowa gr w Twitterze Aby to zrobi musisz sizalogowa na stron Twittera dla deweloperoacutew (httpsdevtwittercom) a nast pnie kliknpozycj My applications (moje aplikacje) w menu profilu
Nale y utworzy now aplikacj ( cze Create a new application) wype ni wszystkie wymaganepola oraz wyrazi zgod na warunki licencyjne (Rules of the Road) Po zatwierdzeniu wprowa-dzonych danych zostanie wy wietlona strona zawieraj ca dane utworzonej aplikacji
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
159
Trzeba zwroacuteci uwag na dwie informacje ktoacutere na rysunku zosta y otoczone ramk poniewab d potrzebne poacute niej Nale y wykona jeszcze jedn drobn modyfikacj konfiguracjiPrzejd do zak adki Settings (ustawienia) i przyjrzyj si sekcji Application Type (typ aplikacji)Domy lnie jest zaznaczone pole Read only (tylko do odczytu) Je li chcesz w imieniu graczapublikowa tweety musisz wybra opcj Read and Write
W ten sposoacuteb przygotowali my konto na Twitterze do integracji z gr
Pomocnicza bibliotekaKod realizuj cy komunikacj z API Twittera mo na napisa samemu w PHP ale to dosy mud-na praca Na szcz cie jest dost pnych wiele bibliotek ktoacutere mog to upro ci Jedn z nichprzeznaczon dla PHP jest twitteroauth (httpsgithubcomabrahamtwitteroauth) Istniejoczywi cie biblioteki dla innych j zykoacutew koniecznie zajrzyj do dokumentacji Twittera abydowiedzie si wi cej na ten temat
Du zalet biblioteki twitteroauth jest to e mo na j zainstalowa na prawie ka dym serwerzeobs uguj cym PHP Wystarczy skopiowa bibliotek do tego samego katalogu w ktoacuterym znajdujsi skrypty gry W naszym przypadku b dzie to podkatalog twitter
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
160
Musimy zacz od skonfigurowania biblioteki Przydatny b dzie przyk adowy skrypt konfigura-cyjny config-samplephp dost pny w podanym repozytorium Znajduje si w nim kod definiuj cytrzy sta e
define(CONSUMER_KEY (1))define(CONSUMER_SECRET (2))define(OAUTH_CALLBACK (3))
W miejscach (1) i (2) trzeba wpisa warto ci wy wietlone na stronie informacji o utworzonejaplikacji Twittera W miejscu (3) nale y poda adres URL skryptu zwrotnego callbackphp
Ostatnim krokiem jest zmodyfikowanie skryptu callbackphp tak by zawiera prawid oweprzekierowanie do g oacutewnego pliku naszej gry
header(Location indexphp)
UwierzytelnianieNa poni szym diagramie zosta przedstawiony sposoacuteb przeprowadzania uwierzytelniania i auto-ryzacji u ytkownikoacutew w grze za po rednictwem Twittera
W praktyce nie jest to tak skomplikowane na jakie wygl da przede wszystkim dlatego ewi kszo jest ju zaimplementowana w bibliotece twitteroauth Zajmiemy si utworzeniemstrony logowania wy wietlanej po klikni ciu przycisku Zaloguj przez Twittera U yjemy zwy-k ego odsy acza kieruj cego do pliku redirectphp Kiedy u ytkownik kliknie to cze po razpierwszy zostanie przekierowany na stron Twittera na ktoacuterej b dzie moacuteg autoryzowa dost pdo konta
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
161
Po wyra eniu zgody nast pi przekierowanie na adres ktoacutery zosta ustawiony w pliku callbackphpJe li u ytkownik ju raz wyrazi zgod na autoryzacj b dzie moacuteg od razu si zalogowa
W skryptach JavaScript bardzo przyda nam si teraz informacja o tym czy gracz jest po czonyczy nie Aby j uzyska musimy przekszta ci g oacutewny dokument HTML gry w plik PHP i umie-ci na jego pocz tku nast puj cy kod
ltphpsession_start()
require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
Pobranie tokenoacutew u 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-gtget(accountverify_credentials)gt
W tym kodzie rozpoczynamy sesj do czamy dwa pliki biblioteki twitteroauth oraz odczytuje-my token sesji Je li token jest ustawiony oznacza to e u ytkownik jest zalogowany do Twittera
Nast pnie serwer czy si z Twitterem aby pobra obiekt u ytkownika Tak to wygl da postronie serwera ale kod JavaScript wci nie ma informacji o zalogowaniu W zwi zku z tymmusimy utworzy skrypt przesy aj cy dane do kodu klienckiego
ltscript type=textjavascriptgtltphp if($_SESSION[status] == verified) gt var twitter = true var twitterName = ltphp print $user-gtscreen_name gtltphp else gt var twitter = falseltphp gtltscriptgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
162
Je li gracz jest zalogowany do Twittera globalna zmienna twitter ma warto true a zmiennatwitterName zawiera nazw u ytkownika
Ostatnim o co nale y zadba jest poinformowanie u ytkownika o pomy lnym zalogowaniu zapomoc Twittera i umo liwienie wylogowania si W tym celu musimy wprowadzi drobnzmian w kodzie odpowiedzialnym za ekran pocz tkowy wy wietlany po zalogowaniu
ltdiv id=startScreen class=screengt ltphp if($_SESSION[status] = verified) gt lta class=button tweetLink href=twitterredirectphpgtZaloguj przez Twitteraltagt ltphp else gt lta class=button tweetLink href=twitterclearsessionsphpgtWyloguj z Twitteraltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Po wprowadzeniu powy szych modyfikacji mo na uzna e uwierzytelnianie przez Twitterajest zaimplementowane
Publikowanie najlepszych wynikoacutew na TwitterzeTeraz kiedy gracz jest ju zalogowany do Twittera mo na publikowa jego wyniki w znaczniewygodniejszy sposoacuteb ni poprzednio Zaczniemy od utworzenia po stronie serwera skryptutwitterPostphp w ktoacuterym u yjemy interfejsu statusesupdate API Twittera
Spoacutejrzmy na kompletny skrypt
ltphpsession_start()require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
$time = $_SESSION[time]$level = $_SESSION[level]if (isset($time) ampamp isset($level)) Pobranie tokenoacutew u ytkownika z sesji $access_token = $_SESSION[access_token] $connection = new TwitterOAuth(CONSUMER_KEY CONSUMER_SECRET $access_token[oauth_token] $access_token[oauth_token_secret])
$parameters = array(status =gt W a nie uda o mi si sko czy $level poziom gry Yet Another Platformer w $time sekund) $status = $connection-gtpost(statusesupdate $parameters)gt
Najprawdopodobniej rozpoznajesz wi kszo kodu z powy szego listingu ktoacutery dodali my napocz tku skryptu ekranu pocz tkowego (tylko wyroacute niony kod jest nowy) W ostatnich dwoacutechwierszach tworzymy a nast pnie przesy amy do Twittera tekst ktoacutery chcemy opublikowa co
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
163
mdash jak wida mdash jest ca kiem proste Musimy jednak zaj si jeszcze jednym Poniewa graczjest zalogowany znamy jego nazw wi c mo emy j wykorzysta na ekranie tablicy wynikoacutew
W kodzie klienta utworzymy troch inn od dotychczasowej wersj tablicy wynikoacutew
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) if (twitter) top += ltinput id=name type=hidden value=+twitterName+gt + twitterName + + minSec(jsontop[i]time) + lta id=saveScore href=gtZatwierd ltagt + lta id=tweetScore href=gtTweetnijltagt ltbrgt else top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt + lta target=_blank href=httptwittercomhome status=+escape(w a nie uda o mi si sko czy +current Level+ poziom gry Yet Another Platformer w +minSec (jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Tworzymy tu niewidoczne pole wej ciowe przechowuj ce nazw u ytkownika pochodz cz Twittera Nast pnie wypisujemy t nazw na ekranie tablicy wynikoacutew Zwroacute uwag e niemusieli my w ogoacutele zmienia kodu po stronie serwera
Tyle na temat integracji z Twitterem Je eli chcesz dowiedzie si wi cej i rozszerzy funk-cjonalno gry zajrzyj do dokumentacji API Twittera
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
164
Integracja z FacebookiemIntegracja z Facebookiem i Twitterem jest w wielu aspektach podobna Facebook jest jednakw du o wi kszym stopniu nastawiony na gry Zajmiemy si implementacj osi gni dla zalo-gowanych u ytkownikoacutew Skorzystamy z SDK Facebooka dla PHP ale s roacutewnie dost pnerozwi zania dla innych j zykoacutew
Tak jak w przypadku Twittera tu roacutewnie musimy zacz od zarejestrowania aplikacji w Fa-cebooku W tym celu trzeba si zalogowa do serwisu dla deweloperoacutew (httpsdevelopers
facebookcom) i klikn pozycj Apps1
Nast pnie nale y klikn cze Create New App i wype ni obowi zkowe pola formularza Poich zatwierdzeniu pojawi si ekran z informacjami dotycz cymi nowej aplikacji Podobnie jakby o w przypadku Twittera tu roacutewnie najwa niejsze s dwie warto ci co wida na rysunku
1 Aby moacutec tworzy aplikacje trzeba si zarejestrowa jako programista W tym celu musisz klikn przycisk
Register as a Developer mdash przyp t um
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
165
Na powy szym zrzucie strza k zosta a oznaczona sekcja umo liwiaj ca wyboacuter sposobu inte-gracji aplikacji z Facebookiem Aby uzyska pe ny dost p do interfejsu Open Graph API Fa-cebooka ktoacutery umo liwia mi dzy innymi publikowanie osi gni trzeba zaznaczy pozycjAplikacja na Facebooku
Dzi ki temu gra mo e by uruchamiana w ramce (iframe) wewn trz strony Facebooka Jednakaby to by o mo liwe konieczny jest prawid owy certyfikat dla HTTPS obowi zuj cy w dome-nie w ktoacuterej jest dost pna gra Je li jednak chcemy by gra by a adowana z naszego serweranie ma tych wymaga ale i tak trzeba wpisa adres w odpowiednim polu (aby adres zostauznany za poprawny nale y poda https nawet je li nie ma si certyfikatu)
Jest jeszcze jedno co nale y zrobi by aplikacja mog a publikowa osi gni cia mdash nale y jzarejestrowa jako gr W tym celu wystarczy klikn pozycj Informacje o aplikacji a na-st pnie w sekcji Informacje o aplikacji w polach Kategoria ustawi pozycj Gry i ustali gatunekgry co wida na poni szym rysunku
Uwierzytelnianie przez FacebookaPodstawowy mechanizm uwierzytelniania jest bardzo podobny do tego z Twittera ale istniejepewna roacute nica w podej ciu do dost pu W przypadku Twittera mo na by o zdecydowa czyaplikacja ma prawa tylko do odczytu czy roacutewnie zapisu Facebook oferuje znacznie bogatszemo liwo ci ustalania poziomoacutew dost pu przy czym decyduje si o nich w czasie logowania
Kod odpowiedzialny za uwierzytelnianie zosta przedstawiony na poni szym listingu Tu roacutewnie jak w przypadku Twittera musimy umie ci na pocz tku skryptu kod pobieraj cy obiekt bie-
cego u ytkownika
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
166
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()gt
Wyroacute niony wiersz kodu odpowiada za wskazanie e z poziomu gry b dziemy chcieli publiko-wa wpisy na osi czasu u ytkownika W miejscach (1) i (2) nale y wpisa warto ci wy wietlonena stronie konfiguracji aplikacji w Facebooku
Je li zmienna $facebookUser to null oznacza to e u ytkownik jest ju zalogowany W prze-ciwnym przypadku musimy wy wietli przycisk logowania Musimy wi c napisa kod podobnydo tego ktoacutery s u y do wy wietlenia przycisku logowania za po rednictwem Twittera
ltdiv id=startScreen class=screengt ltphp if ($facebookUser) $loginUrl = $facebook-gtgetLoginUrl(array( scope =gt $scope redirect_uri =gt $app_url )) gt lta class=button tweetLink href=ltphp print $loginUrl gtgtZaloguj przez Facebookaltagt ltphp else $logoutUrl = $facebook-gtgetLogoutUrl(array( next =gt $app_url )) gt lta class=button tweetLink href=ltphp print $logoutUrlgtgtWyloguj z Facebookaltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
148
var finishedTime = Mathround((Datenow() - levelStart) 1000) $ajax( dataType json url highscorephp data level currentLevel time finishedTime async false success function(json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + ltinput id=timeScore type=hidden value=+jsontop[i] time+gtltinputgt + ltinput id=level type=hidden value= +currentLevel+gtltinputgt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )fail(function(a b c) var toto = toto )
Kod generuj cy list zosta wyroacute niony Tworzymy pole w ktoacuterym gracz mo e wpisa swojnazw oraz dwa ukryte pola przechowuj ce numer poziomu i punktacj Umieszczamy turoacutewnie odsy acz s u cy do zatwierdzenia wyniku Kod obs uguj cy ten odsy acz znajdujesi poni ej
$(levelEnd)on(click saveScore function() $get(savephp name $(name)val() time $(timeScore)val() level $(level)val() function() $(saveScore)fadeOut(500) ) return false)
Pobieramy tu warto ci z poacutel i przekazujemy je na serwer Po ich przes aniu usuwamy przyciskzatwierdzania aby da zna u ytkownikowi e proces si zako czy
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
149
Mechanizmy utrudniaj ce oszukiwanieNie istnieje idealne rozwi zanie uniemo liwiaj ce oszukiwanie Problem ten jest szczegoacutelnieistotny w grach tworzonych w JavaScripcie poniewa bardzo atwo uzyska dost p do koduroacuted owego Mo na oczywi cie przekszta ci kod do nieczytelnej postaci ale to nie powstrzyma
zdeterminowanego oszusta a jedynie spowolni jego prac Istnieje jednak kilka innych technikdzi ki ktoacuterym proacuteby oszustw staj si trudniejsze i mniej op acalne
Weryfikacja po stronie serweraNajprostszym sposobem na utrudnienie oszukiwania jest przeniesienie cz ci kodu na serwerZrobili my tak z mechanizmem walki w grze tworzonej w rozdziale 7 W przypadku gry plat-formowej musieliby my przesy a na serwer informacje o wciskaniu klawiszy steruj cych po-staci na podstawie ktoacuterych skrypt okre la by jego nowe po o enie
W wi kszo ci przypadkoacutew nie da si zastosowa takiego rozwi zania w tego typu grach alemo na stworzy skrypt ktoacutery b dzie weryfikowa punktacj gracza po stronie serwera Wystarczyw kilku miejscach planszy umie ci niewidoczne punkty kontrolne po osi gni ciu ktoacuterych naserwer jest przesy ana stosowna informacja Dzi ki temu je li u ytkownik przes a na serwerpunktacj ale nie trafi y tam wcze niej informacje z punktoacutew kontrolnych wiemy e co jestnie tak Mo na te zastosowa podobne rozwi zanie ale bazuj ce na przyk ad na liczbie skokoacutewlub pora ek gracza
Tak czy inaczej trzeba wprowadzi w grze jak kolwiek form weryfikacji wynikoacutew Nie majednego najlepszego rozwi zania Musisz jednak pami ta by zastosowany mechanizm niewykry proacuteby oszustwa tam gdzie go nie ma czyli eby uczciwy gracz nie zosta o nie pos -dzony Istotny jest roacutewnie nak ad pracy wymagany do zaimplementowania tego typu mecha-nizmoacutew tak by praca nad nimi nie zaj a przypadkiem wi cej czasu ni tworzenie samej gry
W przedstawionym poni ej przyk adzie zastosujemy proste rozwi zanie Znamy maksymalnpr dko z jak mo e si porusza gracz wiemy te ile ma do przej cia wi c atwo jest obliczyminimalny czas potrzebny na zako czenie poziomu Wystarczy poroacutewna wynik gracza z twarto ci i sprawdzi czy nie jest mniejszy
Aby to zrobi trzeba uzupe ni skrypt highscorephp
gracz mo e przej 7 pikseli w 30 ms -gt 2331$minTime = array( 1 =gt 15 3500 2331 2 =gt 15 3500 2331 3 =gt 42 9800 2331 4 =gt 23 5460 2331)$timeValid = ($minTime[intval($level)] lt intval($time))while ($obj = mysqli_fetch_object($result))
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
150
if ($json[intop] ampamp $time lt $obj-gttime ampamp $timeValid)
Je li wynik osi gni ty przez gracza zosta uznany za nieprawdziwy zostanie wy wietlony alegracz nie b dzie moacuteg wpisa swojej nazwy
Mniej czytelne zmienneInnym rozwi zaniem jest zmniejszenie czytelno ci zmiennych tak by utrudni analiz danychprzesy anych na serwer oraz ich modyfikacj (dane te s w naszym przypadku zapisane w ukry-tych polach formularza) Rozwi zanie to wydaje si dobre ale niestety nietrudno jest obej ta-kie zabezpieczenia Na poni szym rysunku zosta o przedstawione okno inspektora przegl darkiChrome
Jedn z naczelnych zasad jest unikanie przechowywania istotnych informacji w elementachznajduj cych si w strukturze DOM poniewa maj do nich dost p wszyscy u ytkownicy nawettacy ktoacuterzy z programowaniem maj niewiele do czynienia W zwi zku z tym usuniemy jez wywo ania skryptu savephp i zapiszemy je w sesji W pliku highscorephp musimy doda na-st puj cy kod
if ($json[intop] ampamp $time lt $obj-gttime ampamp $timeValid) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
151
$_SESSION[level] = $level $_SESSION[time] = $time
$i++
W skrypcie savephp musimy z sesji odczyta poziom i czas
$name = $_GET[name]$time = $_SESSION[time]$level = $_SESSION[level]
Te proste zmiany wystarcz by utrudni oszukiwanie w naszej grze
Zaciemnianie koduZaciemnianie kodu (ang obfuscating) jest bardzo prost technik ale przy tym ca kiem sku-teczn Przekszta cony w ten sposoacuteb kod trudno analizowa poniewa jest nieczytelny dlaludzi Poni ej znajduje si fragment kodu odpowiedzialnego za tablic wynikoacutew
if (status == finished) gameState = menu $(level_nb_2)html(currentLevel) $(level_nb_1)html(currentLevel + 1)
var finishedTime = Mathround((Datenow() - levelStart) 1000) $ajax( dataType json url highscorephp data level currentLevel time finishedTime async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + ltinput id=timeScore type=hidden value=+jsontop[i] time+gtltinputgt + ltinput id=level type=hidden value= +currentLevel+gtltinputgt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
152
$(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) gfx(group 0)
tilemap = loadNextLevel(group) gfx(playerdiv 0) gfy(playerdiv 0) gfsetAnimation(playerdiv playerAnimjump) ) status = stand
Ten sam kod poddany operacji zaciemniania (za pomoc narz dzia UglifyJS) wygl da nast puj co
if(finished==status)gameState=menu$(level_nb_2)html(currentLevel)$(level_nb_1)html(currentLevel+1)varfinishedTime=Mathround((Datenow()-levelStart)1e3)$ajax(dataTypejsonurlhighscorephpdatalevelcurrentLeveltimefinishedTimeasync1successfunction(a)for(var b=c=0atoplengthgtcc++)b+=aintopampampapos===cltinput id=name placeholder=_____ size=5gtltinput id=timeScore type=hidden value=+atop[c]time+gtltinputgt+ltinput id=level type=hidden value=+currentLevel+gtltinputgt+ +minSec(atop[c]time)+ lta id=saveScorehref=gtsubmitltagt ltbrgt+atop[c]name+ +minSec(atop[c]time)+ltbrgt$(top_list)html(b))fail(function())$(time)html(minSec(finishedTime))$(levelEnd)fadeIn(2e3function()$(backgroundFront)css(background-position0px0px)$(backgroundBack)css(background-position0px 0px)gfx(group0)tilemap=loadNextLevel(group)gfx(playerdiv0)gfy(playerdiv0)gfsetAnimation(playerdivplayerAnimjump))status=stand
Z ca pewno ci analiza takiego kodu jest du o trudniejsza a zyskujemy przy okazji co jeszczemdashprzetworzony w ten sposoacuteb kod jest kroacutetszy ni orygina
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
153
Mniej czytelny protokoacute sieciowyChocia poprawili my kod dzia aj cy po stronie klienta nadal istnieje mo liwo uzyskania do-st pu do warto ci przesy anych zmiennych poprzez analiz ruchu sieciowego Na poni szymrysunku zosta o przedstawione okno aplikacji nas uchuj cej ktoacutera wy wietla dane przesy ane pozako czeniu poziomu
Jest to problem poniewa w celu oszustwa u ytkownik nie musi modyfikowa kodu mdash wystarczysfa szowa pakiet przesy any na serwer Istniej trzy proste sposoby na utrudnienie analizowaniatransmitowanych danych
1 Nadawanie zmiennym przypadkowych nazw tak by na ich podstawie nie da o siokre li ich przeznaczenia
2 Kodowanie zawarto ci zmiennych U ytkownik zna przewa nie osi gni ty przez siebiewynik wi c na jego podstawie mo e znale w transmitowanych danych odpowiednizmienn i j zmodyfikowa Dzi ki zakodowaniu tej warto ci zadanie to stanie sitrudniejsze
3 Dodanie wielu przypadkowych zmiennych Dzi ki temu trudniej si domy li ktoacuteraz nich przechowuje istotne dane
Podobnie jak w przypadku wcze niej opisywanych metod te roacutewnie jedynie utrudniaj proacutebyoszustwa ale nie daj stuprocentowego zabezpieczenia Roacutewnoczesne zastosowanie kilkurozwi za mo e zniech ci nawet najbardziej zdeterminowanych oszustoacutew Poni ej znaj-dziesz propozycj implementacji ka dego z nich
Kodowanie warto ciZaczniemy od kodowania warto ci Mo na to zrobi na wiele sposoboacutew roacute ni cych si uzy-skiwanym stopniem bezpiecze stwa W naszym przypadku wystarczy utrudni odszukaniewyniku na li cie przesy anych zmiennych w zwi zku z czym nie musimy wprowadza adnej
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
154
skomplikowanej metody kodowania W kodzie klienta u yjemy operacji przesuni cia w lewo(ltlt) a na serwerze mdash przesuni cia w prawo (gtgt)
Oto kod skryptu dzia aj cego na kliencie
$ajax( dataType json url highscorephp data level currentLevel time finishedTime ltlt 1 async false success function (json) )
Odpowiedni fragment skryptu na serwerze
$time = intval($_GET[time]) gtgt 1
Aby jeszcze bardziej zmyli u ytkownika warto t prze lemy w wielu innych zmiennychktoacutere nie b d w ogoacutele brane pod uwag po stronie serwera
Przypadkowe nazwy zmiennychNie trzeba tu wiele wyja nia mdash wystarczy zmieni nazw zmiennej Je li chcesz jeszczebardziej utrudni zadanie oszustom mo esz zmienia t nazw przy ka dym daniu Poni ejpodstawowa wersja kodu
$ajax( dataType json url highscorephp data Nmyzsf currentLevel WfBCLQ finishedTime ltlt 1 async false success function (json) )
Kod po stronie serwera przyjmie nast puj c posta
$time = intval($_GET[WfBCLQ]) gtgt 1$level = $_GET[Nmyzsf]
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
155
Dodatkowe przypadkowe zmienneNazwy zmiennych nie oddaj ju znaczenia przechowywanych przez nie warto ci ale to niewszystko poniewa stosunkowo atwo sprawdzi ktoacutera z nich odpowiada za wynik Musimy wi cdoda wi cej zmiennych ktoacuterych zadaniem jest wprowadzenie oszusta w b d Przyk adowerozwi zanie zosta o przedstawione na poni szym listingu
$ajax( dataType json url highscorephp data sXZZUj Mathround(200Mathrandom()) enHf8F Mathround(200Mathrandom()) eZnqBG currentLevel avFanB Mathround(200Mathrandom()) zkpCfb currentLevel PCXFTR Mathround(200Mathrandom()) Nmyzsf currentLevel FYGswh Mathround(200Mathrandom()) C3kaTz finishedTime ltlt 1 gU7buf finishedTime ykN65g Mathround(200Mathrandom()) Q5jUZm Mathround(200Mathrandom()) bb5d7V Mathround(200Mathrandom()) WTsrdm finishedTime ltlt 1 bCW5Dg currentLevel AFM8MN Mathround(200Mathrandom()) FUHt6K Mathround(200Mathrandom()) WfBCLQ finishedTime ltlt 1 d8mzVn Mathround(200Mathrandom()) bHxNpb Mathround(200Mathrandom()) MWcmCz finishedTime ZAat42 Mathround(200Mathrandom()) async false success function (json) )
W kodzie serwera nie trzeba nic zmienia poniewa dodatkowe zmienne s po prostu igno-rowane Mo na oczywi cie jeszcze bardziej skomplikowa spraw i wprowadzi dodatkowezale no ci mi dzy zmiennymi Nale y jednak ca y czas pami ta ktoacutere zmienne przechowujistotne dane by roacutewnie sobie nie utrudni zadania
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
156
Integracja z TwitteremTwitter daje mo liwo dzielenia si z innymi kroacutetkimi informacjami W przypadku gier mo emyz niego skorzysta na dwa sposoby
mo emy umo liwi graczowi zalogowanie si do gry za pomoc nazwy u ytkownikai has a z Twittera
mo emy da mo liwo publikowania tweetoacutew z wynikami lub informacjamio post pach w grze
Zajmiemy si teraz zaimplementowaniem tych dwoacutech funkcji
Podstawy TwitteraIstnieje bardzo prosty sposoacuteb korzystania z Twittera ktoacutery nie wymaga znajomo ci adnegoAPI Je li u ytkownik jest zalogowany za po rednictwem odpowiednio przygotowanego adresuURL mo na opublikowa tweet URL powinien by zbudowany w nast puj cy sposoacuteb
httptwittercomhomestatus=Przyk adowy tweet
Wyroacute niony fragment adresu to tekst tweeta Na ekranie tablicy wynikoacutew obok przyciskuZatwierd umie cimy odsy acz Tweetnij
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmit ltagt + lta id=tweetScore target=_blank href=http twittercomhomestatus=+escape(W a nie uda o mi si sko czy +currentLevel+ poziom gry Yet Another Platformer w +minSec(jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
157
Najistotniejszy jest wyroacute niony fragment kodu bo to dzi ki niemu dzieje si to co powinno Za-stosowali my tu javascriptow funkcj escape by dostarczany test by poprawnie sformatowany
Jak wida bardzo atwo zaimplementowa to rozwi zanie ale trzeba wiedzie o kilku ograni-czeniach
Je li u ytkownik nie jest zalogowany pojawi si ekran logowania Twittera Na ekranie tablicy wynikoacutew nie mo na u y nazwy u ytkownika z Twittera
W zwi zku z tym nawet je li u ytkownik b dzie chcia tweetn swoacutej wyniki tak b dzie musia poda swoj nazw w grze
Publikowanie ka dego tweeta powoduje otwarcie nowego okna przegl darkiw ktoacuterym u ytkownik musi potwierdzi t operacj
Je li chcieliby my umo liwi u ytkownikowi zalogowanie si i automatyczne publikowanietweetoacutew bez konieczno ci ka dorazowego otwierania nowego okna musimy skorzysta z APITwittera
Pe ny dost p do API TwitteraNajpe niejsza integracja gry z Twitterem wymaga zapytania u ytkownika o zgod na po czeniejego konta z gr Mo na w tym celu skorzysta z mechanizmu OAuth ktoacutery jest otwartym stan-dardem uwierzytelniania stosowanym przez wiele firm takich jak Twitter Google czy Facebook
Aby da u ytkownikom mo liwo zalogowania si za po rednictwem Twittera musimy lekkozmodyfikowa ekran pocz tkowy
Je li gracz kliknie cze Rozpocznij gr zacznie od razu rozgrywk Je li z kolei kliknie Zalogujprzez Twittera b dzie si musia zalogowa za po rednictwem Twittera po czym nast pi powroacutetdo gry
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
158
Rejestrowanie gry w TwitterzeZanim przejdziemy dalej musimy zarejestrowa gr w Twitterze Aby to zrobi musisz sizalogowa na stron Twittera dla deweloperoacutew (httpsdevtwittercom) a nast pnie kliknpozycj My applications (moje aplikacje) w menu profilu
Nale y utworzy now aplikacj ( cze Create a new application) wype ni wszystkie wymaganepola oraz wyrazi zgod na warunki licencyjne (Rules of the Road) Po zatwierdzeniu wprowa-dzonych danych zostanie wy wietlona strona zawieraj ca dane utworzonej aplikacji
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
159
Trzeba zwroacuteci uwag na dwie informacje ktoacutere na rysunku zosta y otoczone ramk poniewab d potrzebne poacute niej Nale y wykona jeszcze jedn drobn modyfikacj konfiguracjiPrzejd do zak adki Settings (ustawienia) i przyjrzyj si sekcji Application Type (typ aplikacji)Domy lnie jest zaznaczone pole Read only (tylko do odczytu) Je li chcesz w imieniu graczapublikowa tweety musisz wybra opcj Read and Write
W ten sposoacuteb przygotowali my konto na Twitterze do integracji z gr
Pomocnicza bibliotekaKod realizuj cy komunikacj z API Twittera mo na napisa samemu w PHP ale to dosy mud-na praca Na szcz cie jest dost pnych wiele bibliotek ktoacutere mog to upro ci Jedn z nichprzeznaczon dla PHP jest twitteroauth (httpsgithubcomabrahamtwitteroauth) Istniejoczywi cie biblioteki dla innych j zykoacutew koniecznie zajrzyj do dokumentacji Twittera abydowiedzie si wi cej na ten temat
Du zalet biblioteki twitteroauth jest to e mo na j zainstalowa na prawie ka dym serwerzeobs uguj cym PHP Wystarczy skopiowa bibliotek do tego samego katalogu w ktoacuterym znajdujsi skrypty gry W naszym przypadku b dzie to podkatalog twitter
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
160
Musimy zacz od skonfigurowania biblioteki Przydatny b dzie przyk adowy skrypt konfigura-cyjny config-samplephp dost pny w podanym repozytorium Znajduje si w nim kod definiuj cytrzy sta e
define(CONSUMER_KEY (1))define(CONSUMER_SECRET (2))define(OAUTH_CALLBACK (3))
W miejscach (1) i (2) trzeba wpisa warto ci wy wietlone na stronie informacji o utworzonejaplikacji Twittera W miejscu (3) nale y poda adres URL skryptu zwrotnego callbackphp
Ostatnim krokiem jest zmodyfikowanie skryptu callbackphp tak by zawiera prawid oweprzekierowanie do g oacutewnego pliku naszej gry
header(Location indexphp)
UwierzytelnianieNa poni szym diagramie zosta przedstawiony sposoacuteb przeprowadzania uwierzytelniania i auto-ryzacji u ytkownikoacutew w grze za po rednictwem Twittera
W praktyce nie jest to tak skomplikowane na jakie wygl da przede wszystkim dlatego ewi kszo jest ju zaimplementowana w bibliotece twitteroauth Zajmiemy si utworzeniemstrony logowania wy wietlanej po klikni ciu przycisku Zaloguj przez Twittera U yjemy zwy-k ego odsy acza kieruj cego do pliku redirectphp Kiedy u ytkownik kliknie to cze po razpierwszy zostanie przekierowany na stron Twittera na ktoacuterej b dzie moacuteg autoryzowa dost pdo konta
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
161
Po wyra eniu zgody nast pi przekierowanie na adres ktoacutery zosta ustawiony w pliku callbackphpJe li u ytkownik ju raz wyrazi zgod na autoryzacj b dzie moacuteg od razu si zalogowa
W skryptach JavaScript bardzo przyda nam si teraz informacja o tym czy gracz jest po czonyczy nie Aby j uzyska musimy przekszta ci g oacutewny dokument HTML gry w plik PHP i umie-ci na jego pocz tku nast puj cy kod
ltphpsession_start()
require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
Pobranie tokenoacutew u 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-gtget(accountverify_credentials)gt
W tym kodzie rozpoczynamy sesj do czamy dwa pliki biblioteki twitteroauth oraz odczytuje-my token sesji Je li token jest ustawiony oznacza to e u ytkownik jest zalogowany do Twittera
Nast pnie serwer czy si z Twitterem aby pobra obiekt u ytkownika Tak to wygl da postronie serwera ale kod JavaScript wci nie ma informacji o zalogowaniu W zwi zku z tymmusimy utworzy skrypt przesy aj cy dane do kodu klienckiego
ltscript type=textjavascriptgtltphp if($_SESSION[status] == verified) gt var twitter = true var twitterName = ltphp print $user-gtscreen_name gtltphp else gt var twitter = falseltphp gtltscriptgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
162
Je li gracz jest zalogowany do Twittera globalna zmienna twitter ma warto true a zmiennatwitterName zawiera nazw u ytkownika
Ostatnim o co nale y zadba jest poinformowanie u ytkownika o pomy lnym zalogowaniu zapomoc Twittera i umo liwienie wylogowania si W tym celu musimy wprowadzi drobnzmian w kodzie odpowiedzialnym za ekran pocz tkowy wy wietlany po zalogowaniu
ltdiv id=startScreen class=screengt ltphp if($_SESSION[status] = verified) gt lta class=button tweetLink href=twitterredirectphpgtZaloguj przez Twitteraltagt ltphp else gt lta class=button tweetLink href=twitterclearsessionsphpgtWyloguj z Twitteraltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Po wprowadzeniu powy szych modyfikacji mo na uzna e uwierzytelnianie przez Twitterajest zaimplementowane
Publikowanie najlepszych wynikoacutew na TwitterzeTeraz kiedy gracz jest ju zalogowany do Twittera mo na publikowa jego wyniki w znaczniewygodniejszy sposoacuteb ni poprzednio Zaczniemy od utworzenia po stronie serwera skryptutwitterPostphp w ktoacuterym u yjemy interfejsu statusesupdate API Twittera
Spoacutejrzmy na kompletny skrypt
ltphpsession_start()require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
$time = $_SESSION[time]$level = $_SESSION[level]if (isset($time) ampamp isset($level)) Pobranie tokenoacutew u ytkownika z sesji $access_token = $_SESSION[access_token] $connection = new TwitterOAuth(CONSUMER_KEY CONSUMER_SECRET $access_token[oauth_token] $access_token[oauth_token_secret])
$parameters = array(status =gt W a nie uda o mi si sko czy $level poziom gry Yet Another Platformer w $time sekund) $status = $connection-gtpost(statusesupdate $parameters)gt
Najprawdopodobniej rozpoznajesz wi kszo kodu z powy szego listingu ktoacutery dodali my napocz tku skryptu ekranu pocz tkowego (tylko wyroacute niony kod jest nowy) W ostatnich dwoacutechwierszach tworzymy a nast pnie przesy amy do Twittera tekst ktoacutery chcemy opublikowa co
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
163
mdash jak wida mdash jest ca kiem proste Musimy jednak zaj si jeszcze jednym Poniewa graczjest zalogowany znamy jego nazw wi c mo emy j wykorzysta na ekranie tablicy wynikoacutew
W kodzie klienta utworzymy troch inn od dotychczasowej wersj tablicy wynikoacutew
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) if (twitter) top += ltinput id=name type=hidden value=+twitterName+gt + twitterName + + minSec(jsontop[i]time) + lta id=saveScore href=gtZatwierd ltagt + lta id=tweetScore href=gtTweetnijltagt ltbrgt else top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt + lta target=_blank href=httptwittercomhome status=+escape(w a nie uda o mi si sko czy +current Level+ poziom gry Yet Another Platformer w +minSec (jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Tworzymy tu niewidoczne pole wej ciowe przechowuj ce nazw u ytkownika pochodz cz Twittera Nast pnie wypisujemy t nazw na ekranie tablicy wynikoacutew Zwroacute uwag e niemusieli my w ogoacutele zmienia kodu po stronie serwera
Tyle na temat integracji z Twitterem Je eli chcesz dowiedzie si wi cej i rozszerzy funk-cjonalno gry zajrzyj do dokumentacji API Twittera
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
164
Integracja z FacebookiemIntegracja z Facebookiem i Twitterem jest w wielu aspektach podobna Facebook jest jednakw du o wi kszym stopniu nastawiony na gry Zajmiemy si implementacj osi gni dla zalo-gowanych u ytkownikoacutew Skorzystamy z SDK Facebooka dla PHP ale s roacutewnie dost pnerozwi zania dla innych j zykoacutew
Tak jak w przypadku Twittera tu roacutewnie musimy zacz od zarejestrowania aplikacji w Fa-cebooku W tym celu trzeba si zalogowa do serwisu dla deweloperoacutew (httpsdevelopers
facebookcom) i klikn pozycj Apps1
Nast pnie nale y klikn cze Create New App i wype ni obowi zkowe pola formularza Poich zatwierdzeniu pojawi si ekran z informacjami dotycz cymi nowej aplikacji Podobnie jakby o w przypadku Twittera tu roacutewnie najwa niejsze s dwie warto ci co wida na rysunku
1 Aby moacutec tworzy aplikacje trzeba si zarejestrowa jako programista W tym celu musisz klikn przycisk
Register as a Developer mdash przyp t um
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
165
Na powy szym zrzucie strza k zosta a oznaczona sekcja umo liwiaj ca wyboacuter sposobu inte-gracji aplikacji z Facebookiem Aby uzyska pe ny dost p do interfejsu Open Graph API Fa-cebooka ktoacutery umo liwia mi dzy innymi publikowanie osi gni trzeba zaznaczy pozycjAplikacja na Facebooku
Dzi ki temu gra mo e by uruchamiana w ramce (iframe) wewn trz strony Facebooka Jednakaby to by o mo liwe konieczny jest prawid owy certyfikat dla HTTPS obowi zuj cy w dome-nie w ktoacuterej jest dost pna gra Je li jednak chcemy by gra by a adowana z naszego serweranie ma tych wymaga ale i tak trzeba wpisa adres w odpowiednim polu (aby adres zostauznany za poprawny nale y poda https nawet je li nie ma si certyfikatu)
Jest jeszcze jedno co nale y zrobi by aplikacja mog a publikowa osi gni cia mdash nale y jzarejestrowa jako gr W tym celu wystarczy klikn pozycj Informacje o aplikacji a na-st pnie w sekcji Informacje o aplikacji w polach Kategoria ustawi pozycj Gry i ustali gatunekgry co wida na poni szym rysunku
Uwierzytelnianie przez FacebookaPodstawowy mechanizm uwierzytelniania jest bardzo podobny do tego z Twittera ale istniejepewna roacute nica w podej ciu do dost pu W przypadku Twittera mo na by o zdecydowa czyaplikacja ma prawa tylko do odczytu czy roacutewnie zapisu Facebook oferuje znacznie bogatszemo liwo ci ustalania poziomoacutew dost pu przy czym decyduje si o nich w czasie logowania
Kod odpowiedzialny za uwierzytelnianie zosta przedstawiony na poni szym listingu Tu roacutewnie jak w przypadku Twittera musimy umie ci na pocz tku skryptu kod pobieraj cy obiekt bie-
cego u ytkownika
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
166
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()gt
Wyroacute niony wiersz kodu odpowiada za wskazanie e z poziomu gry b dziemy chcieli publiko-wa wpisy na osi czasu u ytkownika W miejscach (1) i (2) nale y wpisa warto ci wy wietlonena stronie konfiguracji aplikacji w Facebooku
Je li zmienna $facebookUser to null oznacza to e u ytkownik jest ju zalogowany W prze-ciwnym przypadku musimy wy wietli przycisk logowania Musimy wi c napisa kod podobnydo tego ktoacutery s u y do wy wietlenia przycisku logowania za po rednictwem Twittera
ltdiv id=startScreen class=screengt ltphp if ($facebookUser) $loginUrl = $facebook-gtgetLoginUrl(array( scope =gt $scope redirect_uri =gt $app_url )) gt lta class=button tweetLink href=ltphp print $loginUrl gtgtZaloguj przez Facebookaltagt ltphp else $logoutUrl = $facebook-gtgetLogoutUrl(array( next =gt $app_url )) gt lta class=button tweetLink href=ltphp print $logoutUrlgtgtWyloguj z Facebookaltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
149
Mechanizmy utrudniaj ce oszukiwanieNie istnieje idealne rozwi zanie uniemo liwiaj ce oszukiwanie Problem ten jest szczegoacutelnieistotny w grach tworzonych w JavaScripcie poniewa bardzo atwo uzyska dost p do koduroacuted owego Mo na oczywi cie przekszta ci kod do nieczytelnej postaci ale to nie powstrzyma
zdeterminowanego oszusta a jedynie spowolni jego prac Istnieje jednak kilka innych technikdzi ki ktoacuterym proacuteby oszustw staj si trudniejsze i mniej op acalne
Weryfikacja po stronie serweraNajprostszym sposobem na utrudnienie oszukiwania jest przeniesienie cz ci kodu na serwerZrobili my tak z mechanizmem walki w grze tworzonej w rozdziale 7 W przypadku gry plat-formowej musieliby my przesy a na serwer informacje o wciskaniu klawiszy steruj cych po-staci na podstawie ktoacuterych skrypt okre la by jego nowe po o enie
W wi kszo ci przypadkoacutew nie da si zastosowa takiego rozwi zania w tego typu grach alemo na stworzy skrypt ktoacutery b dzie weryfikowa punktacj gracza po stronie serwera Wystarczyw kilku miejscach planszy umie ci niewidoczne punkty kontrolne po osi gni ciu ktoacuterych naserwer jest przesy ana stosowna informacja Dzi ki temu je li u ytkownik przes a na serwerpunktacj ale nie trafi y tam wcze niej informacje z punktoacutew kontrolnych wiemy e co jestnie tak Mo na te zastosowa podobne rozwi zanie ale bazuj ce na przyk ad na liczbie skokoacutewlub pora ek gracza
Tak czy inaczej trzeba wprowadzi w grze jak kolwiek form weryfikacji wynikoacutew Nie majednego najlepszego rozwi zania Musisz jednak pami ta by zastosowany mechanizm niewykry proacuteby oszustwa tam gdzie go nie ma czyli eby uczciwy gracz nie zosta o nie pos -dzony Istotny jest roacutewnie nak ad pracy wymagany do zaimplementowania tego typu mecha-nizmoacutew tak by praca nad nimi nie zaj a przypadkiem wi cej czasu ni tworzenie samej gry
W przedstawionym poni ej przyk adzie zastosujemy proste rozwi zanie Znamy maksymalnpr dko z jak mo e si porusza gracz wiemy te ile ma do przej cia wi c atwo jest obliczyminimalny czas potrzebny na zako czenie poziomu Wystarczy poroacutewna wynik gracza z twarto ci i sprawdzi czy nie jest mniejszy
Aby to zrobi trzeba uzupe ni skrypt highscorephp
gracz mo e przej 7 pikseli w 30 ms -gt 2331$minTime = array( 1 =gt 15 3500 2331 2 =gt 15 3500 2331 3 =gt 42 9800 2331 4 =gt 23 5460 2331)$timeValid = ($minTime[intval($level)] lt intval($time))while ($obj = mysqli_fetch_object($result))
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
150
if ($json[intop] ampamp $time lt $obj-gttime ampamp $timeValid)
Je li wynik osi gni ty przez gracza zosta uznany za nieprawdziwy zostanie wy wietlony alegracz nie b dzie moacuteg wpisa swojej nazwy
Mniej czytelne zmienneInnym rozwi zaniem jest zmniejszenie czytelno ci zmiennych tak by utrudni analiz danychprzesy anych na serwer oraz ich modyfikacj (dane te s w naszym przypadku zapisane w ukry-tych polach formularza) Rozwi zanie to wydaje si dobre ale niestety nietrudno jest obej ta-kie zabezpieczenia Na poni szym rysunku zosta o przedstawione okno inspektora przegl darkiChrome
Jedn z naczelnych zasad jest unikanie przechowywania istotnych informacji w elementachznajduj cych si w strukturze DOM poniewa maj do nich dost p wszyscy u ytkownicy nawettacy ktoacuterzy z programowaniem maj niewiele do czynienia W zwi zku z tym usuniemy jez wywo ania skryptu savephp i zapiszemy je w sesji W pliku highscorephp musimy doda na-st puj cy kod
if ($json[intop] ampamp $time lt $obj-gttime ampamp $timeValid) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
151
$_SESSION[level] = $level $_SESSION[time] = $time
$i++
W skrypcie savephp musimy z sesji odczyta poziom i czas
$name = $_GET[name]$time = $_SESSION[time]$level = $_SESSION[level]
Te proste zmiany wystarcz by utrudni oszukiwanie w naszej grze
Zaciemnianie koduZaciemnianie kodu (ang obfuscating) jest bardzo prost technik ale przy tym ca kiem sku-teczn Przekszta cony w ten sposoacuteb kod trudno analizowa poniewa jest nieczytelny dlaludzi Poni ej znajduje si fragment kodu odpowiedzialnego za tablic wynikoacutew
if (status == finished) gameState = menu $(level_nb_2)html(currentLevel) $(level_nb_1)html(currentLevel + 1)
var finishedTime = Mathround((Datenow() - levelStart) 1000) $ajax( dataType json url highscorephp data level currentLevel time finishedTime async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + ltinput id=timeScore type=hidden value=+jsontop[i] time+gtltinputgt + ltinput id=level type=hidden value= +currentLevel+gtltinputgt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
152
$(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) gfx(group 0)
tilemap = loadNextLevel(group) gfx(playerdiv 0) gfy(playerdiv 0) gfsetAnimation(playerdiv playerAnimjump) ) status = stand
Ten sam kod poddany operacji zaciemniania (za pomoc narz dzia UglifyJS) wygl da nast puj co
if(finished==status)gameState=menu$(level_nb_2)html(currentLevel)$(level_nb_1)html(currentLevel+1)varfinishedTime=Mathround((Datenow()-levelStart)1e3)$ajax(dataTypejsonurlhighscorephpdatalevelcurrentLeveltimefinishedTimeasync1successfunction(a)for(var b=c=0atoplengthgtcc++)b+=aintopampampapos===cltinput id=name placeholder=_____ size=5gtltinput id=timeScore type=hidden value=+atop[c]time+gtltinputgt+ltinput id=level type=hidden value=+currentLevel+gtltinputgt+ +minSec(atop[c]time)+ lta id=saveScorehref=gtsubmitltagt ltbrgt+atop[c]name+ +minSec(atop[c]time)+ltbrgt$(top_list)html(b))fail(function())$(time)html(minSec(finishedTime))$(levelEnd)fadeIn(2e3function()$(backgroundFront)css(background-position0px0px)$(backgroundBack)css(background-position0px 0px)gfx(group0)tilemap=loadNextLevel(group)gfx(playerdiv0)gfy(playerdiv0)gfsetAnimation(playerdivplayerAnimjump))status=stand
Z ca pewno ci analiza takiego kodu jest du o trudniejsza a zyskujemy przy okazji co jeszczemdashprzetworzony w ten sposoacuteb kod jest kroacutetszy ni orygina
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
153
Mniej czytelny protokoacute sieciowyChocia poprawili my kod dzia aj cy po stronie klienta nadal istnieje mo liwo uzyskania do-st pu do warto ci przesy anych zmiennych poprzez analiz ruchu sieciowego Na poni szymrysunku zosta o przedstawione okno aplikacji nas uchuj cej ktoacutera wy wietla dane przesy ane pozako czeniu poziomu
Jest to problem poniewa w celu oszustwa u ytkownik nie musi modyfikowa kodu mdash wystarczysfa szowa pakiet przesy any na serwer Istniej trzy proste sposoby na utrudnienie analizowaniatransmitowanych danych
1 Nadawanie zmiennym przypadkowych nazw tak by na ich podstawie nie da o siokre li ich przeznaczenia
2 Kodowanie zawarto ci zmiennych U ytkownik zna przewa nie osi gni ty przez siebiewynik wi c na jego podstawie mo e znale w transmitowanych danych odpowiednizmienn i j zmodyfikowa Dzi ki zakodowaniu tej warto ci zadanie to stanie sitrudniejsze
3 Dodanie wielu przypadkowych zmiennych Dzi ki temu trudniej si domy li ktoacuteraz nich przechowuje istotne dane
Podobnie jak w przypadku wcze niej opisywanych metod te roacutewnie jedynie utrudniaj proacutebyoszustwa ale nie daj stuprocentowego zabezpieczenia Roacutewnoczesne zastosowanie kilkurozwi za mo e zniech ci nawet najbardziej zdeterminowanych oszustoacutew Poni ej znaj-dziesz propozycj implementacji ka dego z nich
Kodowanie warto ciZaczniemy od kodowania warto ci Mo na to zrobi na wiele sposoboacutew roacute ni cych si uzy-skiwanym stopniem bezpiecze stwa W naszym przypadku wystarczy utrudni odszukaniewyniku na li cie przesy anych zmiennych w zwi zku z czym nie musimy wprowadza adnej
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
154
skomplikowanej metody kodowania W kodzie klienta u yjemy operacji przesuni cia w lewo(ltlt) a na serwerze mdash przesuni cia w prawo (gtgt)
Oto kod skryptu dzia aj cego na kliencie
$ajax( dataType json url highscorephp data level currentLevel time finishedTime ltlt 1 async false success function (json) )
Odpowiedni fragment skryptu na serwerze
$time = intval($_GET[time]) gtgt 1
Aby jeszcze bardziej zmyli u ytkownika warto t prze lemy w wielu innych zmiennychktoacutere nie b d w ogoacutele brane pod uwag po stronie serwera
Przypadkowe nazwy zmiennychNie trzeba tu wiele wyja nia mdash wystarczy zmieni nazw zmiennej Je li chcesz jeszczebardziej utrudni zadanie oszustom mo esz zmienia t nazw przy ka dym daniu Poni ejpodstawowa wersja kodu
$ajax( dataType json url highscorephp data Nmyzsf currentLevel WfBCLQ finishedTime ltlt 1 async false success function (json) )
Kod po stronie serwera przyjmie nast puj c posta
$time = intval($_GET[WfBCLQ]) gtgt 1$level = $_GET[Nmyzsf]
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
155
Dodatkowe przypadkowe zmienneNazwy zmiennych nie oddaj ju znaczenia przechowywanych przez nie warto ci ale to niewszystko poniewa stosunkowo atwo sprawdzi ktoacutera z nich odpowiada za wynik Musimy wi cdoda wi cej zmiennych ktoacuterych zadaniem jest wprowadzenie oszusta w b d Przyk adowerozwi zanie zosta o przedstawione na poni szym listingu
$ajax( dataType json url highscorephp data sXZZUj Mathround(200Mathrandom()) enHf8F Mathround(200Mathrandom()) eZnqBG currentLevel avFanB Mathround(200Mathrandom()) zkpCfb currentLevel PCXFTR Mathround(200Mathrandom()) Nmyzsf currentLevel FYGswh Mathround(200Mathrandom()) C3kaTz finishedTime ltlt 1 gU7buf finishedTime ykN65g Mathround(200Mathrandom()) Q5jUZm Mathround(200Mathrandom()) bb5d7V Mathround(200Mathrandom()) WTsrdm finishedTime ltlt 1 bCW5Dg currentLevel AFM8MN Mathround(200Mathrandom()) FUHt6K Mathround(200Mathrandom()) WfBCLQ finishedTime ltlt 1 d8mzVn Mathround(200Mathrandom()) bHxNpb Mathround(200Mathrandom()) MWcmCz finishedTime ZAat42 Mathround(200Mathrandom()) async false success function (json) )
W kodzie serwera nie trzeba nic zmienia poniewa dodatkowe zmienne s po prostu igno-rowane Mo na oczywi cie jeszcze bardziej skomplikowa spraw i wprowadzi dodatkowezale no ci mi dzy zmiennymi Nale y jednak ca y czas pami ta ktoacutere zmienne przechowujistotne dane by roacutewnie sobie nie utrudni zadania
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
156
Integracja z TwitteremTwitter daje mo liwo dzielenia si z innymi kroacutetkimi informacjami W przypadku gier mo emyz niego skorzysta na dwa sposoby
mo emy umo liwi graczowi zalogowanie si do gry za pomoc nazwy u ytkownikai has a z Twittera
mo emy da mo liwo publikowania tweetoacutew z wynikami lub informacjamio post pach w grze
Zajmiemy si teraz zaimplementowaniem tych dwoacutech funkcji
Podstawy TwitteraIstnieje bardzo prosty sposoacuteb korzystania z Twittera ktoacutery nie wymaga znajomo ci adnegoAPI Je li u ytkownik jest zalogowany za po rednictwem odpowiednio przygotowanego adresuURL mo na opublikowa tweet URL powinien by zbudowany w nast puj cy sposoacuteb
httptwittercomhomestatus=Przyk adowy tweet
Wyroacute niony fragment adresu to tekst tweeta Na ekranie tablicy wynikoacutew obok przyciskuZatwierd umie cimy odsy acz Tweetnij
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmit ltagt + lta id=tweetScore target=_blank href=http twittercomhomestatus=+escape(W a nie uda o mi si sko czy +currentLevel+ poziom gry Yet Another Platformer w +minSec(jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
157
Najistotniejszy jest wyroacute niony fragment kodu bo to dzi ki niemu dzieje si to co powinno Za-stosowali my tu javascriptow funkcj escape by dostarczany test by poprawnie sformatowany
Jak wida bardzo atwo zaimplementowa to rozwi zanie ale trzeba wiedzie o kilku ograni-czeniach
Je li u ytkownik nie jest zalogowany pojawi si ekran logowania Twittera Na ekranie tablicy wynikoacutew nie mo na u y nazwy u ytkownika z Twittera
W zwi zku z tym nawet je li u ytkownik b dzie chcia tweetn swoacutej wyniki tak b dzie musia poda swoj nazw w grze
Publikowanie ka dego tweeta powoduje otwarcie nowego okna przegl darkiw ktoacuterym u ytkownik musi potwierdzi t operacj
Je li chcieliby my umo liwi u ytkownikowi zalogowanie si i automatyczne publikowanietweetoacutew bez konieczno ci ka dorazowego otwierania nowego okna musimy skorzysta z APITwittera
Pe ny dost p do API TwitteraNajpe niejsza integracja gry z Twitterem wymaga zapytania u ytkownika o zgod na po czeniejego konta z gr Mo na w tym celu skorzysta z mechanizmu OAuth ktoacutery jest otwartym stan-dardem uwierzytelniania stosowanym przez wiele firm takich jak Twitter Google czy Facebook
Aby da u ytkownikom mo liwo zalogowania si za po rednictwem Twittera musimy lekkozmodyfikowa ekran pocz tkowy
Je li gracz kliknie cze Rozpocznij gr zacznie od razu rozgrywk Je li z kolei kliknie Zalogujprzez Twittera b dzie si musia zalogowa za po rednictwem Twittera po czym nast pi powroacutetdo gry
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
158
Rejestrowanie gry w TwitterzeZanim przejdziemy dalej musimy zarejestrowa gr w Twitterze Aby to zrobi musisz sizalogowa na stron Twittera dla deweloperoacutew (httpsdevtwittercom) a nast pnie kliknpozycj My applications (moje aplikacje) w menu profilu
Nale y utworzy now aplikacj ( cze Create a new application) wype ni wszystkie wymaganepola oraz wyrazi zgod na warunki licencyjne (Rules of the Road) Po zatwierdzeniu wprowa-dzonych danych zostanie wy wietlona strona zawieraj ca dane utworzonej aplikacji
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
159
Trzeba zwroacuteci uwag na dwie informacje ktoacutere na rysunku zosta y otoczone ramk poniewab d potrzebne poacute niej Nale y wykona jeszcze jedn drobn modyfikacj konfiguracjiPrzejd do zak adki Settings (ustawienia) i przyjrzyj si sekcji Application Type (typ aplikacji)Domy lnie jest zaznaczone pole Read only (tylko do odczytu) Je li chcesz w imieniu graczapublikowa tweety musisz wybra opcj Read and Write
W ten sposoacuteb przygotowali my konto na Twitterze do integracji z gr
Pomocnicza bibliotekaKod realizuj cy komunikacj z API Twittera mo na napisa samemu w PHP ale to dosy mud-na praca Na szcz cie jest dost pnych wiele bibliotek ktoacutere mog to upro ci Jedn z nichprzeznaczon dla PHP jest twitteroauth (httpsgithubcomabrahamtwitteroauth) Istniejoczywi cie biblioteki dla innych j zykoacutew koniecznie zajrzyj do dokumentacji Twittera abydowiedzie si wi cej na ten temat
Du zalet biblioteki twitteroauth jest to e mo na j zainstalowa na prawie ka dym serwerzeobs uguj cym PHP Wystarczy skopiowa bibliotek do tego samego katalogu w ktoacuterym znajdujsi skrypty gry W naszym przypadku b dzie to podkatalog twitter
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
160
Musimy zacz od skonfigurowania biblioteki Przydatny b dzie przyk adowy skrypt konfigura-cyjny config-samplephp dost pny w podanym repozytorium Znajduje si w nim kod definiuj cytrzy sta e
define(CONSUMER_KEY (1))define(CONSUMER_SECRET (2))define(OAUTH_CALLBACK (3))
W miejscach (1) i (2) trzeba wpisa warto ci wy wietlone na stronie informacji o utworzonejaplikacji Twittera W miejscu (3) nale y poda adres URL skryptu zwrotnego callbackphp
Ostatnim krokiem jest zmodyfikowanie skryptu callbackphp tak by zawiera prawid oweprzekierowanie do g oacutewnego pliku naszej gry
header(Location indexphp)
UwierzytelnianieNa poni szym diagramie zosta przedstawiony sposoacuteb przeprowadzania uwierzytelniania i auto-ryzacji u ytkownikoacutew w grze za po rednictwem Twittera
W praktyce nie jest to tak skomplikowane na jakie wygl da przede wszystkim dlatego ewi kszo jest ju zaimplementowana w bibliotece twitteroauth Zajmiemy si utworzeniemstrony logowania wy wietlanej po klikni ciu przycisku Zaloguj przez Twittera U yjemy zwy-k ego odsy acza kieruj cego do pliku redirectphp Kiedy u ytkownik kliknie to cze po razpierwszy zostanie przekierowany na stron Twittera na ktoacuterej b dzie moacuteg autoryzowa dost pdo konta
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
161
Po wyra eniu zgody nast pi przekierowanie na adres ktoacutery zosta ustawiony w pliku callbackphpJe li u ytkownik ju raz wyrazi zgod na autoryzacj b dzie moacuteg od razu si zalogowa
W skryptach JavaScript bardzo przyda nam si teraz informacja o tym czy gracz jest po czonyczy nie Aby j uzyska musimy przekszta ci g oacutewny dokument HTML gry w plik PHP i umie-ci na jego pocz tku nast puj cy kod
ltphpsession_start()
require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
Pobranie tokenoacutew u 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-gtget(accountverify_credentials)gt
W tym kodzie rozpoczynamy sesj do czamy dwa pliki biblioteki twitteroauth oraz odczytuje-my token sesji Je li token jest ustawiony oznacza to e u ytkownik jest zalogowany do Twittera
Nast pnie serwer czy si z Twitterem aby pobra obiekt u ytkownika Tak to wygl da postronie serwera ale kod JavaScript wci nie ma informacji o zalogowaniu W zwi zku z tymmusimy utworzy skrypt przesy aj cy dane do kodu klienckiego
ltscript type=textjavascriptgtltphp if($_SESSION[status] == verified) gt var twitter = true var twitterName = ltphp print $user-gtscreen_name gtltphp else gt var twitter = falseltphp gtltscriptgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
162
Je li gracz jest zalogowany do Twittera globalna zmienna twitter ma warto true a zmiennatwitterName zawiera nazw u ytkownika
Ostatnim o co nale y zadba jest poinformowanie u ytkownika o pomy lnym zalogowaniu zapomoc Twittera i umo liwienie wylogowania si W tym celu musimy wprowadzi drobnzmian w kodzie odpowiedzialnym za ekran pocz tkowy wy wietlany po zalogowaniu
ltdiv id=startScreen class=screengt ltphp if($_SESSION[status] = verified) gt lta class=button tweetLink href=twitterredirectphpgtZaloguj przez Twitteraltagt ltphp else gt lta class=button tweetLink href=twitterclearsessionsphpgtWyloguj z Twitteraltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Po wprowadzeniu powy szych modyfikacji mo na uzna e uwierzytelnianie przez Twitterajest zaimplementowane
Publikowanie najlepszych wynikoacutew na TwitterzeTeraz kiedy gracz jest ju zalogowany do Twittera mo na publikowa jego wyniki w znaczniewygodniejszy sposoacuteb ni poprzednio Zaczniemy od utworzenia po stronie serwera skryptutwitterPostphp w ktoacuterym u yjemy interfejsu statusesupdate API Twittera
Spoacutejrzmy na kompletny skrypt
ltphpsession_start()require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
$time = $_SESSION[time]$level = $_SESSION[level]if (isset($time) ampamp isset($level)) Pobranie tokenoacutew u ytkownika z sesji $access_token = $_SESSION[access_token] $connection = new TwitterOAuth(CONSUMER_KEY CONSUMER_SECRET $access_token[oauth_token] $access_token[oauth_token_secret])
$parameters = array(status =gt W a nie uda o mi si sko czy $level poziom gry Yet Another Platformer w $time sekund) $status = $connection-gtpost(statusesupdate $parameters)gt
Najprawdopodobniej rozpoznajesz wi kszo kodu z powy szego listingu ktoacutery dodali my napocz tku skryptu ekranu pocz tkowego (tylko wyroacute niony kod jest nowy) W ostatnich dwoacutechwierszach tworzymy a nast pnie przesy amy do Twittera tekst ktoacutery chcemy opublikowa co
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
163
mdash jak wida mdash jest ca kiem proste Musimy jednak zaj si jeszcze jednym Poniewa graczjest zalogowany znamy jego nazw wi c mo emy j wykorzysta na ekranie tablicy wynikoacutew
W kodzie klienta utworzymy troch inn od dotychczasowej wersj tablicy wynikoacutew
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) if (twitter) top += ltinput id=name type=hidden value=+twitterName+gt + twitterName + + minSec(jsontop[i]time) + lta id=saveScore href=gtZatwierd ltagt + lta id=tweetScore href=gtTweetnijltagt ltbrgt else top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt + lta target=_blank href=httptwittercomhome status=+escape(w a nie uda o mi si sko czy +current Level+ poziom gry Yet Another Platformer w +minSec (jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Tworzymy tu niewidoczne pole wej ciowe przechowuj ce nazw u ytkownika pochodz cz Twittera Nast pnie wypisujemy t nazw na ekranie tablicy wynikoacutew Zwroacute uwag e niemusieli my w ogoacutele zmienia kodu po stronie serwera
Tyle na temat integracji z Twitterem Je eli chcesz dowiedzie si wi cej i rozszerzy funk-cjonalno gry zajrzyj do dokumentacji API Twittera
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
164
Integracja z FacebookiemIntegracja z Facebookiem i Twitterem jest w wielu aspektach podobna Facebook jest jednakw du o wi kszym stopniu nastawiony na gry Zajmiemy si implementacj osi gni dla zalo-gowanych u ytkownikoacutew Skorzystamy z SDK Facebooka dla PHP ale s roacutewnie dost pnerozwi zania dla innych j zykoacutew
Tak jak w przypadku Twittera tu roacutewnie musimy zacz od zarejestrowania aplikacji w Fa-cebooku W tym celu trzeba si zalogowa do serwisu dla deweloperoacutew (httpsdevelopers
facebookcom) i klikn pozycj Apps1
Nast pnie nale y klikn cze Create New App i wype ni obowi zkowe pola formularza Poich zatwierdzeniu pojawi si ekran z informacjami dotycz cymi nowej aplikacji Podobnie jakby o w przypadku Twittera tu roacutewnie najwa niejsze s dwie warto ci co wida na rysunku
1 Aby moacutec tworzy aplikacje trzeba si zarejestrowa jako programista W tym celu musisz klikn przycisk
Register as a Developer mdash przyp t um
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
165
Na powy szym zrzucie strza k zosta a oznaczona sekcja umo liwiaj ca wyboacuter sposobu inte-gracji aplikacji z Facebookiem Aby uzyska pe ny dost p do interfejsu Open Graph API Fa-cebooka ktoacutery umo liwia mi dzy innymi publikowanie osi gni trzeba zaznaczy pozycjAplikacja na Facebooku
Dzi ki temu gra mo e by uruchamiana w ramce (iframe) wewn trz strony Facebooka Jednakaby to by o mo liwe konieczny jest prawid owy certyfikat dla HTTPS obowi zuj cy w dome-nie w ktoacuterej jest dost pna gra Je li jednak chcemy by gra by a adowana z naszego serweranie ma tych wymaga ale i tak trzeba wpisa adres w odpowiednim polu (aby adres zostauznany za poprawny nale y poda https nawet je li nie ma si certyfikatu)
Jest jeszcze jedno co nale y zrobi by aplikacja mog a publikowa osi gni cia mdash nale y jzarejestrowa jako gr W tym celu wystarczy klikn pozycj Informacje o aplikacji a na-st pnie w sekcji Informacje o aplikacji w polach Kategoria ustawi pozycj Gry i ustali gatunekgry co wida na poni szym rysunku
Uwierzytelnianie przez FacebookaPodstawowy mechanizm uwierzytelniania jest bardzo podobny do tego z Twittera ale istniejepewna roacute nica w podej ciu do dost pu W przypadku Twittera mo na by o zdecydowa czyaplikacja ma prawa tylko do odczytu czy roacutewnie zapisu Facebook oferuje znacznie bogatszemo liwo ci ustalania poziomoacutew dost pu przy czym decyduje si o nich w czasie logowania
Kod odpowiedzialny za uwierzytelnianie zosta przedstawiony na poni szym listingu Tu roacutewnie jak w przypadku Twittera musimy umie ci na pocz tku skryptu kod pobieraj cy obiekt bie-
cego u ytkownika
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
166
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()gt
Wyroacute niony wiersz kodu odpowiada za wskazanie e z poziomu gry b dziemy chcieli publiko-wa wpisy na osi czasu u ytkownika W miejscach (1) i (2) nale y wpisa warto ci wy wietlonena stronie konfiguracji aplikacji w Facebooku
Je li zmienna $facebookUser to null oznacza to e u ytkownik jest ju zalogowany W prze-ciwnym przypadku musimy wy wietli przycisk logowania Musimy wi c napisa kod podobnydo tego ktoacutery s u y do wy wietlenia przycisku logowania za po rednictwem Twittera
ltdiv id=startScreen class=screengt ltphp if ($facebookUser) $loginUrl = $facebook-gtgetLoginUrl(array( scope =gt $scope redirect_uri =gt $app_url )) gt lta class=button tweetLink href=ltphp print $loginUrl gtgtZaloguj przez Facebookaltagt ltphp else $logoutUrl = $facebook-gtgetLogoutUrl(array( next =gt $app_url )) gt lta class=button tweetLink href=ltphp print $logoutUrlgtgtWyloguj z Facebookaltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
150
if ($json[intop] ampamp $time lt $obj-gttime ampamp $timeValid)
Je li wynik osi gni ty przez gracza zosta uznany za nieprawdziwy zostanie wy wietlony alegracz nie b dzie moacuteg wpisa swojej nazwy
Mniej czytelne zmienneInnym rozwi zaniem jest zmniejszenie czytelno ci zmiennych tak by utrudni analiz danychprzesy anych na serwer oraz ich modyfikacj (dane te s w naszym przypadku zapisane w ukry-tych polach formularza) Rozwi zanie to wydaje si dobre ale niestety nietrudno jest obej ta-kie zabezpieczenia Na poni szym rysunku zosta o przedstawione okno inspektora przegl darkiChrome
Jedn z naczelnych zasad jest unikanie przechowywania istotnych informacji w elementachznajduj cych si w strukturze DOM poniewa maj do nich dost p wszyscy u ytkownicy nawettacy ktoacuterzy z programowaniem maj niewiele do czynienia W zwi zku z tym usuniemy jez wywo ania skryptu savephp i zapiszemy je w sesji W pliku highscorephp musimy doda na-st puj cy kod
if ($json[intop] ampamp $time lt $obj-gttime ampamp $timeValid) $json[intop] = true $json[pos] = $i
array_push($json[top] array(time=gt$time))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
151
$_SESSION[level] = $level $_SESSION[time] = $time
$i++
W skrypcie savephp musimy z sesji odczyta poziom i czas
$name = $_GET[name]$time = $_SESSION[time]$level = $_SESSION[level]
Te proste zmiany wystarcz by utrudni oszukiwanie w naszej grze
Zaciemnianie koduZaciemnianie kodu (ang obfuscating) jest bardzo prost technik ale przy tym ca kiem sku-teczn Przekszta cony w ten sposoacuteb kod trudno analizowa poniewa jest nieczytelny dlaludzi Poni ej znajduje si fragment kodu odpowiedzialnego za tablic wynikoacutew
if (status == finished) gameState = menu $(level_nb_2)html(currentLevel) $(level_nb_1)html(currentLevel + 1)
var finishedTime = Mathround((Datenow() - levelStart) 1000) $ajax( dataType json url highscorephp data level currentLevel time finishedTime async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + ltinput id=timeScore type=hidden value=+jsontop[i] time+gtltinputgt + ltinput id=level type=hidden value= +currentLevel+gtltinputgt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
152
$(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) gfx(group 0)
tilemap = loadNextLevel(group) gfx(playerdiv 0) gfy(playerdiv 0) gfsetAnimation(playerdiv playerAnimjump) ) status = stand
Ten sam kod poddany operacji zaciemniania (za pomoc narz dzia UglifyJS) wygl da nast puj co
if(finished==status)gameState=menu$(level_nb_2)html(currentLevel)$(level_nb_1)html(currentLevel+1)varfinishedTime=Mathround((Datenow()-levelStart)1e3)$ajax(dataTypejsonurlhighscorephpdatalevelcurrentLeveltimefinishedTimeasync1successfunction(a)for(var b=c=0atoplengthgtcc++)b+=aintopampampapos===cltinput id=name placeholder=_____ size=5gtltinput id=timeScore type=hidden value=+atop[c]time+gtltinputgt+ltinput id=level type=hidden value=+currentLevel+gtltinputgt+ +minSec(atop[c]time)+ lta id=saveScorehref=gtsubmitltagt ltbrgt+atop[c]name+ +minSec(atop[c]time)+ltbrgt$(top_list)html(b))fail(function())$(time)html(minSec(finishedTime))$(levelEnd)fadeIn(2e3function()$(backgroundFront)css(background-position0px0px)$(backgroundBack)css(background-position0px 0px)gfx(group0)tilemap=loadNextLevel(group)gfx(playerdiv0)gfy(playerdiv0)gfsetAnimation(playerdivplayerAnimjump))status=stand
Z ca pewno ci analiza takiego kodu jest du o trudniejsza a zyskujemy przy okazji co jeszczemdashprzetworzony w ten sposoacuteb kod jest kroacutetszy ni orygina
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
153
Mniej czytelny protokoacute sieciowyChocia poprawili my kod dzia aj cy po stronie klienta nadal istnieje mo liwo uzyskania do-st pu do warto ci przesy anych zmiennych poprzez analiz ruchu sieciowego Na poni szymrysunku zosta o przedstawione okno aplikacji nas uchuj cej ktoacutera wy wietla dane przesy ane pozako czeniu poziomu
Jest to problem poniewa w celu oszustwa u ytkownik nie musi modyfikowa kodu mdash wystarczysfa szowa pakiet przesy any na serwer Istniej trzy proste sposoby na utrudnienie analizowaniatransmitowanych danych
1 Nadawanie zmiennym przypadkowych nazw tak by na ich podstawie nie da o siokre li ich przeznaczenia
2 Kodowanie zawarto ci zmiennych U ytkownik zna przewa nie osi gni ty przez siebiewynik wi c na jego podstawie mo e znale w transmitowanych danych odpowiednizmienn i j zmodyfikowa Dzi ki zakodowaniu tej warto ci zadanie to stanie sitrudniejsze
3 Dodanie wielu przypadkowych zmiennych Dzi ki temu trudniej si domy li ktoacuteraz nich przechowuje istotne dane
Podobnie jak w przypadku wcze niej opisywanych metod te roacutewnie jedynie utrudniaj proacutebyoszustwa ale nie daj stuprocentowego zabezpieczenia Roacutewnoczesne zastosowanie kilkurozwi za mo e zniech ci nawet najbardziej zdeterminowanych oszustoacutew Poni ej znaj-dziesz propozycj implementacji ka dego z nich
Kodowanie warto ciZaczniemy od kodowania warto ci Mo na to zrobi na wiele sposoboacutew roacute ni cych si uzy-skiwanym stopniem bezpiecze stwa W naszym przypadku wystarczy utrudni odszukaniewyniku na li cie przesy anych zmiennych w zwi zku z czym nie musimy wprowadza adnej
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
154
skomplikowanej metody kodowania W kodzie klienta u yjemy operacji przesuni cia w lewo(ltlt) a na serwerze mdash przesuni cia w prawo (gtgt)
Oto kod skryptu dzia aj cego na kliencie
$ajax( dataType json url highscorephp data level currentLevel time finishedTime ltlt 1 async false success function (json) )
Odpowiedni fragment skryptu na serwerze
$time = intval($_GET[time]) gtgt 1
Aby jeszcze bardziej zmyli u ytkownika warto t prze lemy w wielu innych zmiennychktoacutere nie b d w ogoacutele brane pod uwag po stronie serwera
Przypadkowe nazwy zmiennychNie trzeba tu wiele wyja nia mdash wystarczy zmieni nazw zmiennej Je li chcesz jeszczebardziej utrudni zadanie oszustom mo esz zmienia t nazw przy ka dym daniu Poni ejpodstawowa wersja kodu
$ajax( dataType json url highscorephp data Nmyzsf currentLevel WfBCLQ finishedTime ltlt 1 async false success function (json) )
Kod po stronie serwera przyjmie nast puj c posta
$time = intval($_GET[WfBCLQ]) gtgt 1$level = $_GET[Nmyzsf]
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
155
Dodatkowe przypadkowe zmienneNazwy zmiennych nie oddaj ju znaczenia przechowywanych przez nie warto ci ale to niewszystko poniewa stosunkowo atwo sprawdzi ktoacutera z nich odpowiada za wynik Musimy wi cdoda wi cej zmiennych ktoacuterych zadaniem jest wprowadzenie oszusta w b d Przyk adowerozwi zanie zosta o przedstawione na poni szym listingu
$ajax( dataType json url highscorephp data sXZZUj Mathround(200Mathrandom()) enHf8F Mathround(200Mathrandom()) eZnqBG currentLevel avFanB Mathround(200Mathrandom()) zkpCfb currentLevel PCXFTR Mathround(200Mathrandom()) Nmyzsf currentLevel FYGswh Mathround(200Mathrandom()) C3kaTz finishedTime ltlt 1 gU7buf finishedTime ykN65g Mathround(200Mathrandom()) Q5jUZm Mathround(200Mathrandom()) bb5d7V Mathround(200Mathrandom()) WTsrdm finishedTime ltlt 1 bCW5Dg currentLevel AFM8MN Mathround(200Mathrandom()) FUHt6K Mathround(200Mathrandom()) WfBCLQ finishedTime ltlt 1 d8mzVn Mathround(200Mathrandom()) bHxNpb Mathround(200Mathrandom()) MWcmCz finishedTime ZAat42 Mathround(200Mathrandom()) async false success function (json) )
W kodzie serwera nie trzeba nic zmienia poniewa dodatkowe zmienne s po prostu igno-rowane Mo na oczywi cie jeszcze bardziej skomplikowa spraw i wprowadzi dodatkowezale no ci mi dzy zmiennymi Nale y jednak ca y czas pami ta ktoacutere zmienne przechowujistotne dane by roacutewnie sobie nie utrudni zadania
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
156
Integracja z TwitteremTwitter daje mo liwo dzielenia si z innymi kroacutetkimi informacjami W przypadku gier mo emyz niego skorzysta na dwa sposoby
mo emy umo liwi graczowi zalogowanie si do gry za pomoc nazwy u ytkownikai has a z Twittera
mo emy da mo liwo publikowania tweetoacutew z wynikami lub informacjamio post pach w grze
Zajmiemy si teraz zaimplementowaniem tych dwoacutech funkcji
Podstawy TwitteraIstnieje bardzo prosty sposoacuteb korzystania z Twittera ktoacutery nie wymaga znajomo ci adnegoAPI Je li u ytkownik jest zalogowany za po rednictwem odpowiednio przygotowanego adresuURL mo na opublikowa tweet URL powinien by zbudowany w nast puj cy sposoacuteb
httptwittercomhomestatus=Przyk adowy tweet
Wyroacute niony fragment adresu to tekst tweeta Na ekranie tablicy wynikoacutew obok przyciskuZatwierd umie cimy odsy acz Tweetnij
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmit ltagt + lta id=tweetScore target=_blank href=http twittercomhomestatus=+escape(W a nie uda o mi si sko czy +currentLevel+ poziom gry Yet Another Platformer w +minSec(jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
157
Najistotniejszy jest wyroacute niony fragment kodu bo to dzi ki niemu dzieje si to co powinno Za-stosowali my tu javascriptow funkcj escape by dostarczany test by poprawnie sformatowany
Jak wida bardzo atwo zaimplementowa to rozwi zanie ale trzeba wiedzie o kilku ograni-czeniach
Je li u ytkownik nie jest zalogowany pojawi si ekran logowania Twittera Na ekranie tablicy wynikoacutew nie mo na u y nazwy u ytkownika z Twittera
W zwi zku z tym nawet je li u ytkownik b dzie chcia tweetn swoacutej wyniki tak b dzie musia poda swoj nazw w grze
Publikowanie ka dego tweeta powoduje otwarcie nowego okna przegl darkiw ktoacuterym u ytkownik musi potwierdzi t operacj
Je li chcieliby my umo liwi u ytkownikowi zalogowanie si i automatyczne publikowanietweetoacutew bez konieczno ci ka dorazowego otwierania nowego okna musimy skorzysta z APITwittera
Pe ny dost p do API TwitteraNajpe niejsza integracja gry z Twitterem wymaga zapytania u ytkownika o zgod na po czeniejego konta z gr Mo na w tym celu skorzysta z mechanizmu OAuth ktoacutery jest otwartym stan-dardem uwierzytelniania stosowanym przez wiele firm takich jak Twitter Google czy Facebook
Aby da u ytkownikom mo liwo zalogowania si za po rednictwem Twittera musimy lekkozmodyfikowa ekran pocz tkowy
Je li gracz kliknie cze Rozpocznij gr zacznie od razu rozgrywk Je li z kolei kliknie Zalogujprzez Twittera b dzie si musia zalogowa za po rednictwem Twittera po czym nast pi powroacutetdo gry
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
158
Rejestrowanie gry w TwitterzeZanim przejdziemy dalej musimy zarejestrowa gr w Twitterze Aby to zrobi musisz sizalogowa na stron Twittera dla deweloperoacutew (httpsdevtwittercom) a nast pnie kliknpozycj My applications (moje aplikacje) w menu profilu
Nale y utworzy now aplikacj ( cze Create a new application) wype ni wszystkie wymaganepola oraz wyrazi zgod na warunki licencyjne (Rules of the Road) Po zatwierdzeniu wprowa-dzonych danych zostanie wy wietlona strona zawieraj ca dane utworzonej aplikacji
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
159
Trzeba zwroacuteci uwag na dwie informacje ktoacutere na rysunku zosta y otoczone ramk poniewab d potrzebne poacute niej Nale y wykona jeszcze jedn drobn modyfikacj konfiguracjiPrzejd do zak adki Settings (ustawienia) i przyjrzyj si sekcji Application Type (typ aplikacji)Domy lnie jest zaznaczone pole Read only (tylko do odczytu) Je li chcesz w imieniu graczapublikowa tweety musisz wybra opcj Read and Write
W ten sposoacuteb przygotowali my konto na Twitterze do integracji z gr
Pomocnicza bibliotekaKod realizuj cy komunikacj z API Twittera mo na napisa samemu w PHP ale to dosy mud-na praca Na szcz cie jest dost pnych wiele bibliotek ktoacutere mog to upro ci Jedn z nichprzeznaczon dla PHP jest twitteroauth (httpsgithubcomabrahamtwitteroauth) Istniejoczywi cie biblioteki dla innych j zykoacutew koniecznie zajrzyj do dokumentacji Twittera abydowiedzie si wi cej na ten temat
Du zalet biblioteki twitteroauth jest to e mo na j zainstalowa na prawie ka dym serwerzeobs uguj cym PHP Wystarczy skopiowa bibliotek do tego samego katalogu w ktoacuterym znajdujsi skrypty gry W naszym przypadku b dzie to podkatalog twitter
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
160
Musimy zacz od skonfigurowania biblioteki Przydatny b dzie przyk adowy skrypt konfigura-cyjny config-samplephp dost pny w podanym repozytorium Znajduje si w nim kod definiuj cytrzy sta e
define(CONSUMER_KEY (1))define(CONSUMER_SECRET (2))define(OAUTH_CALLBACK (3))
W miejscach (1) i (2) trzeba wpisa warto ci wy wietlone na stronie informacji o utworzonejaplikacji Twittera W miejscu (3) nale y poda adres URL skryptu zwrotnego callbackphp
Ostatnim krokiem jest zmodyfikowanie skryptu callbackphp tak by zawiera prawid oweprzekierowanie do g oacutewnego pliku naszej gry
header(Location indexphp)
UwierzytelnianieNa poni szym diagramie zosta przedstawiony sposoacuteb przeprowadzania uwierzytelniania i auto-ryzacji u ytkownikoacutew w grze za po rednictwem Twittera
W praktyce nie jest to tak skomplikowane na jakie wygl da przede wszystkim dlatego ewi kszo jest ju zaimplementowana w bibliotece twitteroauth Zajmiemy si utworzeniemstrony logowania wy wietlanej po klikni ciu przycisku Zaloguj przez Twittera U yjemy zwy-k ego odsy acza kieruj cego do pliku redirectphp Kiedy u ytkownik kliknie to cze po razpierwszy zostanie przekierowany na stron Twittera na ktoacuterej b dzie moacuteg autoryzowa dost pdo konta
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
161
Po wyra eniu zgody nast pi przekierowanie na adres ktoacutery zosta ustawiony w pliku callbackphpJe li u ytkownik ju raz wyrazi zgod na autoryzacj b dzie moacuteg od razu si zalogowa
W skryptach JavaScript bardzo przyda nam si teraz informacja o tym czy gracz jest po czonyczy nie Aby j uzyska musimy przekszta ci g oacutewny dokument HTML gry w plik PHP i umie-ci na jego pocz tku nast puj cy kod
ltphpsession_start()
require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
Pobranie tokenoacutew u 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-gtget(accountverify_credentials)gt
W tym kodzie rozpoczynamy sesj do czamy dwa pliki biblioteki twitteroauth oraz odczytuje-my token sesji Je li token jest ustawiony oznacza to e u ytkownik jest zalogowany do Twittera
Nast pnie serwer czy si z Twitterem aby pobra obiekt u ytkownika Tak to wygl da postronie serwera ale kod JavaScript wci nie ma informacji o zalogowaniu W zwi zku z tymmusimy utworzy skrypt przesy aj cy dane do kodu klienckiego
ltscript type=textjavascriptgtltphp if($_SESSION[status] == verified) gt var twitter = true var twitterName = ltphp print $user-gtscreen_name gtltphp else gt var twitter = falseltphp gtltscriptgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
162
Je li gracz jest zalogowany do Twittera globalna zmienna twitter ma warto true a zmiennatwitterName zawiera nazw u ytkownika
Ostatnim o co nale y zadba jest poinformowanie u ytkownika o pomy lnym zalogowaniu zapomoc Twittera i umo liwienie wylogowania si W tym celu musimy wprowadzi drobnzmian w kodzie odpowiedzialnym za ekran pocz tkowy wy wietlany po zalogowaniu
ltdiv id=startScreen class=screengt ltphp if($_SESSION[status] = verified) gt lta class=button tweetLink href=twitterredirectphpgtZaloguj przez Twitteraltagt ltphp else gt lta class=button tweetLink href=twitterclearsessionsphpgtWyloguj z Twitteraltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Po wprowadzeniu powy szych modyfikacji mo na uzna e uwierzytelnianie przez Twitterajest zaimplementowane
Publikowanie najlepszych wynikoacutew na TwitterzeTeraz kiedy gracz jest ju zalogowany do Twittera mo na publikowa jego wyniki w znaczniewygodniejszy sposoacuteb ni poprzednio Zaczniemy od utworzenia po stronie serwera skryptutwitterPostphp w ktoacuterym u yjemy interfejsu statusesupdate API Twittera
Spoacutejrzmy na kompletny skrypt
ltphpsession_start()require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
$time = $_SESSION[time]$level = $_SESSION[level]if (isset($time) ampamp isset($level)) Pobranie tokenoacutew u ytkownika z sesji $access_token = $_SESSION[access_token] $connection = new TwitterOAuth(CONSUMER_KEY CONSUMER_SECRET $access_token[oauth_token] $access_token[oauth_token_secret])
$parameters = array(status =gt W a nie uda o mi si sko czy $level poziom gry Yet Another Platformer w $time sekund) $status = $connection-gtpost(statusesupdate $parameters)gt
Najprawdopodobniej rozpoznajesz wi kszo kodu z powy szego listingu ktoacutery dodali my napocz tku skryptu ekranu pocz tkowego (tylko wyroacute niony kod jest nowy) W ostatnich dwoacutechwierszach tworzymy a nast pnie przesy amy do Twittera tekst ktoacutery chcemy opublikowa co
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
163
mdash jak wida mdash jest ca kiem proste Musimy jednak zaj si jeszcze jednym Poniewa graczjest zalogowany znamy jego nazw wi c mo emy j wykorzysta na ekranie tablicy wynikoacutew
W kodzie klienta utworzymy troch inn od dotychczasowej wersj tablicy wynikoacutew
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) if (twitter) top += ltinput id=name type=hidden value=+twitterName+gt + twitterName + + minSec(jsontop[i]time) + lta id=saveScore href=gtZatwierd ltagt + lta id=tweetScore href=gtTweetnijltagt ltbrgt else top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt + lta target=_blank href=httptwittercomhome status=+escape(w a nie uda o mi si sko czy +current Level+ poziom gry Yet Another Platformer w +minSec (jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Tworzymy tu niewidoczne pole wej ciowe przechowuj ce nazw u ytkownika pochodz cz Twittera Nast pnie wypisujemy t nazw na ekranie tablicy wynikoacutew Zwroacute uwag e niemusieli my w ogoacutele zmienia kodu po stronie serwera
Tyle na temat integracji z Twitterem Je eli chcesz dowiedzie si wi cej i rozszerzy funk-cjonalno gry zajrzyj do dokumentacji API Twittera
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
164
Integracja z FacebookiemIntegracja z Facebookiem i Twitterem jest w wielu aspektach podobna Facebook jest jednakw du o wi kszym stopniu nastawiony na gry Zajmiemy si implementacj osi gni dla zalo-gowanych u ytkownikoacutew Skorzystamy z SDK Facebooka dla PHP ale s roacutewnie dost pnerozwi zania dla innych j zykoacutew
Tak jak w przypadku Twittera tu roacutewnie musimy zacz od zarejestrowania aplikacji w Fa-cebooku W tym celu trzeba si zalogowa do serwisu dla deweloperoacutew (httpsdevelopers
facebookcom) i klikn pozycj Apps1
Nast pnie nale y klikn cze Create New App i wype ni obowi zkowe pola formularza Poich zatwierdzeniu pojawi si ekran z informacjami dotycz cymi nowej aplikacji Podobnie jakby o w przypadku Twittera tu roacutewnie najwa niejsze s dwie warto ci co wida na rysunku
1 Aby moacutec tworzy aplikacje trzeba si zarejestrowa jako programista W tym celu musisz klikn przycisk
Register as a Developer mdash przyp t um
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
165
Na powy szym zrzucie strza k zosta a oznaczona sekcja umo liwiaj ca wyboacuter sposobu inte-gracji aplikacji z Facebookiem Aby uzyska pe ny dost p do interfejsu Open Graph API Fa-cebooka ktoacutery umo liwia mi dzy innymi publikowanie osi gni trzeba zaznaczy pozycjAplikacja na Facebooku
Dzi ki temu gra mo e by uruchamiana w ramce (iframe) wewn trz strony Facebooka Jednakaby to by o mo liwe konieczny jest prawid owy certyfikat dla HTTPS obowi zuj cy w dome-nie w ktoacuterej jest dost pna gra Je li jednak chcemy by gra by a adowana z naszego serweranie ma tych wymaga ale i tak trzeba wpisa adres w odpowiednim polu (aby adres zostauznany za poprawny nale y poda https nawet je li nie ma si certyfikatu)
Jest jeszcze jedno co nale y zrobi by aplikacja mog a publikowa osi gni cia mdash nale y jzarejestrowa jako gr W tym celu wystarczy klikn pozycj Informacje o aplikacji a na-st pnie w sekcji Informacje o aplikacji w polach Kategoria ustawi pozycj Gry i ustali gatunekgry co wida na poni szym rysunku
Uwierzytelnianie przez FacebookaPodstawowy mechanizm uwierzytelniania jest bardzo podobny do tego z Twittera ale istniejepewna roacute nica w podej ciu do dost pu W przypadku Twittera mo na by o zdecydowa czyaplikacja ma prawa tylko do odczytu czy roacutewnie zapisu Facebook oferuje znacznie bogatszemo liwo ci ustalania poziomoacutew dost pu przy czym decyduje si o nich w czasie logowania
Kod odpowiedzialny za uwierzytelnianie zosta przedstawiony na poni szym listingu Tu roacutewnie jak w przypadku Twittera musimy umie ci na pocz tku skryptu kod pobieraj cy obiekt bie-
cego u ytkownika
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
166
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()gt
Wyroacute niony wiersz kodu odpowiada za wskazanie e z poziomu gry b dziemy chcieli publiko-wa wpisy na osi czasu u ytkownika W miejscach (1) i (2) nale y wpisa warto ci wy wietlonena stronie konfiguracji aplikacji w Facebooku
Je li zmienna $facebookUser to null oznacza to e u ytkownik jest ju zalogowany W prze-ciwnym przypadku musimy wy wietli przycisk logowania Musimy wi c napisa kod podobnydo tego ktoacutery s u y do wy wietlenia przycisku logowania za po rednictwem Twittera
ltdiv id=startScreen class=screengt ltphp if ($facebookUser) $loginUrl = $facebook-gtgetLoginUrl(array( scope =gt $scope redirect_uri =gt $app_url )) gt lta class=button tweetLink href=ltphp print $loginUrl gtgtZaloguj przez Facebookaltagt ltphp else $logoutUrl = $facebook-gtgetLogoutUrl(array( next =gt $app_url )) gt lta class=button tweetLink href=ltphp print $logoutUrlgtgtWyloguj z Facebookaltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
151
$_SESSION[level] = $level $_SESSION[time] = $time
$i++
W skrypcie savephp musimy z sesji odczyta poziom i czas
$name = $_GET[name]$time = $_SESSION[time]$level = $_SESSION[level]
Te proste zmiany wystarcz by utrudni oszukiwanie w naszej grze
Zaciemnianie koduZaciemnianie kodu (ang obfuscating) jest bardzo prost technik ale przy tym ca kiem sku-teczn Przekszta cony w ten sposoacuteb kod trudno analizowa poniewa jest nieczytelny dlaludzi Poni ej znajduje si fragment kodu odpowiedzialnego za tablic wynikoacutew
if (status == finished) gameState = menu $(level_nb_2)html(currentLevel) $(level_nb_1)html(currentLevel + 1)
var finishedTime = Mathround((Datenow() - levelStart) 1000) $ajax( dataType json url highscorephp data level currentLevel time finishedTime async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + ltinput id=timeScore type=hidden value=+jsontop[i] time+gtltinputgt + ltinput id=level type=hidden value= +currentLevel+gtltinputgt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
152
$(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) gfx(group 0)
tilemap = loadNextLevel(group) gfx(playerdiv 0) gfy(playerdiv 0) gfsetAnimation(playerdiv playerAnimjump) ) status = stand
Ten sam kod poddany operacji zaciemniania (za pomoc narz dzia UglifyJS) wygl da nast puj co
if(finished==status)gameState=menu$(level_nb_2)html(currentLevel)$(level_nb_1)html(currentLevel+1)varfinishedTime=Mathround((Datenow()-levelStart)1e3)$ajax(dataTypejsonurlhighscorephpdatalevelcurrentLeveltimefinishedTimeasync1successfunction(a)for(var b=c=0atoplengthgtcc++)b+=aintopampampapos===cltinput id=name placeholder=_____ size=5gtltinput id=timeScore type=hidden value=+atop[c]time+gtltinputgt+ltinput id=level type=hidden value=+currentLevel+gtltinputgt+ +minSec(atop[c]time)+ lta id=saveScorehref=gtsubmitltagt ltbrgt+atop[c]name+ +minSec(atop[c]time)+ltbrgt$(top_list)html(b))fail(function())$(time)html(minSec(finishedTime))$(levelEnd)fadeIn(2e3function()$(backgroundFront)css(background-position0px0px)$(backgroundBack)css(background-position0px 0px)gfx(group0)tilemap=loadNextLevel(group)gfx(playerdiv0)gfy(playerdiv0)gfsetAnimation(playerdivplayerAnimjump))status=stand
Z ca pewno ci analiza takiego kodu jest du o trudniejsza a zyskujemy przy okazji co jeszczemdashprzetworzony w ten sposoacuteb kod jest kroacutetszy ni orygina
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
153
Mniej czytelny protokoacute sieciowyChocia poprawili my kod dzia aj cy po stronie klienta nadal istnieje mo liwo uzyskania do-st pu do warto ci przesy anych zmiennych poprzez analiz ruchu sieciowego Na poni szymrysunku zosta o przedstawione okno aplikacji nas uchuj cej ktoacutera wy wietla dane przesy ane pozako czeniu poziomu
Jest to problem poniewa w celu oszustwa u ytkownik nie musi modyfikowa kodu mdash wystarczysfa szowa pakiet przesy any na serwer Istniej trzy proste sposoby na utrudnienie analizowaniatransmitowanych danych
1 Nadawanie zmiennym przypadkowych nazw tak by na ich podstawie nie da o siokre li ich przeznaczenia
2 Kodowanie zawarto ci zmiennych U ytkownik zna przewa nie osi gni ty przez siebiewynik wi c na jego podstawie mo e znale w transmitowanych danych odpowiednizmienn i j zmodyfikowa Dzi ki zakodowaniu tej warto ci zadanie to stanie sitrudniejsze
3 Dodanie wielu przypadkowych zmiennych Dzi ki temu trudniej si domy li ktoacuteraz nich przechowuje istotne dane
Podobnie jak w przypadku wcze niej opisywanych metod te roacutewnie jedynie utrudniaj proacutebyoszustwa ale nie daj stuprocentowego zabezpieczenia Roacutewnoczesne zastosowanie kilkurozwi za mo e zniech ci nawet najbardziej zdeterminowanych oszustoacutew Poni ej znaj-dziesz propozycj implementacji ka dego z nich
Kodowanie warto ciZaczniemy od kodowania warto ci Mo na to zrobi na wiele sposoboacutew roacute ni cych si uzy-skiwanym stopniem bezpiecze stwa W naszym przypadku wystarczy utrudni odszukaniewyniku na li cie przesy anych zmiennych w zwi zku z czym nie musimy wprowadza adnej
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
154
skomplikowanej metody kodowania W kodzie klienta u yjemy operacji przesuni cia w lewo(ltlt) a na serwerze mdash przesuni cia w prawo (gtgt)
Oto kod skryptu dzia aj cego na kliencie
$ajax( dataType json url highscorephp data level currentLevel time finishedTime ltlt 1 async false success function (json) )
Odpowiedni fragment skryptu na serwerze
$time = intval($_GET[time]) gtgt 1
Aby jeszcze bardziej zmyli u ytkownika warto t prze lemy w wielu innych zmiennychktoacutere nie b d w ogoacutele brane pod uwag po stronie serwera
Przypadkowe nazwy zmiennychNie trzeba tu wiele wyja nia mdash wystarczy zmieni nazw zmiennej Je li chcesz jeszczebardziej utrudni zadanie oszustom mo esz zmienia t nazw przy ka dym daniu Poni ejpodstawowa wersja kodu
$ajax( dataType json url highscorephp data Nmyzsf currentLevel WfBCLQ finishedTime ltlt 1 async false success function (json) )
Kod po stronie serwera przyjmie nast puj c posta
$time = intval($_GET[WfBCLQ]) gtgt 1$level = $_GET[Nmyzsf]
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
155
Dodatkowe przypadkowe zmienneNazwy zmiennych nie oddaj ju znaczenia przechowywanych przez nie warto ci ale to niewszystko poniewa stosunkowo atwo sprawdzi ktoacutera z nich odpowiada za wynik Musimy wi cdoda wi cej zmiennych ktoacuterych zadaniem jest wprowadzenie oszusta w b d Przyk adowerozwi zanie zosta o przedstawione na poni szym listingu
$ajax( dataType json url highscorephp data sXZZUj Mathround(200Mathrandom()) enHf8F Mathround(200Mathrandom()) eZnqBG currentLevel avFanB Mathround(200Mathrandom()) zkpCfb currentLevel PCXFTR Mathround(200Mathrandom()) Nmyzsf currentLevel FYGswh Mathround(200Mathrandom()) C3kaTz finishedTime ltlt 1 gU7buf finishedTime ykN65g Mathround(200Mathrandom()) Q5jUZm Mathround(200Mathrandom()) bb5d7V Mathround(200Mathrandom()) WTsrdm finishedTime ltlt 1 bCW5Dg currentLevel AFM8MN Mathround(200Mathrandom()) FUHt6K Mathround(200Mathrandom()) WfBCLQ finishedTime ltlt 1 d8mzVn Mathround(200Mathrandom()) bHxNpb Mathround(200Mathrandom()) MWcmCz finishedTime ZAat42 Mathround(200Mathrandom()) async false success function (json) )
W kodzie serwera nie trzeba nic zmienia poniewa dodatkowe zmienne s po prostu igno-rowane Mo na oczywi cie jeszcze bardziej skomplikowa spraw i wprowadzi dodatkowezale no ci mi dzy zmiennymi Nale y jednak ca y czas pami ta ktoacutere zmienne przechowujistotne dane by roacutewnie sobie nie utrudni zadania
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
156
Integracja z TwitteremTwitter daje mo liwo dzielenia si z innymi kroacutetkimi informacjami W przypadku gier mo emyz niego skorzysta na dwa sposoby
mo emy umo liwi graczowi zalogowanie si do gry za pomoc nazwy u ytkownikai has a z Twittera
mo emy da mo liwo publikowania tweetoacutew z wynikami lub informacjamio post pach w grze
Zajmiemy si teraz zaimplementowaniem tych dwoacutech funkcji
Podstawy TwitteraIstnieje bardzo prosty sposoacuteb korzystania z Twittera ktoacutery nie wymaga znajomo ci adnegoAPI Je li u ytkownik jest zalogowany za po rednictwem odpowiednio przygotowanego adresuURL mo na opublikowa tweet URL powinien by zbudowany w nast puj cy sposoacuteb
httptwittercomhomestatus=Przyk adowy tweet
Wyroacute niony fragment adresu to tekst tweeta Na ekranie tablicy wynikoacutew obok przyciskuZatwierd umie cimy odsy acz Tweetnij
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmit ltagt + lta id=tweetScore target=_blank href=http twittercomhomestatus=+escape(W a nie uda o mi si sko czy +currentLevel+ poziom gry Yet Another Platformer w +minSec(jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
157
Najistotniejszy jest wyroacute niony fragment kodu bo to dzi ki niemu dzieje si to co powinno Za-stosowali my tu javascriptow funkcj escape by dostarczany test by poprawnie sformatowany
Jak wida bardzo atwo zaimplementowa to rozwi zanie ale trzeba wiedzie o kilku ograni-czeniach
Je li u ytkownik nie jest zalogowany pojawi si ekran logowania Twittera Na ekranie tablicy wynikoacutew nie mo na u y nazwy u ytkownika z Twittera
W zwi zku z tym nawet je li u ytkownik b dzie chcia tweetn swoacutej wyniki tak b dzie musia poda swoj nazw w grze
Publikowanie ka dego tweeta powoduje otwarcie nowego okna przegl darkiw ktoacuterym u ytkownik musi potwierdzi t operacj
Je li chcieliby my umo liwi u ytkownikowi zalogowanie si i automatyczne publikowanietweetoacutew bez konieczno ci ka dorazowego otwierania nowego okna musimy skorzysta z APITwittera
Pe ny dost p do API TwitteraNajpe niejsza integracja gry z Twitterem wymaga zapytania u ytkownika o zgod na po czeniejego konta z gr Mo na w tym celu skorzysta z mechanizmu OAuth ktoacutery jest otwartym stan-dardem uwierzytelniania stosowanym przez wiele firm takich jak Twitter Google czy Facebook
Aby da u ytkownikom mo liwo zalogowania si za po rednictwem Twittera musimy lekkozmodyfikowa ekran pocz tkowy
Je li gracz kliknie cze Rozpocznij gr zacznie od razu rozgrywk Je li z kolei kliknie Zalogujprzez Twittera b dzie si musia zalogowa za po rednictwem Twittera po czym nast pi powroacutetdo gry
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
158
Rejestrowanie gry w TwitterzeZanim przejdziemy dalej musimy zarejestrowa gr w Twitterze Aby to zrobi musisz sizalogowa na stron Twittera dla deweloperoacutew (httpsdevtwittercom) a nast pnie kliknpozycj My applications (moje aplikacje) w menu profilu
Nale y utworzy now aplikacj ( cze Create a new application) wype ni wszystkie wymaganepola oraz wyrazi zgod na warunki licencyjne (Rules of the Road) Po zatwierdzeniu wprowa-dzonych danych zostanie wy wietlona strona zawieraj ca dane utworzonej aplikacji
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
159
Trzeba zwroacuteci uwag na dwie informacje ktoacutere na rysunku zosta y otoczone ramk poniewab d potrzebne poacute niej Nale y wykona jeszcze jedn drobn modyfikacj konfiguracjiPrzejd do zak adki Settings (ustawienia) i przyjrzyj si sekcji Application Type (typ aplikacji)Domy lnie jest zaznaczone pole Read only (tylko do odczytu) Je li chcesz w imieniu graczapublikowa tweety musisz wybra opcj Read and Write
W ten sposoacuteb przygotowali my konto na Twitterze do integracji z gr
Pomocnicza bibliotekaKod realizuj cy komunikacj z API Twittera mo na napisa samemu w PHP ale to dosy mud-na praca Na szcz cie jest dost pnych wiele bibliotek ktoacutere mog to upro ci Jedn z nichprzeznaczon dla PHP jest twitteroauth (httpsgithubcomabrahamtwitteroauth) Istniejoczywi cie biblioteki dla innych j zykoacutew koniecznie zajrzyj do dokumentacji Twittera abydowiedzie si wi cej na ten temat
Du zalet biblioteki twitteroauth jest to e mo na j zainstalowa na prawie ka dym serwerzeobs uguj cym PHP Wystarczy skopiowa bibliotek do tego samego katalogu w ktoacuterym znajdujsi skrypty gry W naszym przypadku b dzie to podkatalog twitter
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
160
Musimy zacz od skonfigurowania biblioteki Przydatny b dzie przyk adowy skrypt konfigura-cyjny config-samplephp dost pny w podanym repozytorium Znajduje si w nim kod definiuj cytrzy sta e
define(CONSUMER_KEY (1))define(CONSUMER_SECRET (2))define(OAUTH_CALLBACK (3))
W miejscach (1) i (2) trzeba wpisa warto ci wy wietlone na stronie informacji o utworzonejaplikacji Twittera W miejscu (3) nale y poda adres URL skryptu zwrotnego callbackphp
Ostatnim krokiem jest zmodyfikowanie skryptu callbackphp tak by zawiera prawid oweprzekierowanie do g oacutewnego pliku naszej gry
header(Location indexphp)
UwierzytelnianieNa poni szym diagramie zosta przedstawiony sposoacuteb przeprowadzania uwierzytelniania i auto-ryzacji u ytkownikoacutew w grze za po rednictwem Twittera
W praktyce nie jest to tak skomplikowane na jakie wygl da przede wszystkim dlatego ewi kszo jest ju zaimplementowana w bibliotece twitteroauth Zajmiemy si utworzeniemstrony logowania wy wietlanej po klikni ciu przycisku Zaloguj przez Twittera U yjemy zwy-k ego odsy acza kieruj cego do pliku redirectphp Kiedy u ytkownik kliknie to cze po razpierwszy zostanie przekierowany na stron Twittera na ktoacuterej b dzie moacuteg autoryzowa dost pdo konta
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
161
Po wyra eniu zgody nast pi przekierowanie na adres ktoacutery zosta ustawiony w pliku callbackphpJe li u ytkownik ju raz wyrazi zgod na autoryzacj b dzie moacuteg od razu si zalogowa
W skryptach JavaScript bardzo przyda nam si teraz informacja o tym czy gracz jest po czonyczy nie Aby j uzyska musimy przekszta ci g oacutewny dokument HTML gry w plik PHP i umie-ci na jego pocz tku nast puj cy kod
ltphpsession_start()
require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
Pobranie tokenoacutew u 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-gtget(accountverify_credentials)gt
W tym kodzie rozpoczynamy sesj do czamy dwa pliki biblioteki twitteroauth oraz odczytuje-my token sesji Je li token jest ustawiony oznacza to e u ytkownik jest zalogowany do Twittera
Nast pnie serwer czy si z Twitterem aby pobra obiekt u ytkownika Tak to wygl da postronie serwera ale kod JavaScript wci nie ma informacji o zalogowaniu W zwi zku z tymmusimy utworzy skrypt przesy aj cy dane do kodu klienckiego
ltscript type=textjavascriptgtltphp if($_SESSION[status] == verified) gt var twitter = true var twitterName = ltphp print $user-gtscreen_name gtltphp else gt var twitter = falseltphp gtltscriptgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
162
Je li gracz jest zalogowany do Twittera globalna zmienna twitter ma warto true a zmiennatwitterName zawiera nazw u ytkownika
Ostatnim o co nale y zadba jest poinformowanie u ytkownika o pomy lnym zalogowaniu zapomoc Twittera i umo liwienie wylogowania si W tym celu musimy wprowadzi drobnzmian w kodzie odpowiedzialnym za ekran pocz tkowy wy wietlany po zalogowaniu
ltdiv id=startScreen class=screengt ltphp if($_SESSION[status] = verified) gt lta class=button tweetLink href=twitterredirectphpgtZaloguj przez Twitteraltagt ltphp else gt lta class=button tweetLink href=twitterclearsessionsphpgtWyloguj z Twitteraltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Po wprowadzeniu powy szych modyfikacji mo na uzna e uwierzytelnianie przez Twitterajest zaimplementowane
Publikowanie najlepszych wynikoacutew na TwitterzeTeraz kiedy gracz jest ju zalogowany do Twittera mo na publikowa jego wyniki w znaczniewygodniejszy sposoacuteb ni poprzednio Zaczniemy od utworzenia po stronie serwera skryptutwitterPostphp w ktoacuterym u yjemy interfejsu statusesupdate API Twittera
Spoacutejrzmy na kompletny skrypt
ltphpsession_start()require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
$time = $_SESSION[time]$level = $_SESSION[level]if (isset($time) ampamp isset($level)) Pobranie tokenoacutew u ytkownika z sesji $access_token = $_SESSION[access_token] $connection = new TwitterOAuth(CONSUMER_KEY CONSUMER_SECRET $access_token[oauth_token] $access_token[oauth_token_secret])
$parameters = array(status =gt W a nie uda o mi si sko czy $level poziom gry Yet Another Platformer w $time sekund) $status = $connection-gtpost(statusesupdate $parameters)gt
Najprawdopodobniej rozpoznajesz wi kszo kodu z powy szego listingu ktoacutery dodali my napocz tku skryptu ekranu pocz tkowego (tylko wyroacute niony kod jest nowy) W ostatnich dwoacutechwierszach tworzymy a nast pnie przesy amy do Twittera tekst ktoacutery chcemy opublikowa co
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
163
mdash jak wida mdash jest ca kiem proste Musimy jednak zaj si jeszcze jednym Poniewa graczjest zalogowany znamy jego nazw wi c mo emy j wykorzysta na ekranie tablicy wynikoacutew
W kodzie klienta utworzymy troch inn od dotychczasowej wersj tablicy wynikoacutew
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) if (twitter) top += ltinput id=name type=hidden value=+twitterName+gt + twitterName + + minSec(jsontop[i]time) + lta id=saveScore href=gtZatwierd ltagt + lta id=tweetScore href=gtTweetnijltagt ltbrgt else top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt + lta target=_blank href=httptwittercomhome status=+escape(w a nie uda o mi si sko czy +current Level+ poziom gry Yet Another Platformer w +minSec (jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Tworzymy tu niewidoczne pole wej ciowe przechowuj ce nazw u ytkownika pochodz cz Twittera Nast pnie wypisujemy t nazw na ekranie tablicy wynikoacutew Zwroacute uwag e niemusieli my w ogoacutele zmienia kodu po stronie serwera
Tyle na temat integracji z Twitterem Je eli chcesz dowiedzie si wi cej i rozszerzy funk-cjonalno gry zajrzyj do dokumentacji API Twittera
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
164
Integracja z FacebookiemIntegracja z Facebookiem i Twitterem jest w wielu aspektach podobna Facebook jest jednakw du o wi kszym stopniu nastawiony na gry Zajmiemy si implementacj osi gni dla zalo-gowanych u ytkownikoacutew Skorzystamy z SDK Facebooka dla PHP ale s roacutewnie dost pnerozwi zania dla innych j zykoacutew
Tak jak w przypadku Twittera tu roacutewnie musimy zacz od zarejestrowania aplikacji w Fa-cebooku W tym celu trzeba si zalogowa do serwisu dla deweloperoacutew (httpsdevelopers
facebookcom) i klikn pozycj Apps1
Nast pnie nale y klikn cze Create New App i wype ni obowi zkowe pola formularza Poich zatwierdzeniu pojawi si ekran z informacjami dotycz cymi nowej aplikacji Podobnie jakby o w przypadku Twittera tu roacutewnie najwa niejsze s dwie warto ci co wida na rysunku
1 Aby moacutec tworzy aplikacje trzeba si zarejestrowa jako programista W tym celu musisz klikn przycisk
Register as a Developer mdash przyp t um
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
165
Na powy szym zrzucie strza k zosta a oznaczona sekcja umo liwiaj ca wyboacuter sposobu inte-gracji aplikacji z Facebookiem Aby uzyska pe ny dost p do interfejsu Open Graph API Fa-cebooka ktoacutery umo liwia mi dzy innymi publikowanie osi gni trzeba zaznaczy pozycjAplikacja na Facebooku
Dzi ki temu gra mo e by uruchamiana w ramce (iframe) wewn trz strony Facebooka Jednakaby to by o mo liwe konieczny jest prawid owy certyfikat dla HTTPS obowi zuj cy w dome-nie w ktoacuterej jest dost pna gra Je li jednak chcemy by gra by a adowana z naszego serweranie ma tych wymaga ale i tak trzeba wpisa adres w odpowiednim polu (aby adres zostauznany za poprawny nale y poda https nawet je li nie ma si certyfikatu)
Jest jeszcze jedno co nale y zrobi by aplikacja mog a publikowa osi gni cia mdash nale y jzarejestrowa jako gr W tym celu wystarczy klikn pozycj Informacje o aplikacji a na-st pnie w sekcji Informacje o aplikacji w polach Kategoria ustawi pozycj Gry i ustali gatunekgry co wida na poni szym rysunku
Uwierzytelnianie przez FacebookaPodstawowy mechanizm uwierzytelniania jest bardzo podobny do tego z Twittera ale istniejepewna roacute nica w podej ciu do dost pu W przypadku Twittera mo na by o zdecydowa czyaplikacja ma prawa tylko do odczytu czy roacutewnie zapisu Facebook oferuje znacznie bogatszemo liwo ci ustalania poziomoacutew dost pu przy czym decyduje si o nich w czasie logowania
Kod odpowiedzialny za uwierzytelnianie zosta przedstawiony na poni szym listingu Tu roacutewnie jak w przypadku Twittera musimy umie ci na pocz tku skryptu kod pobieraj cy obiekt bie-
cego u ytkownika
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
166
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()gt
Wyroacute niony wiersz kodu odpowiada za wskazanie e z poziomu gry b dziemy chcieli publiko-wa wpisy na osi czasu u ytkownika W miejscach (1) i (2) nale y wpisa warto ci wy wietlonena stronie konfiguracji aplikacji w Facebooku
Je li zmienna $facebookUser to null oznacza to e u ytkownik jest ju zalogowany W prze-ciwnym przypadku musimy wy wietli przycisk logowania Musimy wi c napisa kod podobnydo tego ktoacutery s u y do wy wietlenia przycisku logowania za po rednictwem Twittera
ltdiv id=startScreen class=screengt ltphp if ($facebookUser) $loginUrl = $facebook-gtgetLoginUrl(array( scope =gt $scope redirect_uri =gt $app_url )) gt lta class=button tweetLink href=ltphp print $loginUrl gtgtZaloguj przez Facebookaltagt ltphp else $logoutUrl = $facebook-gtgetLogoutUrl(array( next =gt $app_url )) gt lta class=button tweetLink href=ltphp print $logoutUrlgtgtWyloguj z Facebookaltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
152
$(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) gfx(group 0)
tilemap = loadNextLevel(group) gfx(playerdiv 0) gfy(playerdiv 0) gfsetAnimation(playerdiv playerAnimjump) ) status = stand
Ten sam kod poddany operacji zaciemniania (za pomoc narz dzia UglifyJS) wygl da nast puj co
if(finished==status)gameState=menu$(level_nb_2)html(currentLevel)$(level_nb_1)html(currentLevel+1)varfinishedTime=Mathround((Datenow()-levelStart)1e3)$ajax(dataTypejsonurlhighscorephpdatalevelcurrentLeveltimefinishedTimeasync1successfunction(a)for(var b=c=0atoplengthgtcc++)b+=aintopampampapos===cltinput id=name placeholder=_____ size=5gtltinput id=timeScore type=hidden value=+atop[c]time+gtltinputgt+ltinput id=level type=hidden value=+currentLevel+gtltinputgt+ +minSec(atop[c]time)+ lta id=saveScorehref=gtsubmitltagt ltbrgt+atop[c]name+ +minSec(atop[c]time)+ltbrgt$(top_list)html(b))fail(function())$(time)html(minSec(finishedTime))$(levelEnd)fadeIn(2e3function()$(backgroundFront)css(background-position0px0px)$(backgroundBack)css(background-position0px 0px)gfx(group0)tilemap=loadNextLevel(group)gfx(playerdiv0)gfy(playerdiv0)gfsetAnimation(playerdivplayerAnimjump))status=stand
Z ca pewno ci analiza takiego kodu jest du o trudniejsza a zyskujemy przy okazji co jeszczemdashprzetworzony w ten sposoacuteb kod jest kroacutetszy ni orygina
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
153
Mniej czytelny protokoacute sieciowyChocia poprawili my kod dzia aj cy po stronie klienta nadal istnieje mo liwo uzyskania do-st pu do warto ci przesy anych zmiennych poprzez analiz ruchu sieciowego Na poni szymrysunku zosta o przedstawione okno aplikacji nas uchuj cej ktoacutera wy wietla dane przesy ane pozako czeniu poziomu
Jest to problem poniewa w celu oszustwa u ytkownik nie musi modyfikowa kodu mdash wystarczysfa szowa pakiet przesy any na serwer Istniej trzy proste sposoby na utrudnienie analizowaniatransmitowanych danych
1 Nadawanie zmiennym przypadkowych nazw tak by na ich podstawie nie da o siokre li ich przeznaczenia
2 Kodowanie zawarto ci zmiennych U ytkownik zna przewa nie osi gni ty przez siebiewynik wi c na jego podstawie mo e znale w transmitowanych danych odpowiednizmienn i j zmodyfikowa Dzi ki zakodowaniu tej warto ci zadanie to stanie sitrudniejsze
3 Dodanie wielu przypadkowych zmiennych Dzi ki temu trudniej si domy li ktoacuteraz nich przechowuje istotne dane
Podobnie jak w przypadku wcze niej opisywanych metod te roacutewnie jedynie utrudniaj proacutebyoszustwa ale nie daj stuprocentowego zabezpieczenia Roacutewnoczesne zastosowanie kilkurozwi za mo e zniech ci nawet najbardziej zdeterminowanych oszustoacutew Poni ej znaj-dziesz propozycj implementacji ka dego z nich
Kodowanie warto ciZaczniemy od kodowania warto ci Mo na to zrobi na wiele sposoboacutew roacute ni cych si uzy-skiwanym stopniem bezpiecze stwa W naszym przypadku wystarczy utrudni odszukaniewyniku na li cie przesy anych zmiennych w zwi zku z czym nie musimy wprowadza adnej
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
154
skomplikowanej metody kodowania W kodzie klienta u yjemy operacji przesuni cia w lewo(ltlt) a na serwerze mdash przesuni cia w prawo (gtgt)
Oto kod skryptu dzia aj cego na kliencie
$ajax( dataType json url highscorephp data level currentLevel time finishedTime ltlt 1 async false success function (json) )
Odpowiedni fragment skryptu na serwerze
$time = intval($_GET[time]) gtgt 1
Aby jeszcze bardziej zmyli u ytkownika warto t prze lemy w wielu innych zmiennychktoacutere nie b d w ogoacutele brane pod uwag po stronie serwera
Przypadkowe nazwy zmiennychNie trzeba tu wiele wyja nia mdash wystarczy zmieni nazw zmiennej Je li chcesz jeszczebardziej utrudni zadanie oszustom mo esz zmienia t nazw przy ka dym daniu Poni ejpodstawowa wersja kodu
$ajax( dataType json url highscorephp data Nmyzsf currentLevel WfBCLQ finishedTime ltlt 1 async false success function (json) )
Kod po stronie serwera przyjmie nast puj c posta
$time = intval($_GET[WfBCLQ]) gtgt 1$level = $_GET[Nmyzsf]
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
155
Dodatkowe przypadkowe zmienneNazwy zmiennych nie oddaj ju znaczenia przechowywanych przez nie warto ci ale to niewszystko poniewa stosunkowo atwo sprawdzi ktoacutera z nich odpowiada za wynik Musimy wi cdoda wi cej zmiennych ktoacuterych zadaniem jest wprowadzenie oszusta w b d Przyk adowerozwi zanie zosta o przedstawione na poni szym listingu
$ajax( dataType json url highscorephp data sXZZUj Mathround(200Mathrandom()) enHf8F Mathround(200Mathrandom()) eZnqBG currentLevel avFanB Mathround(200Mathrandom()) zkpCfb currentLevel PCXFTR Mathround(200Mathrandom()) Nmyzsf currentLevel FYGswh Mathround(200Mathrandom()) C3kaTz finishedTime ltlt 1 gU7buf finishedTime ykN65g Mathround(200Mathrandom()) Q5jUZm Mathround(200Mathrandom()) bb5d7V Mathround(200Mathrandom()) WTsrdm finishedTime ltlt 1 bCW5Dg currentLevel AFM8MN Mathround(200Mathrandom()) FUHt6K Mathround(200Mathrandom()) WfBCLQ finishedTime ltlt 1 d8mzVn Mathround(200Mathrandom()) bHxNpb Mathround(200Mathrandom()) MWcmCz finishedTime ZAat42 Mathround(200Mathrandom()) async false success function (json) )
W kodzie serwera nie trzeba nic zmienia poniewa dodatkowe zmienne s po prostu igno-rowane Mo na oczywi cie jeszcze bardziej skomplikowa spraw i wprowadzi dodatkowezale no ci mi dzy zmiennymi Nale y jednak ca y czas pami ta ktoacutere zmienne przechowujistotne dane by roacutewnie sobie nie utrudni zadania
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
156
Integracja z TwitteremTwitter daje mo liwo dzielenia si z innymi kroacutetkimi informacjami W przypadku gier mo emyz niego skorzysta na dwa sposoby
mo emy umo liwi graczowi zalogowanie si do gry za pomoc nazwy u ytkownikai has a z Twittera
mo emy da mo liwo publikowania tweetoacutew z wynikami lub informacjamio post pach w grze
Zajmiemy si teraz zaimplementowaniem tych dwoacutech funkcji
Podstawy TwitteraIstnieje bardzo prosty sposoacuteb korzystania z Twittera ktoacutery nie wymaga znajomo ci adnegoAPI Je li u ytkownik jest zalogowany za po rednictwem odpowiednio przygotowanego adresuURL mo na opublikowa tweet URL powinien by zbudowany w nast puj cy sposoacuteb
httptwittercomhomestatus=Przyk adowy tweet
Wyroacute niony fragment adresu to tekst tweeta Na ekranie tablicy wynikoacutew obok przyciskuZatwierd umie cimy odsy acz Tweetnij
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmit ltagt + lta id=tweetScore target=_blank href=http twittercomhomestatus=+escape(W a nie uda o mi si sko czy +currentLevel+ poziom gry Yet Another Platformer w +minSec(jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
157
Najistotniejszy jest wyroacute niony fragment kodu bo to dzi ki niemu dzieje si to co powinno Za-stosowali my tu javascriptow funkcj escape by dostarczany test by poprawnie sformatowany
Jak wida bardzo atwo zaimplementowa to rozwi zanie ale trzeba wiedzie o kilku ograni-czeniach
Je li u ytkownik nie jest zalogowany pojawi si ekran logowania Twittera Na ekranie tablicy wynikoacutew nie mo na u y nazwy u ytkownika z Twittera
W zwi zku z tym nawet je li u ytkownik b dzie chcia tweetn swoacutej wyniki tak b dzie musia poda swoj nazw w grze
Publikowanie ka dego tweeta powoduje otwarcie nowego okna przegl darkiw ktoacuterym u ytkownik musi potwierdzi t operacj
Je li chcieliby my umo liwi u ytkownikowi zalogowanie si i automatyczne publikowanietweetoacutew bez konieczno ci ka dorazowego otwierania nowego okna musimy skorzysta z APITwittera
Pe ny dost p do API TwitteraNajpe niejsza integracja gry z Twitterem wymaga zapytania u ytkownika o zgod na po czeniejego konta z gr Mo na w tym celu skorzysta z mechanizmu OAuth ktoacutery jest otwartym stan-dardem uwierzytelniania stosowanym przez wiele firm takich jak Twitter Google czy Facebook
Aby da u ytkownikom mo liwo zalogowania si za po rednictwem Twittera musimy lekkozmodyfikowa ekran pocz tkowy
Je li gracz kliknie cze Rozpocznij gr zacznie od razu rozgrywk Je li z kolei kliknie Zalogujprzez Twittera b dzie si musia zalogowa za po rednictwem Twittera po czym nast pi powroacutetdo gry
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
158
Rejestrowanie gry w TwitterzeZanim przejdziemy dalej musimy zarejestrowa gr w Twitterze Aby to zrobi musisz sizalogowa na stron Twittera dla deweloperoacutew (httpsdevtwittercom) a nast pnie kliknpozycj My applications (moje aplikacje) w menu profilu
Nale y utworzy now aplikacj ( cze Create a new application) wype ni wszystkie wymaganepola oraz wyrazi zgod na warunki licencyjne (Rules of the Road) Po zatwierdzeniu wprowa-dzonych danych zostanie wy wietlona strona zawieraj ca dane utworzonej aplikacji
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
159
Trzeba zwroacuteci uwag na dwie informacje ktoacutere na rysunku zosta y otoczone ramk poniewab d potrzebne poacute niej Nale y wykona jeszcze jedn drobn modyfikacj konfiguracjiPrzejd do zak adki Settings (ustawienia) i przyjrzyj si sekcji Application Type (typ aplikacji)Domy lnie jest zaznaczone pole Read only (tylko do odczytu) Je li chcesz w imieniu graczapublikowa tweety musisz wybra opcj Read and Write
W ten sposoacuteb przygotowali my konto na Twitterze do integracji z gr
Pomocnicza bibliotekaKod realizuj cy komunikacj z API Twittera mo na napisa samemu w PHP ale to dosy mud-na praca Na szcz cie jest dost pnych wiele bibliotek ktoacutere mog to upro ci Jedn z nichprzeznaczon dla PHP jest twitteroauth (httpsgithubcomabrahamtwitteroauth) Istniejoczywi cie biblioteki dla innych j zykoacutew koniecznie zajrzyj do dokumentacji Twittera abydowiedzie si wi cej na ten temat
Du zalet biblioteki twitteroauth jest to e mo na j zainstalowa na prawie ka dym serwerzeobs uguj cym PHP Wystarczy skopiowa bibliotek do tego samego katalogu w ktoacuterym znajdujsi skrypty gry W naszym przypadku b dzie to podkatalog twitter
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
160
Musimy zacz od skonfigurowania biblioteki Przydatny b dzie przyk adowy skrypt konfigura-cyjny config-samplephp dost pny w podanym repozytorium Znajduje si w nim kod definiuj cytrzy sta e
define(CONSUMER_KEY (1))define(CONSUMER_SECRET (2))define(OAUTH_CALLBACK (3))
W miejscach (1) i (2) trzeba wpisa warto ci wy wietlone na stronie informacji o utworzonejaplikacji Twittera W miejscu (3) nale y poda adres URL skryptu zwrotnego callbackphp
Ostatnim krokiem jest zmodyfikowanie skryptu callbackphp tak by zawiera prawid oweprzekierowanie do g oacutewnego pliku naszej gry
header(Location indexphp)
UwierzytelnianieNa poni szym diagramie zosta przedstawiony sposoacuteb przeprowadzania uwierzytelniania i auto-ryzacji u ytkownikoacutew w grze za po rednictwem Twittera
W praktyce nie jest to tak skomplikowane na jakie wygl da przede wszystkim dlatego ewi kszo jest ju zaimplementowana w bibliotece twitteroauth Zajmiemy si utworzeniemstrony logowania wy wietlanej po klikni ciu przycisku Zaloguj przez Twittera U yjemy zwy-k ego odsy acza kieruj cego do pliku redirectphp Kiedy u ytkownik kliknie to cze po razpierwszy zostanie przekierowany na stron Twittera na ktoacuterej b dzie moacuteg autoryzowa dost pdo konta
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
161
Po wyra eniu zgody nast pi przekierowanie na adres ktoacutery zosta ustawiony w pliku callbackphpJe li u ytkownik ju raz wyrazi zgod na autoryzacj b dzie moacuteg od razu si zalogowa
W skryptach JavaScript bardzo przyda nam si teraz informacja o tym czy gracz jest po czonyczy nie Aby j uzyska musimy przekszta ci g oacutewny dokument HTML gry w plik PHP i umie-ci na jego pocz tku nast puj cy kod
ltphpsession_start()
require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
Pobranie tokenoacutew u 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-gtget(accountverify_credentials)gt
W tym kodzie rozpoczynamy sesj do czamy dwa pliki biblioteki twitteroauth oraz odczytuje-my token sesji Je li token jest ustawiony oznacza to e u ytkownik jest zalogowany do Twittera
Nast pnie serwer czy si z Twitterem aby pobra obiekt u ytkownika Tak to wygl da postronie serwera ale kod JavaScript wci nie ma informacji o zalogowaniu W zwi zku z tymmusimy utworzy skrypt przesy aj cy dane do kodu klienckiego
ltscript type=textjavascriptgtltphp if($_SESSION[status] == verified) gt var twitter = true var twitterName = ltphp print $user-gtscreen_name gtltphp else gt var twitter = falseltphp gtltscriptgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
162
Je li gracz jest zalogowany do Twittera globalna zmienna twitter ma warto true a zmiennatwitterName zawiera nazw u ytkownika
Ostatnim o co nale y zadba jest poinformowanie u ytkownika o pomy lnym zalogowaniu zapomoc Twittera i umo liwienie wylogowania si W tym celu musimy wprowadzi drobnzmian w kodzie odpowiedzialnym za ekran pocz tkowy wy wietlany po zalogowaniu
ltdiv id=startScreen class=screengt ltphp if($_SESSION[status] = verified) gt lta class=button tweetLink href=twitterredirectphpgtZaloguj przez Twitteraltagt ltphp else gt lta class=button tweetLink href=twitterclearsessionsphpgtWyloguj z Twitteraltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Po wprowadzeniu powy szych modyfikacji mo na uzna e uwierzytelnianie przez Twitterajest zaimplementowane
Publikowanie najlepszych wynikoacutew na TwitterzeTeraz kiedy gracz jest ju zalogowany do Twittera mo na publikowa jego wyniki w znaczniewygodniejszy sposoacuteb ni poprzednio Zaczniemy od utworzenia po stronie serwera skryptutwitterPostphp w ktoacuterym u yjemy interfejsu statusesupdate API Twittera
Spoacutejrzmy na kompletny skrypt
ltphpsession_start()require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
$time = $_SESSION[time]$level = $_SESSION[level]if (isset($time) ampamp isset($level)) Pobranie tokenoacutew u ytkownika z sesji $access_token = $_SESSION[access_token] $connection = new TwitterOAuth(CONSUMER_KEY CONSUMER_SECRET $access_token[oauth_token] $access_token[oauth_token_secret])
$parameters = array(status =gt W a nie uda o mi si sko czy $level poziom gry Yet Another Platformer w $time sekund) $status = $connection-gtpost(statusesupdate $parameters)gt
Najprawdopodobniej rozpoznajesz wi kszo kodu z powy szego listingu ktoacutery dodali my napocz tku skryptu ekranu pocz tkowego (tylko wyroacute niony kod jest nowy) W ostatnich dwoacutechwierszach tworzymy a nast pnie przesy amy do Twittera tekst ktoacutery chcemy opublikowa co
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
163
mdash jak wida mdash jest ca kiem proste Musimy jednak zaj si jeszcze jednym Poniewa graczjest zalogowany znamy jego nazw wi c mo emy j wykorzysta na ekranie tablicy wynikoacutew
W kodzie klienta utworzymy troch inn od dotychczasowej wersj tablicy wynikoacutew
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) if (twitter) top += ltinput id=name type=hidden value=+twitterName+gt + twitterName + + minSec(jsontop[i]time) + lta id=saveScore href=gtZatwierd ltagt + lta id=tweetScore href=gtTweetnijltagt ltbrgt else top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt + lta target=_blank href=httptwittercomhome status=+escape(w a nie uda o mi si sko czy +current Level+ poziom gry Yet Another Platformer w +minSec (jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Tworzymy tu niewidoczne pole wej ciowe przechowuj ce nazw u ytkownika pochodz cz Twittera Nast pnie wypisujemy t nazw na ekranie tablicy wynikoacutew Zwroacute uwag e niemusieli my w ogoacutele zmienia kodu po stronie serwera
Tyle na temat integracji z Twitterem Je eli chcesz dowiedzie si wi cej i rozszerzy funk-cjonalno gry zajrzyj do dokumentacji API Twittera
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
164
Integracja z FacebookiemIntegracja z Facebookiem i Twitterem jest w wielu aspektach podobna Facebook jest jednakw du o wi kszym stopniu nastawiony na gry Zajmiemy si implementacj osi gni dla zalo-gowanych u ytkownikoacutew Skorzystamy z SDK Facebooka dla PHP ale s roacutewnie dost pnerozwi zania dla innych j zykoacutew
Tak jak w przypadku Twittera tu roacutewnie musimy zacz od zarejestrowania aplikacji w Fa-cebooku W tym celu trzeba si zalogowa do serwisu dla deweloperoacutew (httpsdevelopers
facebookcom) i klikn pozycj Apps1
Nast pnie nale y klikn cze Create New App i wype ni obowi zkowe pola formularza Poich zatwierdzeniu pojawi si ekran z informacjami dotycz cymi nowej aplikacji Podobnie jakby o w przypadku Twittera tu roacutewnie najwa niejsze s dwie warto ci co wida na rysunku
1 Aby moacutec tworzy aplikacje trzeba si zarejestrowa jako programista W tym celu musisz klikn przycisk
Register as a Developer mdash przyp t um
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
165
Na powy szym zrzucie strza k zosta a oznaczona sekcja umo liwiaj ca wyboacuter sposobu inte-gracji aplikacji z Facebookiem Aby uzyska pe ny dost p do interfejsu Open Graph API Fa-cebooka ktoacutery umo liwia mi dzy innymi publikowanie osi gni trzeba zaznaczy pozycjAplikacja na Facebooku
Dzi ki temu gra mo e by uruchamiana w ramce (iframe) wewn trz strony Facebooka Jednakaby to by o mo liwe konieczny jest prawid owy certyfikat dla HTTPS obowi zuj cy w dome-nie w ktoacuterej jest dost pna gra Je li jednak chcemy by gra by a adowana z naszego serweranie ma tych wymaga ale i tak trzeba wpisa adres w odpowiednim polu (aby adres zostauznany za poprawny nale y poda https nawet je li nie ma si certyfikatu)
Jest jeszcze jedno co nale y zrobi by aplikacja mog a publikowa osi gni cia mdash nale y jzarejestrowa jako gr W tym celu wystarczy klikn pozycj Informacje o aplikacji a na-st pnie w sekcji Informacje o aplikacji w polach Kategoria ustawi pozycj Gry i ustali gatunekgry co wida na poni szym rysunku
Uwierzytelnianie przez FacebookaPodstawowy mechanizm uwierzytelniania jest bardzo podobny do tego z Twittera ale istniejepewna roacute nica w podej ciu do dost pu W przypadku Twittera mo na by o zdecydowa czyaplikacja ma prawa tylko do odczytu czy roacutewnie zapisu Facebook oferuje znacznie bogatszemo liwo ci ustalania poziomoacutew dost pu przy czym decyduje si o nich w czasie logowania
Kod odpowiedzialny za uwierzytelnianie zosta przedstawiony na poni szym listingu Tu roacutewnie jak w przypadku Twittera musimy umie ci na pocz tku skryptu kod pobieraj cy obiekt bie-
cego u ytkownika
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
166
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()gt
Wyroacute niony wiersz kodu odpowiada za wskazanie e z poziomu gry b dziemy chcieli publiko-wa wpisy na osi czasu u ytkownika W miejscach (1) i (2) nale y wpisa warto ci wy wietlonena stronie konfiguracji aplikacji w Facebooku
Je li zmienna $facebookUser to null oznacza to e u ytkownik jest ju zalogowany W prze-ciwnym przypadku musimy wy wietli przycisk logowania Musimy wi c napisa kod podobnydo tego ktoacutery s u y do wy wietlenia przycisku logowania za po rednictwem Twittera
ltdiv id=startScreen class=screengt ltphp if ($facebookUser) $loginUrl = $facebook-gtgetLoginUrl(array( scope =gt $scope redirect_uri =gt $app_url )) gt lta class=button tweetLink href=ltphp print $loginUrl gtgtZaloguj przez Facebookaltagt ltphp else $logoutUrl = $facebook-gtgetLogoutUrl(array( next =gt $app_url )) gt lta class=button tweetLink href=ltphp print $logoutUrlgtgtWyloguj z Facebookaltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
153
Mniej czytelny protokoacute sieciowyChocia poprawili my kod dzia aj cy po stronie klienta nadal istnieje mo liwo uzyskania do-st pu do warto ci przesy anych zmiennych poprzez analiz ruchu sieciowego Na poni szymrysunku zosta o przedstawione okno aplikacji nas uchuj cej ktoacutera wy wietla dane przesy ane pozako czeniu poziomu
Jest to problem poniewa w celu oszustwa u ytkownik nie musi modyfikowa kodu mdash wystarczysfa szowa pakiet przesy any na serwer Istniej trzy proste sposoby na utrudnienie analizowaniatransmitowanych danych
1 Nadawanie zmiennym przypadkowych nazw tak by na ich podstawie nie da o siokre li ich przeznaczenia
2 Kodowanie zawarto ci zmiennych U ytkownik zna przewa nie osi gni ty przez siebiewynik wi c na jego podstawie mo e znale w transmitowanych danych odpowiednizmienn i j zmodyfikowa Dzi ki zakodowaniu tej warto ci zadanie to stanie sitrudniejsze
3 Dodanie wielu przypadkowych zmiennych Dzi ki temu trudniej si domy li ktoacuteraz nich przechowuje istotne dane
Podobnie jak w przypadku wcze niej opisywanych metod te roacutewnie jedynie utrudniaj proacutebyoszustwa ale nie daj stuprocentowego zabezpieczenia Roacutewnoczesne zastosowanie kilkurozwi za mo e zniech ci nawet najbardziej zdeterminowanych oszustoacutew Poni ej znaj-dziesz propozycj implementacji ka dego z nich
Kodowanie warto ciZaczniemy od kodowania warto ci Mo na to zrobi na wiele sposoboacutew roacute ni cych si uzy-skiwanym stopniem bezpiecze stwa W naszym przypadku wystarczy utrudni odszukaniewyniku na li cie przesy anych zmiennych w zwi zku z czym nie musimy wprowadza adnej
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
154
skomplikowanej metody kodowania W kodzie klienta u yjemy operacji przesuni cia w lewo(ltlt) a na serwerze mdash przesuni cia w prawo (gtgt)
Oto kod skryptu dzia aj cego na kliencie
$ajax( dataType json url highscorephp data level currentLevel time finishedTime ltlt 1 async false success function (json) )
Odpowiedni fragment skryptu na serwerze
$time = intval($_GET[time]) gtgt 1
Aby jeszcze bardziej zmyli u ytkownika warto t prze lemy w wielu innych zmiennychktoacutere nie b d w ogoacutele brane pod uwag po stronie serwera
Przypadkowe nazwy zmiennychNie trzeba tu wiele wyja nia mdash wystarczy zmieni nazw zmiennej Je li chcesz jeszczebardziej utrudni zadanie oszustom mo esz zmienia t nazw przy ka dym daniu Poni ejpodstawowa wersja kodu
$ajax( dataType json url highscorephp data Nmyzsf currentLevel WfBCLQ finishedTime ltlt 1 async false success function (json) )
Kod po stronie serwera przyjmie nast puj c posta
$time = intval($_GET[WfBCLQ]) gtgt 1$level = $_GET[Nmyzsf]
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
155
Dodatkowe przypadkowe zmienneNazwy zmiennych nie oddaj ju znaczenia przechowywanych przez nie warto ci ale to niewszystko poniewa stosunkowo atwo sprawdzi ktoacutera z nich odpowiada za wynik Musimy wi cdoda wi cej zmiennych ktoacuterych zadaniem jest wprowadzenie oszusta w b d Przyk adowerozwi zanie zosta o przedstawione na poni szym listingu
$ajax( dataType json url highscorephp data sXZZUj Mathround(200Mathrandom()) enHf8F Mathround(200Mathrandom()) eZnqBG currentLevel avFanB Mathround(200Mathrandom()) zkpCfb currentLevel PCXFTR Mathround(200Mathrandom()) Nmyzsf currentLevel FYGswh Mathround(200Mathrandom()) C3kaTz finishedTime ltlt 1 gU7buf finishedTime ykN65g Mathround(200Mathrandom()) Q5jUZm Mathround(200Mathrandom()) bb5d7V Mathround(200Mathrandom()) WTsrdm finishedTime ltlt 1 bCW5Dg currentLevel AFM8MN Mathround(200Mathrandom()) FUHt6K Mathround(200Mathrandom()) WfBCLQ finishedTime ltlt 1 d8mzVn Mathround(200Mathrandom()) bHxNpb Mathround(200Mathrandom()) MWcmCz finishedTime ZAat42 Mathround(200Mathrandom()) async false success function (json) )
W kodzie serwera nie trzeba nic zmienia poniewa dodatkowe zmienne s po prostu igno-rowane Mo na oczywi cie jeszcze bardziej skomplikowa spraw i wprowadzi dodatkowezale no ci mi dzy zmiennymi Nale y jednak ca y czas pami ta ktoacutere zmienne przechowujistotne dane by roacutewnie sobie nie utrudni zadania
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
156
Integracja z TwitteremTwitter daje mo liwo dzielenia si z innymi kroacutetkimi informacjami W przypadku gier mo emyz niego skorzysta na dwa sposoby
mo emy umo liwi graczowi zalogowanie si do gry za pomoc nazwy u ytkownikai has a z Twittera
mo emy da mo liwo publikowania tweetoacutew z wynikami lub informacjamio post pach w grze
Zajmiemy si teraz zaimplementowaniem tych dwoacutech funkcji
Podstawy TwitteraIstnieje bardzo prosty sposoacuteb korzystania z Twittera ktoacutery nie wymaga znajomo ci adnegoAPI Je li u ytkownik jest zalogowany za po rednictwem odpowiednio przygotowanego adresuURL mo na opublikowa tweet URL powinien by zbudowany w nast puj cy sposoacuteb
httptwittercomhomestatus=Przyk adowy tweet
Wyroacute niony fragment adresu to tekst tweeta Na ekranie tablicy wynikoacutew obok przyciskuZatwierd umie cimy odsy acz Tweetnij
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmit ltagt + lta id=tweetScore target=_blank href=http twittercomhomestatus=+escape(W a nie uda o mi si sko czy +currentLevel+ poziom gry Yet Another Platformer w +minSec(jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
157
Najistotniejszy jest wyroacute niony fragment kodu bo to dzi ki niemu dzieje si to co powinno Za-stosowali my tu javascriptow funkcj escape by dostarczany test by poprawnie sformatowany
Jak wida bardzo atwo zaimplementowa to rozwi zanie ale trzeba wiedzie o kilku ograni-czeniach
Je li u ytkownik nie jest zalogowany pojawi si ekran logowania Twittera Na ekranie tablicy wynikoacutew nie mo na u y nazwy u ytkownika z Twittera
W zwi zku z tym nawet je li u ytkownik b dzie chcia tweetn swoacutej wyniki tak b dzie musia poda swoj nazw w grze
Publikowanie ka dego tweeta powoduje otwarcie nowego okna przegl darkiw ktoacuterym u ytkownik musi potwierdzi t operacj
Je li chcieliby my umo liwi u ytkownikowi zalogowanie si i automatyczne publikowanietweetoacutew bez konieczno ci ka dorazowego otwierania nowego okna musimy skorzysta z APITwittera
Pe ny dost p do API TwitteraNajpe niejsza integracja gry z Twitterem wymaga zapytania u ytkownika o zgod na po czeniejego konta z gr Mo na w tym celu skorzysta z mechanizmu OAuth ktoacutery jest otwartym stan-dardem uwierzytelniania stosowanym przez wiele firm takich jak Twitter Google czy Facebook
Aby da u ytkownikom mo liwo zalogowania si za po rednictwem Twittera musimy lekkozmodyfikowa ekran pocz tkowy
Je li gracz kliknie cze Rozpocznij gr zacznie od razu rozgrywk Je li z kolei kliknie Zalogujprzez Twittera b dzie si musia zalogowa za po rednictwem Twittera po czym nast pi powroacutetdo gry
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
158
Rejestrowanie gry w TwitterzeZanim przejdziemy dalej musimy zarejestrowa gr w Twitterze Aby to zrobi musisz sizalogowa na stron Twittera dla deweloperoacutew (httpsdevtwittercom) a nast pnie kliknpozycj My applications (moje aplikacje) w menu profilu
Nale y utworzy now aplikacj ( cze Create a new application) wype ni wszystkie wymaganepola oraz wyrazi zgod na warunki licencyjne (Rules of the Road) Po zatwierdzeniu wprowa-dzonych danych zostanie wy wietlona strona zawieraj ca dane utworzonej aplikacji
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
159
Trzeba zwroacuteci uwag na dwie informacje ktoacutere na rysunku zosta y otoczone ramk poniewab d potrzebne poacute niej Nale y wykona jeszcze jedn drobn modyfikacj konfiguracjiPrzejd do zak adki Settings (ustawienia) i przyjrzyj si sekcji Application Type (typ aplikacji)Domy lnie jest zaznaczone pole Read only (tylko do odczytu) Je li chcesz w imieniu graczapublikowa tweety musisz wybra opcj Read and Write
W ten sposoacuteb przygotowali my konto na Twitterze do integracji z gr
Pomocnicza bibliotekaKod realizuj cy komunikacj z API Twittera mo na napisa samemu w PHP ale to dosy mud-na praca Na szcz cie jest dost pnych wiele bibliotek ktoacutere mog to upro ci Jedn z nichprzeznaczon dla PHP jest twitteroauth (httpsgithubcomabrahamtwitteroauth) Istniejoczywi cie biblioteki dla innych j zykoacutew koniecznie zajrzyj do dokumentacji Twittera abydowiedzie si wi cej na ten temat
Du zalet biblioteki twitteroauth jest to e mo na j zainstalowa na prawie ka dym serwerzeobs uguj cym PHP Wystarczy skopiowa bibliotek do tego samego katalogu w ktoacuterym znajdujsi skrypty gry W naszym przypadku b dzie to podkatalog twitter
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
160
Musimy zacz od skonfigurowania biblioteki Przydatny b dzie przyk adowy skrypt konfigura-cyjny config-samplephp dost pny w podanym repozytorium Znajduje si w nim kod definiuj cytrzy sta e
define(CONSUMER_KEY (1))define(CONSUMER_SECRET (2))define(OAUTH_CALLBACK (3))
W miejscach (1) i (2) trzeba wpisa warto ci wy wietlone na stronie informacji o utworzonejaplikacji Twittera W miejscu (3) nale y poda adres URL skryptu zwrotnego callbackphp
Ostatnim krokiem jest zmodyfikowanie skryptu callbackphp tak by zawiera prawid oweprzekierowanie do g oacutewnego pliku naszej gry
header(Location indexphp)
UwierzytelnianieNa poni szym diagramie zosta przedstawiony sposoacuteb przeprowadzania uwierzytelniania i auto-ryzacji u ytkownikoacutew w grze za po rednictwem Twittera
W praktyce nie jest to tak skomplikowane na jakie wygl da przede wszystkim dlatego ewi kszo jest ju zaimplementowana w bibliotece twitteroauth Zajmiemy si utworzeniemstrony logowania wy wietlanej po klikni ciu przycisku Zaloguj przez Twittera U yjemy zwy-k ego odsy acza kieruj cego do pliku redirectphp Kiedy u ytkownik kliknie to cze po razpierwszy zostanie przekierowany na stron Twittera na ktoacuterej b dzie moacuteg autoryzowa dost pdo konta
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
161
Po wyra eniu zgody nast pi przekierowanie na adres ktoacutery zosta ustawiony w pliku callbackphpJe li u ytkownik ju raz wyrazi zgod na autoryzacj b dzie moacuteg od razu si zalogowa
W skryptach JavaScript bardzo przyda nam si teraz informacja o tym czy gracz jest po czonyczy nie Aby j uzyska musimy przekszta ci g oacutewny dokument HTML gry w plik PHP i umie-ci na jego pocz tku nast puj cy kod
ltphpsession_start()
require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
Pobranie tokenoacutew u 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-gtget(accountverify_credentials)gt
W tym kodzie rozpoczynamy sesj do czamy dwa pliki biblioteki twitteroauth oraz odczytuje-my token sesji Je li token jest ustawiony oznacza to e u ytkownik jest zalogowany do Twittera
Nast pnie serwer czy si z Twitterem aby pobra obiekt u ytkownika Tak to wygl da postronie serwera ale kod JavaScript wci nie ma informacji o zalogowaniu W zwi zku z tymmusimy utworzy skrypt przesy aj cy dane do kodu klienckiego
ltscript type=textjavascriptgtltphp if($_SESSION[status] == verified) gt var twitter = true var twitterName = ltphp print $user-gtscreen_name gtltphp else gt var twitter = falseltphp gtltscriptgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
162
Je li gracz jest zalogowany do Twittera globalna zmienna twitter ma warto true a zmiennatwitterName zawiera nazw u ytkownika
Ostatnim o co nale y zadba jest poinformowanie u ytkownika o pomy lnym zalogowaniu zapomoc Twittera i umo liwienie wylogowania si W tym celu musimy wprowadzi drobnzmian w kodzie odpowiedzialnym za ekran pocz tkowy wy wietlany po zalogowaniu
ltdiv id=startScreen class=screengt ltphp if($_SESSION[status] = verified) gt lta class=button tweetLink href=twitterredirectphpgtZaloguj przez Twitteraltagt ltphp else gt lta class=button tweetLink href=twitterclearsessionsphpgtWyloguj z Twitteraltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Po wprowadzeniu powy szych modyfikacji mo na uzna e uwierzytelnianie przez Twitterajest zaimplementowane
Publikowanie najlepszych wynikoacutew na TwitterzeTeraz kiedy gracz jest ju zalogowany do Twittera mo na publikowa jego wyniki w znaczniewygodniejszy sposoacuteb ni poprzednio Zaczniemy od utworzenia po stronie serwera skryptutwitterPostphp w ktoacuterym u yjemy interfejsu statusesupdate API Twittera
Spoacutejrzmy na kompletny skrypt
ltphpsession_start()require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
$time = $_SESSION[time]$level = $_SESSION[level]if (isset($time) ampamp isset($level)) Pobranie tokenoacutew u ytkownika z sesji $access_token = $_SESSION[access_token] $connection = new TwitterOAuth(CONSUMER_KEY CONSUMER_SECRET $access_token[oauth_token] $access_token[oauth_token_secret])
$parameters = array(status =gt W a nie uda o mi si sko czy $level poziom gry Yet Another Platformer w $time sekund) $status = $connection-gtpost(statusesupdate $parameters)gt
Najprawdopodobniej rozpoznajesz wi kszo kodu z powy szego listingu ktoacutery dodali my napocz tku skryptu ekranu pocz tkowego (tylko wyroacute niony kod jest nowy) W ostatnich dwoacutechwierszach tworzymy a nast pnie przesy amy do Twittera tekst ktoacutery chcemy opublikowa co
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
163
mdash jak wida mdash jest ca kiem proste Musimy jednak zaj si jeszcze jednym Poniewa graczjest zalogowany znamy jego nazw wi c mo emy j wykorzysta na ekranie tablicy wynikoacutew
W kodzie klienta utworzymy troch inn od dotychczasowej wersj tablicy wynikoacutew
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) if (twitter) top += ltinput id=name type=hidden value=+twitterName+gt + twitterName + + minSec(jsontop[i]time) + lta id=saveScore href=gtZatwierd ltagt + lta id=tweetScore href=gtTweetnijltagt ltbrgt else top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt + lta target=_blank href=httptwittercomhome status=+escape(w a nie uda o mi si sko czy +current Level+ poziom gry Yet Another Platformer w +minSec (jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Tworzymy tu niewidoczne pole wej ciowe przechowuj ce nazw u ytkownika pochodz cz Twittera Nast pnie wypisujemy t nazw na ekranie tablicy wynikoacutew Zwroacute uwag e niemusieli my w ogoacutele zmienia kodu po stronie serwera
Tyle na temat integracji z Twitterem Je eli chcesz dowiedzie si wi cej i rozszerzy funk-cjonalno gry zajrzyj do dokumentacji API Twittera
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
164
Integracja z FacebookiemIntegracja z Facebookiem i Twitterem jest w wielu aspektach podobna Facebook jest jednakw du o wi kszym stopniu nastawiony na gry Zajmiemy si implementacj osi gni dla zalo-gowanych u ytkownikoacutew Skorzystamy z SDK Facebooka dla PHP ale s roacutewnie dost pnerozwi zania dla innych j zykoacutew
Tak jak w przypadku Twittera tu roacutewnie musimy zacz od zarejestrowania aplikacji w Fa-cebooku W tym celu trzeba si zalogowa do serwisu dla deweloperoacutew (httpsdevelopers
facebookcom) i klikn pozycj Apps1
Nast pnie nale y klikn cze Create New App i wype ni obowi zkowe pola formularza Poich zatwierdzeniu pojawi si ekran z informacjami dotycz cymi nowej aplikacji Podobnie jakby o w przypadku Twittera tu roacutewnie najwa niejsze s dwie warto ci co wida na rysunku
1 Aby moacutec tworzy aplikacje trzeba si zarejestrowa jako programista W tym celu musisz klikn przycisk
Register as a Developer mdash przyp t um
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
165
Na powy szym zrzucie strza k zosta a oznaczona sekcja umo liwiaj ca wyboacuter sposobu inte-gracji aplikacji z Facebookiem Aby uzyska pe ny dost p do interfejsu Open Graph API Fa-cebooka ktoacutery umo liwia mi dzy innymi publikowanie osi gni trzeba zaznaczy pozycjAplikacja na Facebooku
Dzi ki temu gra mo e by uruchamiana w ramce (iframe) wewn trz strony Facebooka Jednakaby to by o mo liwe konieczny jest prawid owy certyfikat dla HTTPS obowi zuj cy w dome-nie w ktoacuterej jest dost pna gra Je li jednak chcemy by gra by a adowana z naszego serweranie ma tych wymaga ale i tak trzeba wpisa adres w odpowiednim polu (aby adres zostauznany za poprawny nale y poda https nawet je li nie ma si certyfikatu)
Jest jeszcze jedno co nale y zrobi by aplikacja mog a publikowa osi gni cia mdash nale y jzarejestrowa jako gr W tym celu wystarczy klikn pozycj Informacje o aplikacji a na-st pnie w sekcji Informacje o aplikacji w polach Kategoria ustawi pozycj Gry i ustali gatunekgry co wida na poni szym rysunku
Uwierzytelnianie przez FacebookaPodstawowy mechanizm uwierzytelniania jest bardzo podobny do tego z Twittera ale istniejepewna roacute nica w podej ciu do dost pu W przypadku Twittera mo na by o zdecydowa czyaplikacja ma prawa tylko do odczytu czy roacutewnie zapisu Facebook oferuje znacznie bogatszemo liwo ci ustalania poziomoacutew dost pu przy czym decyduje si o nich w czasie logowania
Kod odpowiedzialny za uwierzytelnianie zosta przedstawiony na poni szym listingu Tu roacutewnie jak w przypadku Twittera musimy umie ci na pocz tku skryptu kod pobieraj cy obiekt bie-
cego u ytkownika
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
166
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()gt
Wyroacute niony wiersz kodu odpowiada za wskazanie e z poziomu gry b dziemy chcieli publiko-wa wpisy na osi czasu u ytkownika W miejscach (1) i (2) nale y wpisa warto ci wy wietlonena stronie konfiguracji aplikacji w Facebooku
Je li zmienna $facebookUser to null oznacza to e u ytkownik jest ju zalogowany W prze-ciwnym przypadku musimy wy wietli przycisk logowania Musimy wi c napisa kod podobnydo tego ktoacutery s u y do wy wietlenia przycisku logowania za po rednictwem Twittera
ltdiv id=startScreen class=screengt ltphp if ($facebookUser) $loginUrl = $facebook-gtgetLoginUrl(array( scope =gt $scope redirect_uri =gt $app_url )) gt lta class=button tweetLink href=ltphp print $loginUrl gtgtZaloguj przez Facebookaltagt ltphp else $logoutUrl = $facebook-gtgetLogoutUrl(array( next =gt $app_url )) gt lta class=button tweetLink href=ltphp print $logoutUrlgtgtWyloguj z Facebookaltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
154
skomplikowanej metody kodowania W kodzie klienta u yjemy operacji przesuni cia w lewo(ltlt) a na serwerze mdash przesuni cia w prawo (gtgt)
Oto kod skryptu dzia aj cego na kliencie
$ajax( dataType json url highscorephp data level currentLevel time finishedTime ltlt 1 async false success function (json) )
Odpowiedni fragment skryptu na serwerze
$time = intval($_GET[time]) gtgt 1
Aby jeszcze bardziej zmyli u ytkownika warto t prze lemy w wielu innych zmiennychktoacutere nie b d w ogoacutele brane pod uwag po stronie serwera
Przypadkowe nazwy zmiennychNie trzeba tu wiele wyja nia mdash wystarczy zmieni nazw zmiennej Je li chcesz jeszczebardziej utrudni zadanie oszustom mo esz zmienia t nazw przy ka dym daniu Poni ejpodstawowa wersja kodu
$ajax( dataType json url highscorephp data Nmyzsf currentLevel WfBCLQ finishedTime ltlt 1 async false success function (json) )
Kod po stronie serwera przyjmie nast puj c posta
$time = intval($_GET[WfBCLQ]) gtgt 1$level = $_GET[Nmyzsf]
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
155
Dodatkowe przypadkowe zmienneNazwy zmiennych nie oddaj ju znaczenia przechowywanych przez nie warto ci ale to niewszystko poniewa stosunkowo atwo sprawdzi ktoacutera z nich odpowiada za wynik Musimy wi cdoda wi cej zmiennych ktoacuterych zadaniem jest wprowadzenie oszusta w b d Przyk adowerozwi zanie zosta o przedstawione na poni szym listingu
$ajax( dataType json url highscorephp data sXZZUj Mathround(200Mathrandom()) enHf8F Mathround(200Mathrandom()) eZnqBG currentLevel avFanB Mathround(200Mathrandom()) zkpCfb currentLevel PCXFTR Mathround(200Mathrandom()) Nmyzsf currentLevel FYGswh Mathround(200Mathrandom()) C3kaTz finishedTime ltlt 1 gU7buf finishedTime ykN65g Mathround(200Mathrandom()) Q5jUZm Mathround(200Mathrandom()) bb5d7V Mathround(200Mathrandom()) WTsrdm finishedTime ltlt 1 bCW5Dg currentLevel AFM8MN Mathround(200Mathrandom()) FUHt6K Mathround(200Mathrandom()) WfBCLQ finishedTime ltlt 1 d8mzVn Mathround(200Mathrandom()) bHxNpb Mathround(200Mathrandom()) MWcmCz finishedTime ZAat42 Mathround(200Mathrandom()) async false success function (json) )
W kodzie serwera nie trzeba nic zmienia poniewa dodatkowe zmienne s po prostu igno-rowane Mo na oczywi cie jeszcze bardziej skomplikowa spraw i wprowadzi dodatkowezale no ci mi dzy zmiennymi Nale y jednak ca y czas pami ta ktoacutere zmienne przechowujistotne dane by roacutewnie sobie nie utrudni zadania
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
156
Integracja z TwitteremTwitter daje mo liwo dzielenia si z innymi kroacutetkimi informacjami W przypadku gier mo emyz niego skorzysta na dwa sposoby
mo emy umo liwi graczowi zalogowanie si do gry za pomoc nazwy u ytkownikai has a z Twittera
mo emy da mo liwo publikowania tweetoacutew z wynikami lub informacjamio post pach w grze
Zajmiemy si teraz zaimplementowaniem tych dwoacutech funkcji
Podstawy TwitteraIstnieje bardzo prosty sposoacuteb korzystania z Twittera ktoacutery nie wymaga znajomo ci adnegoAPI Je li u ytkownik jest zalogowany za po rednictwem odpowiednio przygotowanego adresuURL mo na opublikowa tweet URL powinien by zbudowany w nast puj cy sposoacuteb
httptwittercomhomestatus=Przyk adowy tweet
Wyroacute niony fragment adresu to tekst tweeta Na ekranie tablicy wynikoacutew obok przyciskuZatwierd umie cimy odsy acz Tweetnij
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmit ltagt + lta id=tweetScore target=_blank href=http twittercomhomestatus=+escape(W a nie uda o mi si sko czy +currentLevel+ poziom gry Yet Another Platformer w +minSec(jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
157
Najistotniejszy jest wyroacute niony fragment kodu bo to dzi ki niemu dzieje si to co powinno Za-stosowali my tu javascriptow funkcj escape by dostarczany test by poprawnie sformatowany
Jak wida bardzo atwo zaimplementowa to rozwi zanie ale trzeba wiedzie o kilku ograni-czeniach
Je li u ytkownik nie jest zalogowany pojawi si ekran logowania Twittera Na ekranie tablicy wynikoacutew nie mo na u y nazwy u ytkownika z Twittera
W zwi zku z tym nawet je li u ytkownik b dzie chcia tweetn swoacutej wyniki tak b dzie musia poda swoj nazw w grze
Publikowanie ka dego tweeta powoduje otwarcie nowego okna przegl darkiw ktoacuterym u ytkownik musi potwierdzi t operacj
Je li chcieliby my umo liwi u ytkownikowi zalogowanie si i automatyczne publikowanietweetoacutew bez konieczno ci ka dorazowego otwierania nowego okna musimy skorzysta z APITwittera
Pe ny dost p do API TwitteraNajpe niejsza integracja gry z Twitterem wymaga zapytania u ytkownika o zgod na po czeniejego konta z gr Mo na w tym celu skorzysta z mechanizmu OAuth ktoacutery jest otwartym stan-dardem uwierzytelniania stosowanym przez wiele firm takich jak Twitter Google czy Facebook
Aby da u ytkownikom mo liwo zalogowania si za po rednictwem Twittera musimy lekkozmodyfikowa ekran pocz tkowy
Je li gracz kliknie cze Rozpocznij gr zacznie od razu rozgrywk Je li z kolei kliknie Zalogujprzez Twittera b dzie si musia zalogowa za po rednictwem Twittera po czym nast pi powroacutetdo gry
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
158
Rejestrowanie gry w TwitterzeZanim przejdziemy dalej musimy zarejestrowa gr w Twitterze Aby to zrobi musisz sizalogowa na stron Twittera dla deweloperoacutew (httpsdevtwittercom) a nast pnie kliknpozycj My applications (moje aplikacje) w menu profilu
Nale y utworzy now aplikacj ( cze Create a new application) wype ni wszystkie wymaganepola oraz wyrazi zgod na warunki licencyjne (Rules of the Road) Po zatwierdzeniu wprowa-dzonych danych zostanie wy wietlona strona zawieraj ca dane utworzonej aplikacji
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
159
Trzeba zwroacuteci uwag na dwie informacje ktoacutere na rysunku zosta y otoczone ramk poniewab d potrzebne poacute niej Nale y wykona jeszcze jedn drobn modyfikacj konfiguracjiPrzejd do zak adki Settings (ustawienia) i przyjrzyj si sekcji Application Type (typ aplikacji)Domy lnie jest zaznaczone pole Read only (tylko do odczytu) Je li chcesz w imieniu graczapublikowa tweety musisz wybra opcj Read and Write
W ten sposoacuteb przygotowali my konto na Twitterze do integracji z gr
Pomocnicza bibliotekaKod realizuj cy komunikacj z API Twittera mo na napisa samemu w PHP ale to dosy mud-na praca Na szcz cie jest dost pnych wiele bibliotek ktoacutere mog to upro ci Jedn z nichprzeznaczon dla PHP jest twitteroauth (httpsgithubcomabrahamtwitteroauth) Istniejoczywi cie biblioteki dla innych j zykoacutew koniecznie zajrzyj do dokumentacji Twittera abydowiedzie si wi cej na ten temat
Du zalet biblioteki twitteroauth jest to e mo na j zainstalowa na prawie ka dym serwerzeobs uguj cym PHP Wystarczy skopiowa bibliotek do tego samego katalogu w ktoacuterym znajdujsi skrypty gry W naszym przypadku b dzie to podkatalog twitter
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
160
Musimy zacz od skonfigurowania biblioteki Przydatny b dzie przyk adowy skrypt konfigura-cyjny config-samplephp dost pny w podanym repozytorium Znajduje si w nim kod definiuj cytrzy sta e
define(CONSUMER_KEY (1))define(CONSUMER_SECRET (2))define(OAUTH_CALLBACK (3))
W miejscach (1) i (2) trzeba wpisa warto ci wy wietlone na stronie informacji o utworzonejaplikacji Twittera W miejscu (3) nale y poda adres URL skryptu zwrotnego callbackphp
Ostatnim krokiem jest zmodyfikowanie skryptu callbackphp tak by zawiera prawid oweprzekierowanie do g oacutewnego pliku naszej gry
header(Location indexphp)
UwierzytelnianieNa poni szym diagramie zosta przedstawiony sposoacuteb przeprowadzania uwierzytelniania i auto-ryzacji u ytkownikoacutew w grze za po rednictwem Twittera
W praktyce nie jest to tak skomplikowane na jakie wygl da przede wszystkim dlatego ewi kszo jest ju zaimplementowana w bibliotece twitteroauth Zajmiemy si utworzeniemstrony logowania wy wietlanej po klikni ciu przycisku Zaloguj przez Twittera U yjemy zwy-k ego odsy acza kieruj cego do pliku redirectphp Kiedy u ytkownik kliknie to cze po razpierwszy zostanie przekierowany na stron Twittera na ktoacuterej b dzie moacuteg autoryzowa dost pdo konta
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
161
Po wyra eniu zgody nast pi przekierowanie na adres ktoacutery zosta ustawiony w pliku callbackphpJe li u ytkownik ju raz wyrazi zgod na autoryzacj b dzie moacuteg od razu si zalogowa
W skryptach JavaScript bardzo przyda nam si teraz informacja o tym czy gracz jest po czonyczy nie Aby j uzyska musimy przekszta ci g oacutewny dokument HTML gry w plik PHP i umie-ci na jego pocz tku nast puj cy kod
ltphpsession_start()
require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
Pobranie tokenoacutew u 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-gtget(accountverify_credentials)gt
W tym kodzie rozpoczynamy sesj do czamy dwa pliki biblioteki twitteroauth oraz odczytuje-my token sesji Je li token jest ustawiony oznacza to e u ytkownik jest zalogowany do Twittera
Nast pnie serwer czy si z Twitterem aby pobra obiekt u ytkownika Tak to wygl da postronie serwera ale kod JavaScript wci nie ma informacji o zalogowaniu W zwi zku z tymmusimy utworzy skrypt przesy aj cy dane do kodu klienckiego
ltscript type=textjavascriptgtltphp if($_SESSION[status] == verified) gt var twitter = true var twitterName = ltphp print $user-gtscreen_name gtltphp else gt var twitter = falseltphp gtltscriptgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
162
Je li gracz jest zalogowany do Twittera globalna zmienna twitter ma warto true a zmiennatwitterName zawiera nazw u ytkownika
Ostatnim o co nale y zadba jest poinformowanie u ytkownika o pomy lnym zalogowaniu zapomoc Twittera i umo liwienie wylogowania si W tym celu musimy wprowadzi drobnzmian w kodzie odpowiedzialnym za ekran pocz tkowy wy wietlany po zalogowaniu
ltdiv id=startScreen class=screengt ltphp if($_SESSION[status] = verified) gt lta class=button tweetLink href=twitterredirectphpgtZaloguj przez Twitteraltagt ltphp else gt lta class=button tweetLink href=twitterclearsessionsphpgtWyloguj z Twitteraltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Po wprowadzeniu powy szych modyfikacji mo na uzna e uwierzytelnianie przez Twitterajest zaimplementowane
Publikowanie najlepszych wynikoacutew na TwitterzeTeraz kiedy gracz jest ju zalogowany do Twittera mo na publikowa jego wyniki w znaczniewygodniejszy sposoacuteb ni poprzednio Zaczniemy od utworzenia po stronie serwera skryptutwitterPostphp w ktoacuterym u yjemy interfejsu statusesupdate API Twittera
Spoacutejrzmy na kompletny skrypt
ltphpsession_start()require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
$time = $_SESSION[time]$level = $_SESSION[level]if (isset($time) ampamp isset($level)) Pobranie tokenoacutew u ytkownika z sesji $access_token = $_SESSION[access_token] $connection = new TwitterOAuth(CONSUMER_KEY CONSUMER_SECRET $access_token[oauth_token] $access_token[oauth_token_secret])
$parameters = array(status =gt W a nie uda o mi si sko czy $level poziom gry Yet Another Platformer w $time sekund) $status = $connection-gtpost(statusesupdate $parameters)gt
Najprawdopodobniej rozpoznajesz wi kszo kodu z powy szego listingu ktoacutery dodali my napocz tku skryptu ekranu pocz tkowego (tylko wyroacute niony kod jest nowy) W ostatnich dwoacutechwierszach tworzymy a nast pnie przesy amy do Twittera tekst ktoacutery chcemy opublikowa co
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
163
mdash jak wida mdash jest ca kiem proste Musimy jednak zaj si jeszcze jednym Poniewa graczjest zalogowany znamy jego nazw wi c mo emy j wykorzysta na ekranie tablicy wynikoacutew
W kodzie klienta utworzymy troch inn od dotychczasowej wersj tablicy wynikoacutew
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) if (twitter) top += ltinput id=name type=hidden value=+twitterName+gt + twitterName + + minSec(jsontop[i]time) + lta id=saveScore href=gtZatwierd ltagt + lta id=tweetScore href=gtTweetnijltagt ltbrgt else top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt + lta target=_blank href=httptwittercomhome status=+escape(w a nie uda o mi si sko czy +current Level+ poziom gry Yet Another Platformer w +minSec (jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Tworzymy tu niewidoczne pole wej ciowe przechowuj ce nazw u ytkownika pochodz cz Twittera Nast pnie wypisujemy t nazw na ekranie tablicy wynikoacutew Zwroacute uwag e niemusieli my w ogoacutele zmienia kodu po stronie serwera
Tyle na temat integracji z Twitterem Je eli chcesz dowiedzie si wi cej i rozszerzy funk-cjonalno gry zajrzyj do dokumentacji API Twittera
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
164
Integracja z FacebookiemIntegracja z Facebookiem i Twitterem jest w wielu aspektach podobna Facebook jest jednakw du o wi kszym stopniu nastawiony na gry Zajmiemy si implementacj osi gni dla zalo-gowanych u ytkownikoacutew Skorzystamy z SDK Facebooka dla PHP ale s roacutewnie dost pnerozwi zania dla innych j zykoacutew
Tak jak w przypadku Twittera tu roacutewnie musimy zacz od zarejestrowania aplikacji w Fa-cebooku W tym celu trzeba si zalogowa do serwisu dla deweloperoacutew (httpsdevelopers
facebookcom) i klikn pozycj Apps1
Nast pnie nale y klikn cze Create New App i wype ni obowi zkowe pola formularza Poich zatwierdzeniu pojawi si ekran z informacjami dotycz cymi nowej aplikacji Podobnie jakby o w przypadku Twittera tu roacutewnie najwa niejsze s dwie warto ci co wida na rysunku
1 Aby moacutec tworzy aplikacje trzeba si zarejestrowa jako programista W tym celu musisz klikn przycisk
Register as a Developer mdash przyp t um
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
165
Na powy szym zrzucie strza k zosta a oznaczona sekcja umo liwiaj ca wyboacuter sposobu inte-gracji aplikacji z Facebookiem Aby uzyska pe ny dost p do interfejsu Open Graph API Fa-cebooka ktoacutery umo liwia mi dzy innymi publikowanie osi gni trzeba zaznaczy pozycjAplikacja na Facebooku
Dzi ki temu gra mo e by uruchamiana w ramce (iframe) wewn trz strony Facebooka Jednakaby to by o mo liwe konieczny jest prawid owy certyfikat dla HTTPS obowi zuj cy w dome-nie w ktoacuterej jest dost pna gra Je li jednak chcemy by gra by a adowana z naszego serweranie ma tych wymaga ale i tak trzeba wpisa adres w odpowiednim polu (aby adres zostauznany za poprawny nale y poda https nawet je li nie ma si certyfikatu)
Jest jeszcze jedno co nale y zrobi by aplikacja mog a publikowa osi gni cia mdash nale y jzarejestrowa jako gr W tym celu wystarczy klikn pozycj Informacje o aplikacji a na-st pnie w sekcji Informacje o aplikacji w polach Kategoria ustawi pozycj Gry i ustali gatunekgry co wida na poni szym rysunku
Uwierzytelnianie przez FacebookaPodstawowy mechanizm uwierzytelniania jest bardzo podobny do tego z Twittera ale istniejepewna roacute nica w podej ciu do dost pu W przypadku Twittera mo na by o zdecydowa czyaplikacja ma prawa tylko do odczytu czy roacutewnie zapisu Facebook oferuje znacznie bogatszemo liwo ci ustalania poziomoacutew dost pu przy czym decyduje si o nich w czasie logowania
Kod odpowiedzialny za uwierzytelnianie zosta przedstawiony na poni szym listingu Tu roacutewnie jak w przypadku Twittera musimy umie ci na pocz tku skryptu kod pobieraj cy obiekt bie-
cego u ytkownika
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
166
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()gt
Wyroacute niony wiersz kodu odpowiada za wskazanie e z poziomu gry b dziemy chcieli publiko-wa wpisy na osi czasu u ytkownika W miejscach (1) i (2) nale y wpisa warto ci wy wietlonena stronie konfiguracji aplikacji w Facebooku
Je li zmienna $facebookUser to null oznacza to e u ytkownik jest ju zalogowany W prze-ciwnym przypadku musimy wy wietli przycisk logowania Musimy wi c napisa kod podobnydo tego ktoacutery s u y do wy wietlenia przycisku logowania za po rednictwem Twittera
ltdiv id=startScreen class=screengt ltphp if ($facebookUser) $loginUrl = $facebook-gtgetLoginUrl(array( scope =gt $scope redirect_uri =gt $app_url )) gt lta class=button tweetLink href=ltphp print $loginUrl gtgtZaloguj przez Facebookaltagt ltphp else $logoutUrl = $facebook-gtgetLogoutUrl(array( next =gt $app_url )) gt lta class=button tweetLink href=ltphp print $logoutUrlgtgtWyloguj z Facebookaltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
155
Dodatkowe przypadkowe zmienneNazwy zmiennych nie oddaj ju znaczenia przechowywanych przez nie warto ci ale to niewszystko poniewa stosunkowo atwo sprawdzi ktoacutera z nich odpowiada za wynik Musimy wi cdoda wi cej zmiennych ktoacuterych zadaniem jest wprowadzenie oszusta w b d Przyk adowerozwi zanie zosta o przedstawione na poni szym listingu
$ajax( dataType json url highscorephp data sXZZUj Mathround(200Mathrandom()) enHf8F Mathround(200Mathrandom()) eZnqBG currentLevel avFanB Mathround(200Mathrandom()) zkpCfb currentLevel PCXFTR Mathround(200Mathrandom()) Nmyzsf currentLevel FYGswh Mathround(200Mathrandom()) C3kaTz finishedTime ltlt 1 gU7buf finishedTime ykN65g Mathround(200Mathrandom()) Q5jUZm Mathround(200Mathrandom()) bb5d7V Mathround(200Mathrandom()) WTsrdm finishedTime ltlt 1 bCW5Dg currentLevel AFM8MN Mathround(200Mathrandom()) FUHt6K Mathround(200Mathrandom()) WfBCLQ finishedTime ltlt 1 d8mzVn Mathround(200Mathrandom()) bHxNpb Mathround(200Mathrandom()) MWcmCz finishedTime ZAat42 Mathround(200Mathrandom()) async false success function (json) )
W kodzie serwera nie trzeba nic zmienia poniewa dodatkowe zmienne s po prostu igno-rowane Mo na oczywi cie jeszcze bardziej skomplikowa spraw i wprowadzi dodatkowezale no ci mi dzy zmiennymi Nale y jednak ca y czas pami ta ktoacutere zmienne przechowujistotne dane by roacutewnie sobie nie utrudni zadania
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
156
Integracja z TwitteremTwitter daje mo liwo dzielenia si z innymi kroacutetkimi informacjami W przypadku gier mo emyz niego skorzysta na dwa sposoby
mo emy umo liwi graczowi zalogowanie si do gry za pomoc nazwy u ytkownikai has a z Twittera
mo emy da mo liwo publikowania tweetoacutew z wynikami lub informacjamio post pach w grze
Zajmiemy si teraz zaimplementowaniem tych dwoacutech funkcji
Podstawy TwitteraIstnieje bardzo prosty sposoacuteb korzystania z Twittera ktoacutery nie wymaga znajomo ci adnegoAPI Je li u ytkownik jest zalogowany za po rednictwem odpowiednio przygotowanego adresuURL mo na opublikowa tweet URL powinien by zbudowany w nast puj cy sposoacuteb
httptwittercomhomestatus=Przyk adowy tweet
Wyroacute niony fragment adresu to tekst tweeta Na ekranie tablicy wynikoacutew obok przyciskuZatwierd umie cimy odsy acz Tweetnij
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmit ltagt + lta id=tweetScore target=_blank href=http twittercomhomestatus=+escape(W a nie uda o mi si sko czy +currentLevel+ poziom gry Yet Another Platformer w +minSec(jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
157
Najistotniejszy jest wyroacute niony fragment kodu bo to dzi ki niemu dzieje si to co powinno Za-stosowali my tu javascriptow funkcj escape by dostarczany test by poprawnie sformatowany
Jak wida bardzo atwo zaimplementowa to rozwi zanie ale trzeba wiedzie o kilku ograni-czeniach
Je li u ytkownik nie jest zalogowany pojawi si ekran logowania Twittera Na ekranie tablicy wynikoacutew nie mo na u y nazwy u ytkownika z Twittera
W zwi zku z tym nawet je li u ytkownik b dzie chcia tweetn swoacutej wyniki tak b dzie musia poda swoj nazw w grze
Publikowanie ka dego tweeta powoduje otwarcie nowego okna przegl darkiw ktoacuterym u ytkownik musi potwierdzi t operacj
Je li chcieliby my umo liwi u ytkownikowi zalogowanie si i automatyczne publikowanietweetoacutew bez konieczno ci ka dorazowego otwierania nowego okna musimy skorzysta z APITwittera
Pe ny dost p do API TwitteraNajpe niejsza integracja gry z Twitterem wymaga zapytania u ytkownika o zgod na po czeniejego konta z gr Mo na w tym celu skorzysta z mechanizmu OAuth ktoacutery jest otwartym stan-dardem uwierzytelniania stosowanym przez wiele firm takich jak Twitter Google czy Facebook
Aby da u ytkownikom mo liwo zalogowania si za po rednictwem Twittera musimy lekkozmodyfikowa ekran pocz tkowy
Je li gracz kliknie cze Rozpocznij gr zacznie od razu rozgrywk Je li z kolei kliknie Zalogujprzez Twittera b dzie si musia zalogowa za po rednictwem Twittera po czym nast pi powroacutetdo gry
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
158
Rejestrowanie gry w TwitterzeZanim przejdziemy dalej musimy zarejestrowa gr w Twitterze Aby to zrobi musisz sizalogowa na stron Twittera dla deweloperoacutew (httpsdevtwittercom) a nast pnie kliknpozycj My applications (moje aplikacje) w menu profilu
Nale y utworzy now aplikacj ( cze Create a new application) wype ni wszystkie wymaganepola oraz wyrazi zgod na warunki licencyjne (Rules of the Road) Po zatwierdzeniu wprowa-dzonych danych zostanie wy wietlona strona zawieraj ca dane utworzonej aplikacji
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
159
Trzeba zwroacuteci uwag na dwie informacje ktoacutere na rysunku zosta y otoczone ramk poniewab d potrzebne poacute niej Nale y wykona jeszcze jedn drobn modyfikacj konfiguracjiPrzejd do zak adki Settings (ustawienia) i przyjrzyj si sekcji Application Type (typ aplikacji)Domy lnie jest zaznaczone pole Read only (tylko do odczytu) Je li chcesz w imieniu graczapublikowa tweety musisz wybra opcj Read and Write
W ten sposoacuteb przygotowali my konto na Twitterze do integracji z gr
Pomocnicza bibliotekaKod realizuj cy komunikacj z API Twittera mo na napisa samemu w PHP ale to dosy mud-na praca Na szcz cie jest dost pnych wiele bibliotek ktoacutere mog to upro ci Jedn z nichprzeznaczon dla PHP jest twitteroauth (httpsgithubcomabrahamtwitteroauth) Istniejoczywi cie biblioteki dla innych j zykoacutew koniecznie zajrzyj do dokumentacji Twittera abydowiedzie si wi cej na ten temat
Du zalet biblioteki twitteroauth jest to e mo na j zainstalowa na prawie ka dym serwerzeobs uguj cym PHP Wystarczy skopiowa bibliotek do tego samego katalogu w ktoacuterym znajdujsi skrypty gry W naszym przypadku b dzie to podkatalog twitter
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
160
Musimy zacz od skonfigurowania biblioteki Przydatny b dzie przyk adowy skrypt konfigura-cyjny config-samplephp dost pny w podanym repozytorium Znajduje si w nim kod definiuj cytrzy sta e
define(CONSUMER_KEY (1))define(CONSUMER_SECRET (2))define(OAUTH_CALLBACK (3))
W miejscach (1) i (2) trzeba wpisa warto ci wy wietlone na stronie informacji o utworzonejaplikacji Twittera W miejscu (3) nale y poda adres URL skryptu zwrotnego callbackphp
Ostatnim krokiem jest zmodyfikowanie skryptu callbackphp tak by zawiera prawid oweprzekierowanie do g oacutewnego pliku naszej gry
header(Location indexphp)
UwierzytelnianieNa poni szym diagramie zosta przedstawiony sposoacuteb przeprowadzania uwierzytelniania i auto-ryzacji u ytkownikoacutew w grze za po rednictwem Twittera
W praktyce nie jest to tak skomplikowane na jakie wygl da przede wszystkim dlatego ewi kszo jest ju zaimplementowana w bibliotece twitteroauth Zajmiemy si utworzeniemstrony logowania wy wietlanej po klikni ciu przycisku Zaloguj przez Twittera U yjemy zwy-k ego odsy acza kieruj cego do pliku redirectphp Kiedy u ytkownik kliknie to cze po razpierwszy zostanie przekierowany na stron Twittera na ktoacuterej b dzie moacuteg autoryzowa dost pdo konta
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
161
Po wyra eniu zgody nast pi przekierowanie na adres ktoacutery zosta ustawiony w pliku callbackphpJe li u ytkownik ju raz wyrazi zgod na autoryzacj b dzie moacuteg od razu si zalogowa
W skryptach JavaScript bardzo przyda nam si teraz informacja o tym czy gracz jest po czonyczy nie Aby j uzyska musimy przekszta ci g oacutewny dokument HTML gry w plik PHP i umie-ci na jego pocz tku nast puj cy kod
ltphpsession_start()
require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
Pobranie tokenoacutew u 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-gtget(accountverify_credentials)gt
W tym kodzie rozpoczynamy sesj do czamy dwa pliki biblioteki twitteroauth oraz odczytuje-my token sesji Je li token jest ustawiony oznacza to e u ytkownik jest zalogowany do Twittera
Nast pnie serwer czy si z Twitterem aby pobra obiekt u ytkownika Tak to wygl da postronie serwera ale kod JavaScript wci nie ma informacji o zalogowaniu W zwi zku z tymmusimy utworzy skrypt przesy aj cy dane do kodu klienckiego
ltscript type=textjavascriptgtltphp if($_SESSION[status] == verified) gt var twitter = true var twitterName = ltphp print $user-gtscreen_name gtltphp else gt var twitter = falseltphp gtltscriptgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
162
Je li gracz jest zalogowany do Twittera globalna zmienna twitter ma warto true a zmiennatwitterName zawiera nazw u ytkownika
Ostatnim o co nale y zadba jest poinformowanie u ytkownika o pomy lnym zalogowaniu zapomoc Twittera i umo liwienie wylogowania si W tym celu musimy wprowadzi drobnzmian w kodzie odpowiedzialnym za ekran pocz tkowy wy wietlany po zalogowaniu
ltdiv id=startScreen class=screengt ltphp if($_SESSION[status] = verified) gt lta class=button tweetLink href=twitterredirectphpgtZaloguj przez Twitteraltagt ltphp else gt lta class=button tweetLink href=twitterclearsessionsphpgtWyloguj z Twitteraltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Po wprowadzeniu powy szych modyfikacji mo na uzna e uwierzytelnianie przez Twitterajest zaimplementowane
Publikowanie najlepszych wynikoacutew na TwitterzeTeraz kiedy gracz jest ju zalogowany do Twittera mo na publikowa jego wyniki w znaczniewygodniejszy sposoacuteb ni poprzednio Zaczniemy od utworzenia po stronie serwera skryptutwitterPostphp w ktoacuterym u yjemy interfejsu statusesupdate API Twittera
Spoacutejrzmy na kompletny skrypt
ltphpsession_start()require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
$time = $_SESSION[time]$level = $_SESSION[level]if (isset($time) ampamp isset($level)) Pobranie tokenoacutew u ytkownika z sesji $access_token = $_SESSION[access_token] $connection = new TwitterOAuth(CONSUMER_KEY CONSUMER_SECRET $access_token[oauth_token] $access_token[oauth_token_secret])
$parameters = array(status =gt W a nie uda o mi si sko czy $level poziom gry Yet Another Platformer w $time sekund) $status = $connection-gtpost(statusesupdate $parameters)gt
Najprawdopodobniej rozpoznajesz wi kszo kodu z powy szego listingu ktoacutery dodali my napocz tku skryptu ekranu pocz tkowego (tylko wyroacute niony kod jest nowy) W ostatnich dwoacutechwierszach tworzymy a nast pnie przesy amy do Twittera tekst ktoacutery chcemy opublikowa co
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
163
mdash jak wida mdash jest ca kiem proste Musimy jednak zaj si jeszcze jednym Poniewa graczjest zalogowany znamy jego nazw wi c mo emy j wykorzysta na ekranie tablicy wynikoacutew
W kodzie klienta utworzymy troch inn od dotychczasowej wersj tablicy wynikoacutew
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) if (twitter) top += ltinput id=name type=hidden value=+twitterName+gt + twitterName + + minSec(jsontop[i]time) + lta id=saveScore href=gtZatwierd ltagt + lta id=tweetScore href=gtTweetnijltagt ltbrgt else top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt + lta target=_blank href=httptwittercomhome status=+escape(w a nie uda o mi si sko czy +current Level+ poziom gry Yet Another Platformer w +minSec (jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Tworzymy tu niewidoczne pole wej ciowe przechowuj ce nazw u ytkownika pochodz cz Twittera Nast pnie wypisujemy t nazw na ekranie tablicy wynikoacutew Zwroacute uwag e niemusieli my w ogoacutele zmienia kodu po stronie serwera
Tyle na temat integracji z Twitterem Je eli chcesz dowiedzie si wi cej i rozszerzy funk-cjonalno gry zajrzyj do dokumentacji API Twittera
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
164
Integracja z FacebookiemIntegracja z Facebookiem i Twitterem jest w wielu aspektach podobna Facebook jest jednakw du o wi kszym stopniu nastawiony na gry Zajmiemy si implementacj osi gni dla zalo-gowanych u ytkownikoacutew Skorzystamy z SDK Facebooka dla PHP ale s roacutewnie dost pnerozwi zania dla innych j zykoacutew
Tak jak w przypadku Twittera tu roacutewnie musimy zacz od zarejestrowania aplikacji w Fa-cebooku W tym celu trzeba si zalogowa do serwisu dla deweloperoacutew (httpsdevelopers
facebookcom) i klikn pozycj Apps1
Nast pnie nale y klikn cze Create New App i wype ni obowi zkowe pola formularza Poich zatwierdzeniu pojawi si ekran z informacjami dotycz cymi nowej aplikacji Podobnie jakby o w przypadku Twittera tu roacutewnie najwa niejsze s dwie warto ci co wida na rysunku
1 Aby moacutec tworzy aplikacje trzeba si zarejestrowa jako programista W tym celu musisz klikn przycisk
Register as a Developer mdash przyp t um
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
165
Na powy szym zrzucie strza k zosta a oznaczona sekcja umo liwiaj ca wyboacuter sposobu inte-gracji aplikacji z Facebookiem Aby uzyska pe ny dost p do interfejsu Open Graph API Fa-cebooka ktoacutery umo liwia mi dzy innymi publikowanie osi gni trzeba zaznaczy pozycjAplikacja na Facebooku
Dzi ki temu gra mo e by uruchamiana w ramce (iframe) wewn trz strony Facebooka Jednakaby to by o mo liwe konieczny jest prawid owy certyfikat dla HTTPS obowi zuj cy w dome-nie w ktoacuterej jest dost pna gra Je li jednak chcemy by gra by a adowana z naszego serweranie ma tych wymaga ale i tak trzeba wpisa adres w odpowiednim polu (aby adres zostauznany za poprawny nale y poda https nawet je li nie ma si certyfikatu)
Jest jeszcze jedno co nale y zrobi by aplikacja mog a publikowa osi gni cia mdash nale y jzarejestrowa jako gr W tym celu wystarczy klikn pozycj Informacje o aplikacji a na-st pnie w sekcji Informacje o aplikacji w polach Kategoria ustawi pozycj Gry i ustali gatunekgry co wida na poni szym rysunku
Uwierzytelnianie przez FacebookaPodstawowy mechanizm uwierzytelniania jest bardzo podobny do tego z Twittera ale istniejepewna roacute nica w podej ciu do dost pu W przypadku Twittera mo na by o zdecydowa czyaplikacja ma prawa tylko do odczytu czy roacutewnie zapisu Facebook oferuje znacznie bogatszemo liwo ci ustalania poziomoacutew dost pu przy czym decyduje si o nich w czasie logowania
Kod odpowiedzialny za uwierzytelnianie zosta przedstawiony na poni szym listingu Tu roacutewnie jak w przypadku Twittera musimy umie ci na pocz tku skryptu kod pobieraj cy obiekt bie-
cego u ytkownika
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
166
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()gt
Wyroacute niony wiersz kodu odpowiada za wskazanie e z poziomu gry b dziemy chcieli publiko-wa wpisy na osi czasu u ytkownika W miejscach (1) i (2) nale y wpisa warto ci wy wietlonena stronie konfiguracji aplikacji w Facebooku
Je li zmienna $facebookUser to null oznacza to e u ytkownik jest ju zalogowany W prze-ciwnym przypadku musimy wy wietli przycisk logowania Musimy wi c napisa kod podobnydo tego ktoacutery s u y do wy wietlenia przycisku logowania za po rednictwem Twittera
ltdiv id=startScreen class=screengt ltphp if ($facebookUser) $loginUrl = $facebook-gtgetLoginUrl(array( scope =gt $scope redirect_uri =gt $app_url )) gt lta class=button tweetLink href=ltphp print $loginUrl gtgtZaloguj przez Facebookaltagt ltphp else $logoutUrl = $facebook-gtgetLogoutUrl(array( next =gt $app_url )) gt lta class=button tweetLink href=ltphp print $logoutUrlgtgtWyloguj z Facebookaltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
156
Integracja z TwitteremTwitter daje mo liwo dzielenia si z innymi kroacutetkimi informacjami W przypadku gier mo emyz niego skorzysta na dwa sposoby
mo emy umo liwi graczowi zalogowanie si do gry za pomoc nazwy u ytkownikai has a z Twittera
mo emy da mo liwo publikowania tweetoacutew z wynikami lub informacjamio post pach w grze
Zajmiemy si teraz zaimplementowaniem tych dwoacutech funkcji
Podstawy TwitteraIstnieje bardzo prosty sposoacuteb korzystania z Twittera ktoacutery nie wymaga znajomo ci adnegoAPI Je li u ytkownik jest zalogowany za po rednictwem odpowiednio przygotowanego adresuURL mo na opublikowa tweet URL powinien by zbudowany w nast puj cy sposoacuteb
httptwittercomhomestatus=Przyk adowy tweet
Wyroacute niony fragment adresu to tekst tweeta Na ekranie tablicy wynikoacutew obok przyciskuZatwierd umie cimy odsy acz Tweetnij
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmit ltagt + lta id=tweetScore target=_blank href=http twittercomhomestatus=+escape(W a nie uda o mi si sko czy +currentLevel+ poziom gry Yet Another Platformer w +minSec(jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
157
Najistotniejszy jest wyroacute niony fragment kodu bo to dzi ki niemu dzieje si to co powinno Za-stosowali my tu javascriptow funkcj escape by dostarczany test by poprawnie sformatowany
Jak wida bardzo atwo zaimplementowa to rozwi zanie ale trzeba wiedzie o kilku ograni-czeniach
Je li u ytkownik nie jest zalogowany pojawi si ekran logowania Twittera Na ekranie tablicy wynikoacutew nie mo na u y nazwy u ytkownika z Twittera
W zwi zku z tym nawet je li u ytkownik b dzie chcia tweetn swoacutej wyniki tak b dzie musia poda swoj nazw w grze
Publikowanie ka dego tweeta powoduje otwarcie nowego okna przegl darkiw ktoacuterym u ytkownik musi potwierdzi t operacj
Je li chcieliby my umo liwi u ytkownikowi zalogowanie si i automatyczne publikowanietweetoacutew bez konieczno ci ka dorazowego otwierania nowego okna musimy skorzysta z APITwittera
Pe ny dost p do API TwitteraNajpe niejsza integracja gry z Twitterem wymaga zapytania u ytkownika o zgod na po czeniejego konta z gr Mo na w tym celu skorzysta z mechanizmu OAuth ktoacutery jest otwartym stan-dardem uwierzytelniania stosowanym przez wiele firm takich jak Twitter Google czy Facebook
Aby da u ytkownikom mo liwo zalogowania si za po rednictwem Twittera musimy lekkozmodyfikowa ekran pocz tkowy
Je li gracz kliknie cze Rozpocznij gr zacznie od razu rozgrywk Je li z kolei kliknie Zalogujprzez Twittera b dzie si musia zalogowa za po rednictwem Twittera po czym nast pi powroacutetdo gry
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
158
Rejestrowanie gry w TwitterzeZanim przejdziemy dalej musimy zarejestrowa gr w Twitterze Aby to zrobi musisz sizalogowa na stron Twittera dla deweloperoacutew (httpsdevtwittercom) a nast pnie kliknpozycj My applications (moje aplikacje) w menu profilu
Nale y utworzy now aplikacj ( cze Create a new application) wype ni wszystkie wymaganepola oraz wyrazi zgod na warunki licencyjne (Rules of the Road) Po zatwierdzeniu wprowa-dzonych danych zostanie wy wietlona strona zawieraj ca dane utworzonej aplikacji
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
159
Trzeba zwroacuteci uwag na dwie informacje ktoacutere na rysunku zosta y otoczone ramk poniewab d potrzebne poacute niej Nale y wykona jeszcze jedn drobn modyfikacj konfiguracjiPrzejd do zak adki Settings (ustawienia) i przyjrzyj si sekcji Application Type (typ aplikacji)Domy lnie jest zaznaczone pole Read only (tylko do odczytu) Je li chcesz w imieniu graczapublikowa tweety musisz wybra opcj Read and Write
W ten sposoacuteb przygotowali my konto na Twitterze do integracji z gr
Pomocnicza bibliotekaKod realizuj cy komunikacj z API Twittera mo na napisa samemu w PHP ale to dosy mud-na praca Na szcz cie jest dost pnych wiele bibliotek ktoacutere mog to upro ci Jedn z nichprzeznaczon dla PHP jest twitteroauth (httpsgithubcomabrahamtwitteroauth) Istniejoczywi cie biblioteki dla innych j zykoacutew koniecznie zajrzyj do dokumentacji Twittera abydowiedzie si wi cej na ten temat
Du zalet biblioteki twitteroauth jest to e mo na j zainstalowa na prawie ka dym serwerzeobs uguj cym PHP Wystarczy skopiowa bibliotek do tego samego katalogu w ktoacuterym znajdujsi skrypty gry W naszym przypadku b dzie to podkatalog twitter
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
160
Musimy zacz od skonfigurowania biblioteki Przydatny b dzie przyk adowy skrypt konfigura-cyjny config-samplephp dost pny w podanym repozytorium Znajduje si w nim kod definiuj cytrzy sta e
define(CONSUMER_KEY (1))define(CONSUMER_SECRET (2))define(OAUTH_CALLBACK (3))
W miejscach (1) i (2) trzeba wpisa warto ci wy wietlone na stronie informacji o utworzonejaplikacji Twittera W miejscu (3) nale y poda adres URL skryptu zwrotnego callbackphp
Ostatnim krokiem jest zmodyfikowanie skryptu callbackphp tak by zawiera prawid oweprzekierowanie do g oacutewnego pliku naszej gry
header(Location indexphp)
UwierzytelnianieNa poni szym diagramie zosta przedstawiony sposoacuteb przeprowadzania uwierzytelniania i auto-ryzacji u ytkownikoacutew w grze za po rednictwem Twittera
W praktyce nie jest to tak skomplikowane na jakie wygl da przede wszystkim dlatego ewi kszo jest ju zaimplementowana w bibliotece twitteroauth Zajmiemy si utworzeniemstrony logowania wy wietlanej po klikni ciu przycisku Zaloguj przez Twittera U yjemy zwy-k ego odsy acza kieruj cego do pliku redirectphp Kiedy u ytkownik kliknie to cze po razpierwszy zostanie przekierowany na stron Twittera na ktoacuterej b dzie moacuteg autoryzowa dost pdo konta
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
161
Po wyra eniu zgody nast pi przekierowanie na adres ktoacutery zosta ustawiony w pliku callbackphpJe li u ytkownik ju raz wyrazi zgod na autoryzacj b dzie moacuteg od razu si zalogowa
W skryptach JavaScript bardzo przyda nam si teraz informacja o tym czy gracz jest po czonyczy nie Aby j uzyska musimy przekszta ci g oacutewny dokument HTML gry w plik PHP i umie-ci na jego pocz tku nast puj cy kod
ltphpsession_start()
require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
Pobranie tokenoacutew u 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-gtget(accountverify_credentials)gt
W tym kodzie rozpoczynamy sesj do czamy dwa pliki biblioteki twitteroauth oraz odczytuje-my token sesji Je li token jest ustawiony oznacza to e u ytkownik jest zalogowany do Twittera
Nast pnie serwer czy si z Twitterem aby pobra obiekt u ytkownika Tak to wygl da postronie serwera ale kod JavaScript wci nie ma informacji o zalogowaniu W zwi zku z tymmusimy utworzy skrypt przesy aj cy dane do kodu klienckiego
ltscript type=textjavascriptgtltphp if($_SESSION[status] == verified) gt var twitter = true var twitterName = ltphp print $user-gtscreen_name gtltphp else gt var twitter = falseltphp gtltscriptgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
162
Je li gracz jest zalogowany do Twittera globalna zmienna twitter ma warto true a zmiennatwitterName zawiera nazw u ytkownika
Ostatnim o co nale y zadba jest poinformowanie u ytkownika o pomy lnym zalogowaniu zapomoc Twittera i umo liwienie wylogowania si W tym celu musimy wprowadzi drobnzmian w kodzie odpowiedzialnym za ekran pocz tkowy wy wietlany po zalogowaniu
ltdiv id=startScreen class=screengt ltphp if($_SESSION[status] = verified) gt lta class=button tweetLink href=twitterredirectphpgtZaloguj przez Twitteraltagt ltphp else gt lta class=button tweetLink href=twitterclearsessionsphpgtWyloguj z Twitteraltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Po wprowadzeniu powy szych modyfikacji mo na uzna e uwierzytelnianie przez Twitterajest zaimplementowane
Publikowanie najlepszych wynikoacutew na TwitterzeTeraz kiedy gracz jest ju zalogowany do Twittera mo na publikowa jego wyniki w znaczniewygodniejszy sposoacuteb ni poprzednio Zaczniemy od utworzenia po stronie serwera skryptutwitterPostphp w ktoacuterym u yjemy interfejsu statusesupdate API Twittera
Spoacutejrzmy na kompletny skrypt
ltphpsession_start()require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
$time = $_SESSION[time]$level = $_SESSION[level]if (isset($time) ampamp isset($level)) Pobranie tokenoacutew u ytkownika z sesji $access_token = $_SESSION[access_token] $connection = new TwitterOAuth(CONSUMER_KEY CONSUMER_SECRET $access_token[oauth_token] $access_token[oauth_token_secret])
$parameters = array(status =gt W a nie uda o mi si sko czy $level poziom gry Yet Another Platformer w $time sekund) $status = $connection-gtpost(statusesupdate $parameters)gt
Najprawdopodobniej rozpoznajesz wi kszo kodu z powy szego listingu ktoacutery dodali my napocz tku skryptu ekranu pocz tkowego (tylko wyroacute niony kod jest nowy) W ostatnich dwoacutechwierszach tworzymy a nast pnie przesy amy do Twittera tekst ktoacutery chcemy opublikowa co
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
163
mdash jak wida mdash jest ca kiem proste Musimy jednak zaj si jeszcze jednym Poniewa graczjest zalogowany znamy jego nazw wi c mo emy j wykorzysta na ekranie tablicy wynikoacutew
W kodzie klienta utworzymy troch inn od dotychczasowej wersj tablicy wynikoacutew
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) if (twitter) top += ltinput id=name type=hidden value=+twitterName+gt + twitterName + + minSec(jsontop[i]time) + lta id=saveScore href=gtZatwierd ltagt + lta id=tweetScore href=gtTweetnijltagt ltbrgt else top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt + lta target=_blank href=httptwittercomhome status=+escape(w a nie uda o mi si sko czy +current Level+ poziom gry Yet Another Platformer w +minSec (jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Tworzymy tu niewidoczne pole wej ciowe przechowuj ce nazw u ytkownika pochodz cz Twittera Nast pnie wypisujemy t nazw na ekranie tablicy wynikoacutew Zwroacute uwag e niemusieli my w ogoacutele zmienia kodu po stronie serwera
Tyle na temat integracji z Twitterem Je eli chcesz dowiedzie si wi cej i rozszerzy funk-cjonalno gry zajrzyj do dokumentacji API Twittera
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
164
Integracja z FacebookiemIntegracja z Facebookiem i Twitterem jest w wielu aspektach podobna Facebook jest jednakw du o wi kszym stopniu nastawiony na gry Zajmiemy si implementacj osi gni dla zalo-gowanych u ytkownikoacutew Skorzystamy z SDK Facebooka dla PHP ale s roacutewnie dost pnerozwi zania dla innych j zykoacutew
Tak jak w przypadku Twittera tu roacutewnie musimy zacz od zarejestrowania aplikacji w Fa-cebooku W tym celu trzeba si zalogowa do serwisu dla deweloperoacutew (httpsdevelopers
facebookcom) i klikn pozycj Apps1
Nast pnie nale y klikn cze Create New App i wype ni obowi zkowe pola formularza Poich zatwierdzeniu pojawi si ekran z informacjami dotycz cymi nowej aplikacji Podobnie jakby o w przypadku Twittera tu roacutewnie najwa niejsze s dwie warto ci co wida na rysunku
1 Aby moacutec tworzy aplikacje trzeba si zarejestrowa jako programista W tym celu musisz klikn przycisk
Register as a Developer mdash przyp t um
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
165
Na powy szym zrzucie strza k zosta a oznaczona sekcja umo liwiaj ca wyboacuter sposobu inte-gracji aplikacji z Facebookiem Aby uzyska pe ny dost p do interfejsu Open Graph API Fa-cebooka ktoacutery umo liwia mi dzy innymi publikowanie osi gni trzeba zaznaczy pozycjAplikacja na Facebooku
Dzi ki temu gra mo e by uruchamiana w ramce (iframe) wewn trz strony Facebooka Jednakaby to by o mo liwe konieczny jest prawid owy certyfikat dla HTTPS obowi zuj cy w dome-nie w ktoacuterej jest dost pna gra Je li jednak chcemy by gra by a adowana z naszego serweranie ma tych wymaga ale i tak trzeba wpisa adres w odpowiednim polu (aby adres zostauznany za poprawny nale y poda https nawet je li nie ma si certyfikatu)
Jest jeszcze jedno co nale y zrobi by aplikacja mog a publikowa osi gni cia mdash nale y jzarejestrowa jako gr W tym celu wystarczy klikn pozycj Informacje o aplikacji a na-st pnie w sekcji Informacje o aplikacji w polach Kategoria ustawi pozycj Gry i ustali gatunekgry co wida na poni szym rysunku
Uwierzytelnianie przez FacebookaPodstawowy mechanizm uwierzytelniania jest bardzo podobny do tego z Twittera ale istniejepewna roacute nica w podej ciu do dost pu W przypadku Twittera mo na by o zdecydowa czyaplikacja ma prawa tylko do odczytu czy roacutewnie zapisu Facebook oferuje znacznie bogatszemo liwo ci ustalania poziomoacutew dost pu przy czym decyduje si o nich w czasie logowania
Kod odpowiedzialny za uwierzytelnianie zosta przedstawiony na poni szym listingu Tu roacutewnie jak w przypadku Twittera musimy umie ci na pocz tku skryptu kod pobieraj cy obiekt bie-
cego u ytkownika
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
166
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()gt
Wyroacute niony wiersz kodu odpowiada za wskazanie e z poziomu gry b dziemy chcieli publiko-wa wpisy na osi czasu u ytkownika W miejscach (1) i (2) nale y wpisa warto ci wy wietlonena stronie konfiguracji aplikacji w Facebooku
Je li zmienna $facebookUser to null oznacza to e u ytkownik jest ju zalogowany W prze-ciwnym przypadku musimy wy wietli przycisk logowania Musimy wi c napisa kod podobnydo tego ktoacutery s u y do wy wietlenia przycisku logowania za po rednictwem Twittera
ltdiv id=startScreen class=screengt ltphp if ($facebookUser) $loginUrl = $facebook-gtgetLoginUrl(array( scope =gt $scope redirect_uri =gt $app_url )) gt lta class=button tweetLink href=ltphp print $loginUrl gtgtZaloguj przez Facebookaltagt ltphp else $logoutUrl = $facebook-gtgetLogoutUrl(array( next =gt $app_url )) gt lta class=button tweetLink href=ltphp print $logoutUrlgtgtWyloguj z Facebookaltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
157
Najistotniejszy jest wyroacute niony fragment kodu bo to dzi ki niemu dzieje si to co powinno Za-stosowali my tu javascriptow funkcj escape by dostarczany test by poprawnie sformatowany
Jak wida bardzo atwo zaimplementowa to rozwi zanie ale trzeba wiedzie o kilku ograni-czeniach
Je li u ytkownik nie jest zalogowany pojawi si ekran logowania Twittera Na ekranie tablicy wynikoacutew nie mo na u y nazwy u ytkownika z Twittera
W zwi zku z tym nawet je li u ytkownik b dzie chcia tweetn swoacutej wyniki tak b dzie musia poda swoj nazw w grze
Publikowanie ka dego tweeta powoduje otwarcie nowego okna przegl darkiw ktoacuterym u ytkownik musi potwierdzi t operacj
Je li chcieliby my umo liwi u ytkownikowi zalogowanie si i automatyczne publikowanietweetoacutew bez konieczno ci ka dorazowego otwierania nowego okna musimy skorzysta z APITwittera
Pe ny dost p do API TwitteraNajpe niejsza integracja gry z Twitterem wymaga zapytania u ytkownika o zgod na po czeniejego konta z gr Mo na w tym celu skorzysta z mechanizmu OAuth ktoacutery jest otwartym stan-dardem uwierzytelniania stosowanym przez wiele firm takich jak Twitter Google czy Facebook
Aby da u ytkownikom mo liwo zalogowania si za po rednictwem Twittera musimy lekkozmodyfikowa ekran pocz tkowy
Je li gracz kliknie cze Rozpocznij gr zacznie od razu rozgrywk Je li z kolei kliknie Zalogujprzez Twittera b dzie si musia zalogowa za po rednictwem Twittera po czym nast pi powroacutetdo gry
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
158
Rejestrowanie gry w TwitterzeZanim przejdziemy dalej musimy zarejestrowa gr w Twitterze Aby to zrobi musisz sizalogowa na stron Twittera dla deweloperoacutew (httpsdevtwittercom) a nast pnie kliknpozycj My applications (moje aplikacje) w menu profilu
Nale y utworzy now aplikacj ( cze Create a new application) wype ni wszystkie wymaganepola oraz wyrazi zgod na warunki licencyjne (Rules of the Road) Po zatwierdzeniu wprowa-dzonych danych zostanie wy wietlona strona zawieraj ca dane utworzonej aplikacji
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
159
Trzeba zwroacuteci uwag na dwie informacje ktoacutere na rysunku zosta y otoczone ramk poniewab d potrzebne poacute niej Nale y wykona jeszcze jedn drobn modyfikacj konfiguracjiPrzejd do zak adki Settings (ustawienia) i przyjrzyj si sekcji Application Type (typ aplikacji)Domy lnie jest zaznaczone pole Read only (tylko do odczytu) Je li chcesz w imieniu graczapublikowa tweety musisz wybra opcj Read and Write
W ten sposoacuteb przygotowali my konto na Twitterze do integracji z gr
Pomocnicza bibliotekaKod realizuj cy komunikacj z API Twittera mo na napisa samemu w PHP ale to dosy mud-na praca Na szcz cie jest dost pnych wiele bibliotek ktoacutere mog to upro ci Jedn z nichprzeznaczon dla PHP jest twitteroauth (httpsgithubcomabrahamtwitteroauth) Istniejoczywi cie biblioteki dla innych j zykoacutew koniecznie zajrzyj do dokumentacji Twittera abydowiedzie si wi cej na ten temat
Du zalet biblioteki twitteroauth jest to e mo na j zainstalowa na prawie ka dym serwerzeobs uguj cym PHP Wystarczy skopiowa bibliotek do tego samego katalogu w ktoacuterym znajdujsi skrypty gry W naszym przypadku b dzie to podkatalog twitter
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
160
Musimy zacz od skonfigurowania biblioteki Przydatny b dzie przyk adowy skrypt konfigura-cyjny config-samplephp dost pny w podanym repozytorium Znajduje si w nim kod definiuj cytrzy sta e
define(CONSUMER_KEY (1))define(CONSUMER_SECRET (2))define(OAUTH_CALLBACK (3))
W miejscach (1) i (2) trzeba wpisa warto ci wy wietlone na stronie informacji o utworzonejaplikacji Twittera W miejscu (3) nale y poda adres URL skryptu zwrotnego callbackphp
Ostatnim krokiem jest zmodyfikowanie skryptu callbackphp tak by zawiera prawid oweprzekierowanie do g oacutewnego pliku naszej gry
header(Location indexphp)
UwierzytelnianieNa poni szym diagramie zosta przedstawiony sposoacuteb przeprowadzania uwierzytelniania i auto-ryzacji u ytkownikoacutew w grze za po rednictwem Twittera
W praktyce nie jest to tak skomplikowane na jakie wygl da przede wszystkim dlatego ewi kszo jest ju zaimplementowana w bibliotece twitteroauth Zajmiemy si utworzeniemstrony logowania wy wietlanej po klikni ciu przycisku Zaloguj przez Twittera U yjemy zwy-k ego odsy acza kieruj cego do pliku redirectphp Kiedy u ytkownik kliknie to cze po razpierwszy zostanie przekierowany na stron Twittera na ktoacuterej b dzie moacuteg autoryzowa dost pdo konta
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
161
Po wyra eniu zgody nast pi przekierowanie na adres ktoacutery zosta ustawiony w pliku callbackphpJe li u ytkownik ju raz wyrazi zgod na autoryzacj b dzie moacuteg od razu si zalogowa
W skryptach JavaScript bardzo przyda nam si teraz informacja o tym czy gracz jest po czonyczy nie Aby j uzyska musimy przekszta ci g oacutewny dokument HTML gry w plik PHP i umie-ci na jego pocz tku nast puj cy kod
ltphpsession_start()
require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
Pobranie tokenoacutew u 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-gtget(accountverify_credentials)gt
W tym kodzie rozpoczynamy sesj do czamy dwa pliki biblioteki twitteroauth oraz odczytuje-my token sesji Je li token jest ustawiony oznacza to e u ytkownik jest zalogowany do Twittera
Nast pnie serwer czy si z Twitterem aby pobra obiekt u ytkownika Tak to wygl da postronie serwera ale kod JavaScript wci nie ma informacji o zalogowaniu W zwi zku z tymmusimy utworzy skrypt przesy aj cy dane do kodu klienckiego
ltscript type=textjavascriptgtltphp if($_SESSION[status] == verified) gt var twitter = true var twitterName = ltphp print $user-gtscreen_name gtltphp else gt var twitter = falseltphp gtltscriptgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
162
Je li gracz jest zalogowany do Twittera globalna zmienna twitter ma warto true a zmiennatwitterName zawiera nazw u ytkownika
Ostatnim o co nale y zadba jest poinformowanie u ytkownika o pomy lnym zalogowaniu zapomoc Twittera i umo liwienie wylogowania si W tym celu musimy wprowadzi drobnzmian w kodzie odpowiedzialnym za ekran pocz tkowy wy wietlany po zalogowaniu
ltdiv id=startScreen class=screengt ltphp if($_SESSION[status] = verified) gt lta class=button tweetLink href=twitterredirectphpgtZaloguj przez Twitteraltagt ltphp else gt lta class=button tweetLink href=twitterclearsessionsphpgtWyloguj z Twitteraltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Po wprowadzeniu powy szych modyfikacji mo na uzna e uwierzytelnianie przez Twitterajest zaimplementowane
Publikowanie najlepszych wynikoacutew na TwitterzeTeraz kiedy gracz jest ju zalogowany do Twittera mo na publikowa jego wyniki w znaczniewygodniejszy sposoacuteb ni poprzednio Zaczniemy od utworzenia po stronie serwera skryptutwitterPostphp w ktoacuterym u yjemy interfejsu statusesupdate API Twittera
Spoacutejrzmy na kompletny skrypt
ltphpsession_start()require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
$time = $_SESSION[time]$level = $_SESSION[level]if (isset($time) ampamp isset($level)) Pobranie tokenoacutew u ytkownika z sesji $access_token = $_SESSION[access_token] $connection = new TwitterOAuth(CONSUMER_KEY CONSUMER_SECRET $access_token[oauth_token] $access_token[oauth_token_secret])
$parameters = array(status =gt W a nie uda o mi si sko czy $level poziom gry Yet Another Platformer w $time sekund) $status = $connection-gtpost(statusesupdate $parameters)gt
Najprawdopodobniej rozpoznajesz wi kszo kodu z powy szego listingu ktoacutery dodali my napocz tku skryptu ekranu pocz tkowego (tylko wyroacute niony kod jest nowy) W ostatnich dwoacutechwierszach tworzymy a nast pnie przesy amy do Twittera tekst ktoacutery chcemy opublikowa co
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
163
mdash jak wida mdash jest ca kiem proste Musimy jednak zaj si jeszcze jednym Poniewa graczjest zalogowany znamy jego nazw wi c mo emy j wykorzysta na ekranie tablicy wynikoacutew
W kodzie klienta utworzymy troch inn od dotychczasowej wersj tablicy wynikoacutew
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) if (twitter) top += ltinput id=name type=hidden value=+twitterName+gt + twitterName + + minSec(jsontop[i]time) + lta id=saveScore href=gtZatwierd ltagt + lta id=tweetScore href=gtTweetnijltagt ltbrgt else top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt + lta target=_blank href=httptwittercomhome status=+escape(w a nie uda o mi si sko czy +current Level+ poziom gry Yet Another Platformer w +minSec (jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Tworzymy tu niewidoczne pole wej ciowe przechowuj ce nazw u ytkownika pochodz cz Twittera Nast pnie wypisujemy t nazw na ekranie tablicy wynikoacutew Zwroacute uwag e niemusieli my w ogoacutele zmienia kodu po stronie serwera
Tyle na temat integracji z Twitterem Je eli chcesz dowiedzie si wi cej i rozszerzy funk-cjonalno gry zajrzyj do dokumentacji API Twittera
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
164
Integracja z FacebookiemIntegracja z Facebookiem i Twitterem jest w wielu aspektach podobna Facebook jest jednakw du o wi kszym stopniu nastawiony na gry Zajmiemy si implementacj osi gni dla zalo-gowanych u ytkownikoacutew Skorzystamy z SDK Facebooka dla PHP ale s roacutewnie dost pnerozwi zania dla innych j zykoacutew
Tak jak w przypadku Twittera tu roacutewnie musimy zacz od zarejestrowania aplikacji w Fa-cebooku W tym celu trzeba si zalogowa do serwisu dla deweloperoacutew (httpsdevelopers
facebookcom) i klikn pozycj Apps1
Nast pnie nale y klikn cze Create New App i wype ni obowi zkowe pola formularza Poich zatwierdzeniu pojawi si ekran z informacjami dotycz cymi nowej aplikacji Podobnie jakby o w przypadku Twittera tu roacutewnie najwa niejsze s dwie warto ci co wida na rysunku
1 Aby moacutec tworzy aplikacje trzeba si zarejestrowa jako programista W tym celu musisz klikn przycisk
Register as a Developer mdash przyp t um
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
165
Na powy szym zrzucie strza k zosta a oznaczona sekcja umo liwiaj ca wyboacuter sposobu inte-gracji aplikacji z Facebookiem Aby uzyska pe ny dost p do interfejsu Open Graph API Fa-cebooka ktoacutery umo liwia mi dzy innymi publikowanie osi gni trzeba zaznaczy pozycjAplikacja na Facebooku
Dzi ki temu gra mo e by uruchamiana w ramce (iframe) wewn trz strony Facebooka Jednakaby to by o mo liwe konieczny jest prawid owy certyfikat dla HTTPS obowi zuj cy w dome-nie w ktoacuterej jest dost pna gra Je li jednak chcemy by gra by a adowana z naszego serweranie ma tych wymaga ale i tak trzeba wpisa adres w odpowiednim polu (aby adres zostauznany za poprawny nale y poda https nawet je li nie ma si certyfikatu)
Jest jeszcze jedno co nale y zrobi by aplikacja mog a publikowa osi gni cia mdash nale y jzarejestrowa jako gr W tym celu wystarczy klikn pozycj Informacje o aplikacji a na-st pnie w sekcji Informacje o aplikacji w polach Kategoria ustawi pozycj Gry i ustali gatunekgry co wida na poni szym rysunku
Uwierzytelnianie przez FacebookaPodstawowy mechanizm uwierzytelniania jest bardzo podobny do tego z Twittera ale istniejepewna roacute nica w podej ciu do dost pu W przypadku Twittera mo na by o zdecydowa czyaplikacja ma prawa tylko do odczytu czy roacutewnie zapisu Facebook oferuje znacznie bogatszemo liwo ci ustalania poziomoacutew dost pu przy czym decyduje si o nich w czasie logowania
Kod odpowiedzialny za uwierzytelnianie zosta przedstawiony na poni szym listingu Tu roacutewnie jak w przypadku Twittera musimy umie ci na pocz tku skryptu kod pobieraj cy obiekt bie-
cego u ytkownika
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
166
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()gt
Wyroacute niony wiersz kodu odpowiada za wskazanie e z poziomu gry b dziemy chcieli publiko-wa wpisy na osi czasu u ytkownika W miejscach (1) i (2) nale y wpisa warto ci wy wietlonena stronie konfiguracji aplikacji w Facebooku
Je li zmienna $facebookUser to null oznacza to e u ytkownik jest ju zalogowany W prze-ciwnym przypadku musimy wy wietli przycisk logowania Musimy wi c napisa kod podobnydo tego ktoacutery s u y do wy wietlenia przycisku logowania za po rednictwem Twittera
ltdiv id=startScreen class=screengt ltphp if ($facebookUser) $loginUrl = $facebook-gtgetLoginUrl(array( scope =gt $scope redirect_uri =gt $app_url )) gt lta class=button tweetLink href=ltphp print $loginUrl gtgtZaloguj przez Facebookaltagt ltphp else $logoutUrl = $facebook-gtgetLogoutUrl(array( next =gt $app_url )) gt lta class=button tweetLink href=ltphp print $logoutUrlgtgtWyloguj z Facebookaltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
158
Rejestrowanie gry w TwitterzeZanim przejdziemy dalej musimy zarejestrowa gr w Twitterze Aby to zrobi musisz sizalogowa na stron Twittera dla deweloperoacutew (httpsdevtwittercom) a nast pnie kliknpozycj My applications (moje aplikacje) w menu profilu
Nale y utworzy now aplikacj ( cze Create a new application) wype ni wszystkie wymaganepola oraz wyrazi zgod na warunki licencyjne (Rules of the Road) Po zatwierdzeniu wprowa-dzonych danych zostanie wy wietlona strona zawieraj ca dane utworzonej aplikacji
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
159
Trzeba zwroacuteci uwag na dwie informacje ktoacutere na rysunku zosta y otoczone ramk poniewab d potrzebne poacute niej Nale y wykona jeszcze jedn drobn modyfikacj konfiguracjiPrzejd do zak adki Settings (ustawienia) i przyjrzyj si sekcji Application Type (typ aplikacji)Domy lnie jest zaznaczone pole Read only (tylko do odczytu) Je li chcesz w imieniu graczapublikowa tweety musisz wybra opcj Read and Write
W ten sposoacuteb przygotowali my konto na Twitterze do integracji z gr
Pomocnicza bibliotekaKod realizuj cy komunikacj z API Twittera mo na napisa samemu w PHP ale to dosy mud-na praca Na szcz cie jest dost pnych wiele bibliotek ktoacutere mog to upro ci Jedn z nichprzeznaczon dla PHP jest twitteroauth (httpsgithubcomabrahamtwitteroauth) Istniejoczywi cie biblioteki dla innych j zykoacutew koniecznie zajrzyj do dokumentacji Twittera abydowiedzie si wi cej na ten temat
Du zalet biblioteki twitteroauth jest to e mo na j zainstalowa na prawie ka dym serwerzeobs uguj cym PHP Wystarczy skopiowa bibliotek do tego samego katalogu w ktoacuterym znajdujsi skrypty gry W naszym przypadku b dzie to podkatalog twitter
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
160
Musimy zacz od skonfigurowania biblioteki Przydatny b dzie przyk adowy skrypt konfigura-cyjny config-samplephp dost pny w podanym repozytorium Znajduje si w nim kod definiuj cytrzy sta e
define(CONSUMER_KEY (1))define(CONSUMER_SECRET (2))define(OAUTH_CALLBACK (3))
W miejscach (1) i (2) trzeba wpisa warto ci wy wietlone na stronie informacji o utworzonejaplikacji Twittera W miejscu (3) nale y poda adres URL skryptu zwrotnego callbackphp
Ostatnim krokiem jest zmodyfikowanie skryptu callbackphp tak by zawiera prawid oweprzekierowanie do g oacutewnego pliku naszej gry
header(Location indexphp)
UwierzytelnianieNa poni szym diagramie zosta przedstawiony sposoacuteb przeprowadzania uwierzytelniania i auto-ryzacji u ytkownikoacutew w grze za po rednictwem Twittera
W praktyce nie jest to tak skomplikowane na jakie wygl da przede wszystkim dlatego ewi kszo jest ju zaimplementowana w bibliotece twitteroauth Zajmiemy si utworzeniemstrony logowania wy wietlanej po klikni ciu przycisku Zaloguj przez Twittera U yjemy zwy-k ego odsy acza kieruj cego do pliku redirectphp Kiedy u ytkownik kliknie to cze po razpierwszy zostanie przekierowany na stron Twittera na ktoacuterej b dzie moacuteg autoryzowa dost pdo konta
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
161
Po wyra eniu zgody nast pi przekierowanie na adres ktoacutery zosta ustawiony w pliku callbackphpJe li u ytkownik ju raz wyrazi zgod na autoryzacj b dzie moacuteg od razu si zalogowa
W skryptach JavaScript bardzo przyda nam si teraz informacja o tym czy gracz jest po czonyczy nie Aby j uzyska musimy przekszta ci g oacutewny dokument HTML gry w plik PHP i umie-ci na jego pocz tku nast puj cy kod
ltphpsession_start()
require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
Pobranie tokenoacutew u 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-gtget(accountverify_credentials)gt
W tym kodzie rozpoczynamy sesj do czamy dwa pliki biblioteki twitteroauth oraz odczytuje-my token sesji Je li token jest ustawiony oznacza to e u ytkownik jest zalogowany do Twittera
Nast pnie serwer czy si z Twitterem aby pobra obiekt u ytkownika Tak to wygl da postronie serwera ale kod JavaScript wci nie ma informacji o zalogowaniu W zwi zku z tymmusimy utworzy skrypt przesy aj cy dane do kodu klienckiego
ltscript type=textjavascriptgtltphp if($_SESSION[status] == verified) gt var twitter = true var twitterName = ltphp print $user-gtscreen_name gtltphp else gt var twitter = falseltphp gtltscriptgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
162
Je li gracz jest zalogowany do Twittera globalna zmienna twitter ma warto true a zmiennatwitterName zawiera nazw u ytkownika
Ostatnim o co nale y zadba jest poinformowanie u ytkownika o pomy lnym zalogowaniu zapomoc Twittera i umo liwienie wylogowania si W tym celu musimy wprowadzi drobnzmian w kodzie odpowiedzialnym za ekran pocz tkowy wy wietlany po zalogowaniu
ltdiv id=startScreen class=screengt ltphp if($_SESSION[status] = verified) gt lta class=button tweetLink href=twitterredirectphpgtZaloguj przez Twitteraltagt ltphp else gt lta class=button tweetLink href=twitterclearsessionsphpgtWyloguj z Twitteraltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Po wprowadzeniu powy szych modyfikacji mo na uzna e uwierzytelnianie przez Twitterajest zaimplementowane
Publikowanie najlepszych wynikoacutew na TwitterzeTeraz kiedy gracz jest ju zalogowany do Twittera mo na publikowa jego wyniki w znaczniewygodniejszy sposoacuteb ni poprzednio Zaczniemy od utworzenia po stronie serwera skryptutwitterPostphp w ktoacuterym u yjemy interfejsu statusesupdate API Twittera
Spoacutejrzmy na kompletny skrypt
ltphpsession_start()require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
$time = $_SESSION[time]$level = $_SESSION[level]if (isset($time) ampamp isset($level)) Pobranie tokenoacutew u ytkownika z sesji $access_token = $_SESSION[access_token] $connection = new TwitterOAuth(CONSUMER_KEY CONSUMER_SECRET $access_token[oauth_token] $access_token[oauth_token_secret])
$parameters = array(status =gt W a nie uda o mi si sko czy $level poziom gry Yet Another Platformer w $time sekund) $status = $connection-gtpost(statusesupdate $parameters)gt
Najprawdopodobniej rozpoznajesz wi kszo kodu z powy szego listingu ktoacutery dodali my napocz tku skryptu ekranu pocz tkowego (tylko wyroacute niony kod jest nowy) W ostatnich dwoacutechwierszach tworzymy a nast pnie przesy amy do Twittera tekst ktoacutery chcemy opublikowa co
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
163
mdash jak wida mdash jest ca kiem proste Musimy jednak zaj si jeszcze jednym Poniewa graczjest zalogowany znamy jego nazw wi c mo emy j wykorzysta na ekranie tablicy wynikoacutew
W kodzie klienta utworzymy troch inn od dotychczasowej wersj tablicy wynikoacutew
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) if (twitter) top += ltinput id=name type=hidden value=+twitterName+gt + twitterName + + minSec(jsontop[i]time) + lta id=saveScore href=gtZatwierd ltagt + lta id=tweetScore href=gtTweetnijltagt ltbrgt else top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt + lta target=_blank href=httptwittercomhome status=+escape(w a nie uda o mi si sko czy +current Level+ poziom gry Yet Another Platformer w +minSec (jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Tworzymy tu niewidoczne pole wej ciowe przechowuj ce nazw u ytkownika pochodz cz Twittera Nast pnie wypisujemy t nazw na ekranie tablicy wynikoacutew Zwroacute uwag e niemusieli my w ogoacutele zmienia kodu po stronie serwera
Tyle na temat integracji z Twitterem Je eli chcesz dowiedzie si wi cej i rozszerzy funk-cjonalno gry zajrzyj do dokumentacji API Twittera
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
164
Integracja z FacebookiemIntegracja z Facebookiem i Twitterem jest w wielu aspektach podobna Facebook jest jednakw du o wi kszym stopniu nastawiony na gry Zajmiemy si implementacj osi gni dla zalo-gowanych u ytkownikoacutew Skorzystamy z SDK Facebooka dla PHP ale s roacutewnie dost pnerozwi zania dla innych j zykoacutew
Tak jak w przypadku Twittera tu roacutewnie musimy zacz od zarejestrowania aplikacji w Fa-cebooku W tym celu trzeba si zalogowa do serwisu dla deweloperoacutew (httpsdevelopers
facebookcom) i klikn pozycj Apps1
Nast pnie nale y klikn cze Create New App i wype ni obowi zkowe pola formularza Poich zatwierdzeniu pojawi si ekran z informacjami dotycz cymi nowej aplikacji Podobnie jakby o w przypadku Twittera tu roacutewnie najwa niejsze s dwie warto ci co wida na rysunku
1 Aby moacutec tworzy aplikacje trzeba si zarejestrowa jako programista W tym celu musisz klikn przycisk
Register as a Developer mdash przyp t um
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
165
Na powy szym zrzucie strza k zosta a oznaczona sekcja umo liwiaj ca wyboacuter sposobu inte-gracji aplikacji z Facebookiem Aby uzyska pe ny dost p do interfejsu Open Graph API Fa-cebooka ktoacutery umo liwia mi dzy innymi publikowanie osi gni trzeba zaznaczy pozycjAplikacja na Facebooku
Dzi ki temu gra mo e by uruchamiana w ramce (iframe) wewn trz strony Facebooka Jednakaby to by o mo liwe konieczny jest prawid owy certyfikat dla HTTPS obowi zuj cy w dome-nie w ktoacuterej jest dost pna gra Je li jednak chcemy by gra by a adowana z naszego serweranie ma tych wymaga ale i tak trzeba wpisa adres w odpowiednim polu (aby adres zostauznany za poprawny nale y poda https nawet je li nie ma si certyfikatu)
Jest jeszcze jedno co nale y zrobi by aplikacja mog a publikowa osi gni cia mdash nale y jzarejestrowa jako gr W tym celu wystarczy klikn pozycj Informacje o aplikacji a na-st pnie w sekcji Informacje o aplikacji w polach Kategoria ustawi pozycj Gry i ustali gatunekgry co wida na poni szym rysunku
Uwierzytelnianie przez FacebookaPodstawowy mechanizm uwierzytelniania jest bardzo podobny do tego z Twittera ale istniejepewna roacute nica w podej ciu do dost pu W przypadku Twittera mo na by o zdecydowa czyaplikacja ma prawa tylko do odczytu czy roacutewnie zapisu Facebook oferuje znacznie bogatszemo liwo ci ustalania poziomoacutew dost pu przy czym decyduje si o nich w czasie logowania
Kod odpowiedzialny za uwierzytelnianie zosta przedstawiony na poni szym listingu Tu roacutewnie jak w przypadku Twittera musimy umie ci na pocz tku skryptu kod pobieraj cy obiekt bie-
cego u ytkownika
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
166
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()gt
Wyroacute niony wiersz kodu odpowiada za wskazanie e z poziomu gry b dziemy chcieli publiko-wa wpisy na osi czasu u ytkownika W miejscach (1) i (2) nale y wpisa warto ci wy wietlonena stronie konfiguracji aplikacji w Facebooku
Je li zmienna $facebookUser to null oznacza to e u ytkownik jest ju zalogowany W prze-ciwnym przypadku musimy wy wietli przycisk logowania Musimy wi c napisa kod podobnydo tego ktoacutery s u y do wy wietlenia przycisku logowania za po rednictwem Twittera
ltdiv id=startScreen class=screengt ltphp if ($facebookUser) $loginUrl = $facebook-gtgetLoginUrl(array( scope =gt $scope redirect_uri =gt $app_url )) gt lta class=button tweetLink href=ltphp print $loginUrl gtgtZaloguj przez Facebookaltagt ltphp else $logoutUrl = $facebook-gtgetLogoutUrl(array( next =gt $app_url )) gt lta class=button tweetLink href=ltphp print $logoutUrlgtgtWyloguj z Facebookaltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
159
Trzeba zwroacuteci uwag na dwie informacje ktoacutere na rysunku zosta y otoczone ramk poniewab d potrzebne poacute niej Nale y wykona jeszcze jedn drobn modyfikacj konfiguracjiPrzejd do zak adki Settings (ustawienia) i przyjrzyj si sekcji Application Type (typ aplikacji)Domy lnie jest zaznaczone pole Read only (tylko do odczytu) Je li chcesz w imieniu graczapublikowa tweety musisz wybra opcj Read and Write
W ten sposoacuteb przygotowali my konto na Twitterze do integracji z gr
Pomocnicza bibliotekaKod realizuj cy komunikacj z API Twittera mo na napisa samemu w PHP ale to dosy mud-na praca Na szcz cie jest dost pnych wiele bibliotek ktoacutere mog to upro ci Jedn z nichprzeznaczon dla PHP jest twitteroauth (httpsgithubcomabrahamtwitteroauth) Istniejoczywi cie biblioteki dla innych j zykoacutew koniecznie zajrzyj do dokumentacji Twittera abydowiedzie si wi cej na ten temat
Du zalet biblioteki twitteroauth jest to e mo na j zainstalowa na prawie ka dym serwerzeobs uguj cym PHP Wystarczy skopiowa bibliotek do tego samego katalogu w ktoacuterym znajdujsi skrypty gry W naszym przypadku b dzie to podkatalog twitter
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
160
Musimy zacz od skonfigurowania biblioteki Przydatny b dzie przyk adowy skrypt konfigura-cyjny config-samplephp dost pny w podanym repozytorium Znajduje si w nim kod definiuj cytrzy sta e
define(CONSUMER_KEY (1))define(CONSUMER_SECRET (2))define(OAUTH_CALLBACK (3))
W miejscach (1) i (2) trzeba wpisa warto ci wy wietlone na stronie informacji o utworzonejaplikacji Twittera W miejscu (3) nale y poda adres URL skryptu zwrotnego callbackphp
Ostatnim krokiem jest zmodyfikowanie skryptu callbackphp tak by zawiera prawid oweprzekierowanie do g oacutewnego pliku naszej gry
header(Location indexphp)
UwierzytelnianieNa poni szym diagramie zosta przedstawiony sposoacuteb przeprowadzania uwierzytelniania i auto-ryzacji u ytkownikoacutew w grze za po rednictwem Twittera
W praktyce nie jest to tak skomplikowane na jakie wygl da przede wszystkim dlatego ewi kszo jest ju zaimplementowana w bibliotece twitteroauth Zajmiemy si utworzeniemstrony logowania wy wietlanej po klikni ciu przycisku Zaloguj przez Twittera U yjemy zwy-k ego odsy acza kieruj cego do pliku redirectphp Kiedy u ytkownik kliknie to cze po razpierwszy zostanie przekierowany na stron Twittera na ktoacuterej b dzie moacuteg autoryzowa dost pdo konta
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
161
Po wyra eniu zgody nast pi przekierowanie na adres ktoacutery zosta ustawiony w pliku callbackphpJe li u ytkownik ju raz wyrazi zgod na autoryzacj b dzie moacuteg od razu si zalogowa
W skryptach JavaScript bardzo przyda nam si teraz informacja o tym czy gracz jest po czonyczy nie Aby j uzyska musimy przekszta ci g oacutewny dokument HTML gry w plik PHP i umie-ci na jego pocz tku nast puj cy kod
ltphpsession_start()
require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
Pobranie tokenoacutew u 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-gtget(accountverify_credentials)gt
W tym kodzie rozpoczynamy sesj do czamy dwa pliki biblioteki twitteroauth oraz odczytuje-my token sesji Je li token jest ustawiony oznacza to e u ytkownik jest zalogowany do Twittera
Nast pnie serwer czy si z Twitterem aby pobra obiekt u ytkownika Tak to wygl da postronie serwera ale kod JavaScript wci nie ma informacji o zalogowaniu W zwi zku z tymmusimy utworzy skrypt przesy aj cy dane do kodu klienckiego
ltscript type=textjavascriptgtltphp if($_SESSION[status] == verified) gt var twitter = true var twitterName = ltphp print $user-gtscreen_name gtltphp else gt var twitter = falseltphp gtltscriptgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
162
Je li gracz jest zalogowany do Twittera globalna zmienna twitter ma warto true a zmiennatwitterName zawiera nazw u ytkownika
Ostatnim o co nale y zadba jest poinformowanie u ytkownika o pomy lnym zalogowaniu zapomoc Twittera i umo liwienie wylogowania si W tym celu musimy wprowadzi drobnzmian w kodzie odpowiedzialnym za ekran pocz tkowy wy wietlany po zalogowaniu
ltdiv id=startScreen class=screengt ltphp if($_SESSION[status] = verified) gt lta class=button tweetLink href=twitterredirectphpgtZaloguj przez Twitteraltagt ltphp else gt lta class=button tweetLink href=twitterclearsessionsphpgtWyloguj z Twitteraltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Po wprowadzeniu powy szych modyfikacji mo na uzna e uwierzytelnianie przez Twitterajest zaimplementowane
Publikowanie najlepszych wynikoacutew na TwitterzeTeraz kiedy gracz jest ju zalogowany do Twittera mo na publikowa jego wyniki w znaczniewygodniejszy sposoacuteb ni poprzednio Zaczniemy od utworzenia po stronie serwera skryptutwitterPostphp w ktoacuterym u yjemy interfejsu statusesupdate API Twittera
Spoacutejrzmy na kompletny skrypt
ltphpsession_start()require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
$time = $_SESSION[time]$level = $_SESSION[level]if (isset($time) ampamp isset($level)) Pobranie tokenoacutew u ytkownika z sesji $access_token = $_SESSION[access_token] $connection = new TwitterOAuth(CONSUMER_KEY CONSUMER_SECRET $access_token[oauth_token] $access_token[oauth_token_secret])
$parameters = array(status =gt W a nie uda o mi si sko czy $level poziom gry Yet Another Platformer w $time sekund) $status = $connection-gtpost(statusesupdate $parameters)gt
Najprawdopodobniej rozpoznajesz wi kszo kodu z powy szego listingu ktoacutery dodali my napocz tku skryptu ekranu pocz tkowego (tylko wyroacute niony kod jest nowy) W ostatnich dwoacutechwierszach tworzymy a nast pnie przesy amy do Twittera tekst ktoacutery chcemy opublikowa co
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
163
mdash jak wida mdash jest ca kiem proste Musimy jednak zaj si jeszcze jednym Poniewa graczjest zalogowany znamy jego nazw wi c mo emy j wykorzysta na ekranie tablicy wynikoacutew
W kodzie klienta utworzymy troch inn od dotychczasowej wersj tablicy wynikoacutew
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) if (twitter) top += ltinput id=name type=hidden value=+twitterName+gt + twitterName + + minSec(jsontop[i]time) + lta id=saveScore href=gtZatwierd ltagt + lta id=tweetScore href=gtTweetnijltagt ltbrgt else top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt + lta target=_blank href=httptwittercomhome status=+escape(w a nie uda o mi si sko czy +current Level+ poziom gry Yet Another Platformer w +minSec (jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Tworzymy tu niewidoczne pole wej ciowe przechowuj ce nazw u ytkownika pochodz cz Twittera Nast pnie wypisujemy t nazw na ekranie tablicy wynikoacutew Zwroacute uwag e niemusieli my w ogoacutele zmienia kodu po stronie serwera
Tyle na temat integracji z Twitterem Je eli chcesz dowiedzie si wi cej i rozszerzy funk-cjonalno gry zajrzyj do dokumentacji API Twittera
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
164
Integracja z FacebookiemIntegracja z Facebookiem i Twitterem jest w wielu aspektach podobna Facebook jest jednakw du o wi kszym stopniu nastawiony na gry Zajmiemy si implementacj osi gni dla zalo-gowanych u ytkownikoacutew Skorzystamy z SDK Facebooka dla PHP ale s roacutewnie dost pnerozwi zania dla innych j zykoacutew
Tak jak w przypadku Twittera tu roacutewnie musimy zacz od zarejestrowania aplikacji w Fa-cebooku W tym celu trzeba si zalogowa do serwisu dla deweloperoacutew (httpsdevelopers
facebookcom) i klikn pozycj Apps1
Nast pnie nale y klikn cze Create New App i wype ni obowi zkowe pola formularza Poich zatwierdzeniu pojawi si ekran z informacjami dotycz cymi nowej aplikacji Podobnie jakby o w przypadku Twittera tu roacutewnie najwa niejsze s dwie warto ci co wida na rysunku
1 Aby moacutec tworzy aplikacje trzeba si zarejestrowa jako programista W tym celu musisz klikn przycisk
Register as a Developer mdash przyp t um
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
165
Na powy szym zrzucie strza k zosta a oznaczona sekcja umo liwiaj ca wyboacuter sposobu inte-gracji aplikacji z Facebookiem Aby uzyska pe ny dost p do interfejsu Open Graph API Fa-cebooka ktoacutery umo liwia mi dzy innymi publikowanie osi gni trzeba zaznaczy pozycjAplikacja na Facebooku
Dzi ki temu gra mo e by uruchamiana w ramce (iframe) wewn trz strony Facebooka Jednakaby to by o mo liwe konieczny jest prawid owy certyfikat dla HTTPS obowi zuj cy w dome-nie w ktoacuterej jest dost pna gra Je li jednak chcemy by gra by a adowana z naszego serweranie ma tych wymaga ale i tak trzeba wpisa adres w odpowiednim polu (aby adres zostauznany za poprawny nale y poda https nawet je li nie ma si certyfikatu)
Jest jeszcze jedno co nale y zrobi by aplikacja mog a publikowa osi gni cia mdash nale y jzarejestrowa jako gr W tym celu wystarczy klikn pozycj Informacje o aplikacji a na-st pnie w sekcji Informacje o aplikacji w polach Kategoria ustawi pozycj Gry i ustali gatunekgry co wida na poni szym rysunku
Uwierzytelnianie przez FacebookaPodstawowy mechanizm uwierzytelniania jest bardzo podobny do tego z Twittera ale istniejepewna roacute nica w podej ciu do dost pu W przypadku Twittera mo na by o zdecydowa czyaplikacja ma prawa tylko do odczytu czy roacutewnie zapisu Facebook oferuje znacznie bogatszemo liwo ci ustalania poziomoacutew dost pu przy czym decyduje si o nich w czasie logowania
Kod odpowiedzialny za uwierzytelnianie zosta przedstawiony na poni szym listingu Tu roacutewnie jak w przypadku Twittera musimy umie ci na pocz tku skryptu kod pobieraj cy obiekt bie-
cego u ytkownika
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
166
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()gt
Wyroacute niony wiersz kodu odpowiada za wskazanie e z poziomu gry b dziemy chcieli publiko-wa wpisy na osi czasu u ytkownika W miejscach (1) i (2) nale y wpisa warto ci wy wietlonena stronie konfiguracji aplikacji w Facebooku
Je li zmienna $facebookUser to null oznacza to e u ytkownik jest ju zalogowany W prze-ciwnym przypadku musimy wy wietli przycisk logowania Musimy wi c napisa kod podobnydo tego ktoacutery s u y do wy wietlenia przycisku logowania za po rednictwem Twittera
ltdiv id=startScreen class=screengt ltphp if ($facebookUser) $loginUrl = $facebook-gtgetLoginUrl(array( scope =gt $scope redirect_uri =gt $app_url )) gt lta class=button tweetLink href=ltphp print $loginUrl gtgtZaloguj przez Facebookaltagt ltphp else $logoutUrl = $facebook-gtgetLogoutUrl(array( next =gt $app_url )) gt lta class=button tweetLink href=ltphp print $logoutUrlgtgtWyloguj z Facebookaltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
160
Musimy zacz od skonfigurowania biblioteki Przydatny b dzie przyk adowy skrypt konfigura-cyjny config-samplephp dost pny w podanym repozytorium Znajduje si w nim kod definiuj cytrzy sta e
define(CONSUMER_KEY (1))define(CONSUMER_SECRET (2))define(OAUTH_CALLBACK (3))
W miejscach (1) i (2) trzeba wpisa warto ci wy wietlone na stronie informacji o utworzonejaplikacji Twittera W miejscu (3) nale y poda adres URL skryptu zwrotnego callbackphp
Ostatnim krokiem jest zmodyfikowanie skryptu callbackphp tak by zawiera prawid oweprzekierowanie do g oacutewnego pliku naszej gry
header(Location indexphp)
UwierzytelnianieNa poni szym diagramie zosta przedstawiony sposoacuteb przeprowadzania uwierzytelniania i auto-ryzacji u ytkownikoacutew w grze za po rednictwem Twittera
W praktyce nie jest to tak skomplikowane na jakie wygl da przede wszystkim dlatego ewi kszo jest ju zaimplementowana w bibliotece twitteroauth Zajmiemy si utworzeniemstrony logowania wy wietlanej po klikni ciu przycisku Zaloguj przez Twittera U yjemy zwy-k ego odsy acza kieruj cego do pliku redirectphp Kiedy u ytkownik kliknie to cze po razpierwszy zostanie przekierowany na stron Twittera na ktoacuterej b dzie moacuteg autoryzowa dost pdo konta
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
161
Po wyra eniu zgody nast pi przekierowanie na adres ktoacutery zosta ustawiony w pliku callbackphpJe li u ytkownik ju raz wyrazi zgod na autoryzacj b dzie moacuteg od razu si zalogowa
W skryptach JavaScript bardzo przyda nam si teraz informacja o tym czy gracz jest po czonyczy nie Aby j uzyska musimy przekszta ci g oacutewny dokument HTML gry w plik PHP i umie-ci na jego pocz tku nast puj cy kod
ltphpsession_start()
require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
Pobranie tokenoacutew u 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-gtget(accountverify_credentials)gt
W tym kodzie rozpoczynamy sesj do czamy dwa pliki biblioteki twitteroauth oraz odczytuje-my token sesji Je li token jest ustawiony oznacza to e u ytkownik jest zalogowany do Twittera
Nast pnie serwer czy si z Twitterem aby pobra obiekt u ytkownika Tak to wygl da postronie serwera ale kod JavaScript wci nie ma informacji o zalogowaniu W zwi zku z tymmusimy utworzy skrypt przesy aj cy dane do kodu klienckiego
ltscript type=textjavascriptgtltphp if($_SESSION[status] == verified) gt var twitter = true var twitterName = ltphp print $user-gtscreen_name gtltphp else gt var twitter = falseltphp gtltscriptgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
162
Je li gracz jest zalogowany do Twittera globalna zmienna twitter ma warto true a zmiennatwitterName zawiera nazw u ytkownika
Ostatnim o co nale y zadba jest poinformowanie u ytkownika o pomy lnym zalogowaniu zapomoc Twittera i umo liwienie wylogowania si W tym celu musimy wprowadzi drobnzmian w kodzie odpowiedzialnym za ekran pocz tkowy wy wietlany po zalogowaniu
ltdiv id=startScreen class=screengt ltphp if($_SESSION[status] = verified) gt lta class=button tweetLink href=twitterredirectphpgtZaloguj przez Twitteraltagt ltphp else gt lta class=button tweetLink href=twitterclearsessionsphpgtWyloguj z Twitteraltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Po wprowadzeniu powy szych modyfikacji mo na uzna e uwierzytelnianie przez Twitterajest zaimplementowane
Publikowanie najlepszych wynikoacutew na TwitterzeTeraz kiedy gracz jest ju zalogowany do Twittera mo na publikowa jego wyniki w znaczniewygodniejszy sposoacuteb ni poprzednio Zaczniemy od utworzenia po stronie serwera skryptutwitterPostphp w ktoacuterym u yjemy interfejsu statusesupdate API Twittera
Spoacutejrzmy na kompletny skrypt
ltphpsession_start()require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
$time = $_SESSION[time]$level = $_SESSION[level]if (isset($time) ampamp isset($level)) Pobranie tokenoacutew u ytkownika z sesji $access_token = $_SESSION[access_token] $connection = new TwitterOAuth(CONSUMER_KEY CONSUMER_SECRET $access_token[oauth_token] $access_token[oauth_token_secret])
$parameters = array(status =gt W a nie uda o mi si sko czy $level poziom gry Yet Another Platformer w $time sekund) $status = $connection-gtpost(statusesupdate $parameters)gt
Najprawdopodobniej rozpoznajesz wi kszo kodu z powy szego listingu ktoacutery dodali my napocz tku skryptu ekranu pocz tkowego (tylko wyroacute niony kod jest nowy) W ostatnich dwoacutechwierszach tworzymy a nast pnie przesy amy do Twittera tekst ktoacutery chcemy opublikowa co
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
163
mdash jak wida mdash jest ca kiem proste Musimy jednak zaj si jeszcze jednym Poniewa graczjest zalogowany znamy jego nazw wi c mo emy j wykorzysta na ekranie tablicy wynikoacutew
W kodzie klienta utworzymy troch inn od dotychczasowej wersj tablicy wynikoacutew
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) if (twitter) top += ltinput id=name type=hidden value=+twitterName+gt + twitterName + + minSec(jsontop[i]time) + lta id=saveScore href=gtZatwierd ltagt + lta id=tweetScore href=gtTweetnijltagt ltbrgt else top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt + lta target=_blank href=httptwittercomhome status=+escape(w a nie uda o mi si sko czy +current Level+ poziom gry Yet Another Platformer w +minSec (jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Tworzymy tu niewidoczne pole wej ciowe przechowuj ce nazw u ytkownika pochodz cz Twittera Nast pnie wypisujemy t nazw na ekranie tablicy wynikoacutew Zwroacute uwag e niemusieli my w ogoacutele zmienia kodu po stronie serwera
Tyle na temat integracji z Twitterem Je eli chcesz dowiedzie si wi cej i rozszerzy funk-cjonalno gry zajrzyj do dokumentacji API Twittera
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
164
Integracja z FacebookiemIntegracja z Facebookiem i Twitterem jest w wielu aspektach podobna Facebook jest jednakw du o wi kszym stopniu nastawiony na gry Zajmiemy si implementacj osi gni dla zalo-gowanych u ytkownikoacutew Skorzystamy z SDK Facebooka dla PHP ale s roacutewnie dost pnerozwi zania dla innych j zykoacutew
Tak jak w przypadku Twittera tu roacutewnie musimy zacz od zarejestrowania aplikacji w Fa-cebooku W tym celu trzeba si zalogowa do serwisu dla deweloperoacutew (httpsdevelopers
facebookcom) i klikn pozycj Apps1
Nast pnie nale y klikn cze Create New App i wype ni obowi zkowe pola formularza Poich zatwierdzeniu pojawi si ekran z informacjami dotycz cymi nowej aplikacji Podobnie jakby o w przypadku Twittera tu roacutewnie najwa niejsze s dwie warto ci co wida na rysunku
1 Aby moacutec tworzy aplikacje trzeba si zarejestrowa jako programista W tym celu musisz klikn przycisk
Register as a Developer mdash przyp t um
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
165
Na powy szym zrzucie strza k zosta a oznaczona sekcja umo liwiaj ca wyboacuter sposobu inte-gracji aplikacji z Facebookiem Aby uzyska pe ny dost p do interfejsu Open Graph API Fa-cebooka ktoacutery umo liwia mi dzy innymi publikowanie osi gni trzeba zaznaczy pozycjAplikacja na Facebooku
Dzi ki temu gra mo e by uruchamiana w ramce (iframe) wewn trz strony Facebooka Jednakaby to by o mo liwe konieczny jest prawid owy certyfikat dla HTTPS obowi zuj cy w dome-nie w ktoacuterej jest dost pna gra Je li jednak chcemy by gra by a adowana z naszego serweranie ma tych wymaga ale i tak trzeba wpisa adres w odpowiednim polu (aby adres zostauznany za poprawny nale y poda https nawet je li nie ma si certyfikatu)
Jest jeszcze jedno co nale y zrobi by aplikacja mog a publikowa osi gni cia mdash nale y jzarejestrowa jako gr W tym celu wystarczy klikn pozycj Informacje o aplikacji a na-st pnie w sekcji Informacje o aplikacji w polach Kategoria ustawi pozycj Gry i ustali gatunekgry co wida na poni szym rysunku
Uwierzytelnianie przez FacebookaPodstawowy mechanizm uwierzytelniania jest bardzo podobny do tego z Twittera ale istniejepewna roacute nica w podej ciu do dost pu W przypadku Twittera mo na by o zdecydowa czyaplikacja ma prawa tylko do odczytu czy roacutewnie zapisu Facebook oferuje znacznie bogatszemo liwo ci ustalania poziomoacutew dost pu przy czym decyduje si o nich w czasie logowania
Kod odpowiedzialny za uwierzytelnianie zosta przedstawiony na poni szym listingu Tu roacutewnie jak w przypadku Twittera musimy umie ci na pocz tku skryptu kod pobieraj cy obiekt bie-
cego u ytkownika
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
166
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()gt
Wyroacute niony wiersz kodu odpowiada za wskazanie e z poziomu gry b dziemy chcieli publiko-wa wpisy na osi czasu u ytkownika W miejscach (1) i (2) nale y wpisa warto ci wy wietlonena stronie konfiguracji aplikacji w Facebooku
Je li zmienna $facebookUser to null oznacza to e u ytkownik jest ju zalogowany W prze-ciwnym przypadku musimy wy wietli przycisk logowania Musimy wi c napisa kod podobnydo tego ktoacutery s u y do wy wietlenia przycisku logowania za po rednictwem Twittera
ltdiv id=startScreen class=screengt ltphp if ($facebookUser) $loginUrl = $facebook-gtgetLoginUrl(array( scope =gt $scope redirect_uri =gt $app_url )) gt lta class=button tweetLink href=ltphp print $loginUrl gtgtZaloguj przez Facebookaltagt ltphp else $logoutUrl = $facebook-gtgetLogoutUrl(array( next =gt $app_url )) gt lta class=button tweetLink href=ltphp print $logoutUrlgtgtWyloguj z Facebookaltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
161
Po wyra eniu zgody nast pi przekierowanie na adres ktoacutery zosta ustawiony w pliku callbackphpJe li u ytkownik ju raz wyrazi zgod na autoryzacj b dzie moacuteg od razu si zalogowa
W skryptach JavaScript bardzo przyda nam si teraz informacja o tym czy gracz jest po czonyczy nie Aby j uzyska musimy przekszta ci g oacutewny dokument HTML gry w plik PHP i umie-ci na jego pocz tku nast puj cy kod
ltphpsession_start()
require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
Pobranie tokenoacutew u 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-gtget(accountverify_credentials)gt
W tym kodzie rozpoczynamy sesj do czamy dwa pliki biblioteki twitteroauth oraz odczytuje-my token sesji Je li token jest ustawiony oznacza to e u ytkownik jest zalogowany do Twittera
Nast pnie serwer czy si z Twitterem aby pobra obiekt u ytkownika Tak to wygl da postronie serwera ale kod JavaScript wci nie ma informacji o zalogowaniu W zwi zku z tymmusimy utworzy skrypt przesy aj cy dane do kodu klienckiego
ltscript type=textjavascriptgtltphp if($_SESSION[status] == verified) gt var twitter = true var twitterName = ltphp print $user-gtscreen_name gtltphp else gt var twitter = falseltphp gtltscriptgt
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
162
Je li gracz jest zalogowany do Twittera globalna zmienna twitter ma warto true a zmiennatwitterName zawiera nazw u ytkownika
Ostatnim o co nale y zadba jest poinformowanie u ytkownika o pomy lnym zalogowaniu zapomoc Twittera i umo liwienie wylogowania si W tym celu musimy wprowadzi drobnzmian w kodzie odpowiedzialnym za ekran pocz tkowy wy wietlany po zalogowaniu
ltdiv id=startScreen class=screengt ltphp if($_SESSION[status] = verified) gt lta class=button tweetLink href=twitterredirectphpgtZaloguj przez Twitteraltagt ltphp else gt lta class=button tweetLink href=twitterclearsessionsphpgtWyloguj z Twitteraltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Po wprowadzeniu powy szych modyfikacji mo na uzna e uwierzytelnianie przez Twitterajest zaimplementowane
Publikowanie najlepszych wynikoacutew na TwitterzeTeraz kiedy gracz jest ju zalogowany do Twittera mo na publikowa jego wyniki w znaczniewygodniejszy sposoacuteb ni poprzednio Zaczniemy od utworzenia po stronie serwera skryptutwitterPostphp w ktoacuterym u yjemy interfejsu statusesupdate API Twittera
Spoacutejrzmy na kompletny skrypt
ltphpsession_start()require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
$time = $_SESSION[time]$level = $_SESSION[level]if (isset($time) ampamp isset($level)) Pobranie tokenoacutew u ytkownika z sesji $access_token = $_SESSION[access_token] $connection = new TwitterOAuth(CONSUMER_KEY CONSUMER_SECRET $access_token[oauth_token] $access_token[oauth_token_secret])
$parameters = array(status =gt W a nie uda o mi si sko czy $level poziom gry Yet Another Platformer w $time sekund) $status = $connection-gtpost(statusesupdate $parameters)gt
Najprawdopodobniej rozpoznajesz wi kszo kodu z powy szego listingu ktoacutery dodali my napocz tku skryptu ekranu pocz tkowego (tylko wyroacute niony kod jest nowy) W ostatnich dwoacutechwierszach tworzymy a nast pnie przesy amy do Twittera tekst ktoacutery chcemy opublikowa co
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
163
mdash jak wida mdash jest ca kiem proste Musimy jednak zaj si jeszcze jednym Poniewa graczjest zalogowany znamy jego nazw wi c mo emy j wykorzysta na ekranie tablicy wynikoacutew
W kodzie klienta utworzymy troch inn od dotychczasowej wersj tablicy wynikoacutew
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) if (twitter) top += ltinput id=name type=hidden value=+twitterName+gt + twitterName + + minSec(jsontop[i]time) + lta id=saveScore href=gtZatwierd ltagt + lta id=tweetScore href=gtTweetnijltagt ltbrgt else top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt + lta target=_blank href=httptwittercomhome status=+escape(w a nie uda o mi si sko czy +current Level+ poziom gry Yet Another Platformer w +minSec (jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Tworzymy tu niewidoczne pole wej ciowe przechowuj ce nazw u ytkownika pochodz cz Twittera Nast pnie wypisujemy t nazw na ekranie tablicy wynikoacutew Zwroacute uwag e niemusieli my w ogoacutele zmienia kodu po stronie serwera
Tyle na temat integracji z Twitterem Je eli chcesz dowiedzie si wi cej i rozszerzy funk-cjonalno gry zajrzyj do dokumentacji API Twittera
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
164
Integracja z FacebookiemIntegracja z Facebookiem i Twitterem jest w wielu aspektach podobna Facebook jest jednakw du o wi kszym stopniu nastawiony na gry Zajmiemy si implementacj osi gni dla zalo-gowanych u ytkownikoacutew Skorzystamy z SDK Facebooka dla PHP ale s roacutewnie dost pnerozwi zania dla innych j zykoacutew
Tak jak w przypadku Twittera tu roacutewnie musimy zacz od zarejestrowania aplikacji w Fa-cebooku W tym celu trzeba si zalogowa do serwisu dla deweloperoacutew (httpsdevelopers
facebookcom) i klikn pozycj Apps1
Nast pnie nale y klikn cze Create New App i wype ni obowi zkowe pola formularza Poich zatwierdzeniu pojawi si ekran z informacjami dotycz cymi nowej aplikacji Podobnie jakby o w przypadku Twittera tu roacutewnie najwa niejsze s dwie warto ci co wida na rysunku
1 Aby moacutec tworzy aplikacje trzeba si zarejestrowa jako programista W tym celu musisz klikn przycisk
Register as a Developer mdash przyp t um
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
165
Na powy szym zrzucie strza k zosta a oznaczona sekcja umo liwiaj ca wyboacuter sposobu inte-gracji aplikacji z Facebookiem Aby uzyska pe ny dost p do interfejsu Open Graph API Fa-cebooka ktoacutery umo liwia mi dzy innymi publikowanie osi gni trzeba zaznaczy pozycjAplikacja na Facebooku
Dzi ki temu gra mo e by uruchamiana w ramce (iframe) wewn trz strony Facebooka Jednakaby to by o mo liwe konieczny jest prawid owy certyfikat dla HTTPS obowi zuj cy w dome-nie w ktoacuterej jest dost pna gra Je li jednak chcemy by gra by a adowana z naszego serweranie ma tych wymaga ale i tak trzeba wpisa adres w odpowiednim polu (aby adres zostauznany za poprawny nale y poda https nawet je li nie ma si certyfikatu)
Jest jeszcze jedno co nale y zrobi by aplikacja mog a publikowa osi gni cia mdash nale y jzarejestrowa jako gr W tym celu wystarczy klikn pozycj Informacje o aplikacji a na-st pnie w sekcji Informacje o aplikacji w polach Kategoria ustawi pozycj Gry i ustali gatunekgry co wida na poni szym rysunku
Uwierzytelnianie przez FacebookaPodstawowy mechanizm uwierzytelniania jest bardzo podobny do tego z Twittera ale istniejepewna roacute nica w podej ciu do dost pu W przypadku Twittera mo na by o zdecydowa czyaplikacja ma prawa tylko do odczytu czy roacutewnie zapisu Facebook oferuje znacznie bogatszemo liwo ci ustalania poziomoacutew dost pu przy czym decyduje si o nich w czasie logowania
Kod odpowiedzialny za uwierzytelnianie zosta przedstawiony na poni szym listingu Tu roacutewnie jak w przypadku Twittera musimy umie ci na pocz tku skryptu kod pobieraj cy obiekt bie-
cego u ytkownika
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
166
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()gt
Wyroacute niony wiersz kodu odpowiada za wskazanie e z poziomu gry b dziemy chcieli publiko-wa wpisy na osi czasu u ytkownika W miejscach (1) i (2) nale y wpisa warto ci wy wietlonena stronie konfiguracji aplikacji w Facebooku
Je li zmienna $facebookUser to null oznacza to e u ytkownik jest ju zalogowany W prze-ciwnym przypadku musimy wy wietli przycisk logowania Musimy wi c napisa kod podobnydo tego ktoacutery s u y do wy wietlenia przycisku logowania za po rednictwem Twittera
ltdiv id=startScreen class=screengt ltphp if ($facebookUser) $loginUrl = $facebook-gtgetLoginUrl(array( scope =gt $scope redirect_uri =gt $app_url )) gt lta class=button tweetLink href=ltphp print $loginUrl gtgtZaloguj przez Facebookaltagt ltphp else $logoutUrl = $facebook-gtgetLogoutUrl(array( next =gt $app_url )) gt lta class=button tweetLink href=ltphp print $logoutUrlgtgtWyloguj z Facebookaltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
162
Je li gracz jest zalogowany do Twittera globalna zmienna twitter ma warto true a zmiennatwitterName zawiera nazw u ytkownika
Ostatnim o co nale y zadba jest poinformowanie u ytkownika o pomy lnym zalogowaniu zapomoc Twittera i umo liwienie wylogowania si W tym celu musimy wprowadzi drobnzmian w kodzie odpowiedzialnym za ekran pocz tkowy wy wietlany po zalogowaniu
ltdiv id=startScreen class=screengt ltphp if($_SESSION[status] = verified) gt lta class=button tweetLink href=twitterredirectphpgtZaloguj przez Twitteraltagt ltphp else gt lta class=button tweetLink href=twitterclearsessionsphpgtWyloguj z Twitteraltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Po wprowadzeniu powy szych modyfikacji mo na uzna e uwierzytelnianie przez Twitterajest zaimplementowane
Publikowanie najlepszych wynikoacutew na TwitterzeTeraz kiedy gracz jest ju zalogowany do Twittera mo na publikowa jego wyniki w znaczniewygodniejszy sposoacuteb ni poprzednio Zaczniemy od utworzenia po stronie serwera skryptutwitterPostphp w ktoacuterym u yjemy interfejsu statusesupdate API Twittera
Spoacutejrzmy na kompletny skrypt
ltphpsession_start()require_once(twittertwitteroauthtwitteroauthphp)require_once(twitterconfigphp)
$time = $_SESSION[time]$level = $_SESSION[level]if (isset($time) ampamp isset($level)) Pobranie tokenoacutew u ytkownika z sesji $access_token = $_SESSION[access_token] $connection = new TwitterOAuth(CONSUMER_KEY CONSUMER_SECRET $access_token[oauth_token] $access_token[oauth_token_secret])
$parameters = array(status =gt W a nie uda o mi si sko czy $level poziom gry Yet Another Platformer w $time sekund) $status = $connection-gtpost(statusesupdate $parameters)gt
Najprawdopodobniej rozpoznajesz wi kszo kodu z powy szego listingu ktoacutery dodali my napocz tku skryptu ekranu pocz tkowego (tylko wyroacute niony kod jest nowy) W ostatnich dwoacutechwierszach tworzymy a nast pnie przesy amy do Twittera tekst ktoacutery chcemy opublikowa co
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
163
mdash jak wida mdash jest ca kiem proste Musimy jednak zaj si jeszcze jednym Poniewa graczjest zalogowany znamy jego nazw wi c mo emy j wykorzysta na ekranie tablicy wynikoacutew
W kodzie klienta utworzymy troch inn od dotychczasowej wersj tablicy wynikoacutew
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) if (twitter) top += ltinput id=name type=hidden value=+twitterName+gt + twitterName + + minSec(jsontop[i]time) + lta id=saveScore href=gtZatwierd ltagt + lta id=tweetScore href=gtTweetnijltagt ltbrgt else top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt + lta target=_blank href=httptwittercomhome status=+escape(w a nie uda o mi si sko czy +current Level+ poziom gry Yet Another Platformer w +minSec (jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Tworzymy tu niewidoczne pole wej ciowe przechowuj ce nazw u ytkownika pochodz cz Twittera Nast pnie wypisujemy t nazw na ekranie tablicy wynikoacutew Zwroacute uwag e niemusieli my w ogoacutele zmienia kodu po stronie serwera
Tyle na temat integracji z Twitterem Je eli chcesz dowiedzie si wi cej i rozszerzy funk-cjonalno gry zajrzyj do dokumentacji API Twittera
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
164
Integracja z FacebookiemIntegracja z Facebookiem i Twitterem jest w wielu aspektach podobna Facebook jest jednakw du o wi kszym stopniu nastawiony na gry Zajmiemy si implementacj osi gni dla zalo-gowanych u ytkownikoacutew Skorzystamy z SDK Facebooka dla PHP ale s roacutewnie dost pnerozwi zania dla innych j zykoacutew
Tak jak w przypadku Twittera tu roacutewnie musimy zacz od zarejestrowania aplikacji w Fa-cebooku W tym celu trzeba si zalogowa do serwisu dla deweloperoacutew (httpsdevelopers
facebookcom) i klikn pozycj Apps1
Nast pnie nale y klikn cze Create New App i wype ni obowi zkowe pola formularza Poich zatwierdzeniu pojawi si ekran z informacjami dotycz cymi nowej aplikacji Podobnie jakby o w przypadku Twittera tu roacutewnie najwa niejsze s dwie warto ci co wida na rysunku
1 Aby moacutec tworzy aplikacje trzeba si zarejestrowa jako programista W tym celu musisz klikn przycisk
Register as a Developer mdash przyp t um
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
165
Na powy szym zrzucie strza k zosta a oznaczona sekcja umo liwiaj ca wyboacuter sposobu inte-gracji aplikacji z Facebookiem Aby uzyska pe ny dost p do interfejsu Open Graph API Fa-cebooka ktoacutery umo liwia mi dzy innymi publikowanie osi gni trzeba zaznaczy pozycjAplikacja na Facebooku
Dzi ki temu gra mo e by uruchamiana w ramce (iframe) wewn trz strony Facebooka Jednakaby to by o mo liwe konieczny jest prawid owy certyfikat dla HTTPS obowi zuj cy w dome-nie w ktoacuterej jest dost pna gra Je li jednak chcemy by gra by a adowana z naszego serweranie ma tych wymaga ale i tak trzeba wpisa adres w odpowiednim polu (aby adres zostauznany za poprawny nale y poda https nawet je li nie ma si certyfikatu)
Jest jeszcze jedno co nale y zrobi by aplikacja mog a publikowa osi gni cia mdash nale y jzarejestrowa jako gr W tym celu wystarczy klikn pozycj Informacje o aplikacji a na-st pnie w sekcji Informacje o aplikacji w polach Kategoria ustawi pozycj Gry i ustali gatunekgry co wida na poni szym rysunku
Uwierzytelnianie przez FacebookaPodstawowy mechanizm uwierzytelniania jest bardzo podobny do tego z Twittera ale istniejepewna roacute nica w podej ciu do dost pu W przypadku Twittera mo na by o zdecydowa czyaplikacja ma prawa tylko do odczytu czy roacutewnie zapisu Facebook oferuje znacznie bogatszemo liwo ci ustalania poziomoacutew dost pu przy czym decyduje si o nich w czasie logowania
Kod odpowiedzialny za uwierzytelnianie zosta przedstawiony na poni szym listingu Tu roacutewnie jak w przypadku Twittera musimy umie ci na pocz tku skryptu kod pobieraj cy obiekt bie-
cego u ytkownika
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
166
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()gt
Wyroacute niony wiersz kodu odpowiada za wskazanie e z poziomu gry b dziemy chcieli publiko-wa wpisy na osi czasu u ytkownika W miejscach (1) i (2) nale y wpisa warto ci wy wietlonena stronie konfiguracji aplikacji w Facebooku
Je li zmienna $facebookUser to null oznacza to e u ytkownik jest ju zalogowany W prze-ciwnym przypadku musimy wy wietli przycisk logowania Musimy wi c napisa kod podobnydo tego ktoacutery s u y do wy wietlenia przycisku logowania za po rednictwem Twittera
ltdiv id=startScreen class=screengt ltphp if ($facebookUser) $loginUrl = $facebook-gtgetLoginUrl(array( scope =gt $scope redirect_uri =gt $app_url )) gt lta class=button tweetLink href=ltphp print $loginUrl gtgtZaloguj przez Facebookaltagt ltphp else $logoutUrl = $facebook-gtgetLogoutUrl(array( next =gt $app_url )) gt lta class=button tweetLink href=ltphp print $logoutUrlgtgtWyloguj z Facebookaltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
163
mdash jak wida mdash jest ca kiem proste Musimy jednak zaj si jeszcze jednym Poniewa graczjest zalogowany znamy jego nazw wi c mo emy j wykorzysta na ekranie tablicy wynikoacutew
W kodzie klienta utworzymy troch inn od dotychczasowej wersj tablicy wynikoacutew
$ajax( dataType json url highscorephp data async false success function (json) var top = for (var i = 0 i lt jsontoplength i++) if (jsonintop ampamp jsonpos === i) if (twitter) top += ltinput id=name type=hidden value=+twitterName+gt + twitterName + + minSec(jsontop[i]time) + lta id=saveScore href=gtZatwierd ltagt + lta id=tweetScore href=gtTweetnijltagt ltbrgt else top += ltinput id=name placeholder=_____ size=5 gt + +minSec(jsontop[i]time) + lta id=saveScore href=gtsubmitltagt + lta target=_blank href=httptwittercomhome status=+escape(w a nie uda o mi si sko czy +current Level+ poziom gry Yet Another Platformer w +minSec (jsontop[i]time)+ sekund)+gtTweetnijltagt ltbrgt else top += + jsontop[i]name + + minSec(jsontop[i]time) + ltbrgt $(top_list)html(top) )
Tworzymy tu niewidoczne pole wej ciowe przechowuj ce nazw u ytkownika pochodz cz Twittera Nast pnie wypisujemy t nazw na ekranie tablicy wynikoacutew Zwroacute uwag e niemusieli my w ogoacutele zmienia kodu po stronie serwera
Tyle na temat integracji z Twitterem Je eli chcesz dowiedzie si wi cej i rozszerzy funk-cjonalno gry zajrzyj do dokumentacji API Twittera
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
164
Integracja z FacebookiemIntegracja z Facebookiem i Twitterem jest w wielu aspektach podobna Facebook jest jednakw du o wi kszym stopniu nastawiony na gry Zajmiemy si implementacj osi gni dla zalo-gowanych u ytkownikoacutew Skorzystamy z SDK Facebooka dla PHP ale s roacutewnie dost pnerozwi zania dla innych j zykoacutew
Tak jak w przypadku Twittera tu roacutewnie musimy zacz od zarejestrowania aplikacji w Fa-cebooku W tym celu trzeba si zalogowa do serwisu dla deweloperoacutew (httpsdevelopers
facebookcom) i klikn pozycj Apps1
Nast pnie nale y klikn cze Create New App i wype ni obowi zkowe pola formularza Poich zatwierdzeniu pojawi si ekran z informacjami dotycz cymi nowej aplikacji Podobnie jakby o w przypadku Twittera tu roacutewnie najwa niejsze s dwie warto ci co wida na rysunku
1 Aby moacutec tworzy aplikacje trzeba si zarejestrowa jako programista W tym celu musisz klikn przycisk
Register as a Developer mdash przyp t um
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
165
Na powy szym zrzucie strza k zosta a oznaczona sekcja umo liwiaj ca wyboacuter sposobu inte-gracji aplikacji z Facebookiem Aby uzyska pe ny dost p do interfejsu Open Graph API Fa-cebooka ktoacutery umo liwia mi dzy innymi publikowanie osi gni trzeba zaznaczy pozycjAplikacja na Facebooku
Dzi ki temu gra mo e by uruchamiana w ramce (iframe) wewn trz strony Facebooka Jednakaby to by o mo liwe konieczny jest prawid owy certyfikat dla HTTPS obowi zuj cy w dome-nie w ktoacuterej jest dost pna gra Je li jednak chcemy by gra by a adowana z naszego serweranie ma tych wymaga ale i tak trzeba wpisa adres w odpowiednim polu (aby adres zostauznany za poprawny nale y poda https nawet je li nie ma si certyfikatu)
Jest jeszcze jedno co nale y zrobi by aplikacja mog a publikowa osi gni cia mdash nale y jzarejestrowa jako gr W tym celu wystarczy klikn pozycj Informacje o aplikacji a na-st pnie w sekcji Informacje o aplikacji w polach Kategoria ustawi pozycj Gry i ustali gatunekgry co wida na poni szym rysunku
Uwierzytelnianie przez FacebookaPodstawowy mechanizm uwierzytelniania jest bardzo podobny do tego z Twittera ale istniejepewna roacute nica w podej ciu do dost pu W przypadku Twittera mo na by o zdecydowa czyaplikacja ma prawa tylko do odczytu czy roacutewnie zapisu Facebook oferuje znacznie bogatszemo liwo ci ustalania poziomoacutew dost pu przy czym decyduje si o nich w czasie logowania
Kod odpowiedzialny za uwierzytelnianie zosta przedstawiony na poni szym listingu Tu roacutewnie jak w przypadku Twittera musimy umie ci na pocz tku skryptu kod pobieraj cy obiekt bie-
cego u ytkownika
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
166
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()gt
Wyroacute niony wiersz kodu odpowiada za wskazanie e z poziomu gry b dziemy chcieli publiko-wa wpisy na osi czasu u ytkownika W miejscach (1) i (2) nale y wpisa warto ci wy wietlonena stronie konfiguracji aplikacji w Facebooku
Je li zmienna $facebookUser to null oznacza to e u ytkownik jest ju zalogowany W prze-ciwnym przypadku musimy wy wietli przycisk logowania Musimy wi c napisa kod podobnydo tego ktoacutery s u y do wy wietlenia przycisku logowania za po rednictwem Twittera
ltdiv id=startScreen class=screengt ltphp if ($facebookUser) $loginUrl = $facebook-gtgetLoginUrl(array( scope =gt $scope redirect_uri =gt $app_url )) gt lta class=button tweetLink href=ltphp print $loginUrl gtgtZaloguj przez Facebookaltagt ltphp else $logoutUrl = $facebook-gtgetLogoutUrl(array( next =gt $app_url )) gt lta class=button tweetLink href=ltphp print $logoutUrlgtgtWyloguj z Facebookaltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
164
Integracja z FacebookiemIntegracja z Facebookiem i Twitterem jest w wielu aspektach podobna Facebook jest jednakw du o wi kszym stopniu nastawiony na gry Zajmiemy si implementacj osi gni dla zalo-gowanych u ytkownikoacutew Skorzystamy z SDK Facebooka dla PHP ale s roacutewnie dost pnerozwi zania dla innych j zykoacutew
Tak jak w przypadku Twittera tu roacutewnie musimy zacz od zarejestrowania aplikacji w Fa-cebooku W tym celu trzeba si zalogowa do serwisu dla deweloperoacutew (httpsdevelopers
facebookcom) i klikn pozycj Apps1
Nast pnie nale y klikn cze Create New App i wype ni obowi zkowe pola formularza Poich zatwierdzeniu pojawi si ekran z informacjami dotycz cymi nowej aplikacji Podobnie jakby o w przypadku Twittera tu roacutewnie najwa niejsze s dwie warto ci co wida na rysunku
1 Aby moacutec tworzy aplikacje trzeba si zarejestrowa jako programista W tym celu musisz klikn przycisk
Register as a Developer mdash przyp t um
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
165
Na powy szym zrzucie strza k zosta a oznaczona sekcja umo liwiaj ca wyboacuter sposobu inte-gracji aplikacji z Facebookiem Aby uzyska pe ny dost p do interfejsu Open Graph API Fa-cebooka ktoacutery umo liwia mi dzy innymi publikowanie osi gni trzeba zaznaczy pozycjAplikacja na Facebooku
Dzi ki temu gra mo e by uruchamiana w ramce (iframe) wewn trz strony Facebooka Jednakaby to by o mo liwe konieczny jest prawid owy certyfikat dla HTTPS obowi zuj cy w dome-nie w ktoacuterej jest dost pna gra Je li jednak chcemy by gra by a adowana z naszego serweranie ma tych wymaga ale i tak trzeba wpisa adres w odpowiednim polu (aby adres zostauznany za poprawny nale y poda https nawet je li nie ma si certyfikatu)
Jest jeszcze jedno co nale y zrobi by aplikacja mog a publikowa osi gni cia mdash nale y jzarejestrowa jako gr W tym celu wystarczy klikn pozycj Informacje o aplikacji a na-st pnie w sekcji Informacje o aplikacji w polach Kategoria ustawi pozycj Gry i ustali gatunekgry co wida na poni szym rysunku
Uwierzytelnianie przez FacebookaPodstawowy mechanizm uwierzytelniania jest bardzo podobny do tego z Twittera ale istniejepewna roacute nica w podej ciu do dost pu W przypadku Twittera mo na by o zdecydowa czyaplikacja ma prawa tylko do odczytu czy roacutewnie zapisu Facebook oferuje znacznie bogatszemo liwo ci ustalania poziomoacutew dost pu przy czym decyduje si o nich w czasie logowania
Kod odpowiedzialny za uwierzytelnianie zosta przedstawiony na poni szym listingu Tu roacutewnie jak w przypadku Twittera musimy umie ci na pocz tku skryptu kod pobieraj cy obiekt bie-
cego u ytkownika
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
166
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()gt
Wyroacute niony wiersz kodu odpowiada za wskazanie e z poziomu gry b dziemy chcieli publiko-wa wpisy na osi czasu u ytkownika W miejscach (1) i (2) nale y wpisa warto ci wy wietlonena stronie konfiguracji aplikacji w Facebooku
Je li zmienna $facebookUser to null oznacza to e u ytkownik jest ju zalogowany W prze-ciwnym przypadku musimy wy wietli przycisk logowania Musimy wi c napisa kod podobnydo tego ktoacutery s u y do wy wietlenia przycisku logowania za po rednictwem Twittera
ltdiv id=startScreen class=screengt ltphp if ($facebookUser) $loginUrl = $facebook-gtgetLoginUrl(array( scope =gt $scope redirect_uri =gt $app_url )) gt lta class=button tweetLink href=ltphp print $loginUrl gtgtZaloguj przez Facebookaltagt ltphp else $logoutUrl = $facebook-gtgetLogoutUrl(array( next =gt $app_url )) gt lta class=button tweetLink href=ltphp print $logoutUrlgtgtWyloguj z Facebookaltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
165
Na powy szym zrzucie strza k zosta a oznaczona sekcja umo liwiaj ca wyboacuter sposobu inte-gracji aplikacji z Facebookiem Aby uzyska pe ny dost p do interfejsu Open Graph API Fa-cebooka ktoacutery umo liwia mi dzy innymi publikowanie osi gni trzeba zaznaczy pozycjAplikacja na Facebooku
Dzi ki temu gra mo e by uruchamiana w ramce (iframe) wewn trz strony Facebooka Jednakaby to by o mo liwe konieczny jest prawid owy certyfikat dla HTTPS obowi zuj cy w dome-nie w ktoacuterej jest dost pna gra Je li jednak chcemy by gra by a adowana z naszego serweranie ma tych wymaga ale i tak trzeba wpisa adres w odpowiednim polu (aby adres zostauznany za poprawny nale y poda https nawet je li nie ma si certyfikatu)
Jest jeszcze jedno co nale y zrobi by aplikacja mog a publikowa osi gni cia mdash nale y jzarejestrowa jako gr W tym celu wystarczy klikn pozycj Informacje o aplikacji a na-st pnie w sekcji Informacje o aplikacji w polach Kategoria ustawi pozycj Gry i ustali gatunekgry co wida na poni szym rysunku
Uwierzytelnianie przez FacebookaPodstawowy mechanizm uwierzytelniania jest bardzo podobny do tego z Twittera ale istniejepewna roacute nica w podej ciu do dost pu W przypadku Twittera mo na by o zdecydowa czyaplikacja ma prawa tylko do odczytu czy roacutewnie zapisu Facebook oferuje znacznie bogatszemo liwo ci ustalania poziomoacutew dost pu przy czym decyduje si o nich w czasie logowania
Kod odpowiedzialny za uwierzytelnianie zosta przedstawiony na poni szym listingu Tu roacutewnie jak w przypadku Twittera musimy umie ci na pocz tku skryptu kod pobieraj cy obiekt bie-
cego u ytkownika
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
166
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()gt
Wyroacute niony wiersz kodu odpowiada za wskazanie e z poziomu gry b dziemy chcieli publiko-wa wpisy na osi czasu u ytkownika W miejscach (1) i (2) nale y wpisa warto ci wy wietlonena stronie konfiguracji aplikacji w Facebooku
Je li zmienna $facebookUser to null oznacza to e u ytkownik jest ju zalogowany W prze-ciwnym przypadku musimy wy wietli przycisk logowania Musimy wi c napisa kod podobnydo tego ktoacutery s u y do wy wietlenia przycisku logowania za po rednictwem Twittera
ltdiv id=startScreen class=screengt ltphp if ($facebookUser) $loginUrl = $facebook-gtgetLoginUrl(array( scope =gt $scope redirect_uri =gt $app_url )) gt lta class=button tweetLink href=ltphp print $loginUrl gtgtZaloguj przez Facebookaltagt ltphp else $logoutUrl = $facebook-gtgetLogoutUrl(array( next =gt $app_url )) gt lta class=button tweetLink href=ltphp print $logoutUrlgtgtWyloguj z Facebookaltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
166
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()gt
Wyroacute niony wiersz kodu odpowiada za wskazanie e z poziomu gry b dziemy chcieli publiko-wa wpisy na osi czasu u ytkownika W miejscach (1) i (2) nale y wpisa warto ci wy wietlonena stronie konfiguracji aplikacji w Facebooku
Je li zmienna $facebookUser to null oznacza to e u ytkownik jest ju zalogowany W prze-ciwnym przypadku musimy wy wietli przycisk logowania Musimy wi c napisa kod podobnydo tego ktoacutery s u y do wy wietlenia przycisku logowania za po rednictwem Twittera
ltdiv id=startScreen class=screengt ltphp if ($facebookUser) $loginUrl = $facebook-gtgetLoginUrl(array( scope =gt $scope redirect_uri =gt $app_url )) gt lta class=button tweetLink href=ltphp print $loginUrl gtgtZaloguj przez Facebookaltagt ltphp else $logoutUrl = $facebook-gtgetLogoutUrl(array( next =gt $app_url )) gt lta class=button tweetLink href=ltphp print $logoutUrlgtgtWyloguj z Facebookaltagt ltphp gt lta id=startButtonclass=button href=gtRozpocznij gr ltagtltdivgt
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
167
Jak wida Facebook SDK oferuje metod generowania adresoacutew URL s u cych do logowaniai wylogowywania
Do skryptu musimy jeszcze dopisa fragment s u cy do informowania javascriptowego koduo tym czy u ytkownik jest zalogowany czy nie U yjemy tu rozwi zania ktoacutere zastosowali myw przypadku Twittera
ltscript type=textjavascriptgt ltphp if($facebookUser) gt var facebook = true var facebookId = ltphp print $facebookUser gt ltphp else gt var facebook = false ltphp gtltscriptgt
Tworzenie osi gniZajmiemy si teraz tworzeniem osi gni Aby to by o mo liwe na serwerze trzeba umie cidwa pliki
plik HTML zawieraj cy w nag oacutewku zestaw znacznikoacutew meta plik obrazka reprezentuj cego osi gni cie na osi czasu gracza
Dokument HTML b dzie nie tylko plikiem konfiguracyjnym ale b dzie roacutewnie do niegoprowadzi odsy acz z wpisu z osi gni ciem na osi czasu gracza Aby Facebook go rozpozna trzeba w jego nag oacutewku umie ci siedem znacznikoacutew meta
ogtype mdash zawieraj cy warto gameachievement Odroacute nia on osi gni cie od innychwpisoacutew OpenGraph
ogtitle mdash zawieraj cy kroacutetki opis osi gni cia ogurl mdash zawieraj cy adres URL bie cego pliku ogdescription mdash zawieraj cy d u szy opis osi gni cia ogimage mdash zawieraj cy adres pliku obrazka o ktoacuterym by a mowa wcze niej
Mo e to by plik PNG JPEG lub GIF o minimalnych wymiarach 50times50 pikselii maksymalnym stosunku wymiaroacutew 31
gamepoints mdash zawieraj cy liczb punktoacutew powi zan z danym osi gni ciemWarto ta nie mo e przekroczy 1000 punktoacutew i by mniejsza ni 1 Osi gni ciao wy szej warto ci b d z wi kszym prawdopodobie stwem wy wietlane u znajomychgracza
fbapp_id mdash b d cy identyfikatorem aplikacji
W ciele dokumentu HTML mo na umie ci dok adny opis osi gni cia oraz inne informacjeProsty przyk ad kompletnej strony osi gni cia znajduje si na poni szym listingu
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
168
lthtmlgt ltheadgt ltmeta property=ogtype content=gameachievement gt ltmeta property=ogtitle content=Uko czony poziom 1 gt ltmeta property=ogurl content=http8bitentropycomyapach1html gt ltmeta property=ogdescription content=W a nie zako czy e pierwszy poziom gt ltmeta property=ogimage content=http8bitentropycomyapach1png gt ltmeta property=gamepoints content=50 gt ltmeta property=fbapp_id content=(1) gt ltheadgt ltbodygt lth1gt wietna robota pierwszy poziom ju za tob lth1gt ltbodygtlthtmlgt
Osi gni cie zostanie wy wietlone w sposoacuteb zbli ony do tego co wida na poni szym rysunku
Jednak samo przygotowanie dokumentu nie wystarczy mdash trzeba go opublikowa na FacebookuAby to zrobi musimy wykona danie POST pod okre lony adres i przekaza niezb dne pa-rametry danie to musi by roacutewnie powi zane z tokenem aplikacji Za pomoc tokenoacutewFacebook upewnia si e komunikuje si z nim okre lona aplikacja a nie jaka inna
Musimy wi c napisa skrypt przesy aj cy osi gni cia do Facebooka Kompletny kod zostaprzedstawiony na poni szym listingu
ltphp
require facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
169
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi((1)achievements post array( achievement =gt httpyetanotherplatformercomach1html))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret) $token_url = httpsgraphfacebookcomoauthaccess_token client_id= $app_id
ampclient_secret= $app_secret ampgrant_type=client_credentials
$token_response =file_get_contents($token_url) $params = null parse_str($token_response $params) return $params[access_token]gt
Przeznaczenie poszczegoacutelnych fragmentoacutew kodu jest dosy jasne a poza tym wi kszo po-jawi a si ju wcze niej W wyroacute nionym fragmencie pobieramy token aplikacji wi emy goz tworzonym daniem a nast pnie mdash za pomoc SDK mdash wysy amy danie POST
Adres dania ma nast puj c posta identyfikator aplikacjiosi gni cie Przekazywany parametrjest zwyk ym adresem URL pliku osi gni cia
Poniewa generowany komunikat o b dzie (je li co poacutejdzie nie tak) mo e by niejasny poszu-kiwania przyczyn problemoacutew najlepiej zacz od sprawdzenia poprawno ci pliku osi gni cia zapomoc narz dzia udost pnianego przez Facebook (httpsdevelopersfacebookcomtools debug)
Publikowanie osi gniPo zarejestrowaniu osi gni cia w Facebooku mo emy je przyzna graczom Polecenie to jestroacutewnie przesy ane w formie dania POST ktoacutere musi by powi zane z tokenem aplikacjiAby upro ci przyk ad utworzymy niewielki skrypt PHP ktoacutery mdash po wywo aniu mdash b dzienadawa u ytkownikom osi gni cia Takiego rozwi zania nie powinno si jednak stosowa w rze-czywistych aplikacjach poniewa zwykle chcemy unikn sytuacji w ktoacuterej u ytkownik sammusi uruchomi jaki skrypt W zwi zku z tym najlepszym wyj ciem by oby umieszczenieomawianego kodu w pliku highscorephp
Poni ej znajduje si pe ny kod skryptu Jest on bardzo podobny do tego ktoacutery odpowiada zazarejestrowanie osi gni istotne roacute nice zosta y wyroacute nione
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
170
ltphpsession_start()
Facebookrequire facebookfacebookphp
$app_id = (1)$app_secret = (2)$app_namespace = yap_bookdemo$app_url = httpyetanotherplatformercom$scope = publish_actions
$facebook = new Facebook(array( appId =gt $app_id secret =gt $app_secret))
Pobiera obiekt bie cego u ytkownika$facebookUser = $facebook-gtgetUser()
$app_access_token = get_app_access_token($app_id $app_secret)$facebook-gtsetAccessToken($app_access_token)
$response = $facebook-gtapi($facebookUserachievements post array( achievement =gt httpyetanotherplatformercomach1html ))
print($response)
Funkcja pomocnicza pobieraj ca token dost pu aplikacji (access token)function get_app_access_token($app_id $app_secret)
gt
Tym razem tworzymy danie POST pod adres w formacie identyfikator u ytkownikaosi gni ciaTeraz w kodzie gry po uko czeniu pierwszego poziomu wystarczy wykona asynchronicznewywo anie tego pliku
if (status == finished) if (facebook ampamp currentLevel === 1) $get(ach1php)
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
Rozdzia 8 bull Wkraczamy w sieci spo eczno ciowe
171
PodsumowanieW tym rozdziale omoacutewili my naprawd sporo zagadnie przy czym niektoacutere jak cho by roacute nemo liwo ci integracji z serwisami spo eczno ciowymi jedynie zasygnalizowali my InterfejsyAPI Facebooka i Twittera s bardzo rozbudowane i wci si zmieniaj Je li chcesz z nichskorzysta w najlepszy mo liwy sposoacuteb musisz na bie co ledzi ich dokumentacj
Trzeba jednak pami ta e korzystanie z zewn trznych serwisoacutew zw aszcza bezp atnychpowoduje powstanie silnych zale no ci co mo e mie powa ne konsekwencje Serwisy temog w dowolnej chwili zmieni API wymuszaj c w ten sposoacuteb konieczno szybkiegowprowadzenia zmian w kodzie aplikacji Mo e si te okaza e opublikowana gra nie b dzieod jakiego momentu obs ugiwana W zwi zku z tym zawsze trzeba mie przygotowane alter-natywne rozwi zanie
W kolejnym rozdziale zajmiemy si innym gor cym tematem mdash przystosujemy gr do dzia aniana urz dzeniach mobilnych Skorzystamy z opracowanej wcze niej gry MMORPG i zmodyfi-kujemy j tak by dzia a a na smartfonach i tabletach
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
jQuery Niezb dnik programisty gier
172
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
Skorowidz
Aadres URL 31 156 167akcja 16Alien Breed 87Android 173 174animacja 29
dezaktywowanie 32gracza 76implementowanie 30obiekt Patrz obiekt animacjipr dko odtwarzania 30 31przeciwnika 76t a 76w p tli 48zatrzymanie 18
aplikacjaikona 190nas uchuj ca 153natywna 173token 168 169webowa 173wymagane pliki 192
Aptana 12arkusz 29
spritersquooacutew Patrz spriteatrybut
data 21src 29
Bbiblioteka 28
jQuery Patrz jQueryjQuery Mobile Patrz jQuery Mobileodtwarzania d wi ku 196
OpenAL 204SFXRjs 214SoundJS 213SoundManager 211 212 213twitteroauth Patrz twitteroauth
BrowserQuest 87 98
CChrome 195 200 204Chrono Trigger 87Civilization 87CreateJS 213CSS przekszta cenie 57 64 65
obroacutet 65skalowanie 65 66troacutejwymiarowe 65
CSS Transforms Patrz CSS przekszta cenieczas
odmierzanie 48zw oki 53
Ddanych sk adowanie lokalne 193debugowanie 27 48diagram przej 39directional pad Patrz D-paddokumentacja API 17 23 31DOM 21 27
modyfikowanie 56 61w ze
dodawanie 21 22przywracanie 23usuwanie 21 23
duszek Patrz sprite
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
Skorowidz
216
dziedziczenie 83 84d wi k 195 198
filtr 211g o no 207kilka roacutede 208kompresor 210konwolucja 210opoacute nienie 209osadzanie 195 198sterowanie 204w przestrzeni troacutejwymiarowej 209
EEasyPHP 12Eclipse 12edytor 12
Aptana Patrz AptanaEclipse Patrz EclipseEmacs Patrz EmacsKomodo Edit Patrz Komodo Editmap kafelkoacutew Patrz mapa kafelkoacutew edytorNotepad++ Patrz Notepad++VIM Patrz VIM
efektd wi kowy 195 204 214paralaksy 82po wiaty 190
ekrandomowy 188 189dotykowy 180logowania 125tytu owy 190
elementaudio 195 200 213 214canvas 27 178cz ci wspoacutelne 71 72 73 74div 21 29
od czanie 61pozycjonowanie 33
DOM 21 27od czanie 61usuwanie 21
embed 198fizyka ruchu 78img 29klon 56nadrz dny 20poruszaj cy si Patrz sprite
renderowanie 27 Patrz renderowanievideo 200 213 214
Emacs 12eskejpowanie a cuchoacutew tekstowych 127
FFacebook 143 157
dla deweloperoacutew 164 165SDK 164 167
Firefox 195 200 204flaga 64Flash 25 196 211 213format
AAC 200GIF 178
animowany 29JPEG 178JSON 98 111MIDI 199MP3 200Ogg Vorbis 200PNG 178TIFF 178WAV 199 200
formularz 19framework 27 28Frogger 26funkcja
$ajax 98 99 108 112 113alias 112 113debugowanie 116skroacutet 113
$data 64$get 113$getJSON 99 113 126 127 131$getScript 113 115$load 113$post 113always 116animate 17append 22bind 19 21clearQueue 18click 19complete 116css 16 30data 21delay 19delegate 20 21
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
Skorowidz
217
dequeue 19
detach 23
done 116
error 116
fail 116
find 90
html 22 101
off 21
on 21
prepend 22
remove 23
stop 18
success 116
unbind 20
undelegate 20addCallback 48animacyjna 17data 57fadeIn 18fadeOut 18fadeTo 18get_browser 177gfimportTiled 98hash 128haszuj ca 128hide 18json_encode 129a cuch 22
mysqli_escape 127obs ugi zdarzenia 41 182 186
niskopoziomowa 19requestAnimationFrame 58rgba 101setInterval 30 48 58setTimeout 48 58show 18slideDown 18slideUp 18wykrywania
po o enia 173 174ruchu 173 174
zwrotna 48 50 52 58 116 135
Ggarbage collector Patrz od miecaczGauntlet 87getter 16GIF Patrz format GIFGimp 12
Google 157gra
dwuwymiarowa 25 61fabularna Patrz RPGhack and slash 87implementowanie po stronie serwera 138 149integracja
z ekranem domowym 174z Facebookiem 164 165 168z Twitterem 157 158 159 160 161 162
izometryczna 104kod 28
inicjalizuj cy 37konsolowa 181liczba graczy 123logika Patrz logikaMMORPG Patrz MMORPGmobilna 173multiplayer 123pe noekranowa 188p tla g oacutewna 39 40platformowa 26 55 61 108poziom Patrz poziomscena Patrz scenasymulacyjna 87testowanie 175troacutejwymiarowa 25wielopoziomowa 117wojenna 87
graczaktualizacja po o enia 134 135dodawanie 135has o 124konto 124 125 128liczba y 38logowanie 124 125 131
za pomoc konta na Facebooku 165za pomoc konta na Twitterze 143 156 157
160 161osi gni cie 143pasek do wiadczenia 103pasek energii 103rozmowa z NPC 101si a ciosu 102 103synchronizacja 132 133usuwanie 135walka 102wznowienie rozgrywki 130zabicie przeciwnika 137
grupa 63
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
Skorowidz
218
Hhitzone Patrz strefa uderzeniaHTML5 193 195 200
Iinstrukcja switch 40 80interfejs
API 174 200Audio Data Patrz Audio Datadotykowy 180Open Graph API 165u ytkownika Patrz UIWeb Audio API Patrz Web Audio APIwielodotykowy 173 180
Internet Explorer 27 176 200 204interwa 48
bazowy 48normalizacja 52uchwyt Patrz uchwyt interwa oacutew
iPad 176iPhone 176iPod 176iPod Touch 176
JJavaScript 48j zyk
JavaScript Patrz JavaScriptjednow tkowy 48PHP 144 159stosowany po stronie serwera 13
joystick 181 184jQuery 15 213
obiekt 62samouczek 23
jQuery Mobile 174
Kkafelek 61 68 69
dodawanie 93izometryczny 104klasa 69kolizje 71 72 73 74 89semantyczny 109widoczny 89
kamera 94 95klasa 20 64
anonimowa 77klawiatura 19
odpytywanie Patrz odpytywanie klawiaturyklawisz
powtarzanie 53wci ni ty 53wirtualny 181zwolniony 53
klient u ytkownika Patrz UAklucz 21Koch Peter-Paul 176kod
HTML 21obiektowy 77 83optymalizacja 47 55zaciemnianie 151 152zorientowany obiektowo 61
kodowanie warto ci 153kolejka
animacji 18fx 19
kolejkowanie 18kolizja 96
algorytm wykrywania 61 71 72 73 74 7996 110
cz ci wspoacutelne 71 72 73 74postaci z otoczeniem 97 99 101wykrywanie 42
konsola 25 101 103kontekst 204kontroler D-pad Patrz D-padkonwolucja 210korektor barwy 204
Lliczba y 21litera obiektowy 17logika 27 39 61 110
a cuchjako argument 22parsowanie 22pusty 22tekstowy eskejpowanie 127wywo a 16 17
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
Skorowidz
219
Mmacierz rzadka 88MAMP 12manifest 192mapa
kafelkoacutew 61 68 69 87dodatkowa 108edytor 98izometrycznych 104optymalizowanie 88pobieranie 108przesuwanie 90tworzenie 69zaimportownie danych 114
klucz-warto 17Massively Multiplayer Online Role-Playing
Game Patrz MMORPGmaszyna stanoacutew sko czonych 39 40mechanizm
lokalnego sk adowania danych 193OAuth Patrz OAuth
metoda$extend 31 49canPlayType 201getItem 193noteOff 205noteOn 205setItem 193start 205stop 205
miecz 100MMORPG 108 123 144 173modu mysqli 127modyfikator ataku 102MySQL 144myszy przycisk 19
NNon-Player Character Patrz NPCNotepad++ 12NPC 95 99 101 111
OOAuth 157obfuscating Patrz kod zaciemnianie
obiektanimacji 31AudioParams 207BufferLoader 208Image 36 200jQuery 62localStorage 193sessionStorage 193sound 197
obraz 178obs uga zdarzenia Patrz zdarzenie obs ugaobszar poacute przezroczysty 101odpytywanie
klawiatury 53 55stanu 53
odsy acz 20od miecacz 21odtwarzacz CD 204okna przegl darki skalowanie 19Opera 195 200 204operacja
modulo 30 42przesuni cia w lewo 154przesuni cia w prawo 154
o czasu 143
PPagella Andres 103pami 178parallax scrolling Patrz efekt paralaksypasek
stanu 189do wiadczenia 103energii 103
perspektywaizometryczna 103 104mapy 87
Pixen 12 28plik
callbackphp 161config-samplephp 160dbconnectphp 130d wi kowy 195 198 204
adowanie 213adowanie wst pne 201 203
JSON Patrz te format JSONinterpreter 111konwersja 114adowanie 113
tworzenie 126
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
Skorowidz
220
plikadowanie 108 113 201 203 213
asynchroniczne 113czenie 107
manifest 192MIDI 195muzyczny 199 200php_browscapini 177redirectphp 160wideo 213wymagany przez aplikacj 192
podpoziom 108polimorfizm 16posta niezale na Patrz NPCpotomek 22
po redni 90bezpo redni 90dodawanie 22
poziom 107pozycjonowanie bezwzgl dne 33procesora pr dko 178projekcja ortogonalna 87przegl darka 25
desktopowa 175mobilna 175 176
szeroko strony 179tryb offline 173 174 192wykrywanie 177
po stronie klienta 175po stronie serwera 177
przekszta cenie CSS Patrz CSS przekszta cenieprzestrze nazw 28 64przezroczysto 101
Rreferencja cykliczna 21renderowanie 27RPG 26 55 87 108rzutu kostk symulacja 102
SSafari 176 195 200 204scena 27selektor 16 90serwer 12
EasyPHP 99 Patrz EasyPHPMAMP 99 Patrz MAMP
WWW 99XAMPP Patrz XAMPP
sesja 130aktywna 130token 161
setter 17sie spo eczno ciowa 143si a ciosu 102 103SimCity 87skalowalno 123skrypt
JavaScript 126konfiguracyjny twitteroauth 160mediaelementjs 214tablicy wynikoacutew Patrz tablica wynikoacutew skrypttworzenie przeciwnikoacutew 112zasi g globalny 115 120zewn trzny 115
Sonic the Hedgehog 61sprite 20 27 28 38
animowany 27 29arkusz 29adowanie 111
nazwa 62obszar kolizji 99przekszta cenie 64 65przemieszczanie 33przes anianie 95 96redukowanie liczby 179tworzenie 55
SQL wstrzykni cie 127SQL injection Patrz SQL wstrzykni ciestate polling Patrz odpytywanie stanustrefa uderzenia 100struktura DOM Patrz DOMSuper Mario Bros 61system
Android Patrz AndroidiOS 173 174 176
Ttabela graczy 124tablica wynikoacutew 143
oszukiwanie 149 150 153 154 155publikowanie 162 167 168 169skrypt 143tworzenie 144weryfikacja 149wy wietlanie 147
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
Skorowidz
221
technologiaMySQL 123 Patrz MySQLPHP 123 Patrz j zyk PHP
tekstu wy wietlanie 101The Legend of Zelda A Link to the Past 87Tiled 98t o 27 29
kolor 101po o enie 29
top-down perspective Patrz perspektywa mapytransformacja
anizotropowa 66izotropowa 66
tweetpublikowanie 156tekst 156
Twitter 143 156 157dla deweloperoacutew 158 159
twitteroauth 159 160skrypt konfiguracyjny 160
UUA 175 177
spoofing 176uchwyt interwa oacutew 32UglifyJS 152UI 27 144urz dzenie mobilne 173
orientacja 191wydajno 173 174
User Agent Patrz UA
VVIM 12Vleugels Kenney 75
WWarcraft 87warto 21w tek roboczy 48Web Audio API 195 204 208 213
w ze 204AnalyserNode 210BiquadFilterNode 211ConvolverNode 210DelayNode 209
DynamicsCompressorNode 210PannerNode 209ScriptProcessorNode 209tworzenie 207typ 209WaveShaperNode 211wzmocnienia 207roacuted owy 205
widok izometryczny 88w a ciwo 16 17
background-position 40CSS filter 64navigatoruserAgent 175readyState 201transform 65z-index 95 101 104zmiana w czasie 17
wydajno 21 27 48 177ograniczenia 178 179
wywo anie mi dzydomenowe 113wzmacniacz 204 207
XXAMPP 12
Zzapytanie SQL 127zasobu pobieranie 34zdarzenie
deviceorientation 191keydown 41 53keyup 53obs uga 19 20 182 183 186touchend 183touchstart 182wielodotyku 182
Zelda 87zmienna
dodatkowa 155nazwa 154
znacznikembed 198img 200link 190meta
apple-mobile-web-app-capable 188apple-mobile-web-app-status-bar-style 189
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę
Skorowidz
222
znak 30ltlt 154gtgt 154
danie 144GET 127POST 127 168 169synchroniczne 99 115
Kup książkę Poleć książkę