Créez le fameux jeu 2048 en JavaScript HTML5 avec le code source complet et commenté

Découvrez comment réaliser le célèbre jeu 2048 en JavaScript et HTML5.

Retrouver ici le code source complet et complet pour bien comprendre comment est réaliser le jeu.

Tout est expliqué dans la vidéo ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Créez le fameux jeu 2048 en JavaScript HTML5 avec le code source complet et commenté

Bonjour et bienvenu sur Développement Facile.

Dans ce nouveau cours je voulais partager avec vous le code source d’un jeu qui est vraiment très bien codé, c’est le fameux jeu 2048 donc il est possible de récupérer son code source sur GitHub sur Internet ce que j’ai fait, je l’ai intégré et il est vraiment très bien fait donc vous les partager avec vous ce code source, j’ai rajouté des commentaires en français pour vous aider si vous avez besoin, vous souhaitez le réutiliser dans vos applications, dans vos projets, vous avez la touche R qui permet de relancer une partie ou sinon vous appuyez sur nouvelle partie tout simplement, donc c’est exactement les mêmes graphismes du fameux jeu 2048 que vous connaissez donc après il suffit de déplacer les cases pour les assembler et petit à petit faire le score de 2048. Voilà tout simplement donc on va regarder le code source ensemble pour voir justement comment ça a été développé, un jeu vraiment très bien conçu qui pourrait vous inspirer.

Tout d’abord vous avez votre fichier index.html, vous intégrez tous les éléments du jeu, le fameux fichier main, vous remarquez que tout est bien séparé dans différents fichiers CSS, les animations, la gestion du clavier, la mise à jour de l’interface du jeu, la gestion de la grille, la gestion des cases, pour stocker en local c’est-à-dire si je recharge la page on retombe exactement sur mon jeu, c’est génial donc ça vous permet de reprendre des parties que vous avez dû arrêter et la gestion du jeu en lui-même donc là vous avez toutes les div qui vont accueillir les différents éléments, votre score actuel, nouvelle partie, le meilleur score, le titre du jeu, les explications et donc là les différents grilles ici donc la grille avec les différentes cases du jeu et derrière, la notice tout simplement donc comment ça se passe ?

Vous avez votre fichier main qui va lancer le jeu, new game manager, c’est aussi simple que ça, on attend que le DOM soit chargé et on lance le jeu avec les différents objets qui sont créés donc je vais vous montrer où sont créés tous ces objets, donc vous avez le game manager qui récupère tous ces objets et qui va permettre de gérer tout le jeu avec la possibilité de relancer une nouvelle partie, de continuer la partie après avoir gagné pour dépasser la casse 2048, de vérifier si le jeu est terminé ou pas, de faire le set up du jeu, donc préparer tous les objets, grille, par exemple de créer une nouvelle grille, avec la taille, voilà en fonction, soit on lance le jeu à partir d’une partie qui existe déjà, soit on relance une nouvelle grille carrément, mise à jour de l’interface, ajouter des cases aléatoires et actualiser l’écran de jeu toujours donc ça c’est la gestion du game manager vous avez tout ici, j’ai rajouté plusieurs commentaires en français pour vous aider à mieux appréhender ce code source et à l’utiliser de votre côté, ça c’est pour la gestion des animations un fichier très court, la gestion donc ça c’est pour la gestion des fichiers avec les arguments pour la gestion de la liste des classes avec les arguments, donc ça c’est interne au jeu, pour actualiser l’écran de jeu, j’ai mis quelques commentaires pour vous aider si la partie est terminée pour continuer la partie, ajouter une case etc., vous avez la gestion de la grille donc pour créer une nouvelle grille du jeu, tout simplement pour trouver la première position aléatoire disponible, des fonctions de call-back de rappel pour chaque case, vérifier si il y a des cases disponibles, ça gère toutes les grilles, ça, ça gère l’input manager, c’est qui permet de gérer les touches du clavier pour se déplacer. Tout simplement c’est aussi simple que ça, vous gérez l’input manager, là vous voyez que vous pouvez vous déplacer avec W D S C A, si j’utilise les touches W D S et A je peux me déplacer ou soit les flèches directionnelles, c’est à vous de choisir finalement, là c’est la gestion de toutes les touches en fonction, R pour redémarrer le jeu, des touches qui sont appuyées par le joueur et bien vous avez les fonctionnalités qui sont lancées, là c’est la gestion en local du jeu donc si vous quittez la page ou si vous la rechargez bien évidemment vous retombez sur votre dernière partie donc c’est vraiment très pratique, vous récupérez avec des getters setters tous les éléments dont vous avez besoin, et ça c’est pour la gestion des cases elles-mêmes donc là vous avez tout ce qu’il vous faut pour le jeu 2048 donc c’est vraiment génial pour vous aider justement à créer un jeu, à bien l’organiser en différents fichiers JavaScript, là on part de fonction et après on écrit des prototypes donc c’est des méthodes, c’est comme si on définissait une classe avec des méthodes et c’est ce qu’on passe tout simplement ici, on appelle la nouvelle fonction et après on appelle les méthodes, c’est comme si on instanciait la classe, input manager regardez il est ici, keyboard input manager on lui passe, keyboard input manager on lui passe tout simplement cette fonction et donc ça c’est une fonction qui contient un prototype et les prototypes c’est les méthodes qui sont utilisées tout simplement, donc regardez on lui passe la fonction keyboard manager qu’on récupère ici, on fait un new input manager, nouvelle fonction et on appelle les prototypes.odd, on a la méthode c’est comme si c’était une classe, on simule le comportement programmation orientée objet d’une classe.odd.

Là vous avez vraiment tout le code source qui est commenté, ça va vous permettre de vous aider à créer le jeu 2048, vous pouvez vous inspirer de ce code source pour créer vos prochains jeux.

Comme d’habitude vous retrouverez le code source complet et commenté sous ce cours vidéo donc à vous de l’utiliser, de vous en inspirer, si vous avez des questions posez les directement sous ce cours vidéo, l’équipe développement facile vous répondra, et maintenant si vous voulez vraiment allez beaucoup plus loin, être accompagné par une équipe d’experts en développement c’est-à-dire si vous rencontrez une difficulté pour implémenter telle ou telle fonctionnalité, à comprendre tel ou tel exemple développement facile, il y a une équipe de plusieurs experts qui sont là pour répondre à vos questions, vous apporter des exemples supplémentaires si vous en avez besoin, donc cliquez au-dessus de ce cours il y a un lien, une image cliquable, cliquez simplement dessus vous serez redirigé vers la deuxième vidéo ou vous allez tout découvrir comment créer des applications et des jeux pour les mobiles, donc les iPhones, tablette iPad, sous Android et sur le Web, pour travailler en équipe, pour créer des architectures très robustes grâce à l’utilisation des modèles de conceptions, la programmation orientée objet, des événements, vous allez découvrir tout un tas de framework très utiles, par exemple phaser, ionique Framework, pour écouter le clavier, donc tout ça c’est dans la deuxième vidéo cliquez simplement sur l’image au-dessus de ce cours vidéo et on se retrouve tout de suite dans la deuxième vidéo à tout de suite.

[/ppmtoggle][/ppmaccordion]

Code source du jeu 2048 en JavaScript et HTML5

Retrouvez le code source complet et commenté du jeu 2048 implémenté en JavaScript et HTML5

Souhaiteriez vous avoir d’autres exemples de jeu JavaScript ?

Utilisez la zone commentaire pour nous dire quel jeu ou quel aspect d’un jeu vous voulez voir approfondi.