Le fait que 98,4 % des sites Web utilisent JavaScript est la raison pour laquelle vous devez le connaître en tant que développeur. Rétrospectivement, créer un jeu avec JavaScript ne vous permet pas seulement d’apprendre rapidement. Il vous permet également de maîtriser l’application de ses concepts simples à complexes dans différentes situations de travail, que vous soyez débutant ou que vous vous perfectionniez.
Si vous apprenez mieux avec des démonstrations visuelles, ces tutoriels de jeux basés sur JavaScript sur YouTube valent la peine d’être vus.
1. Jeu de cartes avec JavaScript
Ce jeu de cartes en JavaScript avec Gavin Lon vous montre comment retourner les cartes avec plus de 600 lignes de code JavaScript. Bien que l’objectif principal soit d’enseigner JavaScript, vous apprendrez également à combiner la puissance de conception de CSS avec la structuration DOM de HTML pour atteindre la réactivité avec JavaScript.
L’objectif final du projet est de retourner deux cartes, et le joueur doit deviner l’As lorsque les cartes changent enfin de place. Chaque carte est une image de quatre rôles différents. Vous ne concevrez pas les cartes vous-même, mais vous apprendrez à manipuler leur position de manière réactive, à incrémenter les tours de jeu, à ajouter ou supprimer des scores lorsque les niveaux changent, et à stocker les scores du jeu dans le stockage local du navigateur, le tout à l’aide de JavaScript.
Le didacticiel est progressif et facile à suivre, malgré le travail considérable que vous aurez à effectuer en coulisses. Il est parfait pour les débutants et les personnes souhaitant se remettre à niveau. Bien qu’il s’agisse de construire un jeu de cartes, il vous expose à la plupart des techniques de câblage de JavaScript dans des situations réelles. De plus, il met à jour votre capacité de réflexion.
2. Jeu d’évasion 2D avec JavaScript
Si vous souhaitez apprendre à contrôler les intervalles d’action et à déplacer les éléments du DOM de manière dynamique à l’aide de JavaScript, Ania Kubów vous montre à quel point c’est amusant avec ce tutoriel sur les jeux de casse-croûte utilisant JavaScript. En outre, la vidéo montre également comment héberger et présenter votre projet à des employeurs potentiels.
Pensez à toutes les possibilités d’un jeu d’évasion : une plate-forme mobile avec une balle qui frappe les murs tangentiellement pour casser les briques au-dessus d’elle. Et vous coderez le système de récompense dans ce jeu également. Dans l’ensemble, ce tutoriel sur les jeux d’évasion vaut la peine d’être considéré si vous voulez construire quelque chose à partir de zéro sans utiliser d’agents tiers ou d’images sourcées.
Alors que vous câblez votre logique dans des fonctions, la vidéo enseigne davantage sur les concepts de classe et d’objet JavaScript en étapes faciles, y compris les meilleures pratiques en matière d’instructions conditionnelles comme le cas d’interrupteur.
3. JavaScript Snake Game
Faites disparaître la nostalgie du jeu Snake II de votre Nokia 3310 en construisant ce jeu de serpent en JavaScript avec Kyle. Vous y avez probablement déjà joué et vous y jouerez sans doute encore de nombreuses fois dans votre vie puisque vous en coderez un en utilisant du JavaScript vanille.
Tout en vous apprenant à relier le DOM de manière dynamique, cette vidéo montre comment vous pouvez construire et utiliser des modules personnalisés en JavaScript. Elle vous donne donc l’occasion d’apprendre à séparer les préoccupations en utilisant le principe DRY (do not repeat yourself, ne pas se répéter).
En coulisses, vous maîtriserez des concepts JavaScript plus avancés. Les tâches, y compris la création d’une grille de joueur, le placement de la nourriture, la construction du corps du serpent, l’allongement du serpent, le codage de la logique de navigation, la création d’un système de récompense et de pénalité, et le contrôle de la vitesse du serpent, vous exposeront au cœur du JavaScript.
4. Jeu de Tic Tac Toe avec JavaScript
Peut-être que votre jeu de Tic Tac Toe s’aiguisera en construisant un jeu avec JavaScript dans une autre vidéo avec Kyle. Il s’agit d’un projet simple mais utile pour les débutants en JavaScript, qui vous permettra de résoudre des problèmes complexes.
La vidéo ne se limite pas à JavaScript. Elle montre également comment soigner la conception de votre interface utilisateur à l’aide de CSS. Avec de la constance et de l’engagement, vous pouvez apprendre presque toutes les techniques nécessaires pour commencer votre parcours de développement web dans cette vidéo.
Tout en manipulant le DOM à l’aide de JavaScript, la vidéo se charge de coder les décisions de victoire et de tirage au sort, de décider des tours des joueurs et de l’alignement des objets. Les fonctions JavaScript, les boucles et les conditions sont quelques-uns des concepts avancés que vous apprendrez dans ce tutoriel vidéo sur le Tic tac Toe JavaScript.
5. Jeu de puzzle avec JavaScript
Les puzzles peuvent être une source de réflexion. Mais en construire un avec du JavaScript vanille semble être un moyen amusant d’explorer votre créativité et d’apprendre des concepts JavaScript de base à complexes.
Vous voudrez coder dans ce tutoriel si vous voulez voir comment utiliser les concepts JavaScript, y compris les commutateurs conditionnels et la manipulation dynamique de la position du DOM à l’aide de fonctions personnalisées et intégrées.
Bien que le didacticiel place le JavaScript à l’intérieur d’une balise script dans le fichier HTML, vous pouvez placer votre script dans un fichier JavaScript dédié et le lier au DOM dans votre cas pour plus de clarté. Quoi qu’il en soit, il est préférable de se concentrer sur la logique de base et le processus de réflexion pour atteindre votre objectif, y compris la façon d’appliquer ce que vous apprenez ici à des scénarios plus réels.
6. Jeu de course de voitures avec JavaScript
Construire un jeu de course de voitures en utilisant du JavaScript vanille ne donnera peut-être pas le meilleur résultat graphique. Mais en créant un jeu de course automobile fonctionnel en suivant ce tutoriel, vous apprendrez à tirer parti de la puissance fonctionnelle de JavaScript dans n’importe quelle application.
Ce tutoriel consiste à placer deux voitures (une rouge et une bleue) sur une piste de course. La voiture bleue apparaît aléatoirement de n’importe quelle direction, et le véhicule rouge, qui représente le joueur, essaie d’éviter une collision. Le jeu se termine lorsqu’il y a contact entre les deux voitures.
Bien qu’il s’agisse d’une simple description de ce que vous allez construire dans ce cours, vous apprendrez la logique avancée du JavaScript pour la manipulation et le style du DOM. Vous aurez également un aperçu des opérateurs JavaScript lors de la création des récompenses et des pénalités pour les joueurs.
En ajoutant des fonctionnalités à la piste, vous apprendrez des concepts tels que les événements JavaScript, les conditions, les fonctions anonymes, l’animation JavaScript, le contrôle des intervalles, et bien d’autres encore.
7. Jeu Mario avec JavaScript
Ce tutoriel sur le jeu Mario en JavaScript est tout ce dont vous avez besoin pour vous plonger dans les détails de JavaScript. Bien que la création d’un jeu Mario en JavaScript semble complexe, Chris, votre tuteur, montre que c’est tout à fait possible dans cette vidéo YouTube. Vous pouvez donc vous amuser et explorer votre esprit critique en construisant le jeu.
Bien que les débutants puissent trouver le tutoriel un peu avancé, il s’agit d’une quête brillante pour les personnes qui souhaitent rafraîchir leurs connaissances en JavaScript et passer au niveau supérieur.
Outre l’apprentissage des manipulations d’éléments, vous utiliserez la puissance du JavaScript pur pour construire un canevas réactif pour l’interface du jeu en utilisant la programmation orientée objet (POO). Le joueur étant activement mobile, l’application du contrôle du clavier JavaScript, la gestion des événements, les boucles, les opérateurs, les conditions et les fonctions intégrées et personnalisées font partie des expériences inter-projets que vous allez acquérir.
8. Construire un jeu de démineur avec JavaScript
Vous voulez explorer la puissance des fonctions récursives et des méthodes de tableaux pour multiplier les éléments du DOM avec JavaScript ? Vous pouvez commencer par ce tutoriel sur le Démineur JavaScript, réalisé par Ania Kubów sur Traversy Media.
Il implique une grande attention aux détails. Mais c’est un tutoriel adapté aux débutants et l’un des meilleurs pour se familiariser avec le système de mise en page en grille en JavaScript. L’objectif final est de créer un modèle de grille où les joueurs évitent de marcher sur une mine.
Aussi simple que cela puisse paraître, vous écrirez beaucoup de logique de programmation faisant appel à la plupart des techniques de base de JavaScript pour câbler la fonctionnalité du jeu en arrière-plan.
9. Tutoriel de jeu JavaScript Pokemon avec HTML Canvas
Le jeu Pokemon est l’un des projets de jeu les plus complexes que l’on puisse réaliser en JavaScript. Cependant, si vous avez l’intention de passer de longues heures à coder avec JavaScript et que vous êtes prêt à en ressortir plus confiant, vous feriez bien de vous plonger dans ce tutoriel.
En plus des scripts DOM et de l’animation avec JavaScript, la vidéo vous apprend à déplacer et à rendre des éléments, y compris des sons et des images, à l’aide de JavaScript. Le didacticiel dévoile de nombreuses informations sur JavaScript qui vous seront utiles pour résoudre vos problèmes de codage dans la vie réelle.
En plus d’autres techniques fondamentales de manipulation de JavaScript, le tutoriel utilise aussi fortement les concepts OOP, ce qui est précieux si vous envisagez de vous plonger plus tard dans TypeScript. L’un des facteurs de simplification de ce tutoriel est la façon dont le tuteur décrit les tâches.
Il est facile de reculer en imaginant le système complexe que vous allez créer pour que cela fonctionne. Mais pensez à ce que vous allez gagner au bout du compte.
Apprendre les applications de résolution de problèmes de JavaScript
Les jeux font appel à l’une des logiques les plus réactives et les plus intuitives de la programmation. Cela vaut donc la peine d’apprendre JavaScript en en créant un. Bien que ces tutoriels soient basés sur des jeux, ils vous exposent aux concepts fondamentaux de JavaScript applicables à de nombreux autres problèmes de codage, y compris le développement web et la création d’applications mobiles. Même si vous envisagez de vous tourner plus tard vers les frameworks, vous appliquerez ces concepts de toute façon.
