Inspirace: starý Descent a nová výzva
První hra, která nabídla volný pohyb ve všech třech osách (nikoliv pseudo 3D v rovinách), byl v roce 1995 legendární Descent. Kdo si ji nepamatuje, může si ji připomenout třeba tímto videem. Tehdy se jednalo o další krok v 3D hrách a spousta programátorů vyjádřila uznání nad zvládnutím pohybu v 3D prostoru, který tento engine přinesl. Ano, zvládnout naprogramovat volný pohyb v 3D se považuje za poměrně složitou záležitost a ne každý je schopen toto vytvořit.
My si dáme ještě těžší úkol, vytvořit něco podobného bez jediného řádku JavaScriptu, jen pomocí CSS. Což se zdá na první pohled zcela nemožné, ty stovky řádků kódu přece nelze vynechat. Já ukážu, že s použitím velké dávky kreativity lze i toto.
Místo venku, jsme uvnitř
V předchozích příkladech byly kamery (pozorovatelé) vždy mimo scénu. Ale co když scénu přiblížíme natolik, že se do ní ponoříme? Pomocí vhodně zvolené perspektivy a měřítka to jde – a efekt „pohledu zevnitř“ je překvapivě přesvědčivý.
Takový projekt by bylo bláhové psát ručně – samozřejmě ho vygenerujeme v našem CADu, čímž mu dáme další silné využití.
Co všechno to obnáší
Vytvoření 3D hry čistě v CSS není jen o formě, ale i o struktuře. Je třeba vyřešit:
- Generování 3D bludiště – topologická hádanka, kterou řešíme pomocí makrojazyku CADu.
- Pohyb scénou – nový způsob ovládání, který zařadíme mezi univerzální funkce CADu.
- Herní logika v CSS – například sestřelování objektů, počítání zásahů i času.
- Kolize – tedy zabránění pohybu skrz stěny pomocí selektorů, které reagují na aktuální polohu.
CSS, které funguje. I když to tak nevypadá.
Celé to zní dost bláznivě. A ještě šílenější to začíná být, když zjistíte, že Firefox má letitou chybu, kvůli které CSS přechody nefungují správně.
Řešení? Před začátkem přechodu celou scénu „vyměnit“. Ne dynamicky pomocí JS, ale čistě pomocí CSS a hover efektů. Trochu magie, trochu pokus/omyl. Výsledkem je CSS, které připomíná deník šílence – ale funguje. I ve Firefoxu.
Jak se to hraje
Cílem hry je najít a myší "sestřelit" 8 "diamantů" v co nejrychleji. Můžete se otočit doleva, doprava, nahoru a dolu a posunout dopředu. Celé bludiště tvoří 5 x 5 x 5 místností umístěných v prostoru. Dole je indikátor počtu sestřelených a počítadlo času, které se po splnění úkolu zastaví.
Pozor! Na první pohled bludiště 5 x 5 x 5 nevypadá jako nic složitého. Ovšem háček je v použitém způsobu pohybu, který velmi snadno vede ke ztrátě orientace. Například dvě otočky nahoru a dvě doleva vás sice nechají na stejném místě, ale „hlavou dolů“. Mnoho lidí pak scénu nepozná a ztratí se.
Technologické limity
Hra je na hranicí možností dnešních prohlížečů a můžou objevit chyby překreslování, či dokonce zhroucení (Chrome), který sebou může vzít celé Windows až do Blue Screen of Death. Výkon, chyby i zhroucení závisí i na typu grafické karty.