Ako sa pečú koláče

Čo budeme robiť

  • vytvárať jednuchú hru, v ktorej je úlohou hráča správne usporiadať postupnosť obrázkov

Čo už musíme vedieť

  • meniť tvar korytnačiek, definovať udalosti na korytnačkách
Naučíme sa
  • uvedomiť si "rovnakosť" nejakých objektov na stránke – definovať novú triedu s vlastnosťami, ktoré majú niektoré korytnačky rovnaké
Navrhnujeme projekt

V jednoduchých logických hrách pre malé deti sa často stretneme s úlohami, v ktorých je potrebné dať obrázky do časového sledu tak, ako nastali. Najjednoduchším príkladom je pečenie koláčov, kreslenie nejakého obrázka, vešanie obrazu na stenu, postup pri skladaní skrine. Medzi  zložitejšie môžeme zaradiť postupnosť ročných období, rôzne matematické postupnosti, prechádzanie cez cestu niekoľkých áut podľa dopravných značiek tak, ako ich poznáme z autoškoly. Ako to už väčšinou býva, najväčším problémom je hľadanie vhodných obrázkov do týchto hier. Opäť sme si vypomohli internetom, kde aj vy určite nájdete obrázky do tejto hry.
 

 
Analyzujeme projekt

Na stránke sa v dolnej časti nachádza niekoľko obrázkov, ktoré vyjadrujú v časovej postupnosti nejaký dej – v našom prípade postup pri pečení koláčov. Úlohou hráča je ťahať tieto obrázky a umiestniť ich do predpripravených rámčekov v takom poradí, v akom nastali.Ak je obrázok správne umiestnený "doskočí" na svoje miesto do rámčeka. Ak ho chce hráč umiestniť na iný rámček, vráti sa na svoju pôvodnú pozíciu – takto vlastne dieťaťu oznamuje, že urobilo chybu a že obrázok patrí na iné miesto.

Programujeme

Obrázky aj rámčeky budú zrejme korytnačky. Ešte pred samotným programovaním je dobré rozmyslieť si mená pre tieto kortynačky, aby sa nám potom ľahko programovalo a kontrolovalo, či je obrázok umiestnený správne.

Korytnačky–obrázky budú mať zrejme tvar podľa toho, ktorú činnosť vyjadrujú.
Zábery sú pritom v správnej časovej následnosti. Korytnačkám–obrázkom navrhujeme mená 1, 2, 3, 4 – zrejme kvôli jednoduchej manipulácii napr. v cykle opakuj.

Aby boli korytnačky–obrázky v pomiešanom poradí, zrejme každej z nich určíme nejaký iný záber.

Korytnačkám–rámčekom zase navrhujeme mená r1, r2, r3 a r4 a to v poradí v akom sa nachádzajú na stránke. Keď bude chcieť hráč umiestniť obrázok do niektorého rámčeka zrejme budeme kontrolovať, či slovo, ktoré vznikne zložením písmena "r a jeho fázy je práve meno toho rámčeka, na ktorý ho chceme položiť.

Korytnačky–obrázky budú mať zrejme tvar, ktorý sme pripravili, zdvihnuté pero, zapnuté Automatické ťahanie, aby sme ich mohli ľahko ťahať po stránke a zapnutú voľbu Určovanie záberu.
Podobne ako v predchádzajúcich aktivitách navrhneme ešte udalosť priĽavomHore, ktorá zabezpečí kontrolu správneho umiestnenia obrázku do príslušného rámika.

Čo musí udalosť priĽavomHore zistiť?

  • či sa korytnačka s niekým prekrýva, najlepšie priamo z niektorým z rámčekov a to s tým na koho miesto patrí – napr. korytnačka, ktorá sa zobrazuje tretím záberom patrí zrejme do rámčeka r3, lebo zábery v obrázku boli v dobrej časovej postupnosti,
    • ak áno, "doskočí" na jeho miesto – pri vytváraní obrázkov rámika a tých, ktoré určujú časovú postupnosť musíme dávať pozor, aby mali Základný bod na rovnakom mieste napr. v strede kresby
    • ak nie, korytnačka sa vráti na svoje pôvodné miesto, teda domov – po vytvorení a umiestnení všetkých korytnačiek–obrázkov a rámčekov tak, ako sa nám to ako dizajnérom páči, vyberme pre každú korytnačku v jej pravoklikom menu položku Zmeň prejdime do záložky Pozícia a každej korytnačke a stlačme tlačidlo Prevezmi, aby za svoju domácu pozíciu považovala tú, na ktorej sa nachádza.
Podľa predchádzajúceho návodu vytvorte 4 korytnačky–rámčeky a 4 korytnačky–obrázky s navrhnutými vlastnosťami a udalosťou. Spomeňte si na kopírovanie korytnačiek pomocou Schránky. Ak neviete nadefinovať udalosť priĽavomHore pozrite sa sem.

Abstrahovanie tried

Z predchádzajúceho programovania vidíme, že všetky 4 korytnačky–obrázky sú rovnaké. Zrejme ste ich získali navrhnutím iba jednej korytnačky a potom jej kopírovaním cez Schránku. Takýmto spôsobom sme vlastne navrhli spoločné vlastnosti všetkých korytnačiek–obrázkov. Ak chceme môžeme teraz prejsť k definovaniu triedy, ktorá bude mať tieto vlastnosti – pero hore, automatické ťahanie, tvar a udalosť priĽavomHore. (Ak nechceme, môžeme zostať aj na tejto úrovni programovania, ale prečo nevyužiť vlastnosti objektovo-orientovaného programovania, ktoré Imagine ponúka).

Začnime nový projekt, ktorý budeme od začiatku celý budovať objektovo. Hneď na začiatku definujme novú triedu obrázokDoHry. Dá sa to urobiť niekoľkými spôsobmi napr. aj v riadku:

? nováTrieda "korytnačka "obrázokDoHry
       [autoŤahanie áno pero ph určovanieZáberu áno tvar (obrázokZoSúboru "kolace)]

Poznámka: umiestnenie príkazov do niekoľkých riadkov je iba kvôli lepšej čitateľnosti v našom vysvetľovaní, pri definovaní udalosti musíme všetky príkazy zapísať do jedného riadku.

Triede dodefinujme udalosť priĽavomHore – vojdime do Pamäte, dvojkliknime na triedu. Otvorí sa nám podobný dialóg ako pre Zmeň hociktorého objektu, ale tento dialóg má iba tri záložky: Udalosti, Premenné a Procedúry. Pridajme udalosť priĽavomHore, ktorá skontroluje, či sme obrázok položili na správny rámik:

ak2 prekrývajúMa <> []
  [ak2 (prvý prekrývajúMa) = (slovo "r záber)
   [nechPoz pre prvý prekrývajúMa [poz]][domov]]
  [domov]

Vysvetlime si príkazy:

korytnačku, na ktorej sme pustili ľavé tlačidlo myši niekto prekrýva?

ak áno: ten, čo ju prekrýva má rovnaké meno ako získame po zložení písmena "r a jej záberu? ak áno: prejde na jeho pozíciu, t.j. na pozíciu rámčeka
ak nie: vráti sa domov ak nie: vráti sa domov Rovnako ako v tom predchádzajúcom projekte vytvorme korytnačky–rámčeky s príslušným tvarom a menami r1, ..., r4 – korytnačku k1, ktorá je v Imagine od jeho spustenia buď zrušme alebo ju môžeme premenovať na r1 a jej priradiť tvar rámčeka.

V riadku teraz vytvorme novú korytnačku–obrázok, ktorá bude objektom (inštanciou) našej novej triedy obrázokDoHry. Pri jeho vytváraní určíme, čo je pre túto konkrétnu inštanciu iné ako bude pre ostatné inštancie tejto triedy. V našom prípade je to zrejme meno tejto korytnačky a jej pozícia:

? nový "obrázokDoHry [meno 1 poz [-160 -90]]

Skúšajme ťahať tento obrázok a umiestňovať ho na niektorý rámček. Keďže tvar korytnačky má záber 1, tak doskočí iba na prvý rámček. Ak sa obrázok pokúšame umiestniť na iný rámček alebo hocikam inam, vráti sa do svojej domovskej pozície.

Skúsme tejto korytnačke zmeniť záber:

? 1'nechZáber 2

a opäť ju ťahajme a umiestňujme do rámikov. Do ktorého teraz dosadne?

Podobne v riadku vytvorme ďalšie 3 korytnačky–obrázky do hry:

? nový "obrázokDoHry [meno 2 poz [-20 -90]]
? nový "obrázokDoHry [meno 3 poz [120 -90]]
? nový "obrázokDoHry [meno 4 poz [260 -90]]

Nakoniec vložme na stránku tlačidlo, ktorým každej korytnačke-obrázku vyberieme iný záber a umiestnime ju do domovskej pozície:

urobTu "pZábery pomiešaj [1 2 3 4]
opakuj 4 [pre poč [nechZáber prvok poč :pZábery domov]]

Vylepšujeme projekt

Určite ste si všimli, že niekoré korytnačky sa kreslia pod inými korytnačkami – zrejme preto, že vznikli skôr ako tie, pod ktorými sa vykresľujú. Pri ťahaní korytnačiek to ruší celkový dojem. Preto navrhnime udalosť priĽavomDolu, ktorá pri kliknutí na korytnačku–obrázok zabezpečí jej presunutie nad všetky ostatné.

Rozmyslime si najprv, či patrí táto udalosť celej triede obrázokDoHry alebo jednotlivým korytnačkám–obrázkom (t.j. či je pre všetky korytnačky–obrázky "rovnaká" alebo či musí byť pre každú z nich iná).

Zrejme všetci vidíme, že je to spoločná udalosť pre celú triedu – prejdime teda do Pamäte a doplňme do triedy obrázokDoHry udalosť priĽavomDolu: 

Kvôli úplnosti sa ešte môžeme pozrieť do Pamäte a dať si zobraziť rodičov všetkých objektov. Tam najlepšie vidíme, čo máme na stránke:
Záver

Toto bolo naše prvé stretnutie s triedami, terminológiou a ich používaním v Imagine. V našom tutoriály nie je miesto na to, aby sme vysvetľovali objektovo-orientované programovanie, preto vám odporúčame prečítať si niečo o OOP v literatúre.

Úlohy

  1. Doplňte do projektu ďalšie obrázky – napr. postup pri kreslení domčeka. Vytvorte premennú, v ktorej budú tieto obrázky uložené v Pamäti. Porozmýšľajte nad tým, komu patrí táto premenná a či niečo nezmeniť v triede obrázokDoHry. (Teraz, keď má každá inštancia niekoľko možností pre svoj tvar nedá sa vlastnosť "tvar" chápať pre celú triedu a tak v triede zrejme zrušíme premennú tvar. Po jej zrušení vyskúšajte iba v riadku vytvoriť novú inštanciu triedy obrázokDoHry. Aký bude mať tvar?) Upravte projekt tak, že tlačidlo Nová hra vyberie niektorú sadu obrázkov – buď koláče alebo kreslenie domčeka.

  2. Doplňte do hry ďalšie sady obrázkov a upravte tlačidlo Nová hra tak, aby vyberalo jednu z nich.

    3. Pomôcka: ak máme globálne premenné "koláče, "domček, "obraz a"značky s obrázkami v udalosti priZapnutí tlačidla t1 využijeme príkazy:
    urobTu "k ?prvok [koláče domček obraz značky]
    opakuj 4 [pre poč [nechTvar obsah :k]]