ďťż

[DHTML] Platforma gry logiczno-przygodowej XML a HTML, nowe podejście

       

Podstrony


telcocafe

Na pewno niektórzy uczestnicy forum pamiętają grę logiczno-przygodową z działu Pole do popisu. To jest coś na wzór flaszowych gier escape typu MOTAS, lecz stworzona w technice DHTML, czyli XHTML, CSS i Javascript. Stoi bez zmian w fazie BETA już przez 3 lata. Zamierzam stworzyć nową platformę dla gry.

W tego typu projektach zacząłem rezygnować z PHP - jest po prostu niepotrzebny, a w kodzie powstawał śmietnik. Ładowanie dokumentów zastępuję technologią AJAX. Prawdopodobnie w przypadku gry PHP jednak zostanie, aby załadować poziom, mimo że da się to zrobić w Javascript. Użycie PHP ogranicza się do wykrycia języka i ciasteczka z numerem poziomu.

Obecnie kod HTML zawiera zdarzenia i style. Być może lepiej przenieść logikę całkowicie do zewnętrznych plików .js.

HTML a XML
Strukturę poziomów można też zapisać w formacie .xml. Nie wiem, czy da się dołączyć skrypt JS do dokumentu XML. Chociaż edycja poziomów, przypisanie akcji obiektom, wykrywanie obiektów... staną się łatwiejsze, takie rozwiązanie może stworzyć więcej problemów. Dochodzi jeszcze interfejs gry. Co o tym myślicie?<?xml version="1.0" encoding="UTF-8" standalone="yes" ?> <?xml-stylesheet type="text/css" href="style.css" ?> <level id="1"> <room> <sth>To tylko przykładowy tag</sth> </room> </level>CSS:room { display: block; width: 700px; height: 400px; background-color: #EEEEEE; position: relative; margin: auto } sth { position: absolute; display: block; left: 15px; top: 25px; color: red }
Baza obiektów
Każdy poziom zawiera nadrzędne obiekty - POKOJE. Aktualnie pokojem jest <div class="p" id="p1">, który zawiera obraz z atrybutem USEMAP - czyli jest mapą odsyłaczy. Są miejsca na obrazie pokoju, które można kliknąć. Czy to dobry pomysł? Czy obraz powinien być dołączony jako tło w CSS? Albo w ogóle inaczej?

W każdym pokoju są osadzone obiekty typu: klucze, karty, przyciski, ekran komputera, drzwi...

Komputer komunikuje się z graczem za pomocą tekstu wyświetlanego pod widokiem pokoju. Po kliknięciu obiektu wyświetli się tekst określony w pliku językowym dla poziomu. Może nawet po najechaniu kursorem. Gdy user kliknie w puste miejsce, też powinien wyświetlić się tekst. Gdy kliknie przedmiot - być może trzeba wykonać jakąś akcję. Gdy go użyje - wykonać inną akcję. Obecnie przedmioty zazwyczaj są reprezentowane jako obraz <img>.

Załóżmy, że całą logikę należy przenieść do pliku .js. Dostęp do obiektów można uzyskać za pomocą document.getElementById, document.getElementsByClassName albo document.getElementsByTagName. Ewentualnie querySelector. Czy lepiej:
A. Definiować wszystkie obiekty i przedmioty w kodzie HTML
B. Generować dynamicznie przedmioty i obiekty w pliku .js, np. określając parametry w obiekcie {a:b, c:d, ...}obiekt = {text: 240, active: 1, onuse: function() {...}, ..., left: 150, top: 44, image: 'x.png'}
Grafika
Grafika została stworzona w programie The GIMP. Rozważam użycie skalowalnych formatów typu SVG. Najnowsze wersje przeglądarek radzą sobie dobrze z jego obsługą. Na pewno najlepiej wykorzystać grafikę 3D, ale dopiero zamierzam uczyć się jej (BTW czekam na nową wersję Blendera ze zmienionym interfejsem). Co sądzicie o SVG albo innych formatach? Można nawet bezpośrednio umieścić dokumenty .svg w .html, ale chyba lepiej osobno.

Jest jeszcze <canvas>, ale IE wciąż go nie obsługuje.

Co o tym wszystkim myślicie? Jaką macie wizję nowej platformy? Odpowiedzcie na pytania w powyższych akapitach.

Jeszcze kilka lat temu śmialiście się z pomysłu, ale wtedy jeszcze nikt nawet o AJAX-ie nie słyszał.
Użytkownik Ferrari edytował ten post 03 lipiec 2009, 22:08


Bez języka server-side zrobisz co najwyżej prostą gierkę, którą można grać powiedzmy "raz" i się nudzi. Też nie ma elementu społecznościowego, interakcji między graczami, czy bardziej rozbudowanej logiki (czym w JSowej gierce można manipulować). Można taką grę zrobić, ale to sztuka dla sztuki.

  • zanotowane.pl
  • doc.pisz.pl
  • pdf.pisz.pl
  • nvm.keep.pl

  • Sitedesign by AltusUmbrae.