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.

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


StudentBook – co každý student potřebuje

V nedávné době jsem zaznamenal úspěch se svojí webovou aplikací myStudentBook.com. Jedná se o aplikaci určenou pro studenty základních a středních škol a umožňuje efektivně spravovat zadání úkolů a datumy zkoušek a testů. Také umožňuje zadat známky, ze kterých vypočítá vážený aritmetický průměr a zanese je do přehlednéhografu, kde je možné sledovat i měnící se průměr během roku. Rozvrh, úkoly i zkoušky je možné sdílet se spolužáky. Pokud v profilu vyplníte školu a třídu, všem ve třídě se formou časové osy zobrazuje, co kdo kdy přidal.

K dispozici je i aplikace pro Android. Kromě základních funkcí pro správu úkolů a zobrazování rozvrhu bych zmínil dvě vychytávky. Při vkládání nového úkolu při hodině si aplikace automaticky z rozvrhu zjistí aktuální předmět a následující výskyt tohoto předmětu. Na vás tedy je pouze zadat úkol, ostatní je automatické. Užitečné je i to, že aplikace přepne telefon během hodin do tichého režimu, po vyučování se zvonění opět zapne. Už nemusíte řešit, když vám někdo zavolá při vyučování.

Úspěch v soutěži JuniorWeb 2012

Se svým projektem jsem se přihlásil na 13. ročník konference Junior Internet. Dostal jsem se do finále a následně 17. 3. na konferenci prezentoval před porotou. Hvězdná porota ve složení David Grudl (autor Nette frameworku), Vít Vrba (zakladatel Webnode.cz), Jiří Tvrdek (grafik), Jan Tichý (PHP guru) vybrala ze 3 finalistů právě můj projekt. Můžete se podívat na záznam mé prezentace a následné reakce poroty. Po poledních prezentacích a vyhlášení výsledků byl program zaměřen především na úspěchy účastníků minulých ročníků a obsahoval i různé inspirativní přednášky.

Následující týden byli všichni finalisté pozváni na sympozium do Bratislavy. Na slovenské konferenci Junior Internet se prezentovali zdejší účastníci a porota následně vybrala finalisty. Strávili jsme tu celý víkend a měli příležitost se vzájemně více poznat a navázat další kontakty. Na samotné konferenci jsme prezentovali, společně s finalisty z Maďarska, své práce. Nakonec byla vyhlášena cena Visegrad Award – nejlepší práce z České republiky, Slovenska a Maďarska. Byla udělena mému projektu.

Kromě nových kontaktů a možných nabídek ke spolupráci přišla také propagace, 7. 4. se mnou byl rozhovor na stanici Český rozhlas 6 v pořadu Zaostřeno na mladé – k dispozici v archivu. Další akce, kde mě můžete vidět, je 26. 4. Hub Mashup – večer plný zajímavých prezentací začínajících českých projektů. (Edit: Záznam z Hub Mashup)

Pokud je vám do 18 let a je tvorba webů oblast, o kterou se zajímáte a pohybujete s v ní, přihlaste na příští ročník Junior Internetu také svůj projekt, šanci má opravdu každý. Také se můžete přijít podívat, co vaši vrstevníci dokážou, někdo může být zvědavý na porotu složenou z vlivných lidí na českém internetu, jiní přijdou na inspirativní přednášky úspěšných mladých českých podnikatelů. Důvodů je skutečně mnoho a i když já již příští rok soutěžit nebudu, určitě se zúčastním!

Moje první aplikace pro Android

Už to bude skoro rok, co jsem si koupil telefon s Androidem, konkrétně HTC Desire. Operační systém Google Android je rychle se vyvíjející platforma, ve které vidím velkou budoucnost. V mnohém je podobný iOS, někde proto, že se v průběhu vývoje Google inspiroval, jinde proto, že v iOS 5 se zase inspiroval Apple. V následujících letech budou právě tyto dvě platformy svádět souboj o první místo v podílu na trhu. Microsoft se svým i celkem povedeným Windows Phone 7 zatím trochu zaostává.

Už dlouho tu není žádná aplikace pro procházení filmové databáze ČSFD.cz, která mi schází, jelikož na filmy se dívám celkem často a mít něco podobného jako aplikaci od IMDb by bylo super. Rozhodl jsem se tedy zkusit to sám.

Sehnal jsem si knížku Android Application Developement in 24 Hours, kterou můžu doporučit jako zajímavou formou psaný rychlokurz. Je psána v angličtině a popisuje všechno od nainstalování vývojářských nástrojů, přes samotné programování v Javě a používání knihoven Android SDK, až po zveřejnění hotové aplikace na Android Marketu.

Naučil jsem se tedy Javu, poznal Eclipse IDE. A po týdnu studia a programování mám konečně viditelný výsledek, a to první veřejnou verzi mé aplikace – Moje ČSFD. Zatím neumí opravdu nic jiného než vyhledávat a zobrazovat základní informace o filmech, ale další funkce přidám časem.

Aplikace je ke stažení na Android Marketu.

Aktualizováno: Aplikace zaznamenala nečekaný úspěch a dokonce mi byla nabídnuta práce na oficiální Android aplikaci ČSFD.cz, na jejímž vývoji se nyní podílím.