Jak jsem programoval HTML5 hru

Před pár měsíci jsem se zúčastnil výukového on-line kurzu HTML5 Game Developement na Udacity.com. Colt McAnlis a Peter Lubbers z Google v něm vysvětlují základy vývoje her v JavaScriptu s využitím HTML5 elementu <canvas>. Všechny popisované praktiky si lze rovnou prakticky vyzkoušet na připravených úkolech s automatickou kontrolou. Závěrečnou fází kurzu byla soutěž, do které se mohl každý účastník přihlásit s hrou, kterou na základě získaných dovedností vyvinul.

Přišlo mi to zajímavé, tak jsem během týdne vytvořil klon staré známé klasiky Bomberman a nazval jej Bombergirl. Při vývoji jsem použil knihovnu EaselJS, která usnadňuje práci s <canvas> elementem, PreloadJS pro načítání obrázků a SoundJS pro přehrávání zvuků. Mohl jsem se tak soustředit na samotnou funkčnost hry a za relativně krátký čas jsem ji měl hotovou.

Hra má jak single player mód, tak i multi player pro 2 hráče na jednom počítači. Největší výzva byla vytvoření botů. Bylo potřeba vyvážit jejich inteligenci tak, aby se nenechali zabít na první ránu, ale bylo možné je při troše štěstí nebo lsti odpálit.

Můžete si ji zkusit zahrát a prohlédnout si zdrojový kód.

Hra měla u poroty úspěch. Obdržela ocenění v kategorii Most Fun a dokonce se o ní zmínili v pravidelné relaci Coffee Break. Jako výhru mi z Mountain View poslali Chromebook. Můj krátký pohled na něj si můžete přečíst v příspěvku na Google+.

Do kurzu je možné se kdykoliv připojit, takže pokud vás vývoj her zajímá, můžu doporučit. Ačkoliv jsem nikdy předtím žádnou hru neprogramoval, ani netušil jak začít, po dokončení kurzu pro mě nebyl problém během týdne funkční hru napsat.

A určitě doporučuji zkusit i další kurzy na Udacity, já jsem třeba absolvoval Interactive 3D Graphics seznamující s knihovnou three.js a trochu pokročilejší Design of Computer Programs.

Ústřední kolo soutěže ve hře na elektronické klávesové nástroje

Na keyboard hraji již 8 let. Zrovna keyboard jsem si vybral asi proto, že je ze všech hudebních nástrojů nejelektroničtější. Umění hrát na něj není jen v tom zahrát správné noty, ale i ve vhodném nastavení zvuků, různých efektů a jejich přepínání během hry. Navíc nástroj lze snadno propojit s počítačem a  pomocí nahrávacího software lze vytvořit cokoliv. Poslední 3  roky hraji i na klavír, hlavně jazzové standardy.

Letos poprvé byla vyhlášena soutěž ve hře na elektronické hudební nástroje. A jelikož ještě chodím do ZUŠ, tak jsem se přihlásil. Na soutěž jsem si vezl své dva nástroje – keyboard Yamaha PSR-S900 a stage piano Roland RD-700SX. Na repertoáru jsem měl jazzovou etudu (podmínkou byla 1 klavírní skladba), Zelený satén, Tico Tico a Blue Moon.

Okresní kolo se pro neúčast jiných škol nekonalo, v krajském kole v Chotěboři jsem se umístil na 1. místě s postupem do celostátního kola. Na celostátním kole v Brně jsem ve své kategorii získal 1. místo. Původně jsem se účastnil hlavně se záměrem poslechnout si, jak hrají ostatní, a nabrat inspiraci. Nakonec jsem byl s umístěním příjemně překvapen. Byla to skvělá zkušenost.

Hudební přehrávač MusixMashup.com

MusixMashup.com je hudební přehrávač, který propojuje YouTube a Last.fm a umožňuje tak pohodlné přehrávání hudebních videí.

Kde mladí poslouchají na hudbu? Na YouTube. YouTube ale pro poslech hudby původně nebyl určen a je to značně nepohodlné. A jelikož hudbu poslouchám často a mám rád věci jednoduché, vytvořil jsem webovou aplikaci, která využívá veřejných API YouTube a hudební databáze Last.fm a celý proces značně usnadňuje.

Je to tak jednoduché, že stačí zadat název interpreta či žánru a okamžitě se začnou přehrávat jeho skladby, seřazené dle oblíbenosti (počtu scrobblů na Last.fm). Z Last.fm se načte fotka a krátké info o právě hrajícím interpretovi. Zároveň se vyhledají podobní interpreti, což se skvěle hodí pro objevování nové hudby, která odpovídá vašemu hudebnímu vkusu.

And one more thing – v titulku stránky se zobrazuje název aktuálně přehrávané skladby.

Aplikace je napsána téměř kompletně v JavaScriptu s využitím Google Closure Library. Cache úvodní strany a přihlašování k Last.fm je pak řešeno na backendu v Node.js. Tato aplikace obdržela v soutěži Junior Internet 2013 cenu za nejlepší technické zpracování.

Využití hudebních dat

Pokud máte účet na Last.fm, přehrávané skladby můžete scrobblovat a tvořit tak svůj hudební profil. Po pár měsících pak nejen že můžete porovnat hudební kompatibilitu se svými Last.fm přáteli, ale díky získanému množství dat lze pomocí různých aplikací i generovat zajímavé statistiky.

Nejposlouchanější interpreti

Nálada podle poslouchané hudby