Jeu de casse-briques 2D avec du pure JavaScript

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

Dans ce tutoriel, nous allons pas à pas un jeu de casse-briques MDN créé entièrement avec JavaScript et sans framework et rendu avec la balise HTML5 <canvas>.

Chaque étape est modifiable en direct, et disponible en test pour que vous puissiez voir ce à quoi les étapes intermédiaires devraient ressembler. Vous apprendrez les bases d'utilisations de l'élément <canvas> pour implémenter des mécaniques de base du jeu vidéo, comme charger et déplacer des images, les détections de collisions, les mécanismes de controles, et les conditions de victoire/défaite.

Pour comprendre la plupart de ce tutoriel, vous devrez déjà avoir un niveau basique ou intermédiaire en JavaScript. À la fin de ce tutoriel, vous serez capable de créer vos propres jeux Web.

Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives.

Liste des chapitres

Tous les chapitres — et les différentes versions de ce jeu de casse-brique MDN que nous allons créer ensemble — sont disponibles sur GitHub:

  1. Créer le Canvas et dessiner dessus
  2. Bouger la boule
  3. Rebondir sur les murs
  4. Controles clavier
  5. Game over
  6. Construire le mur de briques
  7. Détection des collisions
  8. Afficher le score et gagner
  9. Controles souris
  10. Fin

Commencer avec du Javascript pur et dur est le meilleur moyen d'acquérir des connaissances du développement du jeu web. Après ceci, vous pourrez prendre n'importe quel Framework vous voulez et les utiliser pour vos projets. Les Frameworks sont des outils créés avec le langage Javascript; donc même si vous voulez travailler avec ces derniers, c'est toujours bon d'apprendre le langage lui-même pour savoir ce qu'il se passe exactement. Les Frameworks améliorent la vitesse de développement and aident à faire les parties ennuyeuses du jeu, mais si quelque chose ne fonctionne pas comme prévu, vous pouvez toujours essayer de le débuger ou juste écrire vos propre solutions en Javascript. 

Note: Si vous êtes intéressé d'apprendre un jeu web 2D avec un framework, consulter la série 2D breakout game using Phaser.

Note: This series of articles can be used as material for hands-on game development workshops. You can also make use of the Gamedev Canvas Content Kit based on this tutorial if you want to give a talk about game development in general.

Prochaines étapes

Ok, c'est parti ! Rendez-vous au premier chapitre pour commencer — Créer le canvas et dessiner dessus

 

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : Flacipe, mboultoureau
 Dernière mise à jour par : Flacipe,