Space Defender – Teil der Einrichtung des Projekts

In einem früheren Beitrag habe ich Ihnen gezeigt, wie Sie ein PixiJS-Projekt mit Vite und TypeScript einrichten. In diesem Beitrag erstellen wir ein einfaches Space-Defender-Spiel, das auf diesem Setup aufbaut.

Für dieses Projekt gehe ich davon aus, dass Sie über Grundkenntnisse in der Programmierung in TypeScript/JavaScript verfügen. Und weil wir uns auf PixiJS konzentrieren, werde ich mich nicht zu sehr auf die HTML/CSS-Seite konzentrieren.

Der endgültige Quellcode ist in meinem GitHub-Repository zu finden und wenn Sie das Spiel spielen möchten, können Sie ihn hier finden.

Einrichten des Projekts

Wenn Sie noch kein PixiJS-Projekt mit Vite und TypeScript eingerichtet haben, empfehle ich Ihnen, zuerst meinen vorherigen Beitrag zu lesen, in dem ich erkläre, wie Sie es einrichten und zum Laufen bringen.

Lassen Sie uns schnell die Datei index.html mit dem Inhalt einrichten, den wir für dieses Projekt benötigen. Ersetzen Sie den Inhalt des

Element mit folgendem:

<div id="app">
    <div id="gameHud">
        <div>
            Lives: <span id="gameLives"></span>
        </div>
        <div>
            Level: <span id="gameLevel"></span>
        </div>
        <div>
            Score: <span id="gameScore"></span>
        </div>
    </div>
    <div id="game">

    </div>
</div>

Dies wird die Struktur unseres Spiels sein. Wir haben ein HUD (Heads-Up-Display), das die Leben, das Level und den Punktestand des Spielers anzeigt. Und einen Spielecontainer, in dem wir das Spiel rendern werden. In Teil 4 werden wir damit beginnen, davon Gebrauch zu machen.

Als nächstes müssen wir etwas CSS darauf anwenden, damit es schön auf dem Bildschirm angezeigt wird. Navigieren Sie zum Stylesheet namens „styles.css“ im Ordner „src“ und fügen Sie den folgenden Inhalt hinzu:

body {
    margin: 0;
    background-color: darkgrey;
}

#app {
    height: 100vh;
    width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#gameHud {
    display: flex;
    width: 100%;
    padding: 10px;
    background-color: #333;
    color: white;

    > div {
        flex: 1;
    }
}

Vorbereiten des Spielbildschirms

Großartig! Nachdem wir nun die Grundstruktur festgelegt haben, beginnen wir mit der Erstellung des Spielbildschirms. Wir benötigen eine Variable, die das Spielcontainerelement enthält, damit das Spiel weiß, wo es den Spiel-Canvas in das DOM einfügen muss.

(async () => {
    let gameContainer = document.getElementById("app");

    // ....
});

Danach müssen wir unsere App-Größe aktualisieren, um sie an die gewünschte Spielgröße anzupassen. In unserem Fall möchten wir ein Spiel mit einer Breite von 480 und einer Höhe von 720. Daher müssen wir den app.init-Aufruf aktualisieren, um dieser Größe zu entsprechen.

await app.init({
    width: 480,
    height: 720,
});

Und dann ersetzen

document.body.appendChild(app.canvas);

mit

gameContainer.appendChild(app.canvas);

Wir haben jetzt einen Spielbildschirm, der 480 x 720 Pixel groß ist und in der Mitte des Bildschirms angezeigt wird.

Im nächsten Teil beginnen wir mit der Erstellung des Spielerschiffs und sorgen dafür, dass es sich bewegt und schießt.

---

PixiJS-Setup mit Vite und TypeScript

Herr. Linxed ・ 20. April

#webdev #javascript #Anfänger #tutorial

Erreichen Sie mehr mit dem „Cult of Done“

Herr. Linxed ・ 18. Februar

#Produktivität #Anfänger #diskutieren #Motivation

---

Vergessen Sie nicht, sich für meinen Newsletter anzumelden, um als Erster über ähnliche Tutorials informiert zu werden.

Das obige ist der detaillierte Inhalt vonSpace Defender – Teil der Einrichtung des Projekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!