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

1. ledna 2002

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í).

function nahoda()
    {
    pomPole = new Array(16);    // vytvoříte pomocné pole se 16 prvky
    pomPole[0] = Math.ceil(15*Math.random());    // náhodně vygeneruje první prvek pole – číslo od 1 do 15
    for (i = 1; i <= 4; i++)    // Pro řádek od 1 do 4 proveď:
       { for (j = 1; j <= 4; j++)    // pro sloupec od 1 do 4 proveď:
          { var index = 4*(i-1) + j-1;    // z čísla řádku a čísla sloupce vypočti index jednorozměrného pole.
             var cisloUzJePouzito = true;    // deklarujete logickou proměnnou cisloUzJePouzito a přiřadíte jí hodnotu
             if ((index > 0) && (index < 15))    // s výjimkou prvního a posledního prvku pole se provede testování
                { while (cisloUzJePouzito)    // Poprvé proběhne vždy, aby se vygenerovala libovolná počáteční hodnota, opakuje se, pokud číslo už bylo použito pro dřívější prvek pomocného pole tak dlouho, dokud se nevygeneruje dosud nepoužité číslo.
                   { pomPole[index] = Math.ceil(15*Math.random());
                      for (x = 0; x < index; x++)
                         { cisloUzJePouzito = (pomPole[x] == pomPole[index]);
                            if (cisloUzJePouzito) {break; }; }
                } }
             if (pomPole[index] > 9) {a[6*i + j] = ‚ ‚ + pomPole[index] + ‚ ‚; };    // pro dvouciferná čísla přidej tři mezery
             if (pomPole[index] < 10) {a[6*i + j] = ' ' + pomPole[index] + ' '; };    // pro jednociferná čísla přidej čtyři mezery
    } }
    a[28] = “;    // v pravém rohu dole bude vždy prázdné pole = prázdný řetězec
    zobraz();
    }

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:

function vymen()
    {
    for (i = 7; i < 29; i++)
       { if (a[i] == ‚ 14 ‚) {var u = i; };
          if (a[i] == ‚ 15 ‚) {var v = i; }; };
    a[u] = ‚ 15 ‚;
    a[v] = ‚ 14 ‚;
    zobraz();
    }

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:

function zobraz()
{
    for (i = 1; i <= 4; i++)
       { for (j = 1; j <= 4; j++)
          { document.images[4*(i-1) + j-1].src = ‚/podklady/1999-2008/musilek/kamen‘ + a[6*i + j] + ‚.gif‘; }}
    if ((a[7] == ’01‘) && (a[8] == ’02‘) && (a[9] == ’03‘) && (a[10] == ’04‘)
       && (a[13] == ’05‘) && (a[14] == ’06‘) && (a[15] == ’07‘) && (a[16] == ’08‘)
       && (a[19] == ’09‘) && (a[20] == ’10‘) && (a[21] == ’11‘) && (a[22] == ’12‘)
       && (a[25] == ’13‘) && (a[26] == ’14‘) && (a[27] == ’15‘))
          {document.images[15].src = ‚/podklady/1999-2008/musilek/kamen16.gif‘; }
    }

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.

Mohlo by vás také zajímat

Nejnovější

2 komentářů

  1. Michal

    Lis 15, 2009 v 1:27

    Dobrý den. Mám na autora malou prosbu. Chtěl bych se zeptat, zda-li by šlo vytvořit řešení na kombinaci čtverců 3×4(ŠxV). Pokud ano, napište mi prosím co nejdříve. Děkuji

    Odpovědět
  2. Michal

    Lis 15, 2009 v 1:28

    email: bagr.m@seznam.cz

    Odpovědět

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *