Lav dit f├©rste spil med Phaser 3 - Del 10 - Deflekterende bomber

For at f├Ñ rundet vores spil af, er det nu p├Ñ tide at tilf├©je nogle modstandere. Det vil give et element af udfordring til spillet, som det hidtil har manglet.

Ideen er som f├©lger: F├©rste gang man indsamler alle stjernerne udl├©ser det en deflekterende bombe. Bomben bev├ªger sig vilk├Ñrligt rundt p├Ñ banen og deflekteres fra v├ªgge og platforme. Hvis man st├©der ind i den, d├©r man. Alle stjernerne genskabes ogs├Ñ, s├Ñ man kan indsamle dem igen, og hvis man g├©r det, udl├©ses endnu en bombe. Det vil skabe en udfordring for spilleren: F├Ñ s├Ñ h├©j en score som muligt uden at d├©.

Det f├©rste vi har brug for er en gruppe til bomberne og et par Collider-objekter:

bombs = this.physics.add.group();

this.physics.add.collider(bombs, platforms);

this.physics.add.collider(player, bombs, hitBomb, null, this);

Bomberne deflekterer p├Ñ platformene, og hvis spilleren rammer dem kalder vi funktionen hitBomb. Det eneste den g├©r, er at stoppe spillet og farve spilleren r├©d:

function hitBomb (player, bomb)
{
    this.physics.pause();

    player.setTint(0xff0000);

    player.anims.play('turn');

    gameOver = true;
}

S├Ñ langt, s├Ñ godt - men vi skal jo udl├©se en bombe. Til det form├Ñl ├ªndrer vi lidt i funktionen collectStar:

function collectStar (player, star)
{
    star.disableBody(true, true);

    score += 10;
    scoreText.setText('Score: ' + score);

    if (stars.countActive(true) === 0)
    {
        stars.children.iterate(function (child) {

            child.enableBody(true, child.x, 0, true, true);

        });

        var x = (player.x < 400) ? Phaser.Math.Between(400, 800) : Phaser.Math.Between(0, 400);

        var bomb = bombs.create(x, 16, 'bomb');
        bomb.setBounce(1);
        bomb.setCollideWorldBounds(true);
        bomb.setVelocity(Phaser.Math.Between(-200, 200), 20);

    }
}

Vi bruger metoden countActive fra Group-objektet til at se hvor mange stjerner, der stadig er i live. Hvis det er nul, har spilleren indsamlet dem alle, og s├Ñ bruger vi funktionen iterate til at genaktivere alle stjernerne og s├ªtte deres y-position tilbage til 0. Det f├Ñr dem alle til at falde ned fra toppen af sk├ªrmen igen.

Den n├ªste del af koden skaber en bombe. F├©rst v├ªlger vi et tilf├ªldigt x-koordinat, altid i modsatte side af sk├ªrmen i forhold til spilleren, bare for at give ham en chance. S├Ñ skabes bomben, den indstilles til at kunne kollidere med verdnen, deflektere via bounce-v├ªrdien og til at have en tilf├ªldig hastighed.

Slutresultatet er en fin lille bombesprite der deflekteres omkring p├Ñ sk├ªrmen. Lille nok til at den i f├©rste omgang er let at undg├Ñ, men n├Ñr der f├©rst kommer flere af dem, bliver det en hel del sv├ªrere!

Og vores spil er f├ªrdigt :)

Konklusion

Du har nu l├ªrt hvordan man skaber en sprite med fysikegenskaber, at styre dens bev├ªgelser og f├Ñ den til at interagere med andre objekter i en lille spilverden. Der er masser af andre ting du kan g├©re for at bygge videre p├Ñ dette. Hvorfor ikke g├©re banen st├©rre og lade kameraet bev├ªge sig? M├Ñske tilf├©je nye typer af modstandere, nye ting man kan samle op for at f├Ñ points, eller giv spilleren en helbredsbj├ªlke.

Eller, hvis du ├©nsker et ikke-voldeligt spil, s├Ñ kan du g├©re det til en tidsudfordring at lade spilleren indsamle stjernerne s├Ñ hurtigt som muligt.

Med det, som du har l├ªrt i denne tutorial, og de hundredevis af andre frit tilg├ªngelige eksempler, har du f├Ñet et solidt fundament for fremtidige projekter. Men, som altid: Hvis du har sp├©rgsm├Ñl, brug for gode r├Ñd eller ├©nsker at dele det, som du har arbejdet p├Ñ, s├Ñ bed endelig om hj├ªlp i Phasers forum.

Facebook Instant Games

Phaser 3 underst├©tter til fulde udvikling af Facebook Instant Games. Nu hvor du har l├ªrt at lave et Phaserspil, hvorfor s├Ñ ikke se, hvor let det er at konvertere det til et Instant Game i vores dedikerede Getting Started Guide.