Jeu Pong Web
Presentation
Objectif principal : Recreer le classique Pong dans le navigateur. L'idee c'etait de faire un truc jouable en local a deux ou contre une IA basique. Pas de frameworks, juste du JavaScript vanilla et Canvas.
Technologies utilisees : JavaScript pour la logique, HTML5 Canvas pour l'affichage, et un peu de CSS pour le menu. J'ai voulu garder ca simple pour bien comprendre comment fonctionne une boucle de jeu.
Fonctionnalites cles : Mode 2 joueurs sur le meme clavier, mode solo contre l'IA, choix de la difficulte (l'IA reagit plus ou moins vite), compteur de score et son quand la balle tape les raquettes.
Livrables attendus : Un jeu fonctionnel dans le navigateur, pas besoin de serveur. Le fichier HTML s'ouvre et c'est parti.
Calendrier previsionnel : Fait en une semaine environ. Le plus long c'etait de calibrer l'IA pour qu'elle soit battable mais pas nulle.
Parties prenantes & criteres de succes : Projet perso pour m'entrainer. Le critere c'etait que ce soit fun a jouer et que mes potes puissent faire des parties sans bugs.
Le Defi
Le truc chaud c'etait la physique de la balle. Quand elle tape la raquette, faut calculer l'angle de rebond selon ou elle touche. Au debut elle partait n'importe ou, j'ai du faire plein de tests pour trouver la bonne formule.
La Solution
J'ai utilise requestAnimationFrame pour la boucle de jeu, ca donne du 60 FPS fluide. Pour l'angle de rebond, je calcule la distance entre le centre de la raquette et le point d'impact, et ca me donne l'angle. Plus tu frappes sur le bord, plus ca part en diagonale.
Architecture Technique
Un objet Ball avec position et vitesse, deux objets Paddle, et une classe Game qui gere tout. L'IA c'est juste un calcul qui predit ou la balle va arriver et bouge la raquette vers ce point avec un delai pour pas qu'elle soit parfaite.
Points Cles
- Rebonds realistes avec angles variables
- IA avec 3 niveaux de difficulte
- Mode 2 joueurs local
Apercu
Resultats & Apprentissages
Le jeu marche bien, on s'amuse vraiment dessus. J'ai compris comment fonctionne une game loop et comment gerer les collisions. Le plus formateur c'etait l'IA, j'ai du reflechir a comment simuler un comportement humain imparfait.
Evolutions Futures
Ajouter un mode en ligne avec WebSocket pour jouer a distance. Peut-etre des power-ups comme une balle qui accelere ou des raquettes qui retrecissent. Et un classement des scores en ligne.