Space Defender - partie du joueur

Dans la partie précédente, nous avons créé la structure de base de notre jeu. Dans cette partie, nous allons commencer à créer le vaisseau du joueur et le faire bouger et tirer.

Le code source final se trouve dans mon dépôt GitHub
Et si vous voulez jouer au jeu, vous pouvez le trouver ici

Configuration du clavier

Avant de commencer à configurer notre lecteur, nous avons besoin d'un moyen de gérer les événements du clavier. Pour cela, j'ai utilisé le contrôleur de clavier trouvé sur un tutoriel PixiJS de kittykatattack et je l'ai adapté à TypeScript.
Vous pouvez le trouver sur mon référentiel GitHub.

Nous n'entrerons pas dans les détails de son fonctionnement, car cela sort du cadre de ce projet, mais ce qu'il fait, c'est écouter les événements keydown et keyup et définir une valeur booléenne pour chaque touche enfoncée ou libéré. De cette façon, nous pouvons vérifier dans notre boucle de jeu si une touche est enfoncée ou relâchée et mettre à jour le comportement de nos joueurs en conséquence.

Pour utiliser le contrôleur de clavier, téléchargez le fichier Keyboard.ts depuis le commit ci-dessus et placez-le dans le dossier src/helpers de votre projet.

Création du lecteur

Maintenant que nous avons un moyen de gérer les événements du clavier, nous pouvons commencer à créer notre lecteur. Dans un prochain tutoriel, nous créerons un jeu plus complexe et diviserons notre projet en plusieurs fichiers. Pour l'instant, nous nous en tiendrons à un seul fichier.

Juste après avoir initialisé votre application PixiJS, attendez app.init({ dans le fichier main.ts, ajoutez le code suivant :

const Player = new Graphics();

Player
    .poly([
        0, 0,
        50, 0,
        25, -25,
    ])
    .fill(0x66CCFF);

Player.x = app.screen.width / 2 - Player.width / 2;
Player.y = app.screen.height - 50;

Ce que cela fera, c'est créer un nouvel objet graphique, dessiner un triangle avec la méthode poly, le remplir d'une couleur bleu clair et le positionner en bas de l'écran.

Si vous démarrez votre jeu maintenant, vous verrez un petit triangle en bas de l'écran. Mais nous voulons pouvoir le déplacer. Pour ce faire, nous devons mettre à jour la position du joueur en fonction de la saisie au clavier.

Déplacer le joueur

Nous devrons d’abord capturer la saisie au clavier. Ajoutez le code suivant juste après l'endroit où nous avons créé notre lecteur :

let playerSpeedX = 0;

const arrowLeftHandler = KeyHandler(
    "ArrowLeft",
    () => playerSpeedX = -500,
    () => {
        // To prevent player from stopping moving if the other arrow key is pressed
        if(!arrowRightHandler.isDown) {
            playerSpeedX = 0;
        }
    }
);

const arrowRightHandler = KeyHandler(
    "ArrowRight",
    () => playerSpeedX = 500,
    () => {
        // To prevent player from stopping moving if the other arrow key is pressed
        if(!arrowLeftHandler.isDown) {
            playerSpeedX = 0;
        }
    }
);

Ce code crée deux KeyHandlers, un pour la touche fléchée gauche et un pour la touche fléchée droite. Lorsque la touche est enfoncée, la vitesse du joueur sur l'axe des x est réglée sur -500 ou 500. Lorsque la touche est relâchée, la vitesse du joueur est réglée sur 0. De cette façon, nous pouvons déplacer le joueur vers la gauche et la droite.

Cela en soi ne déplacera pas le joueur, nous devons mettre à jour la position du joueur dans la boucle de jeu. Remplacez l'appel app.ticker.add par le code suivant :

app.ticker.add((ticker) => {
    const delta = ticker.deltaTime / 100;
    Player.x += playerSpeedX * delta;
});

Si vous n'aviez pas l'appel app.ticker.add dans votre code, vous pouvez simplement l'ajouter juste après l'endroit où vous avez défini les KeyHandlers.

Maintenant, si vous démarrez votre partie, vous pourrez déplacer le joueur vers la gauche et la droite. Super! Faisons-le tirer.

Tournage

Il y a trois choses auxquelles nous devons penser lorsque nous voulons faire tirer le joueur :

1. Lorsque le joueur appuie sur la barre d'espace, nous voulons créer une nouvelle puce.
2. Nous souhaitons mettre à jour la position de la balle dans la boucle du jeu.
3. Nous voulons retirer la balle lorsqu'elle sort des limites.

Nous avons donc besoin d'une méthode qui crée une balle, l'ajoute à un tableau de balles, met à jour la position des balles via la boucle de jeu, puis la supprime si elle est hors limites.

Commençons par une méthode qui crée la puce, ajoutez le code suivant en bas de votre fichier main.ts :

let bulletTemplate: PIXI.Graphics | undefined = undefined;
function createBullet(source: PIXI.Graphics) {
    if(!bulletTemplate) {
        bulletTemplate = new Graphics();
        bulletTemplate
            .circle(0, 0, 5)
            .fill(0xFFCC66);
    }

    const bullet = bulletTemplate.clone();
    bullet.x = source.x + 25;
    bullet.y = source.y - 20;
    return bullet;
}

Créer un nouvel objet graphique à chaque fois que nous voulons créer une puce coûte cher, nous créons donc un modèle de puce que nous clonons à chaque fois que nous voulons créer une nouvelle puce. Le clonage coûte moins cher que de créer un nouvel objet à chaque fois.

Nous utilisons ensuite la source (qui a tiré la balle) pour positionner la balle au bon endroit, puis renvoyons l'objet graphique.

D'accord, donc actuellement, cette méthode n'est pas utilisée et rien n'est dessiné à l'écran. Réparons ça.

Nous allons faire en sorte que le joueur puisse tirer en appuyant sur la barre d'espace, nous utiliserons à nouveau le KeyHandler pour cela. Pour dire au KeyHandler d'utiliser la barre d'espace, nous devrons lui donner " " comme clé.

Ajoutez le code suivant juste après l'endroit où nous avons défini les KeyHandlers pour les touches fléchées gauche et droite :

KeyHandler(
    " ",
    () => {
        const bullet = createBullet(Player);
        bullets.push(bullet);
        app.stage.addChild(bullet);
    }
);

Ce code créera une nouvelle puce lorsque la barre d'espace sera enfoncée, l'ajoutera à un tableau de puces et l'ajoutera à la scène, afin que nous la voyions.

Nous n'avions pas encore le tableau bullets, alors ajoutons-le juste après l'endroit où nous avons défini l'objet Player :

const bullets: PIXI.Graphics[] = [];

Maintenant, si vous démarrez votre jeu, vous pourrez déplacer le joueur vers la gauche et la droite et tirer des balles. Mais les balles resteront pour toujours sur l’écran. Réparons ça.
Dans la boucle de jeu, nous mettrons à jour la position des balles et les supprimerons si elles sortent des limites. Ajoutez le code suivant à votre boucle de jeu, juste en dessous de l'endroit où nous mettons à jour la position du joueur :

for(let i = 0; i 


<p>This part of the code will loop over all the bullets, update their position by moving them up 10 pixels and check if they are out of bounds. If they are, we remove them from the stage and the bullets array.</p>

<p>And that's it! You now have a player that can move left and right and shoot bullets. In the next part we'll create enemies and shoot them down!</p>

<hr>


<div class="ltag__link">
  
    <div class="ltag__link__pic">
      <img src="https://img.php.cn/upload/article/000/000/000/172152276283279.png" alt="Space Defender - partie du joueur" loading="lazy">
    </div>
  
  
    <div class="ltag__link__content">
      <h2>PixiJS Setup with Vite and TypeScript</h2>
      <h3>Mr. Linxed ・ Apr 20</h3>
      <div class="ltag__link__taglist">
        #webdev
        #javascript
        #beginners
        #tutorial
      </div>
    </div>
  
</div>



<div class="ltag__link">
  
    <div class="ltag__link__pic">
      <img src="https://img.php.cn/upload/article/000/000/000/172152276283279.png" alt="Space Defender - partie du joueur" loading="lazy">
    </div>
  
  
    <div class="ltag__link__content">
      <h2>Accomplish more with the "Cult of Done"</h2>
      <h3>Mr. Linxed ・ Feb 18</h3>
      <div class="ltag__link__taglist">
        #productivity
        #beginners
        #discuss
        #motivation
      </div>
    </div>
  
</div>




<hr>

<p>Don't forget to sign up to my newsletter to be the first to know about tutorials similar to these.</p>


          

            
  

            
        

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!