Lav dit første spil med Phaser 3

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.

← Previous