Apprenez à réaliser le jeu 2048 avec le framework JavaScript Phaser.
Cette fois ci, il s’agit d’un jeu de logique dont le but est de faire le plus haut score (2048) en déplaçant des cases suivants des règles précises.
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Créez le jeu HTML5 JavaScript 2048 avec le Framework Phaser et l’API Canvas
Bonjour à tous et bienvenu sur Développement Facile.
Vous allez continuer à découvrir des nouvelles fonctionnalités du Framework Phaser donc un Framework qui permet de développer très rapidement des applications JavaScript HTML 5 pour les mobiles donc les Smartphones, les tablettes, les ordinateurs de bureau, un Framework qui vous simplifie vraiment votre développement, qu’il accélère et donc aujourd’hui vous allez apprendre à créer le fameux jeu 2048 si vous ne le connaissez pas il est hyper addictif, voila j’aime bien ce jeu, très sympa je me suis dit que vous allez aimer le développer.
Alors comment ça se passe, comme d’habitude vous avez votre place donc l’appel de votre fonction main via votre fichier JavaScript, le framework phaser et votre div qui va accueillir l’API canvas ou le WebGL suivant le navigateur sur lequel elle est exécutée, donc là il y a que ça tout se passe dans main.js donc bien évidemment je vais aller assez vite, le but c’est de vous présenter les fonctionnalités, les points-clés, les points les plus importants du jeu, après comme je vous l’ai dit dans la deuxième vidéo vous pourrez aller beaucoup plus loin en rajoutant la méthode Développement Facile pour créer un jeu, c’est-à-dire en utilisant la programmation orientée objet, les modèles de conceptions, pour créer des jeux de plus en plus complexes et surtout les séparer en plusieurs fichiers, là vous avez vu le fichier main est énorme y’a beaucoup mais beaucoup de code donc le fait de séparer tout ça en classes JavaScript dans différents fichiers ça simplifie littéralement le code et sa maintenance et ses mises à jour, donc tout ça c’est dans la deuxième vidéo je vous en reparle tout à l’heure.
Là vous avez les variables de votre jeu donc la taille d’une case, le tableau du jeu, les couleurs des cases, regardez les couleurs changent en fonction de la valeur de la case tout simplement donc ça vous pouvez le gérer la dans ce tableau ici, on peut allez jusqu’à 65 000 on va arrêter, on va se mettre jusqu’à 2048, voilà, je pense que vous quand vous aurez atteint ce niveau-là de jeu vous pourrez vous estimer heureux, en règle générale jeu vidéo je ne suis pas très fort, donc ce jeu ne fait pas exception, par contre au niveau du code je pense que je peux vous apporter énormément donc comme d’habitude vous créez une instance de la classe phaser en donnant la taille de votre zone de jeu, ça sélectionne automatiquement l’API canvas ou le WebGL et on renomme les événements c’est-à-dire preload on va appeler on preload ici, on create ici et on update ici donc là vous chargez les tailles, donc c’est des graphismes c’est tout simplement une simple image, vous pouvez mettre ce que vous voulez comme image, c’est la case du jeu c’est ça en fait c’est une image et par-dessus il y a un texte centré tout simplement, c’est pas plus compliqué que ça et donc là vous créez votre scène du jeu donc vous allez écouter les touches directionnelles et en fonction de la touche directionnelle vous allez déplacer les cases à gauche, en bas, à droite, vers le haut suivant par les touches directionnelles sur lesquelles j’appuie sur le clavier.
Move left, move right et la c’est le groupe qui va contenir toutes les cases du jeu et au début on ajoute deux cases, si je recharge le jeu il y a seulement deux cases qui sont placées aléatoirement à chaque rechargement, donc là c’est pour ajouter une case avec, on la positionne aléatoirement sur le tableau donc on recherche un emplacement vide et on la positionne aléatoirement, tout simplement sur tableau on lui donne une valeur de deux, et on créé le graphisme la classe donc on ajoute un Sprite qui provient de l’image tout simplement, on récupère la valeur de la colonne, la valeur de la ligne aléatoirement aussi, et on sauvegarde la position de de la case dans le tableau, une position sur aléatoirement en ligne et en colonne, ensuite on ajoute le texte tout simplement par-dessus ici, c’est votre image, par-dessus l’image on ajoute le texte donc addchild si vous êtes développeurs actionScript si vous avez l’habitude de faire des addchild la gestion des display object, on empile les éléments les uns sur les autres, on a d’abord l’image, par-dessus l’image on met le texte, donc on la créée un objet texte ici tout simplement, que l’on a positionné au milieu de la casse pardon centré, et vous faites un effet de tween, vous créez votre tween sur la taille donc ça va englober à la fois l’image plus le texte, parce ce que le texte est dans l’image et tant que la tween aura fini de s’exécuter, quand l’animation aura fini de s’exécuter on met à jour la valeur de la case et sa couleur en fonction de la valeur bien évidemment et le joueur peut maintenant déplacer la case alors qu’au début il ne le pouvait pas.
Et ensuite par une fois que la twin, sa configuration est prête l’animation, on lance la twin, alors après qu’est-ce qui se passe, ça, ça fournit une valeur aléatoire pour une ligne du tableau, pour une colonne ça met à jour la valeur de la case et sa couleur donc là on récupère les valeurs de la case pour tout le tableau on parcours toutes les cases et on met à jour le texte en fonction de la couleur tout simplement, on modifie la couleur, là on a une liste de couleur ce que je vous ai montré au début, donc en fonction de sa valeur on modifie la couleur de la case, ensuite voilà on va regarder en fait move left move right move down c’est exactement le même principe de fonctionnement donc j’ai commenté juste move left après vous regarderez les autres fonctions c’est le même principe de fonctionnement sauf que le déplacement c’est soit à gauche, soit à droite soit en haut, ou en bas, suivant la touche sur laquelle le joueur à appuyé, sur la touche directionnelle donc déjà si le joueur peut déplacer la case on le déplace sinon on le déplace pas, si il laisse appuyé on va pas déplacer en continu tout simplement, ensuite pendant qu’on est en train de déplacer les cases à gauche et un seul déplacement à la fois, il n’y a pas de déplacement en diagonal ni rien, ça empêche le joueur de se déplacer, on conserve en mémoire si le joueur se déplace et si c’est possible, donc là on trie les cases suivant la propriété des X donc ça vous apprend à trier rapidement un objet, un groupe qui contient des objets sur une propriété et on parcours toutes les cases, on récupère la colonne et la ligne d’une case grâce à sa position si la un case actuelle n’est pas sur le bord de la colonne de gauche, sinon on peut pas la déplacer sur la gauche si la case est déjà ici, voilà on peu plus les déplacer à gauche, une fois à droite, encore une fois, encore une fois, encore une fois, voilà on peut toujours et là on est bloqué on peut plus se déplacer à droite, là on peut se déplacer en bas, pareil je joue très mal volontairement c’est pour vous montrer le principe de fonctionnement. On met le drapeaux suppression à false, si deux cases s’entrechoquent comme ici, il y en a une qui est supprimée et l’autre on met à jour sa valeur directement, ça aussi c’est à prendre en compte.
Donc si on trouve une case pleine, on a terminé notre recherche donc on arrête le déplacement de la case, on vérifie la valeur de la case d’arrivée, si c’est la même valeur bien évidemment on supprime le case, donc là ici c’est la même valeur, on la supprime, la même valeur on la supprime la même valeur on la supprime, là on les déplace la même valeur on la supprime, même valeur on la supprime, là j’ai de la chance le jeu fonctionne, les cases c’est les bonnes valeurs par exemple on peut plus se déplacer ici, là on peut, là on ne peut plus, c’est que ça vérifie donc et si c’est impossible de se déplacer, déplacement possible on remet le déplaçant possible, on déplace la case et on supprime la case si bien évidemment le drapeau remove il est à true, on le met à true si c’est possible, si les deux cases sont de même valeur quand elles se touchent et après on termine le déplacement avec la valeur que l’on passe, on termine le déplacement, si la case a été déplacée, a été supprimée donc déplacée et supprimée en fait move c’est la suppressions et supprimer je mets à jour les commentaires ça vous aidera donc si la case à été déplacée, supprimée, forcément il faut rajouter une nouvelle case de deux, toujours de valeur deux, voilà on en rajoute en continu vous les voyez qui apparaissent à l’écran tout simplement, sinon on autorise le joueur à se déplacer et après là c’est le déplacement d’une case donc on met à jour le tableau avec les nouvelles valeurs, ont créé une tween à chaque déplacement de la case, si il y a une suppression, si la case doit être supprimée à la fin de la tween on appelle taille.destroy pour l’effacer de l’écran de jeu, tout simplement donc on créé notre tween vous avez l’habitude maintenant, mouvement.on complet, on appelle at fonction, soit on appelle une fonction directement, soit on peut créer une fonction et l’exécuter par exemple dans la twin du départ ici, on appelait une fonction, on créer une fonction mais on en appelait une autre ça c’est vous qui voyez en fonction du comportement du jeu que vous voulez créer et on lance notre effet de tween, si on déplace les cases vers le haut on vérifie qu’elles peuvent se déplacer vers le haut, après c’est exactement le même principe de fonctionnement, là je vous ai mis en update, vous pouvez mettre à jour le score du jeu ou créer une petite animation, en update il faut savoir que c’est appelé en continu par le Framework phaser donc ça veut tout simplement dire qu’ici vous pouvez mettre une animation supplémentaire, pour appeler en continu quelque chose qui bouge, sinon mettre un score, ce que vous souhaitez c’est libre à vous, je vous l’ai mis comme ça, ça peut vous faire un excellent exercice pour améliorer ce jeu tout simplement.
Voilà alors qu’est-ce qu’il y a d’autre de subtil bien évidemment en utilisant un système de classe grâce à la méthode développement facile, vous ne répéterez pas ces quatre move on, move left, move right, parce qu’il y a moyen de simplifier énormément mais énormément se code, en utilisant la programmation orientée objet donc là c’est du code petit peu basique si je puis dire, donc là le déplacement voilà a été possible donc si déplacement a été possible on ajoute une nouvelle case sinon dans le joueur peut maintenant se déplacer librement, voilà donc maintenant c’est vraiment à vous de jouer donc sous ce cours vidéo vous pouvez télécharger le code source complet du fameux jeu 2048 il est entièrement commenté, si vous avez des questions posez-les sous cette vidéo l’équipe développement facile vous répondra et rappelez-vous au début de cette vidéo je vous ai parlé, dans la deuxième vidéo juste au dessus de ce cours, il y a une image, un lien qui vous permet d’accéder à une deuxième vidéo et dans la deuxième vidéo vous allez mettre en œuvre la méthode développement facile pour créer des jeux avec le Framework phaser suivant le langage objet donc une organisation sous forme d’objet, au lieu d’avoir un code très long forcément difficilement évaluable, difficilement compréhensible parce qu’il faut relire tout le code source à chaque fois, grâce à la méthode développement facile vous allez apprendre à organiser, à séparer votre code dans des classes, à créer plusieurs fichiers JavaScript, à instancier des classes JavaScript, à appeler des méthodes donc tout ça c’est dans la deuxième vidéo, cliquez simplement sur l’image au-dessus de cette vidéo, sur le lien cliquable, je vous explique dans le détails dans la deuxième vidéo je vous dis à tout de suite.
[/ppmtoggle][/ppmaccordion]
Télécharger le jeu 2048 implémenté en JavaScript avec le framework Phaser
Retrouvez le code source commenté du jeu 2048 que vous avez découvert dans la vidéo
