Táto stránka pre svoju správnu funkčnosť vyžaduje súbory cookies. Slúžia na authentifikáciu návštevníka, analýzu návštevnosti a reklamnú personalizáciu.
logo
Prihlásenie / Registrácia
mobile

Zavrieť
 

Snake 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.

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

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

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.

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.

Codeblog
Ostatné texty v seriály

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
Diskusia

Žiadne príspevky v diskusii.

Nový príspevok

Na prispievanie do diskusie musíte byť prihlásený.