Comment créer le jeu démineur avec le Framework Phaser

Dans ce nouveau cour dédié au framework JavaScript Phaser, apprenez à réaliser une partie du célèbre  jeu Démineur qui était fournis avec Windows.

Vous allez voir comment découvrir les cases adjacentes à la case sur laquelle clic l’utilisateur.

Tout est dans la vidéo ci-dessous.

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

Comment créer le jeu démineur avec le Framework Phaser

Bonjour et bienvenu sur Développement Facile.

Dans ce nouveau cours toujours dédié aux Framework Phaser, donc c’est un Framework open source, gratuit, rapide à utiliser, génial qui permet de créer des jeux pour les applications sur les Smartphones, les tablettes et même les ordinateurs. Pour le Web, les mobiles et les tablettes se Framework Phaser contient tout un tas de composant qui sont très utiles pour simplifier votre développement d’applications, de jeux, tout simplement.

Aujourd’hui vous allez apprendre à créer un jeu de type démineur, vous n’allez pas créer le jeu démineur mais vous allez voir une solution, par exemple, l’utilisateur clique à un endroit et savoir les cases adjacentes qui sont concernées. Je vous montre ça vous parlera plus à travers un exemple.

Si je mets mon curseur ici, vous voyez la case devient verte, on pourrait imaginer que c’est un démineur, que le joueur clic dessus et tout autour et bien c’est des cases adjacentes donc si il y a une mine, le joueur peut avoir perdu ou alors dans le démineur, les cases adjacentes sont affichées s’il y a pas de mine. Et là en fonction ou l’utilisateur déplace le pointeur, par exemple ici il y a que ces deux cases adjacentes, ici il n’y en a que deux, là il y en a quatre et là il y en a six tout autour et donc c’est ce que vous allez apprendre à créer le framework Phaser, avec le Framework Phaser, tout est simplifié au niveau du développement, là vous remarquez qu’il y a les coordonnées des cases 0012, donc il y a une ligne, deux lignes, trois lignes et quatre lignes, et entre on a… c’est comme ça une ligne, 67 8 9 10 11 12 13 14 15 16 deuxième ligne, donc vous remarquez avec les coordonnées ça vous permet de récupérer une case beaucoup plus facilement.

Alors le code, comme d’habitude vous désactivez le cache pendant la phase de développement de la classe main, enfin du fichier main, vous incluez framework phaser, mais bon phaser vous commencez à connaître, les variables du jeu, les variables largeurs hauteur du jeu, une fois que le DOM est chargé vous appelez la fonction main qui va créer avec l’API canvas la zone de jeu, et appeler ses différentes fonctions, donc le pré chargement des deux icônes, le fond de couleur gris, le fond du jeu est de couleur gris, voyez c’est pas le même gris, c’est fait exprès pour pouvoir le différencier après quand vous serez évidemment en production avec un jeu de démineur, vous mettrez le même gris, du coup ça va s’intégrer parfaitement dans votre page Web.

Ca si vous voulez afficher le jeu en plein écran notamment pour les Smartphones et les tablettes suffit d’appeler cette fonction go full screen et ça va afficher votre jeu en plein écran, ensuite vous créez la scène du jeu, là c’est la création de la grille du démineur avec les coordonnées de la forme à déterminer pour la positionner, vous ajoutez le Sprite dans un groupe qui contient l’icône, la forme, le texte avec les coordonnées ici qui ont été calculées, le ; entre les deux coordonnées arial, la taille de la police et vous ajoutez le texte au groupe et votre groupe est ajouté, bien évidemment sur la scène, ensuite vous positionnez la forme donc qui représente le groupe forme plus texte, vous le positionnez au bon endroit tout simplement et vous ajoutez un marqueur donc vous créez le marqueur que vous allez déplacer, donc c’est le pointeur utilisé par l’utilisateur que vous masquez et vous écoutez les éléments, à chaque fois que l’utilisateur déplace la souris, ça va tout simplement appeler la fonction check forme, update on ne s’en sert pas et check forme ça va déterminer les coordonnées x en Y du pointeur et ensuite déterminer les cases adjacentes, tout simplement. Voyez la souris est à cheval sur trois, à chaque fois, il y a une case qui est sélectionnée et donc là ça met à jour après update forme c’est tout simplement pour mettre à jour la couleur de la forme, soit ça cache le pointeur tout simplement, s’il est sorti de l’écran on le cache, il revient dans l’écran, il ressort on le cache, sinon on le rend visible le pointeur et on va modifier la couleur de la forme sous le pointeur et ensuite on modifie la couleur des formes adjacentes avec la propriété tint, voilà c’est aussi simple ça, en dessous on va partir du début à gauche à droite, à gauche à droite, au-dessus gauche, au-dessus droite, en dessous gauche, en desous droite, toutes les cases sont bien vérifiées si vous regardez dans le code et à chaque fois qu’il y a une forme on change sa couleur c’est aussi simple que ça, vous voyez ça va vous permettre de commencer à créer votre jeu démineur donc ça c’est la construction de la grille, vous pouvez construire un démineur classique avec des lignes sans décalage, là c’était pour vous montrer justement la mise à jour des formes adjacentes, de la couleur des formes adjacentes, vous pouvez construire une grille classique de démineur et ensuite c’est dans check forme, le clic ça mettrait, ça changerait la couleur là ou l’utilisateur clique, donc ce serait plus sur add move callback, ca serait on clic call back que vous appellerez check form et dans update forme vous mettrez à jour, soit vous découvrez les cases adjacentes, c’est gagné, soit là il peut perdre si il tombe sur une mine.

Voilà comment créer un démineur très simplement.

Maintenant c’est à vous de jouer ? sous ce cours vidéo vous pouvez télécharger le code source complet du début du jeu démineur, si vous avez des questions posez les directement sous ce cours vidéo, l’équipe développement facile vous répondra avec grand plaisir, et si vous voulez aller beaucoup plus loin mais vraiment beaucoup plus loin dans la création de jeux pour les Smartphones, pour les tablettes, pour le Web, des jeux à la fois compatibles sur iPhone, pour les périphériques Smartphones sous Android, les tablettes Android, pour des jeux sur le Web, juste au-dessus de ce cours, il y a un lien cliquable, vous cliquez simplement dessus, vous serez redirigé vers la deuxième vidéo, c’est-à-dire dans la deuxième vidéo vous allez apprendre dans le détail comment travailler en équipe, utiliser des modèles de conceptions, créer des architectures de jeux très solides, ça fait que votre jeu pourra avoir plusieurs niveaux, plusieurs fonctionnalités, il se chargera toujours très rapidement pour l’utilisateur, créer des jeux multilingues, si vous développez pour l’Appstore ou Google Play c’est très intéressant d’avoir des gens en français et en anglais, vous allez découvrir tout cela dans la deuxième vidéo, cliquez simplement sur le lien au-dessus de ce cours vidéo, moi je vous retrouve tout de suite dans la deuxième vidéo pour tous vous expliquer, vous faire bénéficier de votre accompagnement par les experts de l’équipe développement facile, à tout de suite.

[/ppmtoggle] [/ppmaccordion]

Télécharger le code source de l’algorithme du Démineur

Retrouvez le code source complet et commenté de l’algorithme d’une partie du jeu de Démineur vu dans la vidéo

Montrez vos jeux de Démineur complets ici

Utilisez la zone commentaire pour venir présenter vos jeux de Démineur finalisé avec le framework Phaser.