Diskuze: Machr na JavaScript - Sněžení

JavaScript JavaScript Machr na JavaScript - Sněžení

Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

Zasoutěžme si o novou placku "Machr na JavaScript" a samolepky. Zadání je klasické zimní - naprogramujte skript, který po vložení na web zobrazí padající sníh. Šikovnější se mohou pokusit i o hromadění sněhu na dně okna.

Čas si dejme jako vždy do neděle 15.12. do 18:00, podrobnější pravidla soutěží naleznete zde: http://www.itnetwork.cz/…outezi-machr

Editováno 9.12.2013 14:01
Odpovědět 9.12.2013 12:25
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Snoswem
Člen
Avatar
Snoswem:

Mám to, kam to mám poslat? :)

 
Nahoru Odpovědět 9.12.2013 13:59
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Snoswem
David Čápka:

Koukám, že jsem špatně zkopíroval odkaz na pravidla, teď je v pořádku, tak si je můžeš přečíst.

Nahoru Odpovědět 9.12.2013 14:02
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Petr Nymsa
Redaktor
Avatar
Odpovídá na David Čápka
Petr Nymsa:

Má to být čistě JavaScript nebo se mohou využívat i obrázky ?

Nahoru Odpovědět 9.12.2013 15:08
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
Benjibs
Člen
Avatar
Nahoru Odpovědět 9.12.2013 15:12
1 + 1 = 2
Avatar
Petr Nymsa
Redaktor
Avatar
Nahoru Odpovědět 9.12.2013 15:19
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
Petr Nymsa
Redaktor
Avatar
Petr Nymsa:

Zde rychlo splácaná verze za použití JS a obrázků. Obrázkům v HTML nastavíte data atribut snow, js je automaticky schová a nechává je padat dolů.

http://www.zirko.g6.cz/…i/index.html

Nahoru Odpovědět 9.12.2013 15:26
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
coells
Redaktor
Avatar
Odpovídá na Petr Nymsa
coells:

Tak tahle animace mi připomněla asteroidy z commodore 64, co jsem hrál jako malý. Mohl bys dolů dát panáčka, který musí uhýbat? :-D Ovládání obvykle bylo O-doleva, P-doprava.

 
Nahoru Odpovědět  +1 9.12.2013 15:31
Avatar
Petr Nymsa
Redaktor
Avatar
Petr Nymsa:

Jak říkám je to na rychlo splácaný ve škole :D hmm můžu to zkusit, jen zjistit jak se zachytává vstup z klávesnice.

Nahoru Odpovědět  +1 9.12.2013 15:32
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
Odpovídá na David Čápka
Neaktivní uživatel:

Vim ze je to JavaScript ale dalo by se uznat i Flash?

Nahoru Odpovědět 9.12.2013 17:42
Neaktivní uživatelský účet
Avatar
Odpovídá na Neaktivní uživatel
Michal Žůrek (misaz):

tak teoreticky proč by se nemohl uznat, ale určitě to nebude za placku na JS.

Nahoru Odpovědět 9.12.2013 17:42
Nesnáším {}, proto se jim vyhýbám.
Avatar
Snoswem
Člen
Avatar
Odpovídá na Neaktivní uživatel
Snoswem:

Když to víš, proč se tedy ptáš? o_O
Javascript a flash je něco jiného ne?

 
Nahoru Odpovědět 9.12.2013 17:42
Avatar
Odpovídá na Michal Žůrek (misaz)
Neaktivní uživatel:

tak to udelam a uvidim jak to dopadne

Snoswem

JS neumim a pokusem nic neztratim, ale asi si to i tak udelam i kdyz to nebude za placku :)

Nahoru Odpovědět 9.12.2013 17:51
Neaktivní uživatelský účet
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na Neaktivní uživatel
Ondrca:

Flash ti asi jen tak nebude běhat na backgroundu stránky, ne?

Nahoru Odpovědět 9.12.2013 18:37
Zase jsem o něco chytřejší
Avatar
Odpovídá na Ondrca
Michal Žůrek (misaz):

a proč ne? <object> nebo cokoliv jiného pro flash lze pokud vím dobře pozicovat úplně stejně jako třeba div.

Nahoru Odpovědět  +3 9.12.2013 18:39
Nesnáším {}, proto se jim vyhýbám.
Avatar
Michal Žůrek (misaz):

Ahoj,
tak vám zde přidávám mé mrazivě zasněžené řešení. Script je WebBlbMastrům vzdorný, implementace je velmi snadná, těsně za začáte elementu body vložíte

<script src="http://misaz.moxo.cz/webSnow.js"></script>

Na pozadí (pokud není bílé) se objeví padající vločky. Pokud chcete jinou velikost nebo interval, tak si script stáhněte: http://misaz.moxo.cz/…web-snow.zip a upravte vlastnost:

• snezeni - určuje jak moc vám na stránce bude chumelit
• velikostVlocky - určuje jak velká bude vločka. 7 je tak akorát, 5 stačí, ale aby to viniklo tak musíte nastavit doslova vánici a shodou okolností se může stát že díky této sněhově mrazivé stránce zamrzne webový prohlížeč.

Přeji krásné a zasněžené webové stránky

Editováno 13.12.2013 15:39
Nahoru Odpovědět  +2 13.12.2013 15:36
Nesnáším {}, proto se jim vyhýbám.
Avatar
Odpovídá na Michal Žůrek (misaz)
Michal Žůrek (misaz):

Script jsem implementoval na mou webovou stránku.

Nahoru Odpovědět 13.12.2013 21:02
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:

Prohlížeč na Androidech asi není mrazuvzdorný. :D

Nahoru Odpovědět  -1 13.12.2013 21:31
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Kit
Redaktor
Avatar
Odpovídá na Zdeněk Pavlátka
Kit:

Jenom doufám, že letos potkám co nejméně sněžících webovek. Nesnáším je.

Nahoru Odpovědět  ±0 13.12.2013 21:47
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Nahoru Odpovědět  +1 13.12.2013 21:56
Nesnáším {}, proto se jim vyhýbám.
Avatar
Kit
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Kit:

Hezky to nevypadá nikde. Vždyť je to děsný kýč.

Nahoru Odpovědět  ±0 13.12.2013 22:04
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na Kit
Zdeněk Pavlátka:

Je pravda, že to občas dost ruší, ale mě osobně se to líbí.

Nahoru Odpovědět  ±0 13.12.2013 22:07
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Filip Pýrek
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Filip Pýrek:

Velice se mi to líbí, mohl bych to použít ve svých stránkách? :)

Nahoru Odpovědět 13.12.2013 23:12
„The best way to predict the future is to invent it.“ — Alan Kay
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Nahoru Odpovědět 14.12.2013 7:49
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Odpovídá na Filip Pýrek
Michal Žůrek (misaz):

Určitě, ale počkej na deadline, aby se neřeklo.

Nahoru Odpovědět 14.12.2013 8:55
Nesnáším {}, proto se jim vyhýbám.
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na David Čápka
Zdeněk Pavlátka:

Konečná verze mého výtvoru:
https://dl.dropboxusercontent.com/…_snow_v2.zip
Efekt se nastavuje přímo v html => počet vloček na stránce, obrázek vločky
Obrázky se dají nastavit max 3 -> z nich se náhodně vybírá, pokud není žádný nastaven, použije to defaultní obrázek.
Pohyb sněhu jsem řešil stejně, jako u soutěže machr na efekty - matematický screensaver

Nahoru Odpovědět 14.12.2013 9:19
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Radim Sückr
Redaktor
Avatar
Radim Sückr:

Jen ze zvědavosti jsem přepsal a mírně (opravdu malinko) upravil Misazovo řešení do Dartu. Posledně totiž na devbooku na fóru někdo psal, že Dart je nedodělek a nemá šanci. Tak tady je aplikace, která funguje ve všech moderních browserech a je právě v Dartu. :) https://github.com/…owing-canvas

Neberte to ani jako mou účast, spíš ukázku. :)

 
Nahoru Odpovědět  +1 14.12.2013 13:18
Avatar
David Dostal
Redaktor
Avatar
Odpovídá na Zdeněk Pavlátka
David Dostal:

Mě to na androidu sněží hezky plynule dokonce i při vyšším počtu vloček. (SE Xperia Mini Pro, Opera Mobile)

 
Nahoru Odpovědět 14.12.2013 15:14
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na David Dostal
Zdeněk Pavlátka:

Mam tablet s původnim prohlížečem.

Nahoru Odpovědět 14.12.2013 15:18
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
David Dostal
Redaktor
Avatar
Odpovídá na Zdeněk Pavlátka
David Dostal:

Aha. Koukám, že defaultní prohlížeč mi to také nezobrazí.

 
Nahoru Odpovědět 14.12.2013 16:55
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na David Dostal
Zdeněk Pavlátka:

Mě to zobrazí, ale skoro se to nehýbe.

Nahoru Odpovědět 14.12.2013 17:34
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Petr G
Redaktor
Avatar
Petr G:

Ahoj, tak přidávám svůj výtvor :)
https://db.tt/f1OcUakN
DEMO: http://girtas.aspone.cz/…w/index.html

 
Nahoru Odpovědět 14.12.2013 18:50
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na Petr G
Zdeněk Pavlátka:

S Vánocema přicházíš trochu pozdě. :D

Nahoru Odpovědět 14.12.2013 18:53
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Petr G
Redaktor
Avatar
 
Nahoru Odpovědět  +1 14.12.2013 18:58
Avatar
Odpovídá na Radim Sückr
Michal Žůrek (misaz):

taky jsi mohl počkat na deadline.

Nahoru Odpovědět  +1 15.12.2013 18:19
Nesnáším {}, proto se jim vyhýbám.
Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

1. nuz15 (100 bodů) - Kmitavý pohyb vypadá velmi dobře, škoda stejných rychlostí, menší vločky by měly být pomalejší, protože jsou dále od pomyslné kamery. Efekt je pěkný, ten web vypadá hrozně, chtělo by to trochu pilovat estetické cítění chlape. Podívej se na Jo a Misaze, jakou vybrali barvu pozadí. Times také není vhodný webový font, ačkoli je dafaultní. Ve zdrojáku je URL obrázku z DropBoxu, to by asi nemělo. Kód je docela nepřehledný, chvíli jsem ho přežvykoval, ale vykouzlil jsi co se týče efektu asi nejlepší řešení, placka je tvoje pod podmínkou, že změníš font a barvu pozadí! :P

2. Ja (90 bodů) - Pohyb je plynulý, obrázky vypadají velmi dobře, vločky mají jiné rychlosti, pokus o závěj :) Vločky by se měly zobrazovat nad okrajem obrazovky a závěj by měla být naopak kus pod okrajem. Po nějakém čase se to začne dost sekat, což dělá skript reálně nepoužitelným. Vločkám v závěji bys měl dát nějaký lifetime a potom je likvidovat. Kód je docela pěkný. Škoda, že to není dotažené do konce, jedná se o velmi pěkné řešení.

2. Petr Gurth (90 bodů, pozdě odevzdáno) - Nevypadá to zle, ale detaily nejsou dopilované. Vločky se divně třepetají, což hrozně kazí celkový dojem. Závěj vypadá docela dobře, jak je takhle polovina schovaná za okraj monitoru, elegantní řešení. Další použití canvasu a řešíš počet vloček, což moc chválím.

3. Misaz (80 bodů) - Ajťácký pixelový sníh, škoda, že mají všechny vločky stejnou rychlost a pohybují se jen vertikálně. Zajímavé je technické řešení, které využívá canvas.

4. Zirko (70 bodů) - Když okno není aktivní, tak to tam nějak moc zasněží :P Jako začátek je to docela dobré, ale konkurence má další fíčury navíc.

Placku tedy získává Zdeněk Pavlátka, publikuj prosím upravené řešení a napiš x. Všem ostatním děkuji a budu se těšit příští týden! :)

Editováno 15.12.2013 18:52
Nahoru Odpovědět 15.12.2013 18:52
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na David Čápka
Zdeněk Pavlátka:

Stránku jsem dělal narychlo jen na zobrazení těch vloček. :D Proto je tak odfláknutá. A před publikací jí klidně upravím. Barvy jsem volil tak, aby byl sníh dobře vidět.

Nahoru Odpovědět 15.12.2013 18:59
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Zdeněk Pavlátka
David Čápka:

Ale ale, to jsou výmluvy, takhle ji dělali všichni :P

Nahoru Odpovědět  +1 15.12.2013 19:11
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na David Čápka
Zdeněk Pavlátka:

Už jsem psal, že proti úpravě nic nemám. A v poslední době nemám žádnou fantazii. :D

Nahoru Odpovědět 15.12.2013 19:14
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Petr Nymsa
Redaktor
Avatar
Odpovídá na David Čápka
Petr Nymsa:

Ty jsi mě také hodnotil ? :O psal jsem to ve škole během hodin :D ale díky za hodnocení :`

Nahoru Odpovědět 15.12.2013 19:23
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
Radim Sückr
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Radim Sückr:

Proč? Nevidím důvod. Psal jsem, že jsem upravil tvé řešení a akorát ho přepsal do Dartu. A navíc jsi ho zveřejnil, takže jsem ani neprozradil tvé "tajemství". Ale ok, příště případně počkám. :)

 
Nahoru Odpovědět 15.12.2013 20:41
Avatar
Odpovídá na David Čápka
Neaktivní uživatel:

smim sem treba nahrat snezeni ve Flashi jen tak, treba za tyden/2? :) vim ze je to uz bez placky ale myslim si ze by to nebylo spatny to sem nahrat :)

Nahoru Odpovědět  -3 15.12.2013 21:04
Neaktivní uživatelský účet
Avatar
Odpovídá na Radim Sückr
Michal Žůrek (misaz):

To sice ano, ale můj výtvor byl soutěžní a nemyslím si že je vhodné předělávat cizí soutěžní výtvor před deadline a to bez souhlasu jeho autora.

Každopádně teď už je to jedno.

Nahoru Odpovědět 15.12.2013 21:18
Nesnáším {}, proto se jim vyhýbám.
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 43 zpráv z 43.