Úvodná stránka -> HTML, PHP, Javascript -> Tetris v HTML5 – V. Herná logika 4/4 (27.01.2020)

Tetris v HTML5 – V. Herná logika 4/4

V poslednom diely tohto seriálu si doplníme posledné chýbajúce časti hry.

Vítam Vás v poslednom diely seriálu o tvorbe hry Tetris.

Ako prvý krok, odstránime rest z minulého dielu a to náhľad nasledujúcej kocky. Momentálny stav je taký, že nová kocka do hry sa generuje bezprostredne pred jej vložením do hry. Túto funkčnosť musíme upraviť tak, aby bola nová kocka známa už pri pridaní tej predchádzajúcej. V herných premenných máme premennú NextPiece, ktorá reprezentuje nasledujúcu kocku.Túto premennú musíme vždy pri reštarte hry vo funkcii NewGame zresetovať.

Zdrojový kód:

NewGame: function ()
{
...

        //Reset hernych premennych
        ...
        this.NextPiece = null;
     …
}

Zmenu hodnoty premennej na inú kocku musíme prekresliť v hre, preto si na zmenu hodnoty premennej vytvoríme samostatnú funkciu SetNextPiece, ktorá bude volaná z upravenej funkcie NewPiece.

Zdrojový kód:

NewPiece: function ()
    {
        var NewPiece = this.NextPiece;
        if (NewPiece === null)
            {
                NewPiece = this.Create_Random_Piece();
            }

var Next = this.Create_Random_Piece();
this.SetNextPiece(Next);

            this.PlacePiece(NewPiece);
    },
SetNextPiece: function (piece)
    {
        this.NextPiece = piece;

        var PreviewSize = 4 * this.GameFieldWidth + 3;
         //Vyplnenie celej plochy farbou pozadia
         this.Context.fillStyle = this.BackColor;
         this.Context.fillRect(this.PreviewLeft, this.PreviewTop, PreviewSize, PreviewSize);

this.DrawPiece(this.NextPiece, true);
},

Funkcia SetNextPiece na svojom konci volá DrawPiece s novým nepovinným parametrom, ktorý pozmeňuje jej logiku. Jedná sa o príznak, že má kocku nakresliť na pozíciu náhľadu, nie do herného poľa. Na to použije funkciu DrawBlockInPreview namiesto pôvodnej DrawBlock

Zdrojový kód:

DrawPiece: function (piece, InPreview = false) //Nezabudnut pridat InPreview do parametrov 
    {
        ...
        if (FieldType === FieldStates.fs_Block)
            {
                if (InPreview)
                    {
                        this.DrawBlockInPreview(Top, Left, piece.Color);
                    } else
                    {
                        this.DrawBlock(Top, Left, piece.Color);
                    }
            }
            ...
    },
DrawBlockInPreview: function (top, left, color)
    {
        var RealLeft = this.PreviewLeft + left * this.GameFieldWidth + left;
        var RealTop = this.PreviewTop + top * this.GameFieldWidth + top;
        this.Context.drawImage(color, RealLeft, RealTop);
    },

Projekt môžeme uložiť a otestovať v prehliadači.

Hra je už takmer kompletná, pridáme ešte zvukový efekt po výmaze riadka.

Z nasledujúcej linky > link < uložíme (po rozbalení) súbor lines.mp3 do priečinka audio v našom projekte.

Pod časť /* Obrazky */ v premenných objektu Game vytvoríme novú, ktorú nazveme /* Zvuky */ a pridáme do nej novú premennú snd_lines, ktorú inicializujeme v metóde LoadSounds a jej volanie pridáme do LoadGame.
Samotná inicializácia bude prebiehať cez dvojicu funkcií CreateSound a SoundLoaded čo je obdoba funkcií CreateImage a ImageLoaded.

Zdrojový kód:

    /* Obrazky */
    ...
    /* /Obrazky */

    /* Zvuky */
    snd_lines: null, //Vyplnenie riadka
    /* /Zvuky */
LoadGame: function ()
    {
    ...
    //Nacitanie zvukov
    this.LoadSounds();
    ...
    },
LoadSounds: function ()
    {
        this.snd_lines = this.CreateSound("lines");
    },
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();
    },

Posledným krokom je pridanie funkcie PlaySound, ktorá sa postará o prehratie zvuku a jej zavolanie na koniec funkcie WriteLinesToScore.

Zdrojový kód:

 PlaySound: function (snd)
    {
        snd.currentTime = 0;
        snd.play();
    },
 WriteLinesToScore: function (Lines)
    {
      ...
        //Prehrat zvuk vyplnenie riadkov
        this.PlaySound(this.snd_lines);
    },

Hra je týmto dokončená a jej funkčnosť môžeme overiť v prehliadači.

Kompletné zdrojové kódy môžete sťahovať tu: > link <

Dúfam, že sa Vám tento seriál páčil a v prípade, ak máte nejaké otázky alebo ste niekde našli chybu, zanechajte odkaz v komentároch pod článkom.

Codeblog

Ostatné texty v seriály

Tetris v HTML5 – I. Popis riešenia a základná konštrukcia	0
...
Tetris v HTML5 – IV. Herná logika 3/4	0
Tetris v HTML5 – V. Herná logika 4/4	2

Diskusia

Od: Nobody 19.07.2020 14:07:42

Budú tieto články o hrách pokračovať?

Od: Codeblog 19.07.2020 16:07:40

Nazdar Nobody,

Samozrejme že budú, mám v pláne napísať ešte minimálne o dvoch hrách a jednu mám už aj rozpracovanú.
No je to časovo náročnejšie, keďže konkrétnu hru musím najskôr vytvoriť, podľa možnosti odladiť a potom to spracovať do článkov.

Nový príspevok

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

Knowledge base

Najnovšie články

Najčítanejšie članky

Vyhľadávanie

Najčítanejšie seriály

Všetky seriály

Najčítanejšie kategórie

Všetky kategórie

Ostatné