Hlavní navigace

Zahrajte si HTML5 hry ve svém prohlížeči

Petr Krčmář 24. 12. 2010

Internetové hry nejsou žádná novinka, už dlouho frčí různé flashovky, které se z jednoduchých hříček vypracovaly na docela sofistikované a zajímavé hry. Také už se nějakou dobu hovoří o tom, že by mělo HTML5 kompletně Flash nahradit. A kde začít než právě u her. Ukážeme si několik hezkých kousků.

V dnešním vánočním článku se společně podíváme na zajímavé HTML5 hry, které si můžete zahrát přímo ve svém prohlížeči a nebudete k tomu potřebovat Flash ani žádná jiná rozšíření. Vše běží přímo ve stránce pomocí objektu canvas, do kterého může web volně kreslit pomocí JavaScriptu.

Dřívější hry tohoto typu byly opravdu velmi jednoduché a jednalo se vlastně jen o ukázku toho, že 'to jde'. Prohlížeče se ale zlepšují, JavaScript se zrychluje, a tak je možné i přímo na webu udělat docela hezkou a sofistikovanou hru. Několik zajímavých si ukážeme. Při hledání těchto her poskytl neocenitelné služby Zdroják.

Canvas Rider

URL: www.canvasrider.com

Canvas Rider je arkádovka se známým motivem: jezdíte na kole, sbíráte bodíky a vašim cílem je především nespadnout. Hlavními ovládacími prvky jsou kurzorové klávesy, pomocí kterých zrychlujete, zpomalujete a hlavně přenášíte těžiště dopředu a dozadu. Dále máte možnost kolo otočit pomocí klávesy Z a pomocí F můžete přepnout na celou obrazovku.




Tahle hra je zajímavá především z toho důvodu, že pro ni existuje nepřeberné množství různých nápaditých map. Můžete jezdit po střechách města, mezi ufony, přeskakovat tyranosaury nebo se vyhýbat střílejícím mimozemským lodím. Vše je navíc velmi hezky namalované a chová se naprosto plynule a svižně.

Biolab Disaster

URL: www.playbiolab.com

Klasická skákačka jako za starých časů. Ovládáte človíčka ve skafandru, který se musí probít rozsáhlou laboratoří a postřílet přitom spoustu potvůrek. K dispozici máte pistoli a po cestě najdete řadu různých vylepšení. K ovládání použijete kurzory, skáčete pomocí X a střílíte s C.




Tahle hra má příjemné zvukové efekty, prostě jako klasická desktopová hra. Zároveň uvidíte docela hezké grafické efekty, zažijete zemětřesení, bude se sypat sklo a podobně. Tahle hra mě vrátila zase do přelomu osmdesátých a devadesátých let, kdy jsme milovali hry jako Duke Nukem.

Pirates love daisies

URL: www.pirateslovedaisies.com

Ve světě flashových her je pojem "tower defense" už notoricky známý. Jde o typ hry, ve které na vás počítač vysílá haldu různých jednotek, které jdou slepě skrze trasu na mapě. Na druhé straně mají za úkol něco zničit nebo ukrást. Vy jim ale můžete do cesty přidávat různé útočné prvky, které mají různé funkce a nepřátele ničí. Zároveň likvidací protivníků získáváte peníze, za které nakupujede další obrany, případně ty stávající vylepšujete.




Přesně taková je i hra Pirates love daisies, ve které na vás z moře lezou různé breberky a vy jim stavíte do cesty piráty. Breberky mají za úkol ukrást pirátům jejich oblíbené sedmikrásky. Hra opět připomíná její starší flashové bratříčky včetně zvukových efektů, každý pirát má své hlášky, které během vřavy vykřikuje.

Sinuous

URL: www.sinuousgame.com

Hra z úplně jiného soudku. Pomocí myši ovládáte kuličku, která prolétá rojem... řekněme asteroidů. Samozřejmě nesmíte narazit, ale občas najdete různá vylepšení, která třeba chvíli odpuzují překážky, zpomalí let a podobně. Postupně během letu samozřejmě objektů na obrazovce přibývá a pro vás je stále těžší proletět.




Aby byl ve hře nějaký zajímavější efekt, táhne za sebou vaše kulička jakési vlákno, na kterém jsou navlečeny vaše životy (ty mohou během hry i přibývat). Jak hýbete myší, vlákno se za vámi pěkně kroutí a hru to činí graficky zajímavější.

Asteroids

URL: www.kevs3d.co.uk/dev/asteroids/

Další klasika, ovládáte malou raketu, která se pohybuje po čtvercové herní ploše. Máte k dispozici zbraň, kterou sestřelujete náhodně poletující asteroidy. Ty se rozpadají stále na menší a menší kousky, až úplně zmizí. Do toho útočí nepříjemní ufoni.




Hra má předrenderovanou grafiku, takže se načítá trochu déle, ale vypadá výborně. Opět jsem neměl nejmenší problémy s plynulostí. Ovládáte opět pomocí kurzorových kláves, střílíte mezerníkem. Pomocí klávesy R můžete navíc přepnout do klasického retro grafického módu.




Torus

URL: www.benjoffe.com/code/games/torus/

Pěkně zpracovaný Tetris, ve kterém nekladete prvky do plochy, ale hrací prostor je svinut do válce, který se před vámi otáčí. Ovládání je naprosto klasické, použijete k němu jen kurzorové klávesy.




Hra kromě klasické "nekonečné" varianty nabízí také tříminutovou časovku, případně vám sama do válce nasype náhodné tvary a vašim úkolem je prostor vyčistit v co nejkratším čase.

Orbium

URL: jsway.se/m/

Logická hříčka, které existuje i v komerční verzi pro iPhone. Tady si ji můžete zahrát naprosto zdarma. Cílem je spojovat kuličky stejných barev, které přijíždějí vyhrazenými cestami. Pomocí myši můžete otáčet zásobníky, do kterých kuličky padají a opět je vysílat do cestiček. Jednoduchý, ale velmi zábavný princip ověřující váš postřeh, rychlost i schopnost plánování.




Emulátory plné her

Tohle ovšem není zdaleka všechno. Kromě klasických her je možné v JavaScriptu dnes mít také třeba různé emulátory.

Game Boy

URL: www.codebase.es/jsgb/

Plnohodnotný emulátor legendárního Game Boye. Můžete si v něm zahrát 14 známých her včetně klasického Maria nebo Bombermana. Autor pro běh doporučuje Google Chrome a můžu potvrdit, že v něm funguje emulátor výborně. Pokud vám nestačí standardní rozlišení 160x144, můžete si obrazovku emulátoru zvětšit dvakrát nebo třikrát.




ZX Spectrum

URL: jsspeccy.zxdemo.org

Emulátor svého oblíbeného osmibitu jsem si nechal nakonec. JSSpeccy samozřejmě emuluje klasické Spectrum 48K, zahrajete si na něm pár známých her, jako třeba Manic Minera. Výkon tohoto emulátoru je trochu nižší, takže alespoň u mě hry neběžely úplně plynule, ale hrát se daly. Součástí emulace je i BASIC, takže si můžete zkusit zaprogramovat jako za starých časů.




Hezké Vánoce

K Vánocům samozřejmě patří i přání a také stromeček. Když už jsme se tady probírali JavaScriptem a prostředím canvas, nabídneme vám v něm i vánoční stromeček. Autorem tohoto krásného kousku kódu, který má jen 1 KB, je Román Cortés. Tak šťastné a veselé a podělte se s námi v diskusi o to, co jste pod stromečkem našli!

Našli jste v článku chybu?

24. 12. 2010 1:24

pas (neregistrovaný)

Náhodou, mě ten stromeček příjemně zahřál nejen u srdce, ale i na klíně - ve vymrzlém kupé Českých drah se hodí vytáhnout procesor na 80 %. :)

24. 12. 2010 10:03

Ano, Orbium je hra Logical (Amiga a DOS), prepsana do HTML5 http://www.lemonamiga.com/games/details.php?id=689
uzil jsem si s ni kdysi spoustu zabavy a

Ovsem neubranim se usmevu, kdyz vidim hru, ktera behala svizne na 286ce 16mhz, prepsanou tak, ze 2,4Ghz procesor dokaze zatizit na 50%. holt pokrok nezastavis ;)


Lupa.cz: Google měl výpadek, nejel Gmail ani YouTube

Google měl výpadek, nejel Gmail ani YouTube

DigiZone.cz: Česká televize mění schéma ČT :D

Česká televize mění schéma ČT :D

Vitalia.cz: „Připluly“ z Německa a možná obsahují jed

„Připluly“ z Německa a možná obsahují jed

120na80.cz: Rakovina oka. Jak ji poznáte?

Rakovina oka. Jak ji poznáte?

Podnikatel.cz: Přehledná titulka, průvodci, responzivita

Přehledná titulka, průvodci, responzivita

Vitalia.cz: Chtějí si léčit kvasinky. Lék je jen v Německu

Chtějí si léčit kvasinky. Lék je jen v Německu

Podnikatel.cz: EET zvládneme, budou horší zákony

EET zvládneme, budou horší zákony

Vitalia.cz: To není kašel! Správná diagnóza zachrání život

To není kašel! Správná diagnóza zachrání život

Lupa.cz: Není sleva jako sleva. Jak obchodům nenaletět?

Není sleva jako sleva. Jak obchodům nenaletět?

Podnikatel.cz: Na poslední chvíli šokuje vyjímkami v EET

Na poslední chvíli šokuje vyjímkami v EET

Lupa.cz: Propustili je z Avastu, už po nich sahá ESET

Propustili je z Avastu, už po nich sahá ESET

Podnikatel.cz: EET: Totálně nezvládli metodologii projektu

EET: Totálně nezvládli metodologii projektu

Lupa.cz: Co se dá měřit přes Internet věcí

Co se dá měřit přes Internet věcí

Vitalia.cz: Jsou čajové sáčky toxické?

Jsou čajové sáčky toxické?

Podnikatel.cz: 1. den EET? Problémy s pokladnami

1. den EET? Problémy s pokladnami

Měšec.cz: Zdravotní a sociální pojištění 2017: Připlatíte

Zdravotní a sociální pojištění 2017: Připlatíte

DigiZone.cz: Recenze Westworld: zavraždit a...

Recenze Westworld: zavraždit a...

Vitalia.cz: Tesco: Chudá rodina si koupí levné polské kuře

Tesco: Chudá rodina si koupí levné polské kuře

Lupa.cz: Avast po spojení s AVG propustí 700 lidí

Avast po spojení s AVG propustí 700 lidí

Podnikatel.cz: Prodává přes internet. Kdy platí zdravotko?

Prodává přes internet. Kdy platí zdravotko?