Podklady pro druhou polovinu dne výuky JavaScriptu.
Ve výchozím stavu projekt zobrazí panáčka vlevo nahoře. Zobraz si webovou stránku a ověř, že to tak je.
Není uživatelsky moc příjemné, když panáček začíná vlevo nahoře. Umísti panáčka více do středu obrazovky, třeba na pevnou pozici [400, 300] pixelů na obrazovce.
Následující příkazy jsou povinné. Je to deklarace proměnných, které budou obsahovat souřadnice panáčka. Prostě vše 1:1 překopíruj do script.js.
Všimni si, že příkazy zatím nenastavují panáčka na žádnou pozici. Bude tedy na [0, 0].
let visualniPanacek
let panacekX
let panacekY
let panacekSirka
let panacekVyska
// Najde panáčka na stránce a uloží ho do proměnné visualniPanacek
visualniPanacek = document.querySelector("#panacek")
// Do proměnných panacekSirka a panacekVyska si nachystáme velikost panáčka.
// Zatím to nevyužijeme, ale bude se to hodit později
panacekSirka = 64
panacekVyska = 70Teď pomocí následujících příkazů umísti panáčka na pozici [400, 300]. Pozor! Schválně nejsou ve správném pořadí, musíš trochu přemýšlet:
// Přesune (zobrazí) panáčka na obrazovce ve vodorovném směru na souřadnici z proměnné panacekX
visualniPanacek.style.left = panacekX + "px"// Nastaví hodnotu do proměnné panacekX
panacekX = 400// Přesune (zobrazí) panáčka na obrazovce ve svislém směru na souřadnici z proměnné panacekY
visualniPanacek.style.top = panacekY + "px"// Nastaví hodnotu do proměnné panacekY
panacekY = 300V minulém levelu sis mohla všimnout, že je nejprve potřeba nastavit hodnotu do proměnných panacekX a panacekY,
a teprve potom manipulovat s proměnnou visualniPanacek. Až potom se obrázek opravdu posune na obrazovce.
V programu rozlišujeme různé typy proměnných: textové, číselné a visuální.
Textové proměnné obsahují text. Například jméno hráče.
Číselné proměnné (jako třeba panacekX, panacekY) obsahují prosté číslo,
které se nikde nezobrazuje, ale je nutné pro výpočty běhěm hry (pro herní logiku).
Visuální proměnné (jako třeba visualniPanacek nebo v budoucnu visualniMince)
obsahují celý prvek <img> z HTML a manipulace s touto proměnnou má visuální dopad.
Při programování postavičky ve hře se postupuje tak, že v číselných proměnných uchováváme souřadnice postavičky a budeme je přičítat a odečítat, když budeme chtít pohybovat s postavičkou. Ale prostá změna čísla nezpůsobí překreslení postavičky na obrazovce. To se stane až tehdy, kdy aktualizujeme visuální proměnnou dle hodnoty z číselné proměnné.
Zkus si ještě jednou, že to tak funguje. Vlož na konec programu příkazy:
// Nastaví souřadnice do proměnných panacekX a panacekY
panacekX = 20
panacekY = 10Posunul se panáček do levého horního rohu?
A teď přidej na konec programu ještě:
// Přesune (zobrazí) panáčka na obrazovce na aktualizované souřadnice
visualniPanacek.style.left = panacekX + "px"
visualniPanacek.style.top = panacekY + "px"A co teď? Posunul se panáček do levého horního rohu?
A teď zase posuň panáčka víc do středu:
// Zvýší souřadnice v proměnných panacekX a panacekY
panacekX = panacekX + 200
panacekY = panacekY + 150Posunul se na obrazovce zase dál od kraje? Nebo je potřeba ještě přidat aktualizaci visualniPanacek?
Naprogramuj pohyb panáčka po obrazovce při stisku klávesy.
Všechny příkazy v tomto levelu budeš psát do funkce priStiskuKlavesy(event),
proto ji musíš v programu nadefinovat dle příkladu níže.
Pro začátek je v těle funkce nachystán příkaz console.log(..),
který při zavolání funkce zobrazí pomocnou hlášku, aby bylo vidět, že to funguje.
Definice funkce:
function priStiskuKlavesy(event) {
console.log("Klávesa stisknuta")
// Sem můžeš vložit příkazy ze seznamu (2)
}Samotný kód v JavaScriptu by nestačil, proto by funkce sice existovala, ale nikde by nebyla použita. Je tedy nutné ještě v HTML tuto funkci volat:
Původní kousek HTML:
<body>Nahraď novým kouskem HTML:
<body onkeydown="priStiskuKlavesy(event)">Teď projekt spusť a vyzkoušej, že se při stisku libovolné klávesy zobrazí hláška Klávesa stisknuta.
Následuje tvoje programování:
Zpět v JavaScriptu. Nahraď zobrazování konstantní hlášky,
když uživatel stiskne kteroukoliv klávesu,
za pohyb panáčka při stisku klávesy šipka nahoru/dolů/vlevo/vpravo.
Použij příkazy ze seznamu (2) a zbav se console.log(..). Příkazy opět nejsou záměrně ve správném pořadí.
Seznam (2):
// Přesune (zobrazí) panáčka na obrazovce ve vodorovném směru na souřadnici z proměnné panacekX
visualniPanacek.style.left = panacekX + "px"// Přesune (zobrazí) panáčka na obrazovce ve svislém směru na souřadnici z proměnné panacekY
visualniPanacek.style.top = panacekY + "px"// Zvýší hodnotu v proměnné panacekX o 10
panacekX = panacekX + 10// Sníží hodnotu v proměnné panacekX o 10
panacekX = panacekX - 10// Zvýší hodnotu v proměnné panacekY o 10
panacekY = panacekY + 10// Sníží hodnotu v proměnné panacekY o 10
panacekY = panacekY - 10if (event.key === "ArrowRight") {
// Sem můžeš vložit kterékoliv příkazy
// ze seznamu (2).
// Příkazy zde se provedou pouze,
// pokud byla stisknuta klávesa
// ŠIPKA VPRAVO
}if (event.key === "ArrowLeft") {
// Sem můžeš vložit kterékoliv příkazy
// ze seznamu (2).
// Příkazy zde se provedou pouze,
// pokud byla stisknuta klávesa
// ŠIPKA VLEVO
}if (event.key === "ArrowUp") {
// Sem můžeš vložit kterékoliv příkazy
// ze seznamu (2).
// Příkazy zde se provedou pouze,
// pokud byla stisknuta klávesa
// ŠIPKA NAHORU
}if (event.key === "ArrowDown") {
// Sem můžeš vložit kterékoliv příkazy
// ze seznamu (2).
// Příkazy zde se provedou pouze,
// pokud byla stisknuta klávesa
// ŠIPKA DOLŮ
}Panáček má za úkol sbírat mince. Přidej tedy minci do HTML do <body>.
<!-- předmět k sebrání, id="mince" -->
<img id="mince" src="obrazky/mince.png">Aby s ní šlo pracovat v programu, ulož ji v JavaScriptu do proměnné:
let visualniMince
let minceX
let minceY
let minceSirka
let minceVyska
// Najde minci na stránce a uloží ji do proměnné visualniMince
visualniMince = document.querySelector("#mince")
// Do proměnných minceSirka a minceVyska si nachystáme velikost mince
minceSirka = 32
minceVyska = 32Nastav minci buď na pevnou nebo na náhodnou pozici. Budou se ti hodit tyto příkazy:
// Nastaví do proměnné minceX natvrdo 200
minceX = 200// Nastaví do proměnné minceX náhodné číslo 0 .. šířka obrazovky
minceX = Math.floor(Math.random() * (window.innerWidth - minceSirka))// Nastaví do proměnné minceY náhodné číslo 0 .. výška obrazovky
minceY = Math.floor(Math.random() * (window.innerHeight - minceVyska))// Nastaví do proměnné minceY natvrdo 100
minceY = 100// Přesune (zobrazí) minci na obrazovce ve vodorovném směru na souřadnici z proměnné minceX
visualniMince.style.left = minceX + "px"// Přesune (zobrazí) minci na obrazovce ve svislém směru na souřadnici z proměnné minceY
visualniMince.style.top = minceY + "px"Umožni, aby panáček mohl sebrat mince a přičetlo se mu skóre.
Pro sebrání mince je nutno při každém pohybu panáčka testovat střet obrázku panáčka a obrázku mince. Rozhodni se tedy správně, kam příkaz vložit.
// Podmínka zjistí, zda dochází ke kolizi panáčka a mince
// tj. zda se překrývají dva obdélníky o známých souřadnicích
if (!(panacekX + panacekSirka < minceX ||
minceX + minceSirka < panacekX ||
panacekY + panacekVyska < minceY ||
minceY + minceVyska < panacekY)) {
// Sem vlož příkazy, které se mají provést
// při střetu panáčka a mince.
// Například posun mince na jiné náhodné místo
}Sebrání mince lze simulovat tak, že se mince prostě přesune na jiné (náhodné) souřadnice. Příkazy k tomu už máš v minulém kroku. Jen je musíš okopírovat na správné místo v programu.
Přidej do stránky skóre.
Doplň do HTML tyto značky:
<p class="vysledek">Skóre: <span id="skore">0</span></p>Ve svém kódu potom můžeš pomocí document.querySelector(..) vybrat prvek s id="skore" a měnit jeho textový obsah podle toho,
kolik mincí panáček sebral.
// Najde na stránce prvek, kam se bude skóre dopisovat
let visualniSkore
visualniSkore = document.querySelector("#skore")Textový obsah HTML prvku se nastaví takto:
// Zobrazí v HTML prvku visualniSkore obsah proměnné hodnotaSkore
visualniSkore.textContent = hodnotaSkoreProměnnou hodnotaSkore si definuj sama a zvyšuj její hodnotu při sebrání mince.
Když jde panáček doprava, nastav mu obrázek obrazky/panacek-vpravo.png,
když jde doleva, nastav mu obrazky/panacek-vlevo.png, a podobně
nahoru a dolů.
Panáčkovi nastavíš obrázek nasledujícím příkazem v JavaScriptu:
visualniPanacek.src = "obrazky/panacek-vpravo.png"Musíš se samozřejmě správně rozhodnout, kam tento příkaz vložit.
Doplň do hry zvuky. Např. cinknutí mince, když ji panáček sebere.
Nejprve musíš přidat do HTML značku pro vybraný zvuk:
<audio id="zvukmince" src="zvuky/mince.mp3"></audio>Zvuk pak v JavaScriptu vyhledáš na stránce pomocí document.querySelector(..)
a uložíš si ho např. do proměnné audioMince, stejně jako jsi to dělala s panáčkem, mincí nebo skóre.
K přehrání zvuku pak můžeš použít následující příkaz:
// Přehraje zvuk cinknutí
audioMince.play()Panáček už krásně chodí, sbírá mince, ale má to jeden neduh. Může se posunout mimo hranice herní plochy a vyjít ven z obrazovky. Přidej do hry kód, který pohyb panáčka omezí.
Jednodušší je nejprve vyřešit levou a horní hranici obrazovky. Pravou a spodní hranici budeš moct vyřešit v přístím levelu.
Vlož tento kód, omezující pohyb vlevo, na správné místo v programu:
// Pokud se stane, že by X-ová souřadnice panáčka byla záporná, naprav to.
if (panacekX < 0) {
panacekX = 0
}Ověř, že panáček už nemůže zajít vlevo mimo obraz a podobně obraň i Y-ovou souřadnici.
Omezení pohybu vpravo a dolů je podobné jako v minulém levelu. Je nicméně komplikovanější o to,
že podmínka není < 0, ale naopak větší než jiná hodnota. Která?
Trochu ti napovíme, když ti ukážeme, jak zjistíš šířku a výšku obrazovky (okna prohlížeče):
let sirkaOkna
let vyskaOkna
sirkaOkna = window.innerWidth
vyskaOkna = window.innerHeightPokud to naprogramuješ správně, s panáčkem by teď nemělo být možné vyjít ve vpravo a dolů mimo obraz.
Možná si ale všimneš, že při pohybu doprava nadoraz se dole objeví posuvník a obraz se mírně posune (o 64 pixelů). Čím to je? Který objekt na obrazovce je široký právě 64 pixelů? Co se kde musí odečíst, aby to fungovalo bezchybně?
Projekt obsahuje spoustu předpřipravených obrázků a zvuků. Zkus přidat třeba nepřátele (mouchy...), životy, sbírání i jiných věcí než mincí.