Noční pták - Koukejte na můj Tetris!

Koukejte na můj Tetris!

Jestli máte rádi posouvání a otáčení barevných kostiček, zkuste si zahrát můj Tetris v javaScriptu. Nezapomeňte si vyzkoušet různá nastavení. Hra není dokonalá, ale i tak z ní mám radost. Když mě poprvé napadlo, že bych si mohl vytvořit svojí vlastní verzi Tetrisu, začal jsem hledat návody, jak to udělat. Narazil jsem ale na jeden, kde se psalo, že ještě větší výzva je návod nečíst, a napsat program bez něj. Udělal jsem to. Byla to zábava, i když s návodem by hra asi dopadla lépe. Funguje celkem dobře, o tom žádná. Kód by ale mohl být elegantnější. Za všeho nejméně se mi povedla čtvercová síť.

Původně jsem chtěl udělat každý čtvereček z jednoho tagu <div>. Jenže pak jsem zjistil, že aby čtverečky zůstaly čtvercové i při změně rozměrů stránky, musí být každý udělaný ze tří divů vložených do sebe. Standardní hrací plocha Tetrisu má deset krát dvacet čtverečků. Nad ní ale jsou ještě čtyři řádky, které hráč nevidí.

Říkal jsem si taky, že místo pevně definovaných souřadnic bude jednodušší, když budou kostky jen tak plavat v prostoru. Po nárazu do stěny se zastaví. Takže jsem přidal ještě dva sloupce neviditelných čtverečků po stranách jako stěny. Potom jsem zjistil, že potřebuju na spodní straně hracího pole čtyři další neviditelné řádky. Nakonec jsem udělal ještě jednu malou čtvercovou sít, v níž se zobrazuje kostka, která spadne příště.

Zkrátka divů je na stránce hodně. Mobilní verze by taky mohla být hratelnější. Snažil jsem se udělat dotyková tlačítka, která budou reagovat jako šipky na klávesnici. Moc se mi to ale nepovedlo. Možná hru ještě vylepším. Když už jsem si Tetris naprogramoval, napsal jsem o něm i článek do 100+1. Má hodně zajímavou historii. Nevím ale, kdy článek vyjde.

Možná by vás zajímalo, kde jsem se naučil javaScritpt. (Nebo taky ne, trochu programovat už asi dneska umí každý.) Nuže, bylo to na freeCodeCampu. Když se tam přihlásíte, začínáte s učením od jednoduchého HTML. Plníte úkoly. Ze začátku jsou primovní, jako třeba změnit barvu textu. Postupně přejdete k algoritmům v javaScriptu. Některé jsou pořádně těžké. Vždycky čas od času máte za úkol něco vybudovat. Napřed je to jednoduchá HTML stránka, pak třeba javaScriptová kalkulačka, a tak dál.

Za plnění úkolů dostáváte certifikáty. Já jsem někdy na jaře nebo v létě došel k prvnímu z nich, front end, certifikátu. Následuje druhý. Zatím u něj ale nejsou úkoly. Je tam jen „Comming soon.“ Tak jsem toho zase nechal. Vloni na podzim mi to ale nedalo a začal jsem si jen tak pro zábavu znovu programovat. Chci sem dát víc svých výtvorů, i když Tetris už asi nepřekonám. Většinou jsou to úkoly z freeCodeCampu a mám je už pověšené na codePenu. Tady mi to ale přece jen připadá víc jako doma. Udělal jsem zvláštní stránku, kde bude v budoucnu rozcestník.



Napiš komentář

Email nebude zveřejněn ani jinak zneužit. Číslo v hranatých závorkách vytvoří odkaz na daný komentář. Můžete použít HTML značky <a>, <abbr>, <acronym>, <b>, <blockquote>, <code>, <em>, <i>, <strike> a <strong>. Povinná pole jsou označena*.