Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

Diskuze: Machr na JavaScript - webová hra

JavaScript JavaScript Machr na JavaScript - webová hra

Aktivity (1)
Avatar
Honza Bittner
Šupák
Avatar
Honza Bittner:6.10.2014 21:03

V dalším Machrovi si poměříme síly v JavaScriptu.

A jaké bude téma? Navrhněte a vytvořte jednoduchou webovou hru, která poběží kompletně na straně klienta. Vhodnými jazyky jsou HTML, CSS (případně preprocesor) a JS. Ale pozor - hra nesmí být vykreslována v canvasu, nebo obdobné technologii - bude tedy pomocí HTML elementů.

Hodnotit se bude:

  • kód - 1/2
  • vzhled - 1/4
  • zábava,dojem... - 1/4

Určitě tedy udělejte menší, avšak propracovanější a zábavnější hru, než nedokončenou, nudnou hrůzu. :) Dobře vymyšlené originální hry a pravidla se cení. Pokud však nemáte nápad, nezoufejte. Můžete udělat nějakou jednoduchou hru a nějak ji vylepšit. I s ohraným pacmanem nebo tetrisem lze zaujmout.

Za machra můžete získat placku za JS nebo efekty.

Čas do deadline, protože je toho trochu víc a je to náročnější bude trochu delší, dejme si 2 týdny - tedy do 20.10.2014 v 18:00.Kompletní pravidla soutěží: http://www.itnetwork.cz/…outezi-machr

Pozn.: Odkaz na výsledný projekt posílejte zde nebo Honza Bittner do PM v běžném za-archivovaném souboru - zip, rar.

Odpovědět  +3 6.10.2014 21:03
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Odpovídá na Honza Bittner
Filip Hájek (Raven):6.10.2014 21:27

Předpokládám teda že je povolená animační knihovna VelocityJs :)

 
Nahoru Odpovědět 6.10.2014 21:27
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Filip Hájek (Raven)
Honza Bittner:6.10.2014 21:42

Ano, animační knihovny jsou povoleny.

Nahoru Odpovědět 6.10.2014 21:42
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Jurajs
Člen
Avatar
Jurajs:7.10.2014 8:53

Může být i jQuery?

 
Nahoru Odpovědět 7.10.2014 8:53
Avatar
Honza Bittner
Šupák
Avatar
Nahoru Odpovědět 7.10.2014 9:19
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Lako
Člen
Avatar
Odpovídá na Honza Bittner
Lako:7.10.2014 20:27

Proč není povolený Canvas? Resp. je nějaká výhoda při tvorbě hry, že jí dělám přes elementy místo abych jí vykresloval do canvasu?

 
Nahoru Odpovědět 7.10.2014 20:27
Avatar
Odpovídá na Lako
Michal Žůrek (misaz):7.10.2014 20:35

o tom to je, každá hra je dělaná přes canvas a to je vesměs už nudné. Proto si to vyzkoušejte udělat zajímavěji bez canvasu. V kombinace s CSS jste schpni dosáhnout skvělých animačních prvků na jednom řádku v CSS a tohoto bez canvasu jen těžko docílíš. Vyzkoušej. :)

Nahoru Odpovědět  +1 7.10.2014 20:35
Nesnáším {}, proto se jim vyhýbám.
Avatar
Lako
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
Lako:7.10.2014 20:41

Jo, tak nějak jsem to očekával, proto ta otázka, jestli mi něco neuniklo

 
Nahoru Odpovědět 7.10.2014 20:41
Avatar
Odpovídá na Michal Žůrek (misaz)
Michal Žůrek (misaz):7.10.2014 20:52

teda naopak, v canvasu toho těžko docílíš.

Nahoru Odpovědět 7.10.2014 20:52
Nesnáším {}, proto se jim vyhýbám.
Avatar
hanpari
Redaktor
Avatar
hanpari:7.10.2014 21:01

Tak zkuste toto a bude to i 3d :)

http://gamingjs.com/ice/

Víc info tady:
http://it-ebooks.info/book/3755/

Narazil jsem na to náhodou a vypadá to fajn. Omlouvám se, pokud je to stará vesta :)

 
Nahoru Odpovědět 7.10.2014 21:01
Avatar
Honza Bittner
Šupák
Avatar
Honza Bittner:7.10.2014 21:16

Pro ukázku jsem dělal na nějakého Machra dříve hru v HTML/CSS/JS ... http://easteggo.honzabittner.cz/

Kódem JS se tedy moc neinspirujte, je to docela splácané. :P

Nahoru Odpovědět  +1 7.10.2014 21:16
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
1Pupik1989
Člen
Avatar
1Pupik1989:7.10.2014 23:21

Ve 3D vám nikdo nebrání. Dí se toho docílit pomocí SVG, ale to je spíš pro pokročilé. Já machra opět vynechám. Nestihl jsem ani dopsat parser, natož render do SVG k enginu a na to hru.

Editováno 7.10.2014 23:24
 
Nahoru Odpovědět 7.10.2014 23:21
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na 1Pupik1989
Zdeněk Pavlátka:8.10.2014 8:45

Ono by to 3D šlo i CSS3 transformacemi.

Nahoru Odpovědět 8.10.2014 8:45
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Odpovídá na Zdeněk Pavlátka
Michal Žůrek (misaz):8.10.2014 15:58

to je ale zatím nehorázně pomalé.

Nahoru Odpovědět  +1 8.10.2014 15:58
Nesnáším {}, proto se jim vyhýbám.
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na Michal Žůrek (misaz)
Zdeněk Pavlátka:8.10.2014 16:15

A špatně podporované, ale s trochou šikovnosti by se z toho určitě dala vytvořit nějaké jednoduché 3D.

Nahoru Odpovědět 8.10.2014 16:15
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
1Pupik1989
Člen
Avatar
1Pupik1989:9.10.2014 6:56

CSS3 jsem ještě netestoval. V SVG a VML se krásně mapují trojúhelníky. Respektive mnohem lépe, než třeba v 2d canvasu. Je to ale spíše na nějaké RPG s perspektivním pohledem zeshora a i to bude mít u starších PC možná problém.

 
Nahoru Odpovědět 9.10.2014 6:56
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na 1Pupik1989
Honza Bittner:9.10.2014 8:11

Pro tohoto machra platí

...hra nesmí být vykreslována v canvasu, nebo obdobné technologii...

Tedy ani vykreslování v SVG by nebylo vhodné. :)

Editováno 9.10.2014 8:11
Nahoru Odpovědět 9.10.2014 8:11
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
1Pupik1989
Člen
Avatar
Odpovídá na Honza Bittner
1Pupik1989:9.10.2014 11:47

HTML se celé vykresluje. Takže machr skončil? :D

 
Nahoru Odpovědět  -1 9.10.2014 11:47
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na 1Pupik1989
Honza Bittner:9.10.2014 17:03
:D

Machr je určený pro tvorbu her v HTML bez použití Canvasu či podobné technologie. Tedy ani SVG, které se dá v podstatě nahradit za canvas... :)

Tedy takovéto technologie opravdu ne. Nejlepší tedy bude použít normální html elementy, které rozpohybujete pomocí JS, například.

Nahoru Odpovědět 9.10.2014 17:03
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
mayo505
Redaktor
Avatar
mayo505:13.10.2014 23:37

Dobre, tak pridám niečo aj ja. Nie je to nič originálne (hru 2048 asi poznáte) ale vždy lepšie ako nič (čo bol pôvodný plán :D ). Aj keď je v zadaní napísané, že hodnotíš aj vzhľad, ale s tým sa mi fakt nechcelo babrať a urobil som ho takmer rovnaký ako je v pôvodnej hre, a aj tak je to macher na javascript a nie css.

Celkovo zhrnuté: zameral som sa len na javascript a ostatné veci som riešil len okrajovo :)

https://www.dropbox.com/…A1%20hra.zip?dl=0

 
Nahoru Odpovědět 13.10.2014 23:37
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na Honza Bittner
Zdeněk Pavlátka:19.10.2014 17:35

Tak jsem dneska taky něco napsal :P
Hra je celkem jednoduchá, stačí klikat na kolečka a snažit se získat co nejvíc bodů.

Pozn. Hru jsem zkoušel jen v Chrome a IE.

https://www.dropbox.com/…me_nuz15.zip?dl=0

Nahoru Odpovědět 19.10.2014 17:35
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Ondrca
Redaktor
Avatar
Ondrca:19.10.2014 19:53

Tak se taky přidám:
OFFLINE: http://leteckaposta.cz/932329735
ONLINE: www.ondrca.eu/braintester

Je to takové známé, ale snad jsem zadání splnil :D

Nahoru Odpovědět 19.10.2014 19:53
Zase jsem o něco chytřejší
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Zdeněk Pavlátka:20.10.2014 17:04

Konec se blíží...
Rychle někdo něco napište, ať tu není tak málo výtvorů :P :D

Nahoru Odpovědět  +1 20.10.2014 17:04
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Odpovídá na Ondrca
Daniel Vítek:20.10.2014 17:36

blbne ti to :D

 
Nahoru Odpovědět  +4 20.10.2014 17:36
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na Daniel Vítek
Ondrca:20.10.2014 18:28

Jak blbne?

Nahoru Odpovědět 20.10.2014 18:28
Zase jsem o něco chytřejší
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na Ondrca
Zdeněk Pavlátka:20.10.2014 18:48

Dost často to při kliknutí vyhodnotí kliknutí na předchozí obrázek - např. nejdřív tam je žlutá ve žlutym kolečku a pak např. modrá v zelenym. a když klikneš na ten druhej, hra to bere jako správně - předtim tam byla žlutá v žlutym.

Nahoru Odpovědět 20.10.2014 18:48
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na Zdeněk Pavlátka
Ondrca:20.10.2014 19:04

Aha, to bude chyba toho, že tam mám nastavené transition

Nahoru Odpovědět  +1 20.10.2014 19:04
Zase jsem o něco chytřejší
Avatar
Honza Bittner
Šupák
Avatar
Honza Bittner:21.10.2014 16:49

Takže, Machra hodnotím takto (kód: 20, grafika :10, dojem: 10)...

  1. Zdeněk Pavlátka [18, 5, 6] - Kód je poměrně dobrý - jó, dalo by se ještě udělat více typů objektů pro kolečka etc. Zaostává však grafika i zábava, dojem... což by se dalo, poměrně lehce, vylepšit. Chybí mi to například nějaká ta motivace, proč hrát - rychlost, krátká doba, více křížení s červenými kolečky etc.
  2. mayo505 [17, 3, 5] - Zde se mi kód také líbíl - dal by se ale také zlepšit - například pohyb doleva/doprava a nahoru/dolu je v podstatě stejný a kód by se tomu dal tedy přizpůsobit. Grafika je, jak jsi psal, přejatá a tudíž se nedá hodnotit tak, jako kdyby jsi si jí vymyslel sám. Strhl jsem tedy nějaké body. U dojmu bych vytkl třeba to, že se zmáčknutí šipky stránka pohybuje. Také by bylo o hodně lepší, kdyby tu byla nějaká animace.
  3. Ondrca [8, 4, 5] - Kód je opravdu jednoduchý a i pokud bys nechtěl používat OOP tak by se dal napsat daleko lépe - využít funkce etc. Grafika je taky poměrně slabá. Docela se mi nelíbilo, jak na mě po spuštění vyskočila nějaká hláška, to by zde být rozhodně nemělo... Hover na kolečku - Proč? To akorát mate hráče. Nejhorší však je, že ti ta hra nefunguje tak jak má!!! Určitě bych u takovéto hry nedával nějakou animaci změny barvy - zde to musí být opravdu rychlé. Čas jsi zvolil poměrně krátký a určitě by bodlo nějaké grafické zobrazení času. Jen nápad: pokud bys vytvořil 2+ koleček, kde by vždy jedno bylo špatné, bylo by to o moc lepší.

I přes to bych si však dovolil placku nedat nikomu. Času bylo dost a žádná hra mě nezaujala tolik, že by si to IMHO zasloužila.

Díky za účast! :)

Nahoru Odpovědět  +3 21.10.2014 16:49
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
mayo505
Redaktor
Avatar
mayo505:21.10.2014 19:33

to s tým pohybom stránky som si neuvedomil, lebo ten popis ktorý ju zväčšuje som pridal až neskôr, moja chyba.

Chcem ešte povedať, že mne sa nepáči, že sú machrovia čím ďalej zložitejší a zaberajú viac času. Z posledných machrov napríklad stravovací systém; kvíz, dotazník; alebo aj táto hra, keď to chceš mať dokonalé zaberie to strašne veľa času a keď ešte k tomu hodnotíš aj iné veci (ako teraz design, efekty), tak to môžeš kľudne písať aj niekoľko dní.

Mne sa napríklad páčili machrovia, do ktorých som sa zapojil, čiže kalendár alebo testovacie dáta. Proste vytvorenie nejakej triedy, ktorú vieš spraviť za max. pár hodín a nemusí nutne vyhrať niekto kto pri kóde strávi týždeň a vyčačká ho so všetkým ako tomu mohlo byť napríklad teraz.

Aj preto si myslím, že pokiaľ si s kódom spokojný (čo asi si keď si dal 18 z 20), tak si Zdeněk placku zaslúžil, aj keď ťa hra s pohľadu hráča až tak nezaujala :)

Ako vždy, je to len môj názor s ktorým som sa chcel podeliť a nemusíte ho brať príliš vážne :)

 
Nahoru Odpovědět  +2 21.10.2014 19:33
Avatar
Odpovídá na mayo505
Michal Žůrek (misaz):21.10.2014 19:40

machry jsou stejně těžké nebo je na ně víc času (na tohoto bylo 2× tolik času). Spíš to neberte tak komplexně, stravovací systém je stejně těžký jako kalendář. Když Vám do zadání napíšeme co můžete, tak to neznamená, že to musíte. Kdybyste si nekomplikovali život a udělali to mnohdy třeba jen se skvělým kódem, tak rozdáváme kopu placek. Dotazník sice byl těžší, ale bylo na to taky myslím 14 dní, takže to šlo v klidu zvládnout. Poslední machr na efekty šel bez optimalizací napsat do 100 řádku kódu, což každý zručnější napíše za odpoledne. Tato hra měla sice jasná a náročná kriteria, jenže jste to něčím zkazili. Osobně bych zde placku udělil, ale každý to vidíme jinak.

Nahoru Odpovědět  +3 21.10.2014 19:40
Nesnáším {}, proto se jim vyhýbám.
Avatar
mayo505
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
mayo505:21.10.2014 20:59

ja som tým ale nechcel povedať, že na niektorého machra bolo málo času. To, že je na to 14 dní je síce fajn, ale ide skôr o ten čas, ktorý do toho investuješ, pretože nie každý chce stráviť za machrom povedzme 20+ hodín.

"Kdybyste si nekomplikovali život a udělali to mnohdy třeba jen se skvělým kódem, tak rozdáváme kopu placek"
Toto si odporuje s hobiho hodnotením. Lebo zdenka ohodnotil štýlom: kód dobrý ale celkovo to nie je dosť dobré a mal si to vylepšiť (Čo mu nezazlievam, len sa opäť vraciam k tomu, že tá hra musela byť "super", čiže bolo za nou treba stráviť veľa času). Preto som písal, že si zdeněk tú placku zaslúžil.

Čo sa týka náročnosti tých machrov s tým nesúhlasím, lebo do kalendára okrem udalostí nemáš vrámci php čo pridať. Zato taký stravovací systém: viacero jedál v jeden deň, redakčný systém pre tých čo ho zostavujú, rozhranie pre uživateľov, veď to už je celý projekt...

"moje zadání jsou dosti časově náročná a hlavně robustní"
Toto si v inom vlákne sám napísal a ešte si to aj uviedol ako dôvod prečo súťaží tak málo ľudí ;)

Editováno 21.10.2014 21:00
 
Nahoru Odpovědět 21.10.2014 20:59
Avatar
Odpovídá na mayo505
Michal Žůrek (misaz):21.10.2014 21:08

a kdo vám říkal že musí

viacero jedál v jeden deň, redakčný systém pre tých čo ho zostavujú, rozhranie pre uživateľov

stačí jedno jídlo v jeden den, redakční systém taky nemusí být, když se na to necítíš a rozhraní pro uživatelel je povězme si sami důležité všude. Kdyby ses na to vykašlal a udělla naprostý základ, tak tam bylo aspoň jedno řešení (bez frameworku, s frameworkem to j myslím někdo vyřešil). Když jsem vyhlašoval první machry byli časově náročné a robustní, ale to dopadlo, tak že to nedělal vůbec nikdo nebo byl jeden a vyhrál takřka zadarmo.

Aktuální machr byl trochu neobvyklý v tom,že se hodnotili i jiné věci než kód a tak kdo z Vás nezvládnul jednu část automaticky nevyhrál. Tento týden bylo vymyslet něco co zaujme. Ne, když vám hra posouvá stránku, tak ať je to sebezajimavější, skazí to dojem a hratelnost.

Příště se tedy pokusíme udělat ještě něco jednoduššího.

Editováno 21.10.2014 21:10
Nahoru Odpovědět  +1 21.10.2014 21:08
Nesnáším {}, proto se jim vyhýbám.
Avatar
mayo505
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
mayo505:21.10.2014 21:28

Ja som predsa nikde nenapísal, že si myslím, že tie veci boli povinnosť. Ale ide o to, že kto to všetko urobí predsa musí vyhrať nad tým kto splní základ keď kód majú na rovnakej úrovni. Podobne ako tu: keď urobím super hru a strávim za tým týždeň musím predsa vyhrať nad niekým kto urobí niečo jednoduché, inak by to nebolo fér.

Čo som tým chcel povedať je to, že hlavnú rolu pri machrovi mala hrať úroveň, myšlienka a vynaliezavosť kódu a nie čas za tým stráveným. Preto sa mi viac páčia jednoduchý machrovia kde sa zapojí čím viac ľudí.

Ne, když vám hra posouvá stránku, tak ať je to sebezajimavější, skazí to dojem a hratelnost.
Nechápem prečo to sem ťaháš veď je to úplne od témy. Ja som predsa vôbec neobhajoval svoje riešenie, písal som o niečom úplne inom

 
Nahoru Odpovědět  +1 21.10.2014 21:28
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 33 zpráv z 33.