FaceMaze

About

A new pac man is in to town.

Introducere

S-a dorit crearea unei aplicatii web ce unifica mai multe servici web (google maps, twitter, last.fm) intr-un mod creativ. Idea de start a proiectului a fost aceea de a crea o clona a vestitului joc PacMan.

O cerinta principala a proiectului era ca hartile pe care vor juca utilizatorii sa fie generate in mod aleator. Pentru a rezolva aceasta problema s-a recurs la folosirea hartilor oferite de Google Maps pentru a creea o harta PacMan

Module

  1. Home home page Reprezinta punctul de intrarea a aplicatiei. De pe aceasta pagina utlizatorul poate accesa pagina de documentatie(About), pagina de contact, pagina continad top-ul si paginile de autetificare(login, register, forgot password)
  2. About about page Documentatia in limba romana a acestei aplicatii web.
  3. Contact contact page

    Pagina de contact. Prin completarea campului de nume si email un tuilizator poate sa trimita un mail de contact administratorului.

    Formularul este creat prin intermediul componentei HTMLForm din cadrul Framework-ului folosit. Asta permite validarea si tratarea erorilor prin intermediul unor reguli setate pe server. De asemenea sistemul are deasemnea grija la continul mesajului pentru a preveni atacuri de gen XSS. Odata ce formularoul este valid, datele acestui sunt trimise prin functia mail nativa php.

  4. Top top page

    Pagina de top afiseaza un tabel cu toti utilizatori ordonai dupa numarul de puncte acumulate in joc. Aceasta lista poate fi accesat prin xml-ul public aflat la http://playground.mbogdan.com/geoFaceMaze/application/top.xml

  5. Autentificare signin page

    Pagina de autentificare. Autentificare se poate realiza pe orice pagina, componenta desesiuni find initiata la fiecare modul de catre model

    De asemnea deautentiicarea este posibilia de pe orice pagina, atunci cand este gasit segmentul "logoff" in url

  6. Creare cont nou signup page

    Formularul de inregistrare permite crearea de conturi noi. Formularul este generat de componenta HTMLForm a Framework-ului.

  7. Uitat parola forgot page

    Formularul de resetat parola, trimite un link la email-ul user-ului specificat care permite crearea unei noi parole

  8. Play

    Modulul play permite accesul la jocul efectiv. Jocul este inpartit in 3 stari: alegerea retelei sociale de unde se vor importa prietenii, alegerea harti pe care se va juca, jocul efectiv.

    Alegerea Retelei sociale play page

    Utilizatorii au de ales intre atutentificare cu twitter sau last.fm. Utilizatorul va fi redirectionat la site-u ales pentru autentifcare si darea de drepturi aplicatiei http://playground.mbogdan.com/geoFaceMaze/

    Alegerea Harti de Joc play page

    Dupa autentificare jocatorul va fi rugat sa aleaga harta de joc folosind o harta google maps generata prin javascript.

    Joc play page

    Jocul efectiv se realizeaza pe arterele colorate cu galben al hartii. Jocul pune pe deasupra o serie de patrate rosii, care se coloreaza in gri odata ce se trece peste ele. La ficare 3 patratele parcurse se colecteaza un punct joc.

    Sunt introduse 5 fantome in joc. Fantomele sunt reprezentate prin avatarele prietenelor alese in mod aleator.

  9. Arhitectura jocului

    Odata logat la un serviciu, modulul play inseareaza o harta google folosind api-ul javascript.
    Facand click pe butonul "Select Map" se intializeaza jocul javascript. Se creaza un <canvas> pentru scanarea harti.
    Printr-un apel ajax se copie de la serviciul static google maps imaginea hartii selectate in format png. Imaginea este salvata intr-un cache
    Imaginea este scanta folosind API-ul 2D oferit de canvas. Se parcurge harta cu patrate de 10 pe 10 px. Daca intr-un patrat se gaseste guloarea galbena a drumurilor (cu o marja de eroare de +-5 puncte culoare pentru a compesa pentru compresia imaginii).
    Daca un patrat contine aceea culoare, acela este marcat ca drum pentru pacman si fantome. Daca nu el este marcat ca zid.
    Harta este salvata ca o matrice in javascript. Toate testele de terminare/calculare puncte se face pe aceasta matrice.
    PacMan-ul, Fantomele si pilulele sunt afisate ca div-uri pozitionate absolut.
    Fantomele sunt generate la pozitii aleatoare. Miscarea lor este dictata de un algoritm aleator, ce nu permite intoarcerea.
    HitTest-ul intr fantome si pacMan este realizat prin pozitia absoluta a div-urilor.

    Cand jocul se termina(fie castig, fie a fost mancat de o fantoma) se trimite prin ajax o crere de actualizare a punctajului.

    Daca se pierde un joc, este posta un mesaj e reteau sociala pe care a selectato utilizatorul

Sign In Sign Up
Done