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()

Twitter

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ę