Dans ce tutoriel, nous allons créer 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 contrôle, et les conditions de victoire/défaite.

Pour comprendre la plupart des articles de ce tutoriel, vous devez 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.

Détail de la leçon

Toutes les leçons — 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 l'élément canvas et dessiner dessus
  2. Bouger la boule
  3. Rebondir sur les murs
  4. Contrôles clavier
  5. Jeu terminé
  6. Construire le mur de briques
  7. Détection des collisions
  8. Afficher le score et gagner
  9. Contrôles souris
  10. Finir

Commencer avec du Javascript pur et dur est le meilleur moyen d'acquérir des connaissances de développement de jeu web. Après ceci, vous pourrez prendre n'importe quel "framework" et l'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 et aident à traiter les parties les moins intéressantes du jeu, mais si quelque chose ne fonctionne pas comme prévu, vous pouvez toujours essayer de déboguer ou juste écrire vos propre solutions en Javascript. 

Note : Si vous êtes intéressé d'apprendre un jeu web 2D avec un "framework", consultez la série Jeu de casse-tête 2D avec Phaser.

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 le Gamedev Canvas Content Kit basé sur ce tutoriel si vous voulez tenir un discours sur le développement du jeu en général .

Prochaines étapes

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

 

Étiquettes et contributeurs liés au document

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