Kolízie sú skvelá vec, ale to, čo nutne potrebujeme je, aby sa naša postava pohybovala. Asi ťa napadlo pozrieť sa do dokumentácie a nájsť spôsob pridania poslucháča k udalosti, ale to tu nepotrebujeme. Phaser má zabudovanÛ manaŝer klávesnice a jedna z jeho vÛhod je táto malá funkcia:

cursors = this.input.keyboard.createCursorKeys();

Funkcia pridá do objektu cursors štyri vlastnosti: up, down, left, right. Sú to všetko inštancie objektu Key. Ďalej nám uŝ stačí iba zisťovať ich stav počas slučky update:

if (cursors.left.isDown)
{
    player.setVelocityX(-160);

    player.anims.play('left', true);
}
else if (cursors.right.isDown)
{
    player.setVelocityX(160);

    player.anims.play('right', true);
}
else
{
    player.setVelocityX(0);

    player.anims.play('turn');
}

if (cursors.up.isDown && player.body.touching.down)
{
    player.setVelocityY(-330);
}

Pridali sme dosť kódu, ale kód je zrozumiteĝnÛ .

Najskôr kontrolujeme, či je stlačenÛ kláves left. Ak áno, nastavíme zápornu horizontálnu rÛchlosť a spustíme animáciu pohybu doĝava. Ak je stlačenÛ kláves right, urobíme opak.

Treba zdôrazniť, ŝe postava sa bude pohybovať len vtedy, keď je kláves stlačenÛ a zastaví sa ihneď po jeho uvoĝnení. Phaser tieŝ umoŝňuje vytvárať omnoho komplexnejší pohyb s hybnosťou a zrÛchlením, ale pre túto hru to nepotrebujeme. Podmienka else nuluje rÛchlosť a nastavuje animáciu na 'turn' v prípade, ŝe nie je stlačenÛ ŝiaden kláves.

Skok

Posledná časť kódu pridává skok. Naším klávesom pre skok je kláves up a my testujeme, či je stlačenÛ. Nechceme, aby naša postava mohla skákať i vo vzduchu, tak testujeme aj to, či sa dotÛka plošinky.

Ak s├║ obe tieto podmienky splnen├®, nastav├¡me vertik├ílnu r├¢chlos┼Ñ na - 330 pixelov za sekundu. Postava bude pada┼Ñ na ter├®n automaticky, preto┼¥e na ┼êu p├┤sob├¡ gravit├ícia. S dokon─ìen├¢m ovl├ídan├¡m tu m├íme hern├¢ svet, ktor├¢ m├┤┼¥eme za─ìa┼Ñ sk├║ma┼Ñ. Spusti si part7.html a hraj sa. Pohraj sa s hodnotou -330 pre skok. Sk├║s ju zv├¢┼íi┼Ñ alebo zn├¡┼¥i┼Ñ a sleduj, ak├¢ to bude ma┼Ñ efekt.

image