Jak vznikla první puzzle hra z videa
Klasické puzzle nudí. Statický obraz, který se nehýbe, naskenuješ za pár sekund a pak hraješ na paměť. Co kdyby se obraz hýbal? To je přesně otázka, ze které vznikl VideoPuzzle.
Proč vlastně video?
Skládání puzzle aktivuje vizuální kortex — hledáš vzory, hrany, barvy. Když je obraz statický, mozek si po pár vteřinách zapamatuje rozložení a hra se stává mechanickou. Pohyblivé video tenhle proces přepisuje. Každý dílek je nepředvídatelný: štěně mrkne, panda zvedne tlapku, pára z hrnku stoupá. Mozek se musí přizpůsobovat v reálném čase.
Výsledek? Hra, která vás přitáhne na delší dobu i u nejjednodušší obtížnosti, protože jednoduše nemůžete předvídat, jak bude dílek vypadat za vteřinu.
Technické zákulisí: canvas a Bezier křivky
Implementace nebyla triviální. Klasické puzzle dílky mají charakteristické zaoblené výstupky a prohlubně (anglicky tabs a blanks). Aby každý dílek vypadal jako součást skutečného puzzle a sousední dílky do sebe zapadaly, generujeme tvar dynamicky:
- Generace hran: Pro každou vnitřní hranu mřížky náhodně volíme orientaci výstupku. Pokud jeden dílek má tab vystupující doprava, sousední vlevo má blank stejného tvaru — interlocking funguje matematicky.
- Path2D + Bezier: Tvar dílku skládáme z rovných čar (rovné krajní hrany) a cubic Bezier křivek (zaoblené tab/blank). Pět křivek na jeden výstupek dává tvar skutečného knoflíku s úzkým krčkem a širší hlavou.
- Clip + drawImage: Pro každý dílek se na canvas aplikuje
ctx.clip()na jeho path, pak se nakreslí celé video posunuté tak, aby originální buňka dílku ležela na jeho aktuální pozici. To vše 60× za sekundu pro až 100 dílků.
Drag & drop a rozsypané dílky
Aby hra připomínala skutečné puzzle, dílky jsou rozsypané kolem cílové plochy. Algoritmus best-fit zkouší 80 pozic pro každý dílek a vybírá tu s největší vzdáleností od ostatních. Když dílek pustíš v okruhu 32 % buňky od správné pozice, automaticky se snapne a uzamkne.
Co dál?
Plánujeme přidat víc videí (teď máme 11), víc obtížností (až 12×12) a možná i kooperativní mód, kdy víc hráčů skládá stejné puzzle online. Ale to je hudba budoucnosti — zatím si můžeš zahrát aktuální verzi.