Créer le jeu Pong avec Phaser 3
Recréer le célèbre jeu Pong avec le framework Phaser 3 dans un navigateur web !
Tout au long de ce projet, nous allons recréer ensemble le célèbre jeu Pong dans un navigateur Web. Pour cela, nous allons utiliser le Framework JavaScript Phaser 3 qui permet de manipuler la balise Canvas en HTML. On pourra ainsi gérer le positionnement, les collisions, les contrôles (avec les touches directionnelles, afficher les scores, etc...).
A la fin, vous serez capable d'améliorer le projet ou développer le vôtre !
Vous souhaitez voir les possibilités de Phaser 3 ? Alors regardez cette vidéo :
Tout ce qui est inclus...
- Comprendre le concept d'un jeu sous Phaser 3
- Les bases de Phaser 3
- Ajouter des textes, des images, ...
- Gérer la physique d'un jeu (gravité ou non)
- Création d'un Pong étape par étape
- + 2h20 de vidéos explicatives
- Code source final (téléchargeable)
Formateur
Freelance depuis 2016, j'ai travaillé pour des entreprises et des particuliers dans la réalisation de sites web & applications ! Je me réoriente désormais en tant que formateur.
Programme
1 - Introduction
Available in
days
days
after you enroll
2 - Les bases de Phaser
Available in
days
days
after you enroll
-
VisionnerCode source - base d'un jeu Phaser 3
-
Visionner1 - Présentation de Phaser (5:12)
-
Visionner2 - Fonctionnement global de Phaser 3 (7:59)
-
Preview3 - Projet de base (12:07)
-
Preview4 - Ajouter des textes (8:33)
-
Visionner5 - Ajouter une image (+ animer) (6:03)
-
Visionner6 - Configuration & physique du jeu (6:21)
3 - Création du Pong
Available in
days
days
after you enroll
-
VisionnerCode source - Base du jeu Pong
-
Visionner1 - Configuration du jeu (4:26)
-
Visionner2 - Ajout des paddles (7:39)
-
Visionner3 - Détection des touches (7:56)
-
Visionner4 - Gestion de la collision des paddles (5:19)
-
Visionner5 - Ajouter la balle (+ collision) (4:51)
-
Visionner6 - collision de la balle (7:38)
-
Visionner7 - Ajout des points (7:33)
-
Visionner8 - Spawn aléatoire de la balle (18:02)
-
Preview9 - Accélérer la balle au rebond (6:33)
-
Visionner10 - Améliorations du jeu (8:47)
-
VisionnerCode source - code final (Pong fonctionnel)