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 partiedu célèbre jeu Démineur qui était fournis avec Windows. Vous allez voir comment découvrir lescases adjacentes à la case sur laquelle clic l'utilisateur. Tout est dans la vidéo ci-dessous.

jQLeadBrite("#leadplayer_video_element_54E0E77BB58DB").leadplayer(false, "eyJnYSI6dHJ1ZSwib3ZlcmxheSI6ZmFsc2UsInBvd2VyZWRfYnkiOmZhbHNlLCJwb3dlcmVkX2J5X2xpbmsiOiJodHRwOlwvXC93d3cucHJvZ3JhbW1hdGlvbi1mYWNpbGUuY29tXC8iLCJjb2xvcjEiOiIjRjVCQjBDIiwiY29sb3IyIjoiIzE3OThDRCIsImNvbG9yMyI6IiNGNUJCMEMiLCJ0eHRfc3VibWl0IjoiUkVDRVZPSVIgISIsInR4dF9wbGF5IjoiTGVjdHVyZSIsInR4dF9lbWwiOiJSZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X25hbWUiOiJSZW5zZWlnbmV6IHZvdHJlIFByXHUwMGU5bm9tLi4uIiwidHh0X2ludmFsaWRfZW1sIjoiU1ZQLCByZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X2ludmFsaWRfbmFtZSI6IlNWUCwgcmVuc2VpZ25leiB2b3RyZSBQclx1MDBlOW5vbS4uLiIsImxwX3NvdXJjZSI6IldQIFBsdWdpbiAxLjQuMi4xIFVubGltaXRlZCIsImlkIjoiNTRFMEU3N0JCNThEQiIsIndpZHRoIjo5NDAsImhlaWdodCI6NTI5LCJ0aHVtYm5haWwiOiIiLCJ0aXRsZSI6IkNvbW1lbnQgY3JcdTAwZTllciBsZSBqZXUgZFx1MDBlOW1pbmV1ciBhdmVjIGxlIEZyYW1ld29yayBQaGFzZXIgIiwiZGVzY3JpcHRpb24iOiJDb21tZW50IGNyXHUwMGU5ZXIgbGUgamV1IGRcdTAwZTltaW5ldXIgYXZlYyBsZSBGcmFtZXdvcmsgUGhhc2VyICIsImF1dG9wbGF5IjpmYWxzZSwic2hvd190aW1lbGluZSI6dHJ1ZSwiZW5hYmxlX2hkIjp0cnVlLCJvcHQiOmZhbHNlLCJjdGEiOnsidGltZSI6ImVuZCIsImJ0ZXh0IjoiQ2xpcXVleiBpY2kgcG91ciBjb25uYVx1MDBlZXRyZSB0b3V0ZXMgbGVzIGNsXHUwMGU5cyBwb3VyIG1hXHUwMGVldHJpc2VyIEphdmFTY3JpcHQgISIsInVybCI6Imh0dHA6XC9cL3d3dy5mb3JtYXRpb24tamF2YXNjcmlwdC50dlwvIiwiYXV0b19mb2xsb3ciOmZhbHNlLCJuZXdfd2luZG93IjpmYWxzZX0sInltIjoiMWtOUHJaa1RXZVUifQ==");

Afficher le texte de la vidéo

Comment créer le jeu démineur avec le Framework Phaser Bonjour et bienvenu surDéveloppement Facile. Dans ce nouveau cours toujours dédié aux Framework Phaser, doncc’est un Framework open source, gratuit, rapide à utiliser, génial qui permet de créer des jeuxpour 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 sonttrè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 jeudémineur mais vous allez voir une solution, par exemple, l'utilisateur clique à un endroit etsavoir les cases adjacentes qui sont concernées. Je vous montre ça vous parlera plus à traversun exemple. Si je mets mon curseur ici, vous voyez la case devient verte, on pourrait imaginerque c’est un démineur, que le joueur clic dessus et tout autour et bien c’est des casesadjacentes donc si il y a une mine, le joueur peut avoir perdu ou alors dans le démineur, lescases adjacentes sont affichées s'il y a pas de mine. Et là en fonction ou l'utilisateur déplace lepointeur, par exemple ici il y a que ces deux cases adjacentes, ici il n’y en a que deux, là il y ena quatre et là il y en a six tout autour et donc c'est ce que vous allez apprendre à créer leframework Phaser, avec le Framework Phaser, tout est simplifié au niveau du développement,

1 / 3

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 1516 deuxième ligne, donc vous remarquez avec les coordonnées ça vous permet de récupérerune case beaucoup plus facilement. Alors le code, comme d'habitude vous désactivez le cachependant la phase de développement de la classe main, enfin du fichier main, vous incluezframework phaser, mais bon phaser vous commencez à connaître, les variables du jeu, lesvariables largeurs hauteur du jeu, une fois que le DOM est chargé vous appelez la fonctionmain qui va créer avec l’API canvas la zone de jeu, et appeler ses différentes fonctions, donc lepré 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 vousserez é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 fullscreen et ça va afficher votre jeu en plein écran, ensuite vous créez la scène du jeu, là c'est lacréation de la grille du démineur avec les coordonnées de la forme à déterminer pour lapositionner, vous ajoutez le Sprite dans un groupe qui contient l’icône, la forme, le texte avecles coordonnées ici qui ont été calculées, le ; entre les deux coordonnées arial, la taille de lapolice et vous ajoutez le texte au groupe et votre groupe est ajouté, bien évidemment sur lascène, ensuite vous positionnez la forme donc qui représente le groupe forme plus texte, vousle positionnez au bon endroit tout simplement et vous ajoutez un marqueur donc vous créez lemarqueur que vous allez déplacer, donc c'est le pointeur utilisé par l'utilisateur que vousmasquez et vous écoutez les éléments, à chaque fois que l'utilisateur déplace la souris, ça vatout simplement appeler la fonction check forme, update on ne s’en sert pas et check forme çava 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 estsé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 onle cache, il revient dans l'écran, il ressort on le cache, sinon on le rend visible le pointeur et onva modifier la couleur de la forme sous le pointeur et ensuite on modifie la couleur des formesadjacentes 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 çava vous permettre de commencer à créer votre jeu démineur donc ça c'est la construction de lagrille, vous pouvez construire un démineur classique avec des lignes sans décalage, là c'étaitpour vous montrer justement la mise à jour des formes adjacentes, de la couleur des formesadjacentes, vous pouvez construire une grille classique de démineur et ensuite c'est danscheck forme, le clic ça mettrait, ça changerait la couleur là ou l'utilisateur clique, donc ce seraitplus sur add move callback, ca serait on clic call back que vous appellerez check form et dansupdate 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 sourcecomplet du début du jeu démineur, si vous avez des questions posez les directement sous cecours vidéo, l'équipe développement facile vous répondra avec grand plaisir, et si vous voulezaller beaucoup plus loin mais vraiment beaucoup plus loin dans la création de jeux pour lesSmartphones, pour les tablettes, pour le Web, des jeux à la fois compatibles sur iPhone, pour

2 / 3

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, vousserez redirigé vers la deuxième vidéo, c'est-à-dire dans la deuxième vidéo vous allez apprendredans le détail comment travailler en équipe, utiliser des modèles de conceptions, créer desarchitectures de jeux très solides, ça fait que votre jeu pourra avoir plusieurs niveaux, plusieursfonctionnalités, il se chargera toujours très rapidement pour l'utilisateur, créer des jeuxmultilingues, si vous développez pour l’Appstore ou Google Play c'est très intéressant d'avoirdes 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 suitedans la deuxième vidéo pour tous vous expliquer, vous faire bénéficier de votreaccompagnement par les experts de l'équipe développement facile, à tout de suite.

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émineurvu dans la vidéo

Downloads

24 - demineur

Code source commenté de la gestion des cases adjacentes pour un jeu de Démineur,réalisé avec le Framework JavaScript Phaser.

Montrez vos jeux de Démineur complets ici

Utilisez la zone commentaire pour venir présenter vos jeux de Démineur finalisé avec leframework Phaser. Comment créer le jeu démineur avec le Framework Phaser

Créez des Applications Mobiles, Web Performantes avec Développement Facile : Cliquez icipour Télécharger Gratuitement votre Formation Professionnelle Développement Web

Powered by TCPDF (www.tcpdf.org)

3 / 3