5. Pár tipů na závěr
Pár tipů na závěr
V poslední části tohoto tutoriálu bych vám ještě chtěl ukázat pár věcí, které by se vám při programování her mohli hodit.
Vytváření JSON souborů a jejich stahování
U nějaké hry můžeme chtít vytvářet i nějaké levely. Potom bychom si třeba pro sebe vytvořili nějaký editor ve kterém bychom levely pro naši hru vytvářeli. Předtím než bychom ale na editoru začali pracovat bychom si museli určit jak budeme levely ukládat.
Jednou z možností jsou JSON soubory. JSON je zkratkou pro JavaScript Object Notation, dalo by se říct že je to soubor ve kterém můžeme uložit JavaScript objekt. Následující ukázka kódu ukazuje jak JSON soubor vytvořit a stáhnout. Další ukázka také ukazuje jak JSON soubor vypadá.
Jen tak na vyzkoušení když kliknete na tento odkaz, tak by se vám měl stáhnout JSON soubor: stáhnout.
let level = {
nazevLevelu: "První Level",
obtiznost: 5,
nejakaData: [[20, 34], [10, 35], [30, 40]]
};
// Vytvoříme retezec (soubor), který budeme stahovat. Objekt level předáváme metodě JSON.stringify, která objekt převádí na řetězec a ten potom předáváme funkci encodeURIComponent, která řetězec převede tak abychom ho mohli použít ke stažení.
let dataVRetezci = "data:text/json;charset=utf8," + encodeURIComponent(JSON.stringify(level));
// vytvoříme si nový odkaz element
let downloadAnchor = document.createElement('a');
// přidáme odkazu atribut href, kterému nastavíme hodnotu proměnné dataVRetezci
downloadAnchor.setAttribute("href", dataVRetezci);
// přidáme odkazu atribut download, kterému nastavíme jako hodnotu jak by se měl JSON soubor jmenovat
downloadAnchor.setAttribute("download", "MujLevel.json");
// přidáme odkaz na stránku (požadováno pro firefox)
document.body.appendChild(downloadAnchor);
// klikneme na odkaz (je to stejné jako by na odkaz kliknul uživatel)
downloadAnchor.click();
// odstraníme odkaz
downloadAnchor.remove();
"nazevLevelu": "První Level",
"obtiznost": 5,
"nejakaData": [[20, 34], [10, 35], [30, 40]]
}
Načítání JSON souborů
Pokud jsme si pro naši hru vytvořili nějaké levely, které máme uložené ve formátu JSON, tak je budeme chtít do naší hry nějak načítat. Jak to provést ukazuje následující ukázka.
// zavoláním funkce fetch si načteme JSON soubor který se nachází v aktuálním adresáři a jmenuje se MujLevel.json
fetch("./MujLevel.json")
.then((response) => { // načtení JSON souboru může chvíli trvat, proto funkce fetch vrací promise, na ten můžeme reagovat pomocí then kterému předáme funkci která se zavolá až se soubor načte
// převedeme response na javascript objekt, to může opět chvíli trvat, takže json metoda vrací promise
response.json().then((data) => {
// proměnná data teď představuje javascript objekt který si můžeme uložit třeba do nějaké proměnné
gameData = data;
});
});
// pokud to moc nechápete tak nevadí, kdyžtak si to můžete jen zkopírovat, trochu upravit a použít ve své hře, jen musíte pamatovat na to že JSON se nenačte hned ale chvíli to potrvá
Přehrávání jednoho zvuku vícekrát najednou
Pokud budete ve své hře používat zvuky a budete je přehrávat tak, jak jsme je přehrávali v minulé části, tak bude moci jeden zvuk hrát jen jednou. Jinými slovy nepůjde spustit jeden zvuk vícekrát najednou.
Já na přehrávání jednoho zvuku vícekrát současně používám svoji třídu kterou jsem si vytvořil. Následující ukázka kódu tuto třídu ukazuje, takže pokud umíte třídy tak se můžete podívat jak funguje.
Pokud byste chtěli moji třídu použít, tak si ji můžete stáhnout odsud: stáhnout. Ve svém kódu potom můžete za pomocí této třídy vytvořit zvuk takto: let zvuk = new Sound("cesta ke zvuku"). Pokud budete chtít zvuk přehrát, tak napíšete zvuk.play() a protože k tomu používáte tuto třídu, tak už zvuk půjde přehrávat vícekrát najednou.
constructor(path) {
this.sounds = [];
this.path = path;
this.sounds.push(new Audio(path));
this.vol = 1;
}
play() {
let soundPlayed = false;
for (let sound of this.sounds) {
if (sound.paused) {
sound.play();
soundPlayed = true;
break;
}
}
if (!soundPlayed) {
let newAudio = new Audio(this.path);
newAudio.volume = this.vol;
this.sounds.push(newAudio);
this.sounds[this.sounds.length-1].play();
}
}
set volume(vol) {
this.vol = vol;
for (let sound of this.sounds) {
sound.volume = vol;
}
}
get volume() {
return this.vol;
}
}
Měnění velikosti canvasu
U některých her můžeme chtít měnit velikost canvasu, například když se změní velikost okna prohlížeče. Jak už jsem psal v první části tohoto tutoriálu, velikost canvasu bychom neměli nastavovat pomocí CSS stylů, ale měli bychom použít atributy width a height. Pokud bychom velikost canvasu nastavovali přes CSS styly, tak by se nám canvas jen roztáhl, ale jeho skutečné rozměry by se nezměnili. Když ale chceme aby canvas nějak měnil svoji velikost, třeba v závislosti na velikosti okna prohlížece, tak velikost canvasu můžeme nastavovat přes CSS styly, jen vždy musíme pomocí javascriptu canvasu nastavit správnou velikost kterou by měl zrovna mít.
Následující ukázka kódu vytváří canvas s velikostí přes celé okno prohlížeče. V javascript kódu se potom na window (okno) přidává event listener, který zajišťuje že když se změní velikost okna, změní se i velikost canvasu.
<html>
<head>
<meta charset="UTF-8">
<style>
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
/* nastylujeme canvas tak, aby měl stejné rozměry jako okno prohlížeče */
canvas {
background-color: #252525;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="MujCanvas"></canvas>
<script>
let canvas = document.getElementById("MujCanvas");
// změníme rozlišení canvasu podle jeho opravdové šířky a výšky
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
// přidání event listeneru, který zajistí že když se změní velikost okna, tak se změní rozlišení canvasu
window.addEventListener("resize", () => {
// změníme rozlišení canvasu podle jeho opravdové šířky a výšky
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
});
</script>
</body>
</html>
Kvíz
Došli jste na konec tohoto tutoriálu o programování her v JavaScriptu. Na závěr je tu pro vás ještě poslední kvíz.