2D breakout game using Phaser

Dans ce tutoriel étape par étape, nous créons un simple jeu mobile MDN Breakout écrit en JavaScript, en utilisant le framework Phaser.

Chaque étape a des échantillons modifiables, disponibles pour jouer avec, de sorte que vous pouvez voir à quoi devraient ressembler les étapes intermédiaires. Vous apprendrez les bases de l'utilisation du framework Phaser pour implémenter les mécanismes fondamentaux du jeu comme le rendu et le mouvement des images, la détection des collisions, les mécanismes de contrôle, les fonctions d'aide spécifiques aux cadres, les animations et les interpolations, les états gagnants et perdants.

Pour tirer le meilleur parti de cette série d'articles, vous devez déjà avoir des connaissances de base ou intermédiaires en JavaScript. Après avoir parcouru ce tutoriel, vous devriez être capable de construire vos propres jeux Web simples avec Phaser.

Détails de la leçon

Toutes les leçons - et les différentes versions du jeu MDN Breakout game que nous construisons ensemble - sont disponibles sur GitHub :

  1. Initialiser le cadre
  2. Mise à l'échelle
  3. Charger les actifs et les imprimer à l'écran
  4. Déplacer le ballon
  5. Physique
  6. Rebondir sur les murs
  7. Pagaie et commandes du joueur
  8. Fin de la partie
  9. Construisez le champ de briques
  10. Détection de collision
  11. Le score
  12. Gagnez la partie
  13. Extra vies
  14. Animations et préadolescents
  15. Boutons
  16. Mode de jeu aléatoire

Comme note sur les parcours d'apprentissage — en commençant par le JavaScript pur est le meilleur moyen d'acquérir une solide connaissance du développement de jeux en ligne. Si vous n'êtes pas déjà familier avec le développement de jeux en JavaScript pur, nous vous suggérons de travailler d'abord avec l'homologue de cette série, 2D breakout game using pure JavaScript.

Après cela, vous pouvez choisir n'importe quel framework que vous voulez et l'utiliser pour vos projets ; nous avons choisi Phaser car c'est un bon framework solide, avec un bon support et une communauté disponible, et un bon ensemble de plugins. Les cadres accélèrent le temps de développement et aident à prendre soin des parties ennuyeuses, vous permettant ainsi de vous concentrer sur les choses amusantes. Cependant, les frameworks ne sont pas toujours parfaits, donc si quelque chose d'inattendu se produit ou si vous voulez écrire des fonctionnalités que le framework ne fournit pas, vous aurez besoin de connaissances en JavaScript pur.

Note : Cette série d'articles peut être utilisée comme matériel pour des ateliers pratiques de développement de jeux. Vous pouvez également utiliser la fonction Gamedev Phaser Content Kit basé sur ce tutoriel si vous voulez donner une conférence sur le développement d'un jeu avec Phaser.

Prochaines étapes

Ok, commençons ! Aller à la première partie de la série — Initialize the framework.