O autorovi a vzniku

Osmička je projekt Miloše Čermáka, který vznikl v rámci iniciativy Inspiruj.se. Cílem je ukazovat, jak používat generativní AI v práci i v běžném životě.

Kód hry i se základní informaci vytvořil nástroj Claude Code. Včetně zadání a odladění hry vše trvalo cca 30 minut.

Zajímá vás, jak můžete AI využít ve své profesi nebo koníčku? Přesně to učíme na našich kurzech a workshopech na Inspiruj.se.

Vývoj a implementace

Tento projekt představuje moderní webovou implementaci klasické logické hry 8-Puzzle (známé také jako "osmička"). Hra byla vyvinuta s důrazem na uživatelskou přívětivost, výkon a vzdělávací hodnotu.

Klíčové funkce

  • Interaktivní gameplay: Intuitivní ovládání myší i klávesnicí
  • Automatické řešení: Implementace A* algoritmu s Manhattan distance heuristikou
  • Adaptivní design: Responzivní rozhraní s podporou dark/light módu
  • Pokročilé funkce: Historie tahů, undo operace, timer a statistiky
  • Validace řešitelnosti: Generování pouze řešitelných konfigurací

Technické specifikace

Frontend

  • Vanilla JavaScript (ES6+)
  • CSS3 s custom properties
  • Responsive design
  • Accessibility features

Algoritmy

  • A* pathfinding algoritmus
  • Manhattan distance heuristika
  • Inversion count validace
  • Fisher-Yates shuffle

Algoritmická složitost

8-Puzzle představuje zajímavý příklad kombinatorické optimalizace s exponenciálně rostoucí složitostí:

Celkový počet stavů

362,880

9! permutací

Řešitelné stavy

181,440

50% všech stavů

Průměrná délka řešení

22 tahů

pro náhodnou konfiguraci

A* algoritmus s Manhattan distance heuristikou zajišťuje optimální řešení s minimálním počtem kroků, což z něj činí ideální nástroj pro výukové účely i praktické demonstrace pokročilých algoritmů.

Vzdělávací hodnota

Projekt slouží jako praktická demonstrace několika důležitých konceptů z informatiky:

🧠 Umělá inteligence

Implementace heuristických vyhledávacích algoritmů a jejich optimalizace

📊 Datové struktury

Práce s maticemi, fronty, hashovací tabulky a graph reprezentace

🎯 Optimalizace

Analýza složitosti, výkonnostní optimalizace a paměťová efektivita

🎨 UX/UI Design

Responzivní design, animace a přístupnost webových aplikací

Budoucí vylepšení

Plánovaná rozšíření projektu zahrnují:

  • Implementace dalších velikostí puzzle (15-puzzle, 24-puzzle)
  • Multiplayer režim s real-time synchronizací
  • Pokročilé statistiky a leaderboardy
  • Vizualizace průběhu A* algoritmu
  • Podpora pro vlastní obrázky jako puzzle
  • Progressive Web App (PWA) funkcionalita