Knowledge base
Overený diskutujúci
SprávcaSnake v HTML5 – IV. Zvukové efekty
V poslednom diely tohto miniseriálu doplníme našu minihru o zvukové efekty.
Už nám ostal iba jeden krok a to doplnenie zvukových efektov. Konkrétne zvuky môžete vyhľadať na internete, alebo použiť zvuky z nasledujúceho odkazu: > link <. Jedná sa o súbory zo stránky https://opengameart.org/ . Zvukové súbory vo formáte mp3 nazveme crash, move a point. Ako už názvy napovedajú, súbor crash sa spustí pri narazení hada do steny (alebo do samého seba), move pri jeho pohybe a point pri získaní ďalšieho bodu, čiže zjedení jedla.Rovnako ako obrázok aj zvuk musíme inicializovať vopred, aby boli k dispozícii keď budeme chcieť použiť. Pre každý zvuk si zadefinujeme premennú v objekte Game. Nazveme ich audio_move, audio_crash a audio_point a môžeme ich umiestniť pod premennú img_food.
Ostatné texty v seriály
Zdrojový kód:
var Game = {
…
//Obrazok jedla
img_food: null,
//Zvuky
audio_move: null,
audio_crash: null,
audio_point: null,
…
};
Podobne ako na obrázky je nutné definovať ich inicializačnú funkciu CreateSound (ktorá bude rovnako upravovať hodnotu premennej ItemsToLoad), funkciu SoundLoaded ktorá bude volaná po úspešnom inicializovaní súboru a navyše funkciu PlaySound, ktorá bude konkrétny zvuk prehrávať. Na prehrávanie …
//Obrazok jedla
img_food: null,
//Zvuky
audio_move: null,
audio_crash: null,
audio_point: null,
…
};
Zdrojový kód:
CreateSound: function (Source)
{
var Sound = document.createElement("audio");
Sound.src = "audio/" + Source + '.mp3';
Sound.setAttribute("preload", "auto");
Sound.setAttribute("controls", "none");
this.ItemsToLoad++ ;
Sound.oncanplay = this.SoundLoaded;
return Sound;
},
SoundLoaded: function ()
{
this.oncanplay = null;
Game.ItemsToLoad--;
Game.CheckLoadedFiles();
},
PlaySound: function (snd)
{
snd.currentTime = 0;
snd.play();
},
Inicializáciu premenných vykonáme v metóde LoadGame{
var Sound = document.createElement("audio");
Sound.src = "audio/" + Source + '.mp3';
Sound.setAttribute("preload", "auto");
Sound.setAttribute("controls", "none");
this.ItemsToLoad++ ;
Sound.oncanplay = this.SoundLoaded;
return Sound;
},
SoundLoaded: function ()
{
this.oncanplay = null;
Game.ItemsToLoad--;
Game.CheckLoadedFiles();
},
PlaySound: function (snd)
{
snd.currentTime = 0;
snd.play();
},
Zdrojový kód:
LoadGame: function ()
{
...
//Nacitanie zvukov
this.audio_move = this.CreateSound("move");
this.audio_crash = this.CreateSound("crash");
this.audio_point = this.CreateSound("point");
…
},
Ostáva nám už len pridať volania PlaySound na relevantné miesta. Jedná sa o funkcie Crash a MoveNext. {
...
//Nacitanie zvukov
this.audio_move = this.CreateSound("move");
this.audio_crash = this.CreateSound("crash");
this.audio_point = this.CreateSound("point");
…
},
Zdrojový kód:
Crash: function ()
{
this.PlaySound(this.audio_crash);
this.DisplayMsg("Game over", "Press spacebar to restart...");
},
MoveNext: function ()
{
…
var NextFieldType = this.GameArray[NewLeft][NewTop];
switch (NextFieldType)
{
case FieldStates.fs_Empty: //Pole je prazdne, mozne sa tam presunut
{
this.PlaySound(this.audio_move);
this.MoveSnakeBlocks(NewLeft, NewTop, false);
}
break;
...
case FieldStates.fs_Food:
{
this.PlaySound(this.audio_point);
...
}
break;
}
…
},
Zvukové efekty hry sú týmto implementované, môžeme opäť projekt uložiť a vyskúšať v prehliadači.Tu sa táto séria článkov tvorbe hry Snake končí, avšak možnosti na vylepšenie hry sa ani zďaleka neskončili. Bolo by možné napríklad pridať postupné zvyšovanie rýchlosti hry, rozdeliť hru do niekoľkých úrovní (levelov), nejaké extra prekážky pre hada a pod. Obdobných hier bolo vytvorených neúrekom, môžete nabrať inšpiráciu aj od nich.Kompletný zdrojový kód hry nájdene tu: > link <Ak sa vám táto séria článkov páčila, prípadne ste našli nejakú chybu alebo máte návrh na zlepšenie, prosím napíšte komentár pod článok. Je možné, že niekedy v budúcnosti vznikne podobný seriál o nejakej ďalšej hre, ako napríklad Tetris, Packman a podobne. Uvítam vaše návrhy v diskusii.
{
this.PlaySound(this.audio_crash);
this.DisplayMsg("Game over", "Press spacebar to restart...");
},
MoveNext: function ()
{
…
var NextFieldType = this.GameArray[NewLeft][NewTop];
switch (NextFieldType)
{
case FieldStates.fs_Empty: //Pole je prazdne, mozne sa tam presunut
{
this.PlaySound(this.audio_move);
this.MoveSnakeBlocks(NewLeft, NewTop, false);
}
break;
...
case FieldStates.fs_Food:
{
this.PlaySound(this.audio_point);
...
}
break;
}
…
},
| Snake v HTML5 – I. Popis riešenia a základná konštrukcia |  0 |
| ... | |
| Snake v HTML5 – III. Herná logika 2/2 | 0 |
| Snake v HTML5 – IV. Zvukové efekty | 0 |
Žiadne príspevky v diskusii.
Na prispievanie do diskusie musíte byť prihlásený.