JavaScript hrou – hlavolam 15 (náhodná čísla a obrázky)

V jednoduchém příkladu generování náhodného zadání hlavolamu „15“ využijeme generátor pseudonáhodných čísel. Vyzkoušíte si také vyhledání určitých prvků pole a výměnu dílků s čísly 14 a 15, kterou jsem vám slíbil v předchozím článku. Nakonec zaměníte formulářová tlačítka za obrázky, čímž vylepšíte vzhled hlavolamu.

V minulém článku jsem vám ukázal, jak naplnit hodnoty prvků pole popisujího hlavolam tak, aby tvořily magický čtverec. Zadání hlavolamu bylo při každém načtení stránky stejné. Dnes vám chci ukázat vytvoření náhodného zadání pomocí generátoru pseudonáhodných čísel. Matematický objekt Math obsahuje jako své metody různé matematické funkce. Kromě jiného právě generátor pseudonáhodných desetinných čísel z intervalu od 0 do 1. Jedná se o funkci .random(). Dále využijete metodu .ceil(), která zaokrouhlí reálné číslo na nejbližší vyší celé číslo (pozor, nejedná se o běžné zaokrouhlování).

Protože není předem jasné, zda se vygeneruje lichá nebo sudá permutace čísel od 1 do 15, je třeba do programu doplnit proceduru, která dokáže zaměnit lichou permutaci za sudou. Běžným přesunováním čísel v hlavolamu toho nelze dosáhnout. Jednoduchým řešením je vzájemná výměna pozice čísel 14 a 15. Tato procedura je velmi jednoduchá, proto ji uvádím bez komentáře:

Náhrada tlačítek

Poslední dnešní variací na téma hlavolamu "15" je nahrazení tlačítek s čísly od 1 do 15 obrázkovými dílky. Na obrázcích mohou být opět čísla od 1 do 15, nebo můžeme skládat obrázek rozstříhaný na 16 dílů. Ukáži vám druhou variantu na jednom obrázku. Lze samozřejmě doplnit program o výběr z nabídky několika obrázků. K jednotlivým obrázkům se přistupuje pomocí pole document.images[n]. Přitom dynamicky měníte vlastnost .src těchto obrázků a tím se na stejném místě zobrazují různé dílky hlavolamu. Všechny dílky musí mít stejné rozměry (v uvedeném příkladu je rozměr dílku 80 x 80 pixelů). Největší změny zaznamená procedura zobraz:

Všimněte si dlouhé podmínky přidané za vlastní zobrazení. Pokud se vám podaří srovnat patnáct dílků hlavolamu na správná místa, doplní se automaticky poslední šestnáctý dílek. Prázdné pole pro posun dílků je vyznačeno šachovnicovým vzorem. Výsledný obrázek můžete vidět v rámečku pod hlavolamem. Přeji vám příjemné skládání zde.