Lesní prostředí

Tato hra je klasickou 2D "posouvačkou": to znamená, že se na ni díváme ze strany a postava se pohybuje dopředu nebo dozadu. U tohoto typu hry chceme, aby byla naše postava vždy uprostřed obrazovky, a zdánlivý pohyb postavy tak simulujeme posunutím pozadí kolem postavy. Je to jen trik, ale funguje!

Začneme tím, že nakreslíme části, které nevykonávájí žádný pohyb, modré nebe a hnědou zemi:

draw = function() {
    background(227, 254, 255);
    fill(130, 79, 43);
    rect(0, height*0.90, width, height*0.10);
    // ...
}

Abychom vytvořili zdání bočního posunu, pojďme přidat trávu pomocí obrázku trávy z knihovny obrázků. Jedním ze způsobů, jak bychom mohli vytvořit toto pohybující se prostředí, by bylo předstírat, že je naše plátno 3000 pixelů široké, a tak široká by byla i naše úroveň. Nakreslili bychom tolik bloků trávy, kolik by se do těchto 3000 pixelů vešlo a pokaždé bychom je přesouvali. Ale to není příliš efektivní způsob a na efektivitě nám u programování her záleží. Namísto toho obrázky trávy budeme dokola opakovat. Nakreslíme jich tolik, kolik jich potřebujeme, abychom přešli přes obrazovku o velikosti 400 pixelů, a pak pokud nějaký vypadne z levé strany pravé obrazovky, okamžitě ho vrátíme zpět na pravou stranu obrazovky a budeme v tom pokračovat pořád dokola.

Chceme-li to provést, začneme inicializací pole počátečních pozic pro bloky trávy:

var grassXs = [];
for (var i = 0; i < 25; i++) {
    grassXs.push(i*20);
}

Poté uvnitř našeho cyklu nakreslíme každý z nich:

for (var i = 0; i < grassXs.length; i++) {
   image(getImage("cute/GrassBlock"), grassXs[i], height*0.85, 20, 20);
}

Jako statická scéna to nevypadá špatně, ale potřebujeme to rozhýbat! Můžeme proto od každé pozice trávy pokaždé odečíst číslo jedna, čímž je posuneme o 1 pixel doleva.

for (var i = 0; i < grassXs.length; i++) {
   image(getImage("cute/GrassBlock"), grassXs[i], height*0.85, 20, 20);
    grassXs[i] -= 1;
}

Nyní se bude tráva pohybovat, až nakonec zmizí, když se hodnoty souřadnice x dostanou do minusu. Pamatuj, trávu chceme opakovat pořád dokola - chceme ji přesunout na pravou stranu plátna, jakmile opustí levou stranu. Chceme-li to provést, zkontrolujeme, zda jsme dostatečně daleko od obrazovky (pamatuj, že naše obrázky jsou vykresleny z levého horního rohu), a nastavíme hodnotu souřadnice x na šířku plátna:

for (var i = 0; i < grassXs.length; i++) {
   image(getImage("cute/GrassBlock"), grassXs[i], height*0.85, 20, 20);
    grassXs[i] -= 1;
    if (grassXs[i] <= -20) {
        grassXs[i] = width;
    }
}

Takže nakonec máme bobra, který vypadá, jakože se pohybuje a skáče. Kouzlo!

Máme tedy skákajícího bobra na pozadí, které se posouvá do strany. Ale náš bobr nemá co dělat! Musíme přidat klacíky, které bude moci posbírat.

Pojďme trochu popřemýšlet o tom, jak klacíky naprogramovat:

Každý klacík má souřadnici x a y. My chceme, aby byly souřadnice x odděleny o určitou hodnotu (možná konstantu nebo náhodné číslo v určitém rozmezí), a chceme, aby souřadnice y byly náhodně vybrány v určitém rozmezí, aby uživatel musel ovládat stoupání a klesání bobra.
Klacíky by měly kopírovat pohyb trávy, ale neměly by se opakovat. Jakmile je klacík mimo obrazovku, je pryč už navždy.
Mělo by být nastaveno určité množství klacíků pro každou úroveň - v určitém okamžiku by klacíky měly zmizet.

Existuje mnoho způsobů, jak bychom mohli klacíky naprogramovat, ale zdají se být dost složité. Pojďme je proto modelovat jako objekt, stejně jako jsme modelovali postavu bobra:

var Stick = function(x, y) {
    this.x = x;
    this.y = y;
};

Stick.prototype.draw = function() {
    fill(89, 71, 0);
    rect(this.x, this.y, 5, 40);
};

Ještě než naše hra začne běžet - hned po inicializaci našeho bobra - vytvořme pole 40 klacíků, s konstantní odchylkou a náhodnou hodnotou souřadnice y:

var sticks = [];
for (var i = 0; i < 40; i++) {  
    sticks.push(new Stick(i * 40 + 300, random(20, 260)));
}

Nyní můžeme nakreslit klacíky - podobně jako jsme nakreslili trávu, akorát bez okolního kódu:

for (var i = 0; i < sticks.length; i++) {
    sticks[i].draw();
    sticks[i].x -= 1;
}

Zde je program s klacíky vykreslenými daným kódem. Zkus pro ně vyskákat! Co se stane? Nic! Hned to opravíme...

Chceš se zapojit do diskuze?

Přihlášení

Setřídit podle:

Zatím žádné příspěvky.

Umíš anglicky? Kliknutím zobrazíš diskuzi anglické verze Khan Academy.