Jeu de casse-briques 2D en pur JavaScript
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.
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 :
- Créer l'élément canvas et dessiner dessus
- Déplacer la balle
- Rebondir sur les murs
- Contrôles clavier
- Jeu terminé
- Construire le mur de briques
- Détection des collisions
- Afficher le score et gagner
- Contrôles souris
- 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é par l'apprentissage du développement 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 faire une présentation sur le développement de jeux en général .