Aiguisez vos compétences en JavaScript avec ces 9 vidéos de didacticiel de projet de jeu amusant

Le fait que 98,4% de tous les sites Web utilisent JavaScript est la raison pour laquelle vous devez le savoir en tant que développeur. Rétrospectivement, créer un jeu avec JavaScript ne vous aide pas seulement à apprendre rapidement. Il vous permet également de maîtriser la façon d'appliquer ses concepts simples à complexes dans différentes situations de travail, que vous soyez débutant ou en perfectionnement.

Si vous apprenez mieux avec des démonstrations visuelles, ces tutoriels de jeu basés sur JavaScript sur YouTube valent votre temps.

1. Jeu de cartes avec JavaScript

Ce jeu de cartes JavaScript avec Gavin Lon vous montre comment retourner des 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 obtenir une réactivité avec JavaScript.

L'objectif final du projet est de retourner quelques cartes, et le joueur devine l'As lorsque les cartes changent enfin de place. Chaque carte est une image de quatre rôles de carte différents. Ainsi, bien que vous ne conceviez pas les cartes vous-même, vous apprendrez à manipuler leurs positions de manière réactive, à incrémenter les tours de jeu, à ajouter ou à supprimer des scores au fur et à mesure que les niveaux changent et à stocker les scores de jeu dans le stockage local du navigateur—tout en utilisant JavaScript.

Le didacticiel est progressif et facile à suivre malgré le travail lourd que vous ferez en coulisses. Il est parfait pour les débutants et les remises à niveau. Bien qu'il s'agisse de créer un jeu de cartes, cela vous expose à la plupart des techniques de câblage de JavaScript dans des situations réelles. De plus, cela démêle 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 dynamiquement des éléments DOM à l'aide de JavaScript, Ania Kubów montre à quel point cela devient amusant avec ce didacticiel de jeu en petits groupes utilisant JavaScript. En plus, la vidéo montre également comment héberger et présenter votre projet à des employeurs potentiels.

Pensez à toutes les possibilités dans un jeu d'évasion; une plate-forme mobile avec une balle frappant les murs tangentiellement pour casser des briques au-dessus. Et vous coderez également le système de récompense dans celui-ci. Dans l'ensemble, ce didacticiel de jeu en petits groupes mérite d'être considéré si vous souhaitez créer quelque chose à partir de zéro sans utiliser d'agents tiers ou d'images provenant de sources.

Tout en câblant votre logique dans les fonctions, la vidéo en apprend plus sur les concepts de classe et d'objet JavaScript en quelques étapes simples, y compris meilleures pratiques d'instruction conditionnelle comme le boîtier de l'interrupteur.

3. Jeu de serpent JavaScript

Découvrez la nostalgie du jeu Snake II de votre Nokia 3310 en construisant ce jeu de serpent JavaScript avec Kyle. Vous y avez probablement déjà joué et y jouerez probablement plusieurs fois dans votre vie puisque vous en coderez un en utilisant du JavaScript vanille.

Tout en vous apprenant à relier dynamiquement le DOM, cette vidéo montre comment vous pouvez créer et utiliser des modules personnalisés en JavaScript. Cela vous ouvre donc la possibilité d'apprendre à séparer les préoccupations en utilisant le principe de ne pas vous répéter (DRY).

Dans les coulisses, vous maîtriserez des concepts JavaScript plus avancés. Tâches, y compris la création d'une grille de joueurs, le placement de la nourriture, la construction du corps du serpent, l'allongement du serpent, le codage du la logique de navigation, la création d'un système de récompenses et de pénalités et le contrôle de la vitesse du serpent vous exposeront au cœur JavaScript.

4. Jeu Tic Tac Toe avec JavaScript

​​​​​

Peut-être que votre gameplay Tic Tac Toe s'affinera lorsque vous en créerez un avec JavaScript dans une autre vidéo avec Kyle. Il s'agit d'un simple mais précieux projet pour les débutants en JavaScript à grignoter car vous résoudrez des problèmes complexes.

La vidéo ne se termine pas uniquement avec JavaScript. Il montre également comment saisir la conception de votre interface utilisateur à l'aide de CSS. Avec cohérence et engagement, vous pouvez apprendre presque toutes les techniques nécessaires pour démarrer votre parcours de développement Web dans cette vidéo.

Tout en manipulant le DOM avec JavaScript, la vidéo résume le gros du travail autour du codage des décisions de victoire et de tirage au sort, de la décision des tours des joueurs et de l'alignement des objets. Les fonctions, les boucles et les conditions JavaScript font partie des concepts avancés que vous apprendrez dans cette vidéo du didacticiel JavaScript Tic tac Toe.

5. Slide Puzzle Game avec JavaScript

Les puzzles peuvent être des tâches de réflexion. Mais en créer un avec du JavaScript vanille semble être une façon amusante d'explorer votre créativité et d'apprendre des concepts JavaScript de base à complexes.

Vous souhaitez coder dans ce didacticiel, si vous souhaitez voir comment utiliser les concepts JavaScript, y compris les commutateurs conditionnels et la manipulation dynamique de la position DOM à l'aide de fonctions personnalisées et intégrées.

Bien que le tuteur place le JavaScript dans une balise de script dans le fichier HTML, vous pouvez faire tourner 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 automobile avec JavaScript

Construire un jeu de course automobile à l'aide de JavaScript vanille peut ne pas donner la meilleure sortie graphique. Mais le câblage d'un jeu de course automobile fonctionnel tout en suivant ce didacticiel vous apprendra à tirer parti de la puissance d'imprégnation des fonctionnalités de JavaScript dans n'importe quelle application.

Ce tutoriel consiste à placer deux voitures (une rouge et une bleue) sur un circuit. La voiture bleue apparaît au hasard de n'importe quelle direction et le véhicule rouge, représentant le joueur, tente d'éviter une collision. Le jeu se termine une fois qu'il y a contact entre les deux voitures.

Bien qu'il s'agisse d'une simple description de ce que vous allez construire dans celui-ci, vous apprendrez une logique avancée JavaScript pour la manipulation et le style DOM. Vous obtiendrez également des informations sur les opérateurs JavaScript tout en créant des récompenses et des pénalités pour les joueurs.

Tout en ajoutant des fonctionnalités à la piste, certains concepts que vous apprendrez incluent les événements JavaScript, les conditions, les fonctions anonymes, l'animation JavaScript, le contrôle d'intervalle et bien d'autres.

7. Jeu Mario avec JavaScript

Ce didacticiel de jeu JavaScript Mario est tout ce dont vous avez besoin pour vous plonger dans les moindres détails de JavaScript. Alors que créer un jeu Mario avec JavaScript semble complexe, Chris, votre tuteur, montre que c'est plus que possible dans cette vidéo YouTube. Vous voudrez peut-être vous amuser et explorer votre capacité de pensée critique en construisant avec vous.

Bien que les débutants puissent trouver le didacticiel un peu avancé, il s'agit d'une quête brillante pour les rafraîchisseurs pour faire passer leurs compétences en JavaScript au niveau supérieur.

Outre l'apprentissage des manipulations d'éléments, vous utiliserez la puissance de JavaScript pur pour créer un passe-partout de canevas réactif pour l'interface de jeu à l'aide de programmation orientée objet (OOP). Étant donné que le joueur est activement mobile, l'application du contrôle du clavier JavaScript, la gestion des événements, les boucles, opérateurs, conditions et fonctions intégrées et personnalisées, font partie des expériences inter-projets que vous gagner.

8. Construire un démineur avec JavaScript

Vous voulez explorer la puissance des fonctions récursives et méthodes de tableau en multipliant des éléments DOM avec JavaScript? Vous voudrez peut-être commencer par ce didacticiel JavaScript Minesweeper par Ania Kubów sur Traversy Media.

Cela implique beaucoup d'attention aux détails. Mais c'est un didacticiel convivial pour les débutants et l'un des meilleurs pour vous familiariser avec le système de mise en page de la grille à l'aide de JavaScript. Le but ultime 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 impliquant la plupart des techniques de base JavaScript pour câbler les fonctionnalités du jeu en arrière-plan.

9. Tutoriel de jeu Pokemon JavaScript avec HTML Canvas

Pokemon est l'un des projets de jeu les plus complexes que vous puissiez créer à l'aide de JavaScript. Cependant, si vous passez de longues heures de codage rigoureux avec JavaScript et que vous êtes prêt à en sortir renouvelé avec plus de confiance, vous feriez mieux de vous lancer dans ce didacticiel.

En plus des scripts DOM et de l'animation avec JavaScript, la vidéo vous apprend à déplacer et à restituer des ressources, y compris de l'audio et des images, à l'aide de JavaScript. Le didacticiel dévoile beaucoup de choses sur JavaScript que vous trouverez utiles dans tous les problèmes de codage réels.

En plus d'autres techniques de manipulation JavaScript de base, le didacticiel utilise également fortement les concepts de POO; ceci est utile si vous envisagez de vous plonger plus tard dans TypeScript. L'un des facteurs de simplification de ce didacticiel est la façon dont le tuteur décrit les tâches.

Il est facile de revenir en arrière lorsque vous imaginez le système complexe que vous allez créer pour que cela fonctionne. Mais pensez à ce que vous avez à gagner à la fin.

Apprenez les applications de résolution de problèmes de JavaScript

Les jeux utilisent certaines des logiques de programmation les plus réactives et les plus intuitives. Il vaut donc la peine d'apprendre JavaScript en en créant un. Bien que ces didacticiels soient basés sur le jeu, ils vous exposent aux concepts de base de JavaScript applicables à de nombreux autres problèmes de codage, notamment le développement Web et la création d'applications mobiles. Même si vous prévoyez de vous tourner plus tard vers les frameworks, vous appliquerez ces concepts malgré tout.