Piškvorky

Navrhujeme projekt | Analyzujeme projekt | Podrobnejší rozbor projektu | Programujeme | Vylepšenia projektu

Čo budeme robiť

• pripravíme hraciu plochu pre hru Piškvorky pre dvoch hráčov – podobne ako sme to robili v Comenius Logu

• pracovať s korytnačkami, ich tvarmi, definovať pre ne udalosti, pracovať s tlačidlami

• niečo o OOP, vytvárať nové triedy, pracovať s ich udalosťami, meniť tieto udalosti

Navrhujeme projekt V rôznych hrách sa dá počítač použiť ako hracia plocha. Najjednoduchšou a najznámejšou hrou sú zrejme Piškvorky. V najjednoduchšom variante umožňuje počítač jednotlivým hráčom ťahať t.j. nakresliť do niektorého prázdneho štvorčeka jeho znak – krížik alebo krúžok. V ložitejších programoch môže počítač zistiť, ktorý hráč je na rade a iba jemu dovolí ťahať. Ďalším vylepšením tohto programu môže byť, že počítač vie zistiť, ktorý hráč vyhral a ukončiť hru. No a ak niekde nájdete algoritmus ako najlepšie hrať Piškvorky, môžete počítač naprogramovať tak, aby bol zdatným súperom v tejto známej hre. Ako prvý budeme programovať najjednoduchší variant, potom môžeme projekt vylepšovať.

Analyzujeme projekt

Každý štvorček v hre môže mať jeden z obrázkov – prázdny štvorček, štvorček v ktorom je červený krúžok alebo štvorček v ktorom je modrý krížik.
Každý štvorček reaguje na stlačenie ľavého a pravého tlačidla myši. (Hráči sa pri myši menia. Ak máte joystick, jeden z hráčov môže ťahať myšou a druhý joystickom – toto riešenie si niekedy tiež ukážeme.)
Štvorček reaguje nasledujúcim spôsobom:

• ak je štvorček prázdny a ak je na ňom stlačené ľavé tlačidlo myši, zmení sa na štvorček s červeným krúžkom
• ak je štvorček prázdny a ak je na ňom stlačené pravé tlačidlo myši, zmení sa na štvorček s modrým krížikom

Každý štvorček v hre bude zrejme korytnačka s príslušným tvarom s 3 zábermi. Zábery sú rovnako veľké, pri ich kreslení sa môžeme sa rozhodnúť akú veľkosť budú mať v našej hre. Všetky zábery majú čierne okolie, v druhom zábere je nakreslený červený krúžok, v treťom modrý krížik. Nakreslime ich v LogoMotion , zapíšme tento obrázok na disk ako súbor piskvorky.lgf a zapamätajme si ich veľkosť. Našej hre je na stránke takýchto korytnačiek "veľa" podľa toho, akú veľkú hraciu plochu chceme vytvoriť. Reagovanie na tlačidlá myši budú zrejme udalosti priĽavomDolu, priPravomDolu na týchto korytnačkách-štvorčekoch.

Vytvoriť 100 korytnačiek pre hraciu plochu 10x10 klikaním a kopírovaním by bolo zrejme dosť namáhavé a nudné. Určite každého napadne, že sa to musí dať urobiť programom...

Ešte predtým, ako ich začneme vytvárať si uvedomme, že všetky tieto korytnačky sú "skoro" rovnaké – majú rovnaký tvar, rovnako reagujú na kliknutia myšou, odlišujú sa však vo svojej pozícii – sú umiestnené vedľa seba tak, aby vytvorili štvorcovú sieť.

Takto sme urobili prvý krok k objektovo orientovanému programovaniu – našli sme spoločné vlastnosti novej triedy objektov. (Nebudeme sa tu rozpisovať o zásadách OOP. Navrhujeme, aby si každý z Vás, prečítal niečo v literatúre a samozrejme v helpe k Imagine). V našich aktivitách budeme niektoré z vlastností OOP využívať pri navrhovaní nových tried a pokúsime sa intuitívne pochopiť základné princípy tohto programovania.

Vráťme sa k našim korytnačkám–štvorčekom. Keď sme už objavili, čo majú všetky spoločné, vytvorme triedu, ktorá bude mať tieto ich spoločné vlastnosti.

Najprv vytvorme novú triedu, ktorá nebude mať žiadne špecifické vlastnosti. Tieto vlastnosti dopíšeme v prítulnejšom prostredí editora a robíme je to len z čisto estetického dôvodu, aby sme nemuseli toľko písať do riadku - do jedného riadku sa všetky vlastnosti novej triedy nezmestia celý príkaz sa tak stáva neprehľadný)
? nováTrieda "korytnačka "štvorec []
 

Pozrime sa do pamäte (stlačme F4 alebo  v hlavnom paneli): Vidíme, že vznikla nová trieda s menom štvorec a tým, že je pri nej obrázok bledej korytnačky vidíme aj to, že je to potomok triedy korytnačka. Dvojkliknime na túto korytnačku. Otvorí sa nám podobný dialóg na aký sme zvyknutí z pravoklikového menu korytnačiek, avšak má len 3 záložky: Udalosti, Premenné a Procedúry.

Do nich budeme definovať to, čo sme si vytipovali ako spoločné vlastnosti tejto triedy, t.j. do záložky Udalosti zrejme pridáme: udalosť priĽavomDolu, do ktorej zapíšeme zmenu záberu nášho obrázka na druhý záber vtedy, keď bol doteraz zobrazený záber 1, teda prázdny štvorček: ak zaber=1 [nechZaber 2] udalosť priPravomDolu, do ktorej zapíšme zmenu záberu nášho obrázka na tretí záber: ak zaber=1 [nechZaber 3] Korytnačky-štvorčeky majú ešte rovnaký tvar – prejdime do záložky Premenné a pridajme novú premennú tvar. Zatiaľ ju nechajme prázdnu – chceme do nej priradiť obrázok a to sa žiaľ v tomto dialógu nedá. Pekne sa to dá v riadku, kde zapíšme: ? štvorec'nechTvar obrázokZoSúboru "piskvorky Nezabudnime, že predtým sme vytvorili v LogoMotion súbor piskvorky.lgf. Miesto, kde sme súbor zapísali môžeme aj nalistovať v dialógu, keď namiesto zadania mena súboru za príkazom obrázokZoSúboru stlačíme tlačidlo F9. Pozrime sa opäť do dialógu triedy štvorec a v záložke Premenné sa presvedčme, že tvar našich korytnačiek bude taký, ako sme si nakreslili:

Toto všetko sa dá urobiť aj v príkazovom riadku (pozor nie však teraz, keď už trieda štvorec existuje, ale môžete si vytvoriť nový projekt a vyskúšať to v ňom), keď do jedného riadku (to, že príkazy sme v našom prípade napísali do viacerých riadkov je iba kvôli prehľadnosti zápisu pri vysvetľovaní) zapíšeme:
? nováTrieda "korytnačka "štvorec
   [tvar (obrazokZoSuboru "piskvorky)
    udalost'priLavomDolu [ak zaber=1 [nechZaber 2]]
    udalost'priPravomDolu [ak zaber=1 [nechZaber 3]]
   ]

Vyskúšajme, či sa vytvárajú korytnačky s dobrými vlastnosťami:
? nový "štvorec [poz [-160 130]]
? nový "štvorec [poz [-128 130]]

Vytvorili sme dve inštancie triedy štvorec, každej z nich sme určili pozíciu, na ktorej sa má vytvoriť – rozdiel medzi x-ovými súradnicami je 32, čo je veľkosť nášho štvorčeka, veľkosť vašich štvorcov je zrejme iná, takže súradnice upravte tak, aby boli štvorčeky vedľa seba.

Kliknime na jeden z nich ľavým a na druhý z nich pravým tlačidlom myši – ich obrázky sa zmenia na krúžok a krížik.

Takto by sme mohli pokračovať, ale zrejme bude jednoduchšie vytvoriť príkaz, ktorým sa našich 100 korytnačiek vygeneruje.
Zrušme najprv všetky 3 korytnačky, ktoré doteraz máme (napr. tak, že na ne pravoklineme a vyberieme Zruš) alebo v riadku:
? zrušObjekt [k1 k2 k3]

Príkaz nech sa volá hraciaPlocha a začnime ho programovať:
? up "hraciaPlocha

Otvorí sa nám editor s procedúrami hlavného okna, do ktorého zapíšeme:
viem hraciaPlocha
  urobTu "x -160
  urobTu "y 130
  opakuj 10
   [opakuj 10 [nový "štvorec (zoznam "poz zoznam :x :y) urob "x :x+32]
    urob "x -160 urob "y :y-32]
koniec

Všetky príkazy by nám mali byť jasné buď z Comenius Loga alebo z toho, ako sme experimentovali s vytváraním nových inštancií triedy štvorec v riadku.

Vyskúšajme hraciu plochu a klikajme na jednotlivé štvorčeky – menia sa buď na krížik alebo na krúžok podľa toho, ktorým tlačidlom myši na ne klikáme. Týmto sme najjednoduchší variant hry doprogramovali.

Ešte pridajme na stránku tlačidlo, ktorým sa bude začínať nová hra. Jeho udalosť priZapnutí môže vždy zrušiť všetky korytnačky a vytvárať nové, ale jednoduchšie a rýchlejšie je, keď všetkým korytnačkám zmeníme záber na prázdny štvorček:
pre všetky [nechZáber 1]

Vylepšenia projektu

2. V globálnej premennej si budeme pamätať, ktorý z hráčov je na rade a pri nasledujúcom kliknutí sa podľa toho zmení záber tvaru korytnačky. Uvedomme si ešte, že už nebudeme potrebovať kliknutie ľavým aj pravým tlačidlom, lebo vždy sa dá kliknúť len tým, ktorý hráč je na ťahu.

Teraz, keď treba meniť niečo všetkým korytnačkám veľmi dobre využijeme to, že sú inštanciami našej vlastnej triedy štvorec. Prejdime do Pamäte, dvojkliknime na triedu štvorec, v dialógu prejdime do záložky Udalosti. Zrušme udalosť priPravomDolu a zmeňme udalosť priĽavomDolu:
ak záber = 1
  [ak2 :naŤahu = "c
    [nechZáber 2 urob "naŤahu "m]
    [nechZáber 3 urob "naŤahu "c]
  ]
Príkazy sme teraz opäť rozdelili do niekoľkých riadkov, ale pri definovaní udalosti musia byť samozrejme v jednom riadku, ktorý je určený pre túto udalosť.

V riadku ešte vytvorme premennú naŤahu, v ktorej určíme, ktorý hráč – modrý alebo červený – je na ťahu ako prvý:
? urob "naŤahu "c

Skúšajme klikať na jednotlivé štvorčeky – striedavo sa na štvorčeku, na ktorý sme klikli zobrazuje krížik a krúžok.

Na stránku môžeme ešte pridať dve tlačidlá s obrázkami krížika a krúžku, ktoré budú aj graficky svojím zatlačením zobrazovať, ktorý hráč je na rade. Tlačidlá vytvorme ako prepínače z rovnakej skupiny, napr. 1, odškrtnime možnosť Dovolí vypnúť všetky, zrušme na nich Popis, vyberme im príslušný záber zo súboru piskvorky.lgf (dávajme si pozor, aby nám tam neostali všetky 3 zábery) a do udalosti priĽavomDolu doprogramujme ich zatláčanie do udalosti priĽavomDolu triedy štvorec – predpokladáme, že tieto tlačidlá majú mená t2 a t3:
ak zaber = 1
  [ak2 :naŤahu = "c
    [nechZaber 2 urob "naŤahu "m t3'nechZapnutie "áno]
    [nechZaber 3 urob "naŤahu "c t2'nechZapnutie "áno]
  ]
 

Na ďalšie vylepšovania tejto hry by sme už museli vedieť oveľa lepšie programovať, ako vieme doteraz iba z nášho tutoriálu. Dúfame však, že niekoho táto hra natoľko zaujme, že nájde algoritmus pre počítač a doprogramuje ho.