Zadání 1 – Cvakni terč

Zadání

Na plátně se po stisku Start začne v náhodných intervalech objevovat terč (kruh) na náhodných pozicích. Úkolem je kliknout do terče co nejrychleji.
Po každém úspěšném zásahu se uloží reakční čas (ms). Po 5 pokusech se zobrazí průměrná reakce, nejrychlejší a nejpomalejší čas. Lze zvolit Reset.

Cíl úlohy

• Události onclick (tlačítko, klik na canvas).

• Náhodné generování (pozice, interval).

• Měření času (Date.now()), ukládání do pole a jednoduché statistiky.

• Kreslení na canvas (kruh, text), práce se souřadnicemi kliknutí.

Vstupní podmínky

• Soubory index.html, style.css, main.js.

Požadovaný výstup

• Tlačítka Start a Reset.

• Canvas s terčem, kliknutím do terče se započítá zásah a uloží reakční čas.

• Po 5 pokusech vypiš průměr, min, max a seznam časů.

Doplňující pokyny

• Nepoužívej šipkové funkce ani ternární operátor.

• Podmínky piš explicitně (if (stav == true)).

• Používej komentáře v češtině.

Cvakni terč

Řešení úlohy 1 – Cvakni terč

Co je zde splněno

• Jiná funkčnost: hra na přesnost a reakci místo kreslení grafu.

• Stále stejné stavebnice: náhoda, pole, statistiky, canvas, DOM, onclick.

• Jasné ukončení po 5 pokusech, výpis min/max/průměru a seznamu časů.

Poznámky

• Lze jednoduše přidat limit zásahů za čas (timer) nebo penalizaci za klik mimo terč (inkrementace „miss“).

Zadání 2 – Robotický vysavač

Zadání

Na začátku se vytvoří mřížka 10×10. Náhodně se vybere např. 15 znečištěných buněk. Robot (modrý čtverec) startuje vlevo nahoře.
Tlačítkem Krok se robot posune o jedno políčko podle jednoduché strategie „had“ (řádek po řádku). Pokud vstoupí do znečištěného pole, pole se vyčistí.
Tlačítkem Auto robot dělá kroky opakovaně (lze Stop). Reset vygeneruje nový nepořádek. Vypisuje se počet vyčištěných a zbývajících.

Cíl úlohy

• Práce s mřížkou (2D pole – uložíme do 1D pole a přepočítáváme indexy).

• Náhodný výběr unikátních pozic (bez duplicit).

• Kreslení čtverců na canvas (čisté vs. špinavé vs. robot).

• Řízení simulace: Krok / Auto / Stop / Reset.

Vstupní podmínky

• Soubory index.html, style.css, main.js.

Požadovaný výstup

• Tlačítka: Krok, Auto, Stop, Reset.

• Canvas s mřížkou, vizuálně odlišené stavy buněk.

• Textový výpis: „Vyčištěno: X / 15“, „Zbývá: Y“.

Doplňující pokyny

• Žádné šipkové funkce ani ternární operátory.

• Jednoduché komentáře v češtině.

• Udrž jednoduchou strategii pohybu (bez složitého pathfindingu).

Robotický vysavač

Řešení úlohy 2 – Robotický vysavač