Comment créer le début du jeu HTML5 rubik’s cube et utiliser le drag drop avec Phaser

Apprenez avec ce nouveau cours sur le framework Phaser à réaliser un petit jeu de Rubik’s Cube.

Vous verrez en particulier comment faire du drag’n’drop ou glisser déposer avec le framework.

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

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

Comment créer le début du jeu HTML5 rubik’s cube et utiliser le drag drop avec Phaser

Bonjour à tous et bienvenu sur Développement Facile.

Vous allez continuer à découvrir les fonctionnalités du Framework HTML 5 JavaScript phaser, c’est un Framework qui vous permet de créer des jeux pour les mobiles donc les Smartphones, les tablettes et aussi les ordinateurs, avec tout un tas de fonctionnalités près intégrées par exemple la gestion des touches du clavier, les collisions, la gravité, chargement des images, ce Framework, le Framework phaser vous simplifie énormément la création de jeux HTML 5 JavaScript.

Dans ce nouveau cours vous allez apprendre à effectuer du déplacement d’éléments mais suivant une ligne horizontale ou verticale seulement, donc à travers un petit rubik’s cube vraiment simplifié comme rubik’s cube, aléatoirement ça affiche des cases de couleur et après vous pouvez les déplacer soit horizontalement, soit verticalement, voilà, donc après libre à vous, soit de faire des lignes avec uniquement la même couleur si c’est possible, ou alors de recréer le mot donc ça s’affiche c’est le mot facile en fait qui doit s’afficher tout simplement comme ceci donc voilà libre à vous de recréer le mot facile ou alors de faire des lignes de la même couleur et l’intérêt c’est qu’avec le Framework phaser, vous allez apprendre à faire des déplacements, le L passe ici ou alors ici, le C, il se retrouve en haut, ou il se retrouve en bas.

Comment ça se passe ? Le Framework Phaser à inclure comme d’habitude votre classe main avec le cache qui est désactivé bien évidemment, uniquement pendant la phase de développement, vous avez vos variables du fichier JavaScript qui sont toutes ici notamment la taille du jeu, je vais le rajouter, la taille du jeu, c’est plus les dimensions du jeu pour parler en français, après toutes les variables sont commentées donc je vous laisserai le loisir de regarder par vous-même je vais vous expliquer le principe de fonctionnement, dès que le DOM est chargé on appelle la fonction main, on crée une nouvelle instance de la classe game, on utilise soit l’API canvas, soit l’API WebGL, automatiquement ces fonctions sont appelées par le Framework phaser, on preload, on charge nos facet, nos éléments en français, c’est à dire là une image, une seule image png qui contient toutes les cases de couleur donc c’est très pratique, parce que c’est un temps de chargement beaucoup plus rapide de charger des Sprite, ça s’appelle des Sprite donc c’est une image, une seule image qui regroupe plusieurs images et après on les découpent suivant des Frame automatiquement avec le framework phaser, vous connaissez cette fonction c’est pour générer un nombre aléatoire, on create ça va vous permettre de créer la carte du jeu si vous voulez afficher le jeu en plein écran il suffit d’utiliser ces deux lignes de code, donc sur les Smartphones ou les tablettes par exemple, là vous créez votre carte du jeu avec un nombre aléatoire donc une case aléatoire de couleur aléatoire entre zéro et six, ensuite vous ajoutez une case temporaire qui est invisible donc elle est masquée, et vous écoutez les clics de la souris c’est-à-dire chaque fois que l’utilisateur clique sur la souris, vous allez appeler clik main qui va sauvegarder les coordonnées, les colonnes ou les lignes qui sont concernées par le mouvement, le déplacement est autorisé, on remet à jour les écouteurs la souris, c’est-à-dire au relâchement de la souris, on arrête le déplacement des cases et on les fixes, c’est-à-dire je clique sur la souris, je peux déplacer tant que le clic reste appuyé, je relâche le clic le déplacement est arrêté, vous pouvez l’arrêter en plein milieu, ils se repositionnent tout seuls.

réalise c’est ce que fait cette fonction tout simplement, donc ça détermine l’endroit où seront arrêtées les cases, les cubes, ça autorise le joueur à choisir une nouvelle ligne ou colonne de cubes à déplacer, bien évidemment on remet à jour les écouteurs de la souris et donc le déplacement comment il est géré ? Par on update qui est appelé en continu par le Framework phaser pendant l’exécution du jeu donc si le déplacement est possible bien évidemment, sinon vous voyez on ne fait rien, on sort de la fonction, on effectue le choix de la direction du déplacement en fonction de ce que l’utilisateur effectue comme mouvement de la souris uniquement la première fois, voilà, ensuite une fois vu que cette fonction est appelée plusieurs fois, la première fois on sélectionne la direction, la deuxième fois la direction existe, ce sera soit déplacement horizontal, soit déplacement vertical, c’est exactement le même principe de fonctionnement, on utilise le cube temporaire on le positionne sur la bonne image donc image qui a été choisie donc c’est le cube temporaire c’est celui qui est sélectionné et on change la couleur, voilà là ça effectue le déplacement, voilà en fonction de la distance à parcourir, du mouvement de la souris tout simplement, ici, et voilà donc c’est un jeu ou il y a beaucoup d’algorithmes en fait vous avez vu le fichier il est très long, voyez en horizontal on fixe, on bloque la position donc déplacement horizontal, c’est comme ceci, donc en y on bloque le déplacement par contre, on fait effectuer uniquement le déplacement sur les X, Y c’est bloqué et on effectue le déplacement sur les X, et en vertical c’est l’inverse, vertical on bloque le déplacement de la colonne sur les X, par contre le déplacement est possible uniquement sur l’axe Y, et c’est ici ou c’est effectué bloquer sur les X, et déplacement de l’axe Y ici, donc ce qui est important c’est les écouteurs du clic de la souris ondown et vous avez également onup relâchement ondown c’est le clic de la souris, on up c’est le relâchement et donc vous avez ce résultat là, tout simplement, moi j’appelle ça une sorte de rubik’s cube, même si ce n’est pas exactement ça, toutefois ça vous permet d’avoir un exemple d’algorithme pour effectuer, bloquer des déplacements sur un axe, et les permettre uniquement sur l’autre axe. On bloque sur un axe et on permet sur l’autre axe.

Maintenant c’est à vous de jouer vous retrouverez le code source en téléchargement sous ce cours vidéo, si vous avez des questions posez les directement sous ce cours, l’équipe développement facile vous répondra et maintenant je vous invite à regarder la deuxième vidéo, dans la deuxième vidéo vous allez apprendre énormément de stratégies avancées en développement pour créer vos applications, vos jeux deux à trois fois plus rapidement, regardez par exemple, développement classique on met tout dans le même fichier, il fait 340 lignes pour un petit jeu très petit, donc imaginez si vous devez développer un jeu beaucoup plus complexe, il y aurait peut-être trois à cinq six mille lignes dans le même fichier, ce qui est un maintenable dans le temps, inutilisable difficilement debuggable.

Grâce au Framework phaser, à l’application de la méthode développement facile vous allez apprendre à mettre en place la programmation orientée objet avec JavaScript, la programmation événementielle, les modèles de conceptions, vous allez séparer votre code dans des classes et dans plusieurs fichiers JavaScript, qui va vous permettre de travailler en équipe et de gagner énormément de temps pendant votre développement et d’éliminer les bugs dès la création de votre application car vous aurez une architecture solide. Je vous explique tout ça dans la deuxième vidéo au-dessus de cette vidéo cliquez simplement sur la bannière, sur le lien cliquable, je vous explique tout dans la deuxième vidéo, en plus l’équipe développement facile, donc des experts en développements qui ont 10 ans d’expérience dans différents langages, vont vous accompagner dans la création de vos applications pour vous aider à résoudre vos problèmes et à progresser je vous le dis à tout de suite dans la deuxième vidéo.

[/ppmtoggle][/ppmaccordion]

Télécharger le code du jeu rubik’s cube

Retrouvez le code source commenté du jeu rubik’s implémenté en JavaScript avec le framework Phaser

Continuez à développer le jeu de rubik’s cube !

Utilisez la zone commentaire pour poster les développement de vos jeux de rubik’s cube