Program “Dungeon”
- Code.org verze
Hra probíhá v kolech a funguje následujícím způsobem:
- Hráč se pohybuje v jednoduchém dungeonu se třemi pozicemi
- Nejprve musí jít na západ natěžit zlato
- Po každé těžbě se musí vrátit odnést zlato do města (uprostřed) a pak zase může těžit
- Když má dost zlata, tak může nakoupit meč
- Na východě jsou Orkové. Pokud na ně hráč zaútočí a má meč, tak vyhrál. Jinak prohraje.
Rozšíření
Zkuste program rozšířit:
- Přidejte zobrazení aktuálního zlata, které má hráč natěženo a také dejte nahoru jméno lokace.
- Přidejte zobrazení seznamu věcí, které má aktuálně u sebe.
- Přidejte do hry počet životů hráče. Pokud prohraje souboj, pak mu život odeberte a dejte do výchozí lokace.
- Po poražení Orků přidejte hráčovi do inventáře “Kouzlo”. Přidejte lokaci “hluboký les” s čarodějnicí, kterou jde porazit pouze kouzlem.
- Zkuste se pobavit s chatGPT, aby vám nabídl vhodné rozšíření hry
Repl.it verze
Nejprve se připojte do Lorem Ipsum týmu na Repl.it, kde by jste měli nalézt HTML5 verzi Dungeonu. U této verze zkuste následující úkol:
- S pomocí chatGPT změňte rozložení tlačítek, aby se více podobalo rozložení v code.org.
- Implementujte ovládání hry tlačítky klávesnice.
- Vytvořte závěrečnou HTML stránku, která se zobrazí po (ne)výhře.
- Zkuste změnit barevné ladění celé stránky. Opět zkuste svoje změny konzultovat s chatGPT.
- Implementujte podobné úkoly jako u Code.org verze.
Načtení parametru v závěrečné stránce
Pokud vytvoříte závěrečnou HTML stránku, kde budete zobrazovat výsledek souboje, pak jistě budete chtít i předat výsledek souboje. Nejprve tedy v scripts.js přesměrujeme na novou HTML stránku a zároveň přidáme parametr result:
window.location.href = "end.html?result=win";
Parametr a jeho hodnotu specifikujeme za otazníkem. Teoreticky může být parametrů více (nicméně zde je jen jeden). Na stránce end.html pak parametr načteme v JavaScript kódu následujícím způsobem:
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
}
var result = getQueryVariable('result');
V proměnné result budeme mít v našem případě hodnotu win.
Ovládání hry tlačítky klávesnice
Pro ovládání hry tlačítky je potřeba přidat událost přímo na HTML dokument, který reprezentuje stránku. To provedeme následujícím způsobem:
document.addEventListener("keydown", function(event) { // Handle the keydown event here
if (event.key === "ArrowUp") { // Kód pro reakci na stisk klávesy šipka nahoru
console.log("Stisknuta klávesa šipka nahoru");
}
}
Zde je seznam několika klíčových kódů pro šipky:
- Šipka nahoru:
ArrowUp - Šipka dolů:
ArrowDown - Šipka vlevo:
ArrowLeft - Šipka vpravo:
ArrowRight