Space Defender - partie mise en place du projet

Dans un article précédent, je vous ai montré comment mettre en place un projet PixiJS avec Vite et TypeScript. Dans cet article, nous allons créer un jeu de défenseur spatial simple basé sur cette configuration.

Pour ce projet, je suppose que vous avez des connaissances de base sur la programmation en TypeScript/JavaScript. Et comme nous nous concentrons sur PixiJS, je ne me concentrerai pas trop sur le côté HTML/CSS.

Le code source final se trouve dans mon référentiel GitHub et si vous souhaitez jouer au jeu, vous pouvez le trouver ici.

Mise en place du projet

Si vous n'avez pas encore configuré de projet PixiJS avec Vite et TypeScript, je vous recommande de lire d'abord mon article précédent dans lequel j'explique comment le configurer et le faire fonctionner.

Configurons rapidement le fichier index.html avec le contenu dont nous avons besoin pour ce projet. Remplacez le contenu du fichier

élément avec ce qui suit :

<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>

Ce sera la structure de notre jeu, nous avons un HUD (Heads Up Display) qui montrera la vie, le niveau et le score du joueur. Et un conteneur de jeu dans lequel nous rendrons le jeu. Dans la partie 4, nous commencerons à l'utiliser.

Ensuite, nous devons appliquer du CSS à cela pour qu'il soit bien affiché à l'écran. Accédez à la feuille de style appelée styles.css dans le dossier src et ajoutez le contenu suivant :

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;
    }
}

Préparation de l'écran de jeu

Super ! Maintenant que nous avons la structure de base en place, commençons par créer l'écran de jeu. Nous devons avoir une variable qui contient l'élément conteneur du jeu afin que le jeu sache où insérer le canevas du jeu dans le DOM.

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

    // ....
});

Après cela, nous devons mettre à jour la taille de notre application pour qu'elle corresponde à la taille du jeu que nous voulons, dans notre cas, nous voulons un jeu de 480 de large et 720 de haut. Nous devons donc mettre à jour l'appel app.init pour qu'il corresponde à cette taille.

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

Et puis remplacez

document.body.appendChild(app.canvas);

avec

gameContainer.appendChild(app.canvas);

Nous avons maintenant un écran de jeu d'une taille de 480 x 720 pixels et affiché au centre de l'écran.

Dans la partie suivante, nous commencerons à créer le vaisseau du joueur et à le faire bouger et tirer.

---

Configuration PixiJS avec Vite et TypeScript

M. Linxed ・ 20 avril

#webdev #javascript #débutants #tutoriel

Accomplissez davantage avec le "Cult of Done"

M. Linxed ・ 18 février

#productivité #débutants #discuter #motivation

---

N'oubliez pas de vous inscrire à ma newsletter pour être le premier informé des tutoriels similaires à ceux-ci.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!