Warsztat.GD

Społeczność => Projekty zaawansowane => Wątek zaczęty przez: MichalBe w Sierpień 01, 2010, 15:29:37

Tytuł: Stairs to heaven in 6,22KB + tutorial
Wiadomość wysłana przez: MichalBe w Sierpień 01, 2010, 15:29:37
Prosta platformówka browserowa na konkurs '10K Apart'. Wykonana w Javascripcie i renderowana na canvasie, bez zadnych zewnetrznych plików graficznych (niektóre rzeczy rysowane przy pomocy JS, aniołek enkodowany do Javascriptu przy pomocy base64). Napisana w około 8h bez pomocy żadncyh frameworków czy zewnętrznych bibliotek. Całość zajmuje 6,22KB. Sterowanie myszką.

Link http://10k.aneventapart.com/Entry/36 (http://10k.aneventapart.com/Entry/36) (można tu ocenić grę od 1 do 5 gwiazdek :))

(http://images.virtualdesign.pl/images/81727aa.png) (http://10k.aneventapart.com/Entry/36)

########
UPDATE
Zainspirowany kilkoma postami ze strony 10kA (http://10k.aneventapart.com/Entry/36) wymyśliłem malutki konkursik. Jeśli nie masz nic ciekawego do roboty to zagraj w moją grę, nagraj film (komórką, aparatem albo czymś do nagrywania desktopu), wrzuć na youtube, vimeo czy cokolwiek innego i wrzuć link w komentarze na stronie (TU (http://10k.aneventapart.com/Entry/36#comments)) do 25 sierpnia. Do wygrania dwa jedyne w swoim rodzaju, unikatowe tshirty - jeden poleci do osoby z najlepszym wynikiem a drugi do jakieś losowo wybranej. Jako że nie przewiduje żeby konkurs szokował frekwencją - każdy ma szanse:). Na zachętę mój filmik z najlepszym jaki udało mi się uchwycić wynikiem (oczywiście się nie liczy) http://vimeo.com/13843414 (http://vimeo.com/13843414)


###########
UPDATE 2
dodalem na mojego bloga porsty opis wykonania gry krok po kroku. Pisany moją łamaną angielszczyzną spod budki z piwem ale wydaje mi się ze powinien być raczej zrozumiały.
http://michalbe.blogspot.com/2010/09/simple-game-with-html5-canvas-part-1.html (http://michalbe.blogspot.com/2010/09/simple-game-with-html5-canvas-part-1.html)
Tytuł: Odp: Stairs to heaven in 6,22KB
Wiadomość wysłana przez: James w Sierpień 01, 2010, 15:40:20
Świetne 5/5 ;)
Tytuł: Odp: Stairs to heaven in 6,22KB
Wiadomość wysłana przez: Kamma w Sierpień 01, 2010, 15:46:40
Całkiem grywalne :) Mógłbyś troszkę obszerniej napisać, w jaki sposób stworzyłeś animowaną postać i wyeksportowałeś ją do kodu JavaScript. Jest to obiekt wektorowy?
Jaki jest stopień kompatybilności tej aplikacji z obecnymi, stabilnymi wersjami przeglądarek?
Tytuł: Odp: Stairs to heaven in 6,22KB
Wiadomość wysłana przez: Xirdus w Sierpień 01, 2010, 16:00:32
Bardzo toporne sterowanie, klocki czasem znikają tak, że ich nie widać i trzeba odświeżyć stronę. Ale za to, że jesteś z warsztatu masz 4/5.
Tytuł: Odp: Stairs to heaven in 6,22KB
Wiadomość wysłana przez: rhino w Sierpień 01, 2010, 16:26:22
Sterowanie jest moim zdaniem tragiczne ;/ ale gra się mimo tego całkiem przyjemnie.
Fajny, mały projekcik, 4/5.
PS.Kod w jednej linii rządzi :] domyślam się, że to w celu uczynienia go nieczytelnym dla userów. :P
BTW Chciałem kiedyś podejrzeć źródło webgadu, a tam następujący komentarz:
Cytuj
Zaglądasz do kodu? To świetnie! Każdy dobry webdeveloper to robi :)
A poniżej kodzik w jednej linii. :D
Tytuł: Odp: Stairs to heaven in 6,22KB
Wiadomość wysłana przez: Kos w Sierpień 01, 2010, 17:55:04
Popieram marudzenie na sterowanie. :) Szkoda, że JS, a nie flash, byłoby płynniej.
Tytuł: Odp: Stairs to heaven in 6,22KB
Wiadomość wysłana przez: Karol w Sierpień 01, 2010, 18:17:42
U mnie jest całkiem płynnie, ale 2px ruchu myszką = 1px ruchu postaci (nie wiem jak to inaczej opisać, wartości przybliżone) strasznie utrudnia grę.
Tytuł: Odp: Stairs to heaven in 6,22KB
Wiadomość wysłana przez: vashpan w Sierpień 01, 2010, 18:41:46
Widze jakies inspiracje pewna znana gra na iPhone/iPod touch/iPad'a ;) Nie da sie w tym JS kierowac klawiatura ? A kod w jednej linii jest bo to konkurs na gre w 10kb;) Pewnie nie zmiesciloby sie gdyby bylo jakies lepsze formatowanie.
Tytuł: Odp: Stairs to heaven in 6,22KB
Wiadomość wysłana przez: Kos w Sierpień 01, 2010, 19:31:49
Widze jakies inspiracje pewna znana gra na iPhone/iPod touch/iPad'a ;)

Bo ona to była niby oryginalna, tak? :P
Tytuł: Odp: Stairs to heaven in 6,22KB
Wiadomość wysłana przez: zxc w Sierpień 01, 2010, 19:41:59
Fajny klon Doodle Jumpa! :)

-Odległość postaci od dołu planszy powinna być większa, żeby dać jakiś margines
-Odbicie od zwykłej platformy powinno dawać siłę skoku pozwalającą na przeskoczenie dwóch pięter (a nie jednego) - później ewentualnie możesz wprowadzić platformy-materace, tłumiące skok w ten sposób.
-Postać bardzo powoli reaguje na ruch myszy. Lepsze byłoby przełożenie 1:1, ruch postaci równy ruchowi myszy.

Mimo wszystko dobra rzecz! Zwłaszcza biorąc pod uwagę ograniczenie czasowe. Zrobić pełną grę w sprincie to jest umiejętność. Kto nie umie zrobić gry szybko, ten nie umie zrobić gry. Ty umiesz. Za to szacunek :).
Tytuł: Odp: Stairs to heaven in 6,22KB
Wiadomość wysłana przez: Wladekprogramista w Sierpień 01, 2010, 19:48:44
Fajnie że Aniołek.
Jakaś odmiana.
Tytuł: Odp: Stairs to heaven in 6,22KB
Wiadomość wysłana przez: MichalBe w Sierpień 01, 2010, 21:30:24
dzięki za pozytywny feedback, zaskoczyłem się, w końcu to warsztat:).

@Kamma:
postać jest zakodowana base64, czyli tak na prawdę nie ma żadnego spadku objętości, po prostu uznałem to za ciekawy bajer a wykonanie techniczne tez oceniają:). Gra działa na FF3.6.8, Safari 5 oraz IE9 Dev bez problemu, na Chromie sa problemy z rysowaniem paletek bo zapomnialem ustawić przezroczystość.

@Xirdus:
dopiero po wysłaniu gry zorientowałem się że jak 'skusisz' i kontynuujesz to nie generuje przeszkód od nowa tylko zaczyna się w miejscu w ktorym sie skończyło, tylko z mniejszą ruchliwością platform, przez co czasem trzeba odświeżyć, niestety nie mogę juz tego poprawić, moze w jakieś wersji pozakonkursowej

@»Яђino:
kod w jednej linii ponieważ musial zmieścić sie w 10KB (stwierdziłem ze 6,22 robi większe wrazenie bo nawet przed upchnięciem zajmował coś około 9,7KB), jeśli chcesz zobaczyć jak wyglądał wcześniej to zawsze mozesz użyć np.  JS Beautifilera (http://jsbeautifier.org/).

@Kos:
flashem gardzę, i w świętej wojnie HTML5 i pochodne VS Flash i pochodne zawsze będę po tej 1szej stronie, poza tym 'aplikacja' musiała być wykonana przy pomocy html5

@vashpan & zxc:
sprawdziłem tę grę (wcześniej jej nie znałem), rzeczywiście bardzo podobne, szczerze mowiac nie wydaje mi sie zeby idea była jakaś wielce oryginalna, mój brat jest wielkim fanem Icy Towera i na nim bardziej sie wzorowalem mimo ze wyszło o wiele podobniej do doodla.

@Wladekprogramista:
ktoś mi go narysował kilka lat temu i czekał gdzieś w czarnych zakątkach dysku na czas kiedy będzie mógł ożyć i jakos tak sie złożyło że przypasował.
Tytuł: Odp: Stairs to heaven in 6,22KB
Wiadomość wysłana przez: Kos w Sierpień 01, 2010, 22:05:42
flashem gardzę, i w świętej wojnie HTML5 i pochodne VS Flash i pochodne zawsze będę po tej 1szej stronie

Problem jest taki, że Flash, jakkolwiek by tego nie stawiać, ma większe możliwości od HTML5 takiego jak jest dzisiaj ORAZ jest dostępny na większej ilości maszyn ORAZ działa wydajniej. Opinia opinią, a fakty faktami - jeżeli Twoja opinia mimo tychże jest po stronie HTML5, to OK, nie będę Cię przekonywać, ale nie udaję nawet, że rozumiem Twój punkt widzenia. :)
Tytuł: Odp: Stairs to heaven in 6,22KB
Wiadomość wysłana przez: MichalBe w Sierpień 01, 2010, 22:06:18
flash na większej ilości maszyn niż javascript?
Tytuł: Odp: Stairs to heaven in 6,22KB
Wiadomość wysłana przez: Zielony w Sierpień 01, 2010, 23:18:18
flash na większej ilości maszyn niż javascript?
Nie zamierzam wspierać któregokolwiek z was w dyskusji. Chciałbym tylko poinformować, że Flash mi działa, a gra z aniołkiem - nie (z powodu braku obsługi canvasa w mojej przeglądarce).
Tytuł: Odp: Stairs to heaven in 6,22KB
Wiadomość wysłana przez: MichalBe w Sierpień 01, 2010, 23:38:21
Nie zamierzam wspierać któregokolwiek z was w dyskusji. Chciałbym tylko poinformować, że Flash mi działa, a gra z aniołkiem - nie (z powodu braku obsługi canvasa w mojej przeglądarce).

a coto za przeglądarka?
Tytuł: Odp: Stairs to heaven in 6,22KB
Wiadomość wysłana przez: Zielony w Sierpień 01, 2010, 23:48:33
IE8
Tytuł: Odp: Stairs to heaven in 6,22KB
Wiadomość wysłana przez: vashpan w Sierpień 02, 2010, 00:05:49
Widze jakies inspiracje pewna znana gra na iPhone/iPod touch/iPad'a ;)

Bo ona to była niby oryginalna, tak? :P

A to ciekawy temat ;p Bo Doodle Jump jest przykladem tego ze nie nalezy wypuszczac na swiatlo dzienne nieskonczonych, ale i bardzo grywalnych "prototypow" ( Papi Jump, na ktorym sie Doodle wzorowal... ) Doodle Jump to po prostu doskonale wykonana, swietnie rozwinieta implementacja tego prototypu :) I to dlatego oni ( a dokladnie to jest ich 2, bracia z Chorwacji ) zarobili 4 mln$ a nie tworca Papi Jump ;)

Oprocz tego przykladu to takze przyklady takiej gry jak Zuma, ktora kopiowala ( dosc wiernie ) wczesniejszy pomysl gry o ktorej juz nikt nie pamieta... Bodaj podobnie bylo tez z Bejeweled tego samego studia... Zas te dwie gry sa teraz wykladnikiem calej masy "ich" klonow ;)

Life is brutal ;)

@MichalBe
Jezeli nie znales Doodle(Papi) Jump wczesniej to jestes swietnym przykladem konwergencji (http://pl.wikipedia.org/wiki/Konwergencja_(biologia)) w swiecie oprogramowania ;)

A propos Chrome - a ja myslalem ze przezroczyste platformy sa specjalnie ;)
Tytuł: Odp: Stairs to heaven in 6,22KB
Wiadomość wysłana przez: MichalBe w Sierpień 02, 2010, 00:10:25
hah, niezle, ile trudnych słów z dziedzin zupełnie niepokrewnych można sie nauczyć na forum gamedevu. Rodzina też mi już nie wierzy od kiedy pokazałem im doodla - iPhona nie mam i nie śledze jego rynku, pierwowzorem dla mnie był poważnie Icy Tower.
Tytuł: Odp: Stairs to heaven in 6,22KB
Wiadomość wysłana przez: lukasyno w Sierpień 02, 2010, 10:19:50
flashem gardzę, i w świętej wojnie HTML5 i pochodne VS Flash i pochodne zawsze będę po tej 1szej stronie, poza tym 'aplikacja' musiała być wykonana przy pomocy html5

Byc może masz racje ale fakt jest taki ze jak by ta gra była we flashu to nawet jednej gwiazdki byś nie otrzymał bo nie dość ze to brzydkie(mógłbyś chociaż tego aniołka wyciąć bardziej dokładnie) to i jakoś beznadziejnie działa (nie wiem czy ktoś spędzi na tej grze więcej niż 40 sekund)...

...ale na pewno to wina tego narzuconego limitu kodu ;)
Tytuł: Odp: Stairs to heaven in 6,22KB
Wiadomość wysłana przez: MadBonsai w Sierpień 02, 2010, 10:49:03
flash na większej ilości maszyn niż javascript?
Nie zamierzam wspierać któregokolwiek z was w dyskusji. Chciałbym tylko poinformować, że Flash mi działa, a gra z aniołkiem - nie (z powodu braku obsługi canvasa w mojej przeglądarce).
Za to we flashówkę nie zagrasz pod iOS. Można by się tak przekomarzać przy każdej kolejnej grze. Tylko na diabła?

Nie bardzo czuję skakanie postaci. Można by dłuuuugo pomarudzić, co ma być dodane do gry. Ale czy gra w ogóle będzie rozwijana ponad 10K?  ::)
Tytuł: Odp: Stairs to heaven in 6,22KB
Wiadomość wysłana przez: lukasyno w Sierpień 02, 2010, 10:57:33
Panie MadBonsai
Stefan wie ze takie "gry" w html5 nie zagrażają tym z appstore ale jeśli trochę sytuacja się zmienię to Stefan znowu coś wymyśli :)
Przecież kiedyś apple i Adobe to dwaj bratanki :)
Tytuł: Odp: Stairs to heaven in 6,22KB
Wiadomość wysłana przez: MichalBe w Sierpień 02, 2010, 13:38:02
Nie bardzo czuję skakanie postaci. Można by dłuuuugo pomarudzić, co ma być dodane do gry. Ale czy gra w ogóle będzie rozwijana ponad 10K?  ::)

Nie będzie. Usiadłem, napisałem i wysłałem i na tym koniec, sam też znalazlem kilka rzeczy które dziś zrobiłbym inaczej.
Tytuł: Odp: Stairs to heaven in 6,22KB
Wiadomość wysłana przez: Dab w Sierpień 02, 2010, 13:40:30
Za to we flashówkę nie zagrasz pod iOS. Można by się tak przekomarzać przy każdej kolejnej grze. Tylko na diabła?

No i? Bez myszki i klawiatury w gry "html5" też na iOS nie zagrasz. Sprawdziłem przed chwilą grę OP i bida, nie da się sterować postacią.
Tytuł: Odp: Stairs to heaven in 6,22KB
Wiadomość wysłana przez: MadBonsai w Sierpień 02, 2010, 13:59:55
Za to we flashówkę nie zagrasz pod iOS. Można by się tak przekomarzać przy każdej kolejnej grze. Tylko na diabła?

No i? Bez myszki i klawiatury w gry "html5" też na iOS nie zagrasz. Sprawdziłem przed chwilą grę OP i bida, nie da się sterować postacią.
iOS w jakikolwiek sposób blokuje sterowanie dotykiem w przeglądarce? Nie miałem problemów w zagranie na HP TouchSmart.

Whatever. MichalBe przedstawił gotową grę w pewnej technologii. IMHO bezsensowne jest gadanie "w innej technologii byłoby lepiej" czy "czy na mojej przestarzałej przeglądarce to nie działa".
Tytuł: Odp: Stairs to heaven in 6,22KB
Wiadomość wysłana przez: Dab w Sierpień 02, 2010, 14:06:33
Nie blokuje, tylko żeby gra JS działała na telefonie trzeba ją napisać z myślą o graniu na telefonie.
Tytuł: Odp: Stairs to heaven in 6,22KB
Wiadomość wysłana przez: vashpan w Sierpień 02, 2010, 14:21:27
A z ciekawosci sprawdzilem, na iPodzie 2gen gra dziala z predkoscia jakis 2fps ;) Kierowac tez nie bardzo sie da dotykiem... iOS 4.0...
Tytuł: Odp: Stairs to heaven in 6,22KB
Wiadomość wysłana przez: MichalBe w Sierpień 04, 2010, 00:00:40
no ale to wlasnie o tym napisał już DAB - gra nie jest pisana pod działanie na telefonie wiec nie działa na nim:).
Tytuł: Odp: Stairs to heaven in 6,22KB - konkurs, do wygrania dwa unikatowe Tshirty z gry!
Wiadomość wysłana przez: MichalBe w Sierpień 04, 2010, 06:07:33
Zainspirowany kilkoma postami ze strony 10kA (http://10k.aneventapart.com/Entry/36) wymyśliłem malutki konkursik. Jeśli nie masz nic ciekawego do roboty to zagraj w moją grę, nagraj film (komórką, aparatem albo czymś do nagrywania desktopu), wrzuć na youtube, vimeo czy cokolwiek innego i wrzuć link w komentarze na stronie (TU (http://10k.aneventapart.com/Entry/36#comments)) do 25 sierpnia. Do wygrania dwa jedyne w swoim rodzaju, unikatowe tshirty - jeden poleci do osoby z najlepszym wynikiem a drugi do jakieś losowo wylosowanej. Jako że nie przewiduje żeby konkurs szokował frekwencją - każdy ma szanse:). Na zachętę mój filmik z najlepszym jaki udało mi się uchwycić wynikiem (oczywiście nie liczy się w konkursie) http://vimeo.com/13843414 (http://vimeo.com/13843414)
Tytuł: Odp: Stairs to heaven in 6,22KB - konkurs, do wygrania dwa unikatowe Tshirty z gry!
Wiadomość wysłana przez: Struś w Sierpień 04, 2010, 11:44:33
Na vimeo nie można wrzucać filmików z gameplayem, więc jak ktoś o tym myśli to niech nie próbuje, bo w końcu usuną.
Tytuł: Odp: Stairs to heaven in 6,22KB - konkurs, do wygrania dwa unikatowe Tshirty z gry!
Wiadomość wysłana przez: Krzysiek K. w Sierpień 04, 2010, 12:04:17
Stefan wie ze takie "gry" w html5 nie zagrażają tym z appstore ale jeśli trochę sytuacja się zmienię to Stefan znowu coś wymyśli :)
Zablokuje JavaScript w swoich przeglądarkach, ot co (w mysl zasady, że na ich urządzeniach nie jest dozwolony żaden interpretowany kod).
Tytuł: Odp: Stairs to heaven in 6,22KB
Wiadomość wysłana przez: vashpan w Sierpień 04, 2010, 12:09:36
no ale to wlasnie o tym napisał już DAB - gra nie jest pisana pod działanie na telefonie wiec nie działa na nim:).

To byla tylko ciekawostka :)

Tytuł: Odp: Stairs to heaven in 6,22KB - konkurs, do wygrania dwa unikatowe Tshirty z gry!
Wiadomość wysłana przez: MichalBe w Sierpień 04, 2010, 12:53:03
Na vimeo nie można wrzucać filmików z gameplayem, więc jak ktoś o tym myśli to niech nie próbuje, bo w końcu usuną.

dziwne, nic innego oprocz filmow z gameplayu nie mam na moim vimeo a niektore wisza juz troszke.
Tytuł: Odp: Stairs to heaven in 6,22KB - konkurs, do wygrania dwa unikatowe Tshirty z gry!
Wiadomość wysłana przez: Karol w Sierpień 04, 2010, 13:04:38
Na vimeo nie można wrzucać filmików z gameplayem, więc jak ktoś o tym myśli to niech nie próbuje, bo w końcu usuną.

dziwne, nic innego oprocz filmow z gameplayu nie mam na moim vimeo a niektore wisza juz troszke.
Może są za mało popularne i nikt z obsługi nie zwrócił na nie uwagi?

http://vimeo.com/blog:140
Tytuł: Odp: Stairs to heaven in 6,22KB - konkurs, do wygrania dwa unikatowe Tshirty z gry!
Wiadomość wysłana przez: MichalBe w Sierpień 04, 2010, 13:06:45
co fakt to fakt. dzieki za info, nie wiedzilaem o tym.
Tytuł: Odp: Stairs to heaven in 6,22KB - konkurs, do wygrania dwa unikatowe Tshirty z gry!
Wiadomość wysłana przez: Struś w Sierpień 04, 2010, 13:09:02
Mój wisiał kiedyś pół dnia, ale był dość popularny, więc pewnie dlatego się nim zainteresowali. Twoje mają po ~20 odtworzeń, więc może rzeczywiście jeszcze ich nie zauważyli.
Tytuł: Odp: Stairs to heaven in 6,22KB - konkurs, do wygrania dwa unikatowe Tshirty z gry!
Wiadomość wysłana przez: MichalBe w Sierpień 04, 2010, 13:12:54
no dobrze, wiec prosta sprawa, hostowac gdzies gdzie można:)
Tytuł: Odp: Stairs to heaven in 6,22KB - konkurs, do wygrania dwa unikatowe Tshirty z gry!
Wiadomość wysłana przez: rhino w Sierpień 04, 2010, 18:41:03
[...] a drugi do jakiejś losowo wylosowanej. [...]
To coś jak "zabić na śmierć"? :)
Tytuł: Odp: Stairs to heaven in 6,22KB - konkurs, do wygrania dwa unikatowe Tshirty z gry!
Wiadomość wysłana przez: Kos w Sierpień 04, 2010, 19:01:30
[...] a drugi do jakiejś losowo wylosowanej. [...]
To coś jak "zabić na śmierć"? :)

Kod: (cpp) [Zaznacz]
int losuj(int max) {
   return rand() % max + 1;
}

int losowoWylosowana = losuj(rand() % 10);
Tytuł: Odp: Stairs to heaven in 6,22KB - konkurs, do wygrania dwa unikatowe Tshirty z gry!
Wiadomość wysłana przez: Xirdus w Sierpień 04, 2010, 19:38:58
Kod: (cpp) [Zaznacz]
int losuj(int max) {
   return rand() % max + 1;
}

int losowoWylosowana = losuj(rand() % 10);
+1
Tytuł: Odp: Stairs to heaven in 6,22KB - konkurs, do wygrania dwa unikatowe Tshirty z gry!
Wiadomość wysłana przez: MichalBe w Sierpień 04, 2010, 19:48:20
haha, macie mnie. Sam sie takich rzeczy czepiam oporowo wiec nalezało mi sie. Macie dodatkowe punkty w wypadku udzialu w konkursie:)
Tytuł: Odp: Stairs to heaven in 6,22KB + tutorial
Wiadomość wysłana przez: MichalBe w Wrzesień 30, 2010, 13:46:12
Dodalem na mojego bloga porsty opis wykonania gry krok po kroku. Pisany moją łamaną angielszczyzną spod budki z piwem ale wydaje mi się ze powinien być raczej zrozumiały.
http://michalbe.blogspot.com/2010/09/simple-game-with-html5-canvas-part-1.html