Úvod do hodiny

Konzole na které budeme pracovat:

PICO-8 Education Edition

Odkazy na poslední verze z lekce jsou v příloze

Co budeme muset umět napsat

Krom písmen, čísel a mezer nám bude s zatím stačit pár znaků:

• Uvozovky - "
• Závorky - ()
• Tečky a čárky - ., ,
• Operátory - +, -, =, možná *, /
• Podtržítka - _

A mazat:

• Doleva - Backspace
• Doprava - Delete

Zkouška

Musíme být schopní napsat např. toto:

hrac_x = 0
hrac_x += 1
print("Zdarec " .. hrac_x)

Zkus si to tady:

První pokusy

Konzole PICO-8 má herní editor a příkazovou řádku. Mezi nimi se přepínáme pomocí klávesy ESC (vlevo nahoře na klávesnici).

Příkazová řádka

• LOAD - Načti hru (v Edu edici se otevře okno na načtení souboru)
• SAVE - Ulož hru (v Edu edici se stáhne soubor)
• RUN - Spusť hru

Ostatní zatím nepotřebujeme

Ovládání

• ESC - Přepni mezi příkazovou řádkou a editorem
• Alt ← / Alt → - Přepínání záložek

První kód:

Do editoru napište:

function _init()
 print("zdarec")
end

Pak se přepneme do příkazové řádky a pustíme to:

Zmáčknout ESC, napsat RUN a zmáčknout Enter.

> RUN
ZDAREC
>

Vyčištění obrazovky

Aby se nám obrazovka vyčistila, tak použijeme funkci CLS():

function _init()
 cls()
 print("zdarec")
end

Vykreslení obrázku

Na nakreslení obrázku/sprajtu použijeme spr(n) kde spr je jako “SPRite” a n je číslo.

function _init()
 cls()
 print("zdarec")
 spr(1)
end

Pozice na obrazovce

Obrázek nám překryl textem (nebo naopak, podle toho v jakém pořadí jsme napsali funkce print a spr.

Abychom posunuli obrázek, tak můžeme za číslo sprajtu (ta jednička v spr(1)) napsat dvě čísla:

• jak daleko doprava se má posunout sprajt
• jak daleko dolů se má posunout sprajt

Pokud bysme chtěli sprajt posunout o 10 (číslo je v pixelech) doprava (souřadnice X) a o 20 dolů (souřadnice Y), tak musíme přepsat kód na:

function _init()
 cls()
 print("zdarec")
 spr(1, 10, 20)
end

Úkoly navíc

• Posuň sprajt co nejvíc vpravo a dolů pro jaké můžeme použít aby byl sprite vidět.
• Zjisti jaká je velikost sprajtu v pixelech.
• Kolik pixelů má obrazovky PICO-8 na šířku a na výšku? (tip: experimentuj s programem)
• Použij taková čísla pro pozici (dva nové parametry pro posun doprava - X a dolů Y) tak, aby byl obrázek uprostřed obrazovky

Proměnné a pohyb

Názvy funkcí

Náš aktuální program / hra hned skončí, ale my chceme aby běžela pořád. Je to proto, že jsme udělali funkci _init která se spustí jen jednou na začátku. Existuje ale název funkce která se spustí každou chvilku.

Takže pokud ji přejmenujeme na _draw, tak nám hra poběží pořád (dokud nezmáčkneme Esc):

function _draw()
 cls()
 print("zdarec")
 spr(1, 60, 60)
end

Jak poznáme, že se _draw spouští pořád?

Zatím jsme vypisovali a kreslili pořád to stejné, takže nepoznáme jak často se náš kód pouští. A na to si musíme něco uložit.

Proměnné

Proměnná je něco jako baťůžek kam si můžeme uložit co chceme a pak se na to zase podívat. Má nějaký název (podle čeho je rozeznáme když jich bude víc) a “hodnotu” – to je to, co jsme si uložili dovnitř.

Když si náš baťůžek pojmenujeme třeba n a chceme si do něj uložit jedničku, tak stačí napsat:

n=1

A když budeme chtít použít hodnotu kterou máme v baťůžku uloženou, tak jen napíšeme jeho název místo toho, co máme vevnitř. Na vypsání čísla použijeme funkci print kterou už v kódu máme:

n=1

function _draw()
 cls()
 print(n)
 spr(1, 60, 60)
end

Když kód spustíme, tak ze místo zdarec vypíše 1, protože se místo názvu proměnné n použije to, co jsme do ní dali (1).

Note

Jak byste to udělali aby se místo čísla 1 napsalo písmenko n?

Tip

Podívejte se jak jsme vypsali zdarec

Tak jsme vypsali 1, ale to nám nic neřekne. Co my můžeme udělat je, že si to číslo pokaždé změníme. A to vždycky když jsi proměnnou vypíšeme!

Stejně jak jsme si do proměnné uložili číslo, tak si do ni můžeme uložit hodnotu proměnné.

Tento program taky vypíše 1:

n=1
p=n

print(p)

Tento program vypíše 3 protože 1 + 2 = 3:

n=1
p=n+2

print(p)

A tento program vypíše taky 3:

n=1
n=n+2

print(n)

Takže co mi uděláme je, že n pod funkcí print hned zvětšíme o jedničku:

n=1

function _draw()
 cls()
 print(n)
 n=n+1
 spr(1, 60, 60)
end

Procvičení

Zkuste si v programu udělat tyhle změny:

• Všechny čísla přepište na proměnné, použijte názvy sprite, x a y.
• Vytvoření proměnných (nastavení na první hodnotu) udělejte ve funkci _init. Tip: napište novou, funkci _draw totiž budeme dál potřebovat.

Tip

Po každé změně zkuste, že hra funguje pořád stejně!

Konečně pohyb

Jako poslední věc udělejte to, že po zavolání funkce spr proměnné X a Y změníte o malý kousek (přičtěte nebo odečtěte 1 nebo 2).

Podmínky a tlačítka

Od této hodiny se nám může hodit Cheat Sheet na PICO-8, je sice v angličtině, ale my stejně budeme používat jen malou část a jen pro připomenutí.

Organizace kódu

Protože budeme měnit více a více věcí, hodí se nám mít v kódu trošku pořádek.

V PICO-8 jsou nejčastěji použity tři funkce, at to:

• _init():
  • pustí se jednou na začátku
  • používá se na nastavení počátečních věcí
• _update():
  • pouští se 30× za vteřinu
  • používá se na reakci na tlačítka, pohyb, atd.
• _update60():
  • pouští se 60× za vteřinu
  • jinak stejná jako _update()
  • my ji nebudeme potřebovat
• _draw():
  • pouští se jednou za vykreslení obrazovky
  • používá se na vykreslení sprajtú, obrázků, mapy, pixelů atd.

My už dvě z těchto funkcí známe. Náš kód by se dal ale pěkně rozdělit mezi _init(), _update() a _draw() pěkně logicky.

Na konci minulé lekce jsme měli, i s pohybem sprajtu, něco jako toto:

function _init()
 sprite=1
 x=60
 y=60
 n=1
end

function _draw()
 cls()
 print(n)
 n=n+1
 spr(sprite, x, y)
 x=x+1
 y=y-2
end

Pokud ve funkci _draw() ponecháme jen řádky které vykreslují něco na obrazovku a všechny ostatní přesuneme do nové funkce _update(), tak bude náš kód vypadat nějak takto:

function _init()
 sprite=1
 x=60
 y=60
 n=1
end

function _update()
 n=n+1
 x=x+1
 y=y-2
end

function _draw()
 cls()
 print(n)
 spr(sprite, x, y)
end

Tip

Tady si můžete procvičit standardní práci s textem jako je označování (Shift + ←→↑↓), kopírováni (Ctrl + C, vyjímání Ctrl + X a vkládání Ctrl + V) které funguje jako na většině míst kde se upravuje text.

Čtení stavu tlačítka

Na to abysme zjistili jestli je zmáčknuté tlačítko, tak můžeme použít funkci btn() které v závorkách řekneme na jaké tlačítko se ptáme. Pokud se tedy budeme chtít zeptat na šipku doprava, tak tu v PICO-8 editoru napíšeme jako velké písmeno “R” (od anglického “right”, tedy “vpravo”), tudíž Shift + R. V kódu se nám potom objeví šipečka doprava, volání funkce bude tedy potom vypadat asi takto:

btn(➡️)

Tato funkce ale neudělá nic jiného, než že “vrátí” jestli je šipka doprava zmáčknutá, pokud ano, tak true, jinak false. To, že funkce něco “vrátí” (nějakou hodnotu) znamená, že se dá použít podobně jako proměnná. Pojďme si ji tedy vypsat místo našeho čísla n. Tu už nebudeme potřebovat a můžeme ji z našeho kódu smazat:

function _init()
 sprite=1
 x=60
 y=60
end

function _update()
 x=x+1
 y=y-2
end

function _draw()
 cls()
 print(btn(➡️))
 spr(sprite, x, y)
end

Když teď pustíme hru (můžeme použít zkratku Ctrl + R) tak nám sice sprajt odjede, ale v levém horním rohu bude nápis “FALSE” který se změní na “TRUE” kdykoliv budeme držet šipku doprava!

Reakce na tlačítka – podmínky

Teď přijde nejsložitější část dnešní lekce, ale taky ta nejlepší.

V naší funkci _update() pohybujeme naším sprajtem doleva/doprava a nahoru/dolů (podle toho jaká čísla jsme přičetli nebo odečetli od proměnných X (to jak daleko je sprajt od levé strany obrazovky) a Y (to jak daleko je shora obrazovky).

Pojďme upravit tuto funkci tak, aby se nám sprajt posouval jen vodorovně. To znamená, že nebudeme měnit hodnotu proměnné Y (tento řádek smažeme) a necháme jen řádek kde měníme X.

function _update()
 x=x+1
end

Teď se nám sprajt bude pohybovat jen po ose X, ale bude to dělat pořád a vždy uteče z obrazovky. Pokud bychom chtěli aby se hodnota X změnila jen když držíme tlačítko doprava, musíme použít “podmínku”.

Základní podmínkou ve většině programovacích jazyků je if, což znamená “jestli”. Když chceme napsat “jestli je zmáčknuté tlačítko doprava” známe už většinu toho co potřebujeme:

• jestli – if
• je zmáčknuté tlačítko doprava – btn(➡️)

a když se podíváme na náš Cheat Sheet (odkaz na začátku stránky) tak nápověda která začíná if ... tak jsou to dva řádky. První z nich, IF (TRUE) CLS(), je zkrácená verze která nám časem může pomoci, ale zatím ji vynecháme. Druhá verze:

if <PODMÍNKA> then
 -- IF BLOK
elseif <PODMÍNKA> then
 -- ELSEIF BLOK
else
 -- ELSE BLOK
end

Note

Cokoliv je napsáno za dvěma pomlčkami -- jsou jen komentáře. To znamená něco, co je tam napsáno jen pro lidi co kód čtou, ale počítač to přeskočí.

Cokoliv je napsáno na řádku místo -- IF BLOK se pustí (vykoná) jen pokud je <PODMÍNKA> pravdivá.

Bloky ELSEIF a ELSE teď nebudeme potřebovat, ale musíme v programu nějak označit kde kód podmínky končí. Na to, stejně jako u funkcí, použijeme klíčové slovo end.

V porovnání s naším if btn(➡️) nám chybí jen tři věci:

• then – klíčové slovo za podmínkou,
• “IF BLOK” – kód který chceme aby se pustil “jen někdy” (podmíněně) a
• end – ukončení takzvaného if-u.

Naše podmínka bude to, jestli je zmáčknuté tlačítko doprava, neboli pravá šipka. A náš kód který chceme aby se pustil podmíněně je ten řádek kde měníme X. Pokud tedy nad řádek kde modifikujeme X napíšeme naše if btn(➡️) then a pod něj end, bude naše funkce _update() vypadat nějak takto:

function _update()
 if btn(➡️) then
  x=x+1
 end
end

Pusťte hru a zkuste co dělá šipka doprava. Měla by hýbat se sprajtem doprava.

Warning

Někomu se může sprajt pohybovat na druhou stranu, podle toho jak původně modifikovali proměnnou X, pokud jde na špatnou stranu, zkuste přijít na to proč. Můžou pomoci v Cheat Sheetu naznačené souřadnice obrazovky.

Finální úkoly

Teď máme tři řádky které se starají o pohyb doprava. Přidání řádků které by způsobily pohyb doleva je docela jednoduché. Zkuste vymyslet sami jak to udělat. Když si nebudete vědět rady, tak tady je pár tipů. Zkuste jich přečíst co nejméně:

• Stačí nám upravit funkci _update().
• Myší (nebo pomocí Shift-u a šipek) označte tři řádky (od if až do end), zkopírujte (Ctrl + C), šipkami (nebo myší) najeďte mezi ty dva end-y a zkopírované řádky vložte (Ctrl + V) a upravte rozdíly mezi pohybem doprava a doleva.
• Rozdíly jsou dva.
• První rozdíl je tlačítko na které chceme reagovat.
• Druhý rozdíl je v tom co chceme udělat s proměnnou X.
• Místo tlačítka vpravo chceme kontrolovat tlačítko vlevo. Šipku vlevo napíšeme pomocí Shift + L (“L” jako “left” – z anglického “vlevo”).
• Proměnnou X nechceme zvětšovat, ale zmenšovat, takže místo + napíšeme -.

Funkce _update() by těď měla vypadat asi takhle:

function _update()
 if btn(➡️) then
  x=x+1
 end
 if btn(⬅️) then
  x=x-1
 end
end

Kdo chce si teď může vyzkoušet doplnit pohyb nahoru a dolů.

Tip

Zkuste sami přijít na všechno co je potřeba doplnit.

Tipy na přidání pohybu nahoru a dolů:

• Zkopírujte si (podobně jako předtím) všech šest řádků pohybu doleva a doprava a upravte je.
• Šipky nahoru a dolů se píšou podobně, nahoru je anglicky “up” a dolů je “down”.
• Nový pohyb není po ose X.
• Pohyb nahoru bude kontrolovat tlačítko ⬆️ (Shift + U).
• Pohyb dolů tlačítko ⬇️ (Shift + D).
• Pohyb nahoru je směrem k hornímu řádku kde je Y nula, takže jej potřebujeme zmenšovat, takže potřebujeme y=y-1.
• Pohyb dolů je opačně jako pohyb nahoru, takže potřebujeme y=y+1.

Nakonec by naše “hra” s celou funkcí _update() měla vypadat takto:

Tip

Podívejte se i na to jak jsou řádky odsazené (kolik mezer mají zleva) a jak jsou mezi nimi volné řádky. Mít pořádek v kódu znamená lepší orientaci až s ním budeme dále pracovat!

function _init()
 y=60
 x=60
end

function _update()
 if btn(➡️) then
  x=x+1
 end
 if btn(⬅️) then
  x=x-1
 end
 if btn(⬆️) then
  y=y-1
 end
 if btn(⬇️) then
  y=y+1
 end
end

function _draw()
 cls()
 spr(1,x,y)
 print(btn(➡️))
end

Náhodná čísla

Příprava na začátek

Na začátek si připravíme pár změn:

• Přidáme si další sprajt na pozici 2 (takže v druhé “záložce” budou dva obrázky vedle sebe).
• Nachystáme si další dvě proměnné, nazvěme je třeba px a py (jako “padající x” a “padající y”) a nastavíme je tak, aby ukazovaly doprostřed vršku obrazovky (pokud si nepamatujete velikost, tak je v Cheat Sheetu).
• Nový sprajt vykreslíme po vykreslení našeho stávajícího. Pamatujte, že všechny tři parametry nového volání funkce spr() (na novém řádku, nepřepisujte tu co už máme) budou jiné:
  • místo sprajtu 1 budeme vykreslovat sprajt 2,
  • první pozice nebude x, ale nová proměnná px a
  • druhá pozice nebude y, ale nová proměnná py.
• Jako poslední věc, náš původní sprajt nakreslíme doprostřed spodku obrazovky.

Udělali jsme hodně změn, pro kontrolu náš kód pro změněné funkce zopakujeme.

Funkce _init():

function _init()
 x=60
 y=120
 px=60
 py=0
end

Funkce _draw():

function _draw()
 cls()
 spr(1,x,y)
 spr(2,px,py)
 print(btn(➡️))
end

Padání druhého sprajtu

Padání dolů

Pamatujete si jak jsme udělali, že se nám sprajt pohyboval sám? Stačí měnit jeho pozici ve funkci _update() bez jakékoliv podmínky (bez if-u). Zkusme ho poslat jen dolů.

To znamená, že jeho pozici Y (máme ji uloženou v proměnné py) pokaždé zvětšíme o jedničku. A protože to je změna pozice a není to vykreslování, tak tuto změnu přidáme do funkce _update():

py=py+1

Reset pozice

Hra už může začít být zábavná, ale sprajt jednou spadne dolů a zmizí. Jakou hodnotu má proměnná py když přestane být sprajt vidět? Výška obrazovky je 128 pixelů, takže jakmile je posunutý o 128 pixelů dolů, tak je mimo obrazovku.

A protože to se stane jen někdy, tak nám to říká, že bychom mohli použít “podmínku” a když spadne moc nízko, tak ho zase přesunout nahoru.

Protože neměníme vykreslování, ale pozici, tak tuto změnu uděláme ve funkci _update(). Pro zopakování podmínka vypadá takto:

if <podmínka> then
 -- co se má udělat když je <podmínka> pravda
end

To, co chceme udělat je, že nastavíme jeho pozici zpátky tam kde začínal. Protože jsme měnili jen jeho Y pozici, tak ji stačí nastavit zpátky na nulu: py=0.

No a podmínka kdy to chceme udělat je jen pokud je py větší než 127. Toto můžeme napsat přímo jako py > 127. Takže naše _update() funkce bude vypadat asi takto:

function _update()
 -- tady jsou reakce na tlačítka
 py=py+1
 if py > 127 then
  py=0
 end
end

Teď bude padat druhý sprajt shora dolů a jakmile spadne mimo obrazovku, objeví se znovu nahoře.

Jak fungují náhodná čísla

Dost často je větší zábava když je hra méně předvídatelná. Třeba kdyby náš sprajt nepadal pořád na stejném místě, ale svoji pozici X (tedy proměnnou px) měl nastavené na náhodné číslo. Zvlášť pokud budeme chtít aby bylo trošku zábavné ho chytat. Na to abychom mohli získat nějaké náhodné číslo slouží funkce rnd(<maximum>). Když jí dáme nějaké maximum, tak nám tato funkce “vrátí” (dá nám nazpátek) náhodné číslo mezi nulou a maximem.

Použijeme naše volání funkce print() abychom si to vyzkoušeli. Všichni změníme naše print(btn(➡️)) na print(rnd(10)). Když hru pustíme, tak se nám číslo mění tak rychle, že ho nestihneme ani přečíst. To je proto, že pokaždé když vykreslíme obrazovku, tak se nám vybere jiné číslo.

Note

Zkuste si změnit program tak, aby vybral jen jedno číslo na začátku a to se poté neměnilo.

Když chceme vybrat jen jedno číslo na začátku, tak musíme funkci rnd() zavolat jen jednou. A funkce která se volá jen jednou, a to na začátku, je _init(). A když to číslo chceme uložit, tak na to už umíme použít proměnnou. Přidáme si tedy do funkce _init() řádek cislo=rnd(10) a vypisování změníme na print(cislo). Naše dvě funkce teď budou vypadat takto:

Funkce _init():

function _init()
 x=60
 y=120
 px=60
 py=0
 cislo=rnd(10)
end

Funkce _draw():

function _draw()
 cls()
 spr(1,x,y)
 spr(2,px,py)
 print(cislo)
end

Když teď spustíme hru, tak se nám každému vybere jiné číslo. A pokaždé když ji spustíme (stačí zmáčknout Ctrl + R), tak bude to číslo jiné. Je to sice desetinné číslo, ale to nám nevadí. Důležité je, že je to číslo, které bude vždy menší než 10 (protože jsme zavolali rnd(10)).

Vylepšení resetu pozice

Teď už nám chybí jen jedna věc aby hra alespoň vypadala zábavně. A to aby druhý sprajt padal pokaždé z jiného místa. Vlastně stačí když pokaždé jakmile se nastaví jeho Y pozice (proměnná py) na nulu, nastavíme jeho X pozici (proměnnou px) náhodně daleko od levého kraje obrazovky.

Note

Zkuste se nad tímto zapřemýšlet a přijít na to sami.

Tip

Proměnnou py nastavujeme na nulu na dvou místech!

Řešení

Pozici py nastavujeme na nulu na dvou místech. Jednou ve funkci _init() a jednou v podmínce uvnitř funkce _update(). Na obou místech stačí hned pod řádek py=0 přidat tento řádek:

py=rnd(120)

Note

Proč jsme zvolili právě maximum 120?

A máme něco, co může za chvilku vypadat i jako hra!

Vzdálenosti

Chystání na začátek

Na začátek si zase uděláme tři změny:

Zjednodušení počítání

Abychom měli jednodušší počítání, tak náš sprajt číslo jedna necháme pohybovat jen doleva a doprava. Ale nemusíme mazat tu část kódu která dělá pohyb nahoru a dolů, můžeme ji takzvaně “zakomentovat”. To znamená, že ji počítač nebude číst, ale my ji uvidíme, kdyby se nám náhodou hodila. Uděláme to tak, že před tuto část kódu napíšeme na samostatný řádek --[[ a za tu část kódu (kterou nechceme použít) napíšeme (zase na samostatný řádek) ]]. Naše funkce _update() bude vypadat takto:

function _update()
 if btn(➡️) then
  x=x+1
 end
 if btn(⬅️) then
  x=x-1
 end
 --[[
 if btn(⬆️) then
  y=y-1
 end
 if btn(⬇️) then
  y=y+1
 end
 ]]
 py=py+1
 if py > 127 then
  py=0
 end
end

Vyznačení okraje

A abychom si ukázali kde je konec obrazovky, tak si zatím můžeme nakreslit pozadí nějakou barvou. Většině funkcí které kreslí na obrazovku můžeme říct jakou barvou má kreslení udělat. Pokud chceme například pozadí barvy nebe, tak funkci která čistí obrazovku můžeme říct, že ji má vyčistit barvou č. 12. Naše vykreslovací funkce by potom vypadala takto:

function _draw()
 cls(12)
 spr(1,x,y)
 spr(2,px,py)
 print(cislo)
end

Přejmenování proměnné

Nebudeme potřebovat proměnnou cislo, ale budeme potřebovat uchovávat skóre. Přejmenujme tedy (přepíšeme všude kde se vyskytuje) proměnnou cislo na proměnnou score a místo náhodného čísla ji na začátku nastavíme na nulu. Naše startovací (“inicializační”) funkce tedy bude vypadat takto:

function _init()
 x=60
 y=120
 px=60
 py=0
 score=0
end

A vykreslovací se změní na:

function _draw()
 cls(12)
 spr(1,x,y)
 spr(2,px,py)
 print(score)
end

Když hru pustíme teď, tak máme skóre 0, ale může být špatně vidět kvůli barvě.

Note

Zvládli byste vymyslet jak změnit barvu skóre na bílou (barva č. 7)?

Volání funkce print() můžeme také říct barvu jakou má napsat co po ní chceme. Přepišme tedy print(score) na print(score, 7) ve funkci _draw().

Kontrola pozice sprajtů

Náš sprajt může pořád vyjet z obrazovky a to nechceme. My nechceme aby se pohnul doprava kdykoliv je zmáčknutá klávesa vpravo. My chceme aby se pohnul doprava pokud je zmáčknutá šipka doprava a zároveň není sprajt na pravém kraji (a to stejné na druhou stranu).

Protože má obrazovka šířku 128 a my používáme sprajt o šířce 8, je sprat nakraji pokud je od levého okraje vzdálen 120. A protože chceme aby se mohl pohnout doprava jen když nakraji není, můžeme to napsat jako podmínku “pokud je x menší než 120” tedy if x < 120. Když chceme spojit dvě podmínky, můžeme to udělat podobně jak je napsáno výše. A protože chceme pohnout doprava když je x < 120 a btn(➡️). A jak se napíše anglicky spojka “a”? Ano, je to and. Takže podmínku na pohyb doprava změníme na x < 120 and btn(➡️). Sprajt už by nám neměl nikdy ujet doprava mimo obrazovku.

Tip

Zkuste udělat to stejné pro druhou stranu

Doleva chceme pohnout sprajtem jen když není na pravém okraji. Nebo si to můžeme představit tak, že nechceme aby se x dostalo pod nulu. Takže podmínka na pohyb doleva bude x > 0 and btn(⬅️). A to bysme měli.

Kontrola doteku sprajtů

Pokud náš hráč (sprajt 1) chytne (dotknou se) padající věc (sprajt 2), tak chceme aby se nečekalo až druhý sprajt spadne mimo obrazovku, ale resetoval se hned jak se dotknout. Ale protože budeme resetovat pozici druhého sprajtu (proměnné px a py) ve dvou různých situacích, tak si tuto akci můžeme napsat do vlastní funkce.

Napišme si tedy funkci na reset pozice druhého sprajtu. Nazveme ji třeba “padej”. Toto musíme přidat někde mimo existující funkce, třeba úplně nakonec:

function padej()
 py=0
 px=rnd(120)
end

Potom tuto funkci můžeme zavolat tam kde se resetovaly hodnoty proměnných px a py stejným způsobem. Například funkce _init() by teď měla vypadat takto:

function _init()
 x=60
 y=120
 padej()
 score=0
end

A teď na kontrolu doteku. Vzhledem k tomu, že náš hráč (sprajt 1) je pořád na Y pozici 120, nemusíme pokaždé počítat jak daleko nahoru od něj je druhý sprajt. Víme, že jakmile bude o 8 pixelů výše (py bude 112), tak se nedotýkají, ale jakmile bude byť jen o jeden pixel méně, tak už se můžou dotknout. První část podmínky na dotek sprajtů tedy bude py > 112.

Pojďme si napsat tuto podmínku a spojit ji s již existující podmínkou toho, že sprajt spadne pod konec obrazovky. Původně jsme si ukázali jen “jednoduchý if”, tentokrát ho vylepšíme.

Pojďme se podívat na další jeho variantu:

if <PODMÍNKA> then
 -- IF BLOK
else
 -- ELSE BLOK
end

To znamená, že -- IF BLOK se vykoná pouze pokud je první podmínka pravdivá, jinak (else, pokud není pravdivá) se vykoná -- ELSE BLOK. A nejen to, můžeme přidat více podmínek:

if <PODMÍNKA_1> then
 -- BLOK_1
elseif <PODMÍNKA_2> then
 -- BLOK_2
else
 -- ELSE BLOK
end

V tomto případě se napřed zkontroluje <PODMÍNKA_1>. Pokud je tato pravdivá, tak se vykoná BLOK_1. Pokud není, tak se zkontroluje <PODMÍNKA_2>. Pokud je tato pravdivá, tak se vykoná BLOK_2. Těchto elseif podmínek a bloků může za sebou být mnohem víc. Na konci může (ale nemusí) být else a za ním kód který se vykoná pokud žádná z předchozích podmínek nebyla pravdivá.

Warning

Každá podmínka má za sebou then, ale else už ne. Nezapomeňte na to. Můžete si to pamatovat podle toho, že řeknete “jestli (if) něco (<podmínka>) tak (then) … jinak jestli (elseif) něco jiného (<podmínka>) tak (then) … jinak (else) … – i v české řeči to dává smysl.

A tak si naši podmínku na kontrolu “propadeného” sprajtu 2, která zatím vypadá takto:

if py > 127 then
 padej()
end

tak, aby ještě zkontrolovala jestli je sprajt 2 blízko našemu hráči:

if py > 127 then
 padej()
elseif py > 112 then
 -- chytame
 padej()
end

Teď je ale sprajt vyresetovaný pokaždé když se přiblíží na výšku hráče, ale už nekontroluje jestli není moc daleko doleva nebo doprava. Na tuto kontrolu můžeme použít funkce na absolutní hodnotu, ale my, abychom se naučili jak podmínky takzvaně “zanořovat”, si ty dvě možnosti rozepíšeme.

Aby se sprajty dotkly, musí být méně než 8 pixelů od sebe na výšku, ale zároveň méně než 8 pixelů na šířku. Vzdálenost doleva/doprava nemá cenu kontrolovat pokud není py větší než 112. V našem případě napíšeme novou kontrolu do části (bloku) kde je komentář -- chytame.

Vysvětlení počítání

Když je jablko vlevo

Když je jablko vpravo

Převedení do kódu

Následují složitou větu si převedeme do kódu:

Pokud je pozice X sprajtu 2 (px) větší než kolik by byla 8 pixelů vlevo od pozice X našeho hráče (x), a zároveň je pozice X sprajtu 2 (px) menší než kolik by byla 8 pixelů vpravo od pozice X našeho hráče (x) tak

if px > x - 8 and px < x + 8 then

V tomhletom případě se sprajty dotýkají (nemusí se přímo kreslit přes sebe, ale nám stačí, že roh jednoho (i když nevybarvený) zasahuje do druhého.

Počítání skóre

Tipy navíc

• Změňte rychlost padání tak, ať je hra těžší.
• Změňte rychlost pohybu doleva/doprava tak ať je hra rychlejší, ale pořád zajímavá.
• Přidejte si proměnnou která určuje rychlost pohybu doleva/doprava abyste při experimentování nemuseli měnit více než jedno číslo.
• Změňte rychlost padání ať je trošku náhodná.

Important

Jak byste udělali hru zajímavější vy?

Příloha

Příklad

Lukáš

Spustit v prohlížeči

Marek

Spustit v prohlížeči

Maty

Spustit v prohlížeči

Radek

Spustit v prohlížeči

Tomáš

Spustit v prohlížeči

Vojta

Spustit v prohlížeči

Šárka

Spustit v prohlížeči