Programování Her v JavaScriptu

4. Programování Hry

Co si naprogramujeme za hru?

V této části už bychom mohli být schopni naprogramovat nějakou jednoduchou hru. Zkusíme si vytvořit hru ve které budeme ovládat kbelík pomocí kterého budeme chytat shora padající kapky. Jak budeme kapky chytat tak budou postupně padat rychleji a rychleji a hra tak bude těžší a těžší. Cílem bude nachytat do kbelíku co nejvíce kapek. Hra skončí když hráč kapku do kbelíku nechytí.

Aby i začátečníci pochopili jak tato hra funguje, tak nebudeme při jejím programování používat žádné třídy a tak dále. V podstatě jen použijeme věci o kterých jste se mohli dočíst v minulých částech.

Vytvoření základního kódu

Na začátek si vytvoříme tři soubory. Prvním souborem bude javascript soubor který nazveme mainLoop.js a tam si vytvoříme Main Loop, které nám bude v pravidelném časovém intervalu volat funkce update a draw. Pokud jste četli předchozí kapitolu, tak už možná tak nějak víte jak Main Loop funguje, takže ho v naší hře jen použijeme. Druhým souborem bude také javascript soubor, sem ale budeme psát kód týkající se naší hry. Můžeme ho nazvat třeba hra.js. Posledním souborem bude HTML stránka na kterou přidáme canvas na který budeme kreslit a připojíme si sem i naše dva javascript soubory.

Níže máte html kód který si můžete zkopírovat do svého vytvořeného HTML souboru a kód s Main Loop který si také můžete zkopírovat.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            /* základní nastylování canvasu */
            canvas {
                border: 2px solid #f7f7f7;
                background-color: #252525;
            }
        </style>
    </head>
    <body>
        
        <canvas width="300" height="500" id="MujCanvas"></canvas>

        
        <script src="./mainLoop.js"></script>
        <script src="./hra.js"></script>
    </body>
</html>

Vytvoření update a draw funkce

V souboru hra.js, kde budeme psát kód pro naši hru si musíme vytvořit update a draw funkce které nám bude volat Main Loop. Pojďme si je tam tedy vytvořit a kdyžtak zatím do hry přidáme jen kbelík který ještě zatím nepůjde ovládat. A namísto vykreslování obrázku kbelíku můžeme prozatím použít jen obyčejný obdelník který za obrázek změníme až později. Nemusíme na všechno hned ze začátku mít obrázky, občas si třeba jen chceme zkusit jak se hra bude hrát a pokud budeme s hrou spokojeni tak pro ni můžeme vytvořit i obrázky.

// konstanty které budeme ve hře používat (pokud budeme později chtít nějakou z těchto hodnot změnit, tak to může udělat zde a nemusíme procházet celý soubor)
const SIRKA_KBELIKU = 50;
const VYSKA_KBELIKU = 60;

// získání kontextu ke canvasu
let canvas = document.getElementById("MujCanvas");
let ctx = canvas.getContext("2d");

// nastavení barvy kterou budeme vykreslovat obdelník
ctx.fillStyle = "green";

// vytváříme si objekt kbelik ve kterém budeme ukládat souřadnice kbelíku
let kbelik = {
    xSouradnice: (canvas.width/2)-(SIRKA_KBELIKU/2),
    ySouradnice: 435
};

// nastartujeme si Main Loop
requestAnimationFrame(mainLoop);

// update funkce ve které později budeme psát logiku naší hry
function update(delta) {
}

// draw funkce která bude sloužit k vykreslování naší hry
function draw() {
    // vymažeme obsah canvasu
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // vykreslíme kbelík (zatím teda jen obdelník)
    ctx.fillRect(kbelik.xSouradnice, kbelik.ySouradnice, SIRKA_KBELIKU, VYSKA_KBELIKU);
}

Ovládání kbelíku

Kbelík máme ve hře přidaný, ale ještě ho nemůžeme ovládat. Přidáme si tedy do našeho kódu event listenery, které nám umožní kbelík posouvat. Pokud stiskneme šipku doleva, tak budeme chtít aby se kbelík začal posouvat doleva a pokud šipku doprava, tak aby se posouval doprava.

Tady na stránce se vám může ovládání trochu sekat, pokud si ale při čtení tohoto tutoriálu hru zkoušíte programovat sami, tak by to mělo být v pohodě.

Zobrazení skóre a startování hry

Nyní bychom mohli do naší hry přidat zobrazení skóre v levé horní části canvasu a možnost začít hrát hru až po stisknutí tlačítka Enter. Skóre zatím bude samozřejmě stále na nule, ještě jsme do hry nepřidali žádné kapky, které by hráč mohl do kbelíku chytat a zvyšovat si tak skóre.

Pokud už v canvasu nevidíte nápis že pro start hry máte stisknout tlačítko Enter, tak můžete obnovit stránku.

Přidání padajících kapek

Teď bychom mohli do hry přidat padající kapky, které hráč bude chytat a zvyšovat si tak skóre. Místo obrázku kapky můžeme stejně jako u kbelíku prozatím vykreslovat jen obdelník.

Poté už bude hra v podstatě hotová a už jen nahradíme obdelníky za obrázky a přidáme zvuk.

Přidání obrázků a zvuků

Na závěr můžeme obyčejné obdelníky nahradit obrázkami a přidat i zvuky. Obrázky a zvuky si můžete stáhnout zde.

Než začneme vykreslovat na canvas obrázky, tak si je nejdříve musíme přidat na naši HTML stránku, jak ukazuje ukázka kódu. Poté si je v javascriptu na stránce najdeme a můžeme je na canvas vykreslit.

Ukázku canvasu jsem sem nedával, protože už je na začátku této části.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            canvas {
                border: 2px solid #f7f7f7;
                background-color: #252525;
            }
        </style>
    </head>
    <body>
        <canvas width="300" height="500" id="MujCanvas"></canvas>

        
        <div style="display: none;">
            
            <img src="./kbelik.png" id="ObrazekKbelik">
            <img src="./kapka.png" id="ObrazekKapka">
        </div>

        <script src="./mainLoop.js"></script>
        <script src="./hra.js"></script>
    </body>
</html>

Kvíz

V této části jsme si zkusili naprogramovat jednoduchou hru. Protože jsme k tomu používali věci z minulých kapitol, tak je tu pro vás nachystaný kvíz na všechny čtyři kapitoly.

Some question