Projekt Hladná korytnačka na webe

Čo budeme robiť

  • definovať ďalšie udalosti, pracovať s dvoma korytnačkami, zapisovať projekt ako web stránku, naučíme sa nový príkaz prekrývajúMa

Čo už musíme vedieť

  • základné príkazy korytnačej grafiky, pridávať a pracovať s tlačidlami, pridávať a pracovať s textami

Naučíme sa

  • ako vytvoriť projekt, s ktorým môže každý pracovať pomocou internetového prehliadača, napr. Internet Explorer alebo Netscape

Vymyslime projekt...

Ak chceme dať nejaký projekt na web, bolo by dobre, aby tento projekt každý, kto príde na našu stránku chcel použiť. Aby sa s ním chcel hrať, aby videl, čo vieme naprogramovať... Zatiaľ nemáme veľa vedomostí a skúseností s Imagine takže najjednoduchšie bude, ak využijeme korytnačky, ich tvar, klikanie na ne, tlačidlá a texty na stránke – to všetko sme sa naučili v minulých dieloch tutoriálu.

Projekt je veľmi jednoduchý: korytnačka si hľadá niečo na zjedenie a na neďaleko uvidela kúsok šalátu. Úlohou hráča je dostať korytnačku k tomuto šalátu.

Keď hráč klikne ľavým tlačidlom na korytnačku, pohne sa o 30 krokov. Keď na ňu klikne pravým tlačidlom, otočí sa o 45 stupňov. Keď korytnačka nájde šalát, objaví sa pri nej nápis MŇAM. Na stránke sa ešte nachádza tlačidlo Nová hra, ktoré umiestni korytnačku aj šalát na iné miesto na stránke. Okrem toho projekt obsahuje ešte aj text, v ktorom je zapísané, čo je úlohou hráča.

Analyzujme projekt

  1. Korytnačka, ktorá si hľadá potravu a ktorá sa posúva kliknutím na svoj tvar, musí mať zadefinovanú udalosť priKliknutí (Alebo udalosťpriĽavomDolu – tieto dve udalosti sa od seba líšia tým, že kliknutie znamená stlačenie a následné pustenie ľavého tlačidla myši a udalsoť priĽavomDolu znamená iba stlačenie ľavého tlačidla. Teda udalosť priĽavomDolu sa vykoná skôr ako udalosť priKliknutí.). Ďalej musí mať zadefinovanú udalosť pri pravomDolu, ktorá zabezpečí jej otáčanie
  2. Šalát, ku ktorému treba dostať korytnačku bude tiež korytnačka s tvarom šalátu, ktorý si nakreslíme alebo nájdeme na internete.
  3. Nápis MŇAM môže byť text, ktorý bude skrytý a ukáže sa na tom mieste a iba vtedy, keď korytnačka príde k šalátu.
  4. Tlačidlo Nová hra bude mať definovanú udalosť priZapnutí, v ktorej umiestni obe korytnačky na náhodné miesto a skryje text MŇAM.
  5. Nakoniec bude v projekte text s oznamom pre hráča, čo je jeho úlohou v tomto projekte.
 

Postupne programujme

  1. Kliknime pravým tlačidlom na korytnačku k1, vyberme Zmeň k1 , na prvej strane odškrtnime Pero dolu a prejdime do záložky Udalosti. Tu vyberme tlačidlo Pridaj v ďalšom dialógu vyberme udalosť priĽavomDolu, stlačme OK. Do riadku udalosti zapíšme zatiaľ iba príkaz do 30 a aj tento dialóg ukončime tlačidlom OK. Teraz skúsme klikať na korytnačku na stránke: pohybuje sa dopredu 30.
  2. Udalosť priPravomDolu doprogramujeme neskôr – nezabudnime si všímať, aké budú mať mená ďalšie pridané objekty, t.j. druhá korytnačka-šalát a text s oznamom MŇAM.
  1. Vyberme tlačidlo  a položme novú korytnačku na stránku. V jej pravoklikovom menu vyberme Zmeň k2 a v dialógu tlačidlo Tvar. Otvorí sa dialóg Obrázky, v ktorom môžeme nájsť obrázok šalátu – predpokladáme, že obrázok šalátu nájdete na internete a zapíšete si ho na disk. Korynačke nezabudnite vypnúť kreslenie - položka Pero dolu.
    1. Vyberme tlačidlo  a položme na stránku text, zapíšme do 7neho slovo MŇAM. Môžeme mu zmeniť font, prípadne farbu. Kliknime na text pravým tlačidlom myši, vyberme Zmeň text1 a v dialógu zaškrtnime položku Priesvitné pozadie, dialóg ukončime OK. Nakoniec tlačidlom ukončime editovanie textu. Text zatiaľ vidno, to ale nevadí, na začiatku hry ho potom ukryjeme.
    1. Vyberme  a položme na stránku toto nové tlačidlo. V jeho pravoklikovom menu vyberme Zmeň t1, do Popisu zapíšme napr. Nová hra a do udalosti priZapnutí príslušné príkazy na ukrytie text1 a náhodné umiestnenie oboch korytnačiek: text1'skryMa k1'nechPoz ? k2'nechPoz ?

    2. Dialóg ukončime tlačidlom OK.
    1. Opäť vyberme tlačidlo , umiestnime ho niekde na stránku a zapíšme do neho popis projektu, napr.

    2. Na lúke sa nachádza hladná korytnačka. Pomôž jej prísť k šalátu.
      Pohyb - klikni na ňu ľavým tlačidlom.
      Otočenie - klikni na ňu pravým tlačidlom.
    1. Nakoniec sa vráťme do pravoklikového menu korytnačky k1, vyberme Zmeň k1, prejdime do záložky Udalosti. Do udalosti priĽavomDoludopíšme časť, v ktorej zistíme, či už našla šalát: využijeme základný príkaz prekrývajúMa, v ktorom zistíme, či potom ako sa pohla dopredu, nenašla šalát, t.j. či prekrýva korytnačku k2. Ak áno, premiestnime text1 na jej pozíciu a ukážeme ho: do 30 ak prekrývajúMa=[k2][text1'nechPoz poz text1'ukážMa]
    1. Teraz vyberme tlačidlo Pridaj, vyberme udalosť priPravomDolu a do nej zapíšme otočenie korytnačky, napr. o 45 stupňov: vp 45. Dialóg ukončime tlačidlom OK.
    Vyskúšajme projekt...

    Klikajme na korytnačku ľavým tlačidlom a posúvajme ju, pravým tlačidlom a otáčajme ju. Keď sa týmto posúvaním dostane k šalátu, ukáže sa nápis MŇAM. Keď stlačíme tlačidlo Nová hra, korytnačky sa presunú na náhodné miesto.

    Ak korytnačku nevidieť, keď nájde šalát alebo pri novom umiestnení nevidieť ani korytnačku alebo šalát:
    objekty na stránke majú svoje poradie, v ktorom sa zobrazujú. Ak zmeníme toto poradie, bude ich vidieť – zapíšme do príkazového riadku:
    ? zmeňPoradie [text2 k2 k1 text1]

    Uložme projekt pre web

    Z menu Súbory vyberme položku Uložiť pre web, v dialógu môžeme zmeniť Nadpis, Sprievodný text, vybrať adresár (zostaňme zatiaľ v adresári Web, ktorý je podadresárom inštalačného adresára Imagine) a hlavne nezabudnime zapísať názov súboru napr. hladnaKor

    Pozrime si projekt pod web prehliadačom

    Ukončime Imagine, spustime web prehliadač napr. Internet Explorer, z jeho menu File vyberme Open. Vyberme tlačidlo Browse a prejdime do adresára Web, ktorý je podadresárom adresára Projekty, v ktorom je nainštalovaný Imagine – ak ste nič nemenili v inštalácii je to adresár C:\\Program Files\Imagine\Projekty\Web\ V ňom nájdeme HTM súbor hladnaKor, ktorý sme si zapísali. Vyberme tlačidlo Open a v predchádzajúcom dialógu tlačidlo OK. Načíta sa nám náš projekt, s ktorým sa môžeme hrať tak, ako keď bol otvorený v Imagine.

    Napíš kamarátom, že si pripravil takýto projekt

    Popros rodičov či nemajú možnosť dať projekt na Internet, teda napr. na server kde majú svoju www stránku. Ak áno, treba dať na tento server 2 súbory – v našom prípade hladnaKor.IMP a hladnaKor.HTM. Rodičia ti potom povedia presnú www adresu, kde sa bude dať s tvojim projektom hrať.

    Povedz alebo napíš e-mail svojim kamarátom, kde je tento súbor. Ak nemajú Imagine, musia ešte predtým ako ho spustia navštíviť stránku https://www.imagine.input.sk/plugin.html a odtiaľ si nainštalovať program - Imagine plugIn. Potom sa už môžu hrať so všetkými tvojimi projektami, ktoré pripravíš v Imagine.