Snake v HTML5 – IV. Zvukové efekty

Na našej ceste k vytvoreniu hry Snake nám ostal už len jeden krok, a to doplnenie zvukových efektov. 

Zvuky, ktoré chcete použiť, si môžete vyhľadať na internete alebo prípadne použiť sadu z nasledujúceho  > odkazu <(jedná sa o súbory pochádzajúce zo stránky https://opengameart.org) . 
Súbory vo formáte MP3 nazveme crash.mp3, move.mp3 a point.mp3. Ako už názvy napovedajú, súbor crash sa spustí pri narazení hada do steny (prípadne do samého seba), move pri jeho pohybe a point oznámi získanie bodu zjedením jedla.

Rovnako ako obrázky, tak aj zvuky musíme pripraviť skôr, než sa hra začne. Referenciu každého z nich (audio_move, audio_crash a audio_point) si uschováme v objekte Game.

main.js

const Game = {
    ...

    //Obrazok jedla
    img_food: null,

    //Zvuky
    audio_move: null,
    audio_crash: null,
    audio_point: null,
    ...
};

Pripravíme si inicializačnú metódy CreateSound, kde si vytvoríme objekt triedy Audio, zaregistrujeme obsluhu udalosti SoundLoaded a samozrejme povýšime hodnotu ItemsToLoad. Ďalej to bude metóda PlaySound, ktorou budeme zvolený zvuk prehrávať.

main.js

const Game = {
    ...

    CreateSound: function (Source) {
        let Sound = new Audio();
        Sound.src = "audio/" + Source + '.mp3';
        Sound.setAttribute("preload", "auto");
        Sound.setAttribute("controls", "none");
        this.ItemsToLoad++;
        Sound.addEventListener('canplay', this.SoundLoaded);
        return Sound;
    },

    SoundLoaded: function () {
        this.removeEventListener('canplay', Game.SoundLoaded);
        Game.ItemsToLoad--;
        Game.CheckLoadedFiles();
    },

    PlaySound: function (snd) {
        snd.currentTime = 0;
        snd.play();
    }
}

Inicializáciu zvukových premenných vykonáme v metóde LoadGame.

main.js

const Game = {
    ...

    LoadGame: function () {
        //Nacitanie obrazku jedla
        this.img_food = this.CreateImage("food");

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

main.js

const Game = {
    ...

    Crash: function () {
        this.PlaySound(this.audio_crash);
        this.DisplayMsg("Game over", "Press spacebar to restart...");
    },

    MoveNext: function () {
        ...

        let 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);
                    this.MoveSnakeBlocks(NewLeft, NewTop, true);
                   ...
                }
                break;
        }
        ...
    }
}

Implementácia zvukových efektov je týmto dokončená, rovnako aj naša hra. Posledné úpravy v projekte si teda môžeme uložiť a vyskúšať ich funkčnosť vo webovom prehliadači.

Aj keď táto séria článkov o hre Snake končí, možnosti na jej vylepšenie ani z ďaleka nekončia. Čo tak pridať postupné zvyšovanie rýchlosti hry, rozdeliť ju do niekoľkých úrovní (levelov), postupne pridávať extra prekážky pre hada a pod.? Berte to ako výzvu, fantázii sa medze nekladú.

Kompletný zdrojový kód hry je možné nájsť na GitHube, prípadne si ju môžete rovno aj zahrať na nasledujúcom odkaze.

Ak sa vám táto krátka séria článkov páčila, prípadne ste našli nejakú chybu alebo  len máte návrh na zlepšenie, prosím zanechajte komentár.

Je možné, že niekedy v budúcnosti vznikne podobný seriál o nejakej ďalšej hre, napríklad v štyle Tetris, Packman a pod. Uvítam vaše návrhy v diskusii.