Chyba jeszcze nie prezentowałem tutaj tego projektu, a przynajmniej Google nic nie znajduje.

Tytuł: Przygoda w Biurowej Dzielnicy (TODA)
Opis: gra logiczno-przygodowa napisana całkowicie w HTML i JavaScript
Licencja: open source (można grać, pobierać, modyfikować i rozpowszechniać)
Adres: http://dhost.info/compmaster/toda
Lustro: http://netoquiz.prv.pl/gra/pl.html

Większość takich gier powstaje we Flashu - technologii z dużymi wymaganiami sprzętowymi, która niedługo może odejść do lamusa. Przyszłość należy do HTML 5, ale dużo wody upłynie w Bałtyku, zanim nowe techniki staną się powszechne.

Chcę pokazać, że gry z tego gatunku (popularnie zwane escape) łatwo tworzy się z wykorzystaniem języków: JavaScript do sterowania całą aplikacją i interakcji, HTML do opisu struktury obiektów oraz CSS do opisu ich wyglądu i rozmieszczenia.

Głównym plikiem logicznym jest toda.js - wspólne funkcje, obiekty, procedura ładowania gry
Kod sterujący obiektami w grze jest w lv1.js - obiekty mają także swoje metody i własności
Pliki języków są w pozostałych plikach .js

Mam nadzieję, że komentarze wszystko wyjaśniają. Wystarczy przyjrzeć się wszystkim plikom

Nie wspieram IE 6. Kto używa tej przeglądarki, zostanie przekierowany do sympatycznej europejskiej strony.

Udogodnieniem jest klawiatura. Za pomocą strzałek poruszasz się po pokojach oraz wpisujesz tekst.




Gra powinna załadować się w każdej współczesnej przeglądarce, jeżeli nie będzie problemów z serwerem. Zachęcam do wymiany uwag i sugestii. Im bardziej szczegółowa ocena, tym większą ma dla mnie wartość. Czy warto tworzyć gry tego gatunku w technologiach internetowych? Kod skryptu jest publicznie dostępny - czytelna wersja do pobrania jako .zip.

Dokonajcie srogiej oceny projektu

PS. W Operze 10.10 mogą pojawić się drobne wady interfejsu z winy przeglądarki.

Świetna robota! Podoba mi się gra jednak reklamujesz ją jako HTML5 a to nic z HTML5 nie ma wspólnego. To co robisz to czysty xhtml + troche javascriptu.

Na moim blogu w wolnej chwili opisuję pisanie gry w HTML5 w oparciu o znacznik <canvas>.

Pozdrawiam

Świetne! Trzeba momentami pomyśleć! Przeszedłem 2 razy zaglądając w kod. (bezpieczniki DC - bo nie wiedziałem czemu calc nie działa i patrzyłem jak się te liczby układają - to juz tak bardziej rekreacyjnie)

@Ship:

"Chcę pokazać, że gry z tego gatunku (popularnie zwane escape) łatwo tworzy się z wykorzystaniem języków: JavaScript do sterowania całą aplikacją i interakcji, HTML do opisu struktury obiektów oraz CSS do opisu ich wyglądu i rozmieszczenia."

On wyżej napisał jedynie, że:

"Przyszłość należy do HTML 5, ale dużo wody upłynie w Bałtyku, zanim nowe techniki staną się powszechne.".

Nic nie ma o samym HTML5 jako technologii w której utworzył grę

Nowa wersja

1. Ulepszony silnik gry, w tym obsługa zdarzeń klawiatury.
2. Nowy interfejs odtwarzacza + gra słowna.
3. Komputer ma system operacyjny z bardzo ograniczoną powłoką tekstową.
3. Gra piętnastka - po wielu zmaganiach powinna tworzyć rozwiązywalne układy.
4. Ekran końcowy - kto ma obsługę transition z CSS3, zobaczy animację.
5. Efekty CSS 3 bez prefiksów.
6. Gra powinna ruszyć w IE 6, ale doznania będą gorsze.

Na pewno wiele osób będzie narzekać na brak skalowania. Ekrany są coraz bardziej panoramiczne, a gra zmieści się w całości nawet przy 640x480. Najlepsze wyjście to przepisać na SVG. Obecnie wszystkie przeglądarki obsługują format.

Zalecana przeglądarka: Opera 12.15

Adres: http://dhost.info/compmaster/toda

Oceniajcie i piszcie swoje uwagi.

Bardzo fajne, i fajnie że zrobiłeś to w gołym JSie

Co do uwag to:
- naprawdę nie mam pojęcia jak te bezpieczniki ustawić Chyba nie ma żadnej podpowiedzi w grze. Generalnie jest to dla mnie punkt wyjścia z gry bo kombinuje od 10 min i nic nowego nie umiem znaleźć.
- Kod można by lepiej zdecydowanie lepiej zorganizować:

a ) Definiowanie elementów DOMowych z zmiennych tak aby ich nie pobierać za każdym razem
b ) Lepsze rozłożenie na klasy i w tych klasach definiowanie zdarzeń do elementów DOMowych
c ) Nie definiowanie zdarzeń w HTMLu

Generalnie jak masz ochotę to zobacz sobie w jaki sposób ja staram się pisać JSa http://clearmind.pl/luq/qul/

Jest podpowiedź pod klawiaturą w postaci znaków UTF-8, ale ulegnie zmianie. Kto ma pomysł? Może jakiś schemat elektroniczny? Co do kodu:

a: najnowsze silniki JS mają pamięć podręczną ID elementów
b: spróbuję uprościć kod i lepiej go poukładać
c: w przypadku takiej gry to nie ma znaczenia, ale poprzenoszę, co się da

fajne, ale nie zachęcające. Tzn. mogę docenić jako programista, że coś takiego zrobiłeś (tzn. chodzi o sam fakt samodzielnego zrobienia czegoś, bo w kod jeszcze nie zaglądałem) - ale nie przekonuje mnie to jako gracza. Grafika jest archaiczna, nie ma animacji. Pierwsza zagadka jest za trudna (nie umiem wyjść z tego początkowego pomieszczenia). Co ciekawe, kliknąłem w którąś z poprzednich wersji i mogłem przejść do pokoju z komputerem. Poza tym gra się nienaturalnie długo ładuje jak na taką prostą grę (powinna się ładować w sekundę, nie wiem co Ty tam ładujesz przez tyle czasu, skoro nawet grafiki tam nie ma specjalnie).

dobra, zaglądam w kod.

Jeśli chodzi o HTML:

oprócz tego, że to nie eleganckie, problem jest też taki, że tym sposobem tworzysz kilkadziesiąt osobnych handlerów (co nawet przepisane do JS mogłoby być problemem). Poczytaj lepiej o delegacji zdarzeń i używaj tam gdzie możesz

A tak w ogóle to myślałem, że każdy obiekt (drzwi, podłoga, sufit, guziki itp). to osobny obrazek, a to zrobiłeś na jednym png. Tzn. w sumie dobrze, że zrobiłeś na jednym png - tylko, że wtedy już nie potrzebne Ci divy do niczego. Ja bym to przepisał, żeby zamiast tych obiektów był tylko jeden div "plansza", i zapisywał gdzies w zmiennej JS listę współrzędnych obiektów.


mimo wszystko caszowanie zmiennych jest i tak dobrym pomysłem, bo wzmacnia czytelność kodu. Poza tym tak czy siak każde odwołanie do domu kosztuje. Nawet jak masz już element, to i tak, jak piszesz element.style, to musi odnaleźć właściwość style (więc kolejny narzut na odczytanie właściwości style); A jak chcesz nadpisać backgroundImage itp. to kolejny narzut.


Więc - przy każdym odwołaniu się do DOM zwykle ileś jest możliwości do optymalizacji i ileś miejsc, gdzie może się korkować.

Gra zaktualizowana. Kilka małych zmian oraz poprawki pod IE 6 i Chrome.

Teraz jest lepsza podpowiedź.Grafika już wiekowa, natomiast są przejścia CSS 3. Na siłę można dodać efekty specjalne, animacje przedmiotów, pokemony, ale w technice DHTML to średni pomysł, a grywalność podobna. Jeśli znajdę lepszy pomysł, będzie trudniejsza, bo obecnie 1 kliknięcie i mamy klucz. 650 KB grafiki w pełnej jakości. Zobaczę, co da się zoptymalizować. Można złączyć obiekty w 1 plik. Więcej zabawy w HTML i CSS, a mniej żądań do serwera.Po to jest DOM i obsługa zdarzeń, aby nie pisać wszystkiego od podstaw jak w przypadku <canvas>.Czy ktoś może to potwierdzić? Nie mam McAfee, ale jak pozbyć się ostrzeżenia?

Ta gra jest zwyczajnie frustrująca, bo w pierwszym pokoju nie da się nic zrobić. Żadnej podpowiedzi, nic. Nie mam zamiaru klikać tych kolorowych kółek w każdej możliwej kombinacji, więc zwyczajnie zamykam gierkę.

zajrzałem do źródła strony i wykminiłem gdzie jest klucz: w powietrzu
nie widać tam niczego, po prostu jak się kliknie w powietrzu nad półką to wyskakuje klucz. Czyli niedopracowanie. Powinno chociaż coś wystawać z tej półki...



z IE6 dzisiaj nikt nie korzysta i nawet nie powinno się uwzględniać dzisiaj tej przeglądarki, chyba, że na wyraźne polecenie klienta/pracodawcy.



lol. Żebyś wiedział, co teraz można zrobić w DHTMLu (btw. teraz rzadko widzę, żeby ktoś używał tej nazwy prędzej mówi się o HTML5).

Nie wiem czy opłaca się rozwijać tę grę i dodawać na siłę efekty specjalne i animacje przedmiotów, czy lepiej po prostu zostawić jak jest - ale nie wiń technologii.



no ale delegację zdarzeń mógłbyś zrobić. Choć przy tak niewielkiej grze to pewnie i tak bez różnicy i w sumie lepiej nie polepszać już na siłę (bo w końcu działa).

@b4rt3kk: To standard w takich grach. Z tej perspektywy klucza na półce nie widać. Po najechaniu myszką kursor zmienia się w łapkę. Można to rozwiązać inaczej. Ktoś ma pomysł?

@PrinceOfPersia: IE 6 wciąż jest w użyciu. Nieświadomy gracz nie zaktualizuje przeglądarki, tylko rzuci kilka epitetów i pójdzie dalej. Jak zajrzysz do TODA.js to zobaczysz mechanizm delegacji zdarzeń. W opisanych przypadkach wygodniej było dodać atrybut onmousedown. Oczywiście można nadać id, położenie i rozmiar przenieść do arkusza CSS, a w lv1.js zdefiniować dodatkowe obiekty i przypisać im zdarzenia (patrz: obiekt things). Na pewno można to napisać lepiej.

Najlepsze, że Site Advisor zakwalifikował całą domenę dhost.info jako szkodliwą. Drugi hosting - to samo.

1. pamiętam że w przygodówkach było to często rozwiązywane np. w ten sposób, że jak kliknąłeś np. na śmietnik, to postać nurkowała w śmietniku, wyciągała jakiś stary kapeć i wyrzucała go. Za drugim razem nurkowała, wyciągała peta od papierosa, też wyrzucała. A za 3 razem był klucz.

2. Albo np. mogłyby być podpowiedzi typu "hmm, po tej stronie półki klucza nie ma", jak klikniesz po prawej stronie półki, to by naprowadzało na to, żeby szukać po lewej.

3. Albo mogłoby coś lekko wystawać, kilka pikselów ponad półkę, coś żółtego.


Przez kogo? Na myśl przychodzą mi tylko biblioteki publiczne, chociaż i one się modernizują.