Comment faire un jeu match-3 avec HTML5 Canvas, Rembound
Tout le monde sait ce qu'est un jeu de Match-3 ou Match-trois est. Au moins, tout le monde connaît un jeu qui est un jeu match-3. Des jeux comme Bejeweled de PopCap Games ou des bonbons Crush Saga de King sont Match-3 jeux. Ces jeux sont également appelés jeux occasionnels, qui sont très populaires avec un groupe spécifique de joueurs. Un jeu de Match-3, sous sa forme de base, a quelques éléments communs. Il y a une grille à deux dimensions de tuiles. Tuiles sont disponibles en différents types, représentés par différentes formes et couleurs. Le joueur peut modifier la position des carreaux, en échangeant les tuiles adjacentes par exemple, pour créer des groupes de trois ou plus de tuiles horizontales ou verticales qui sont du même type. Ces grappes de trois tuiles ou plus sont également appelés allumettes ou 3. Si des groupes ont été formés par cette action swapping, les groupes seront supprimés, le joueur obtient des points et la gravité se déplacera les tuiles restantes dans une position stable, le remplacement des tuiles enlevées par de nouvelles tuiles aléatoires.
Comment faire un jeu match-3 avec HTML5 Canvas
Cliquez ici pour aller directement à la fin de cet article et de jouer le jeu.
Bejeweled et Candy Crush Saga
Deux populaires Match-3 jeux sont Bejeweled et Candy Crush Saga. Les images ci-dessous montrent comment ces jeux ressemblent. Le cœur de leur gameplay utilise le mécanicien Match-3. Comme expliqué précédemment, le joueur a besoin de créer des groupes de trois ou plus de tuiles horizontales ou verticales qui sont du même type. Une fois qu'un groupe est formé, les tuiles du cluster sont supprimés. De nouvelles tuiles semblent prendre la place des tuiles retirées. Les images ci-dessous montrent que les tuiles sont disposées dans une grille à deux dimensions. Alors que le mécanicien Match-3 est le même dans les deux jeux, il y a des différences.
Bejeweled utilise une grille à 8 colonnes et 8 rangées. Les carreaux sont représentés par des pierres précieuses brillantes et colorées. Il y a 7 gemmes réguliers. gemmes spéciales peuvent être sommés en créant des combos et des chaînes de matches. Ces gemmes spéciales permettent au joueur de marquer plus de points et effacer le niveau plus rapidement.
Candy crush saga
Alors que les deux jeux ont un style d'art différent, différents niveaux et différents combos et objectifs, au cœur, ils sont le même jeu. Le joueur progresse à travers les jeux d'une manière différente, mais à leur base, les jeux utilisent le standard mécanique Match-3, que nous expliquons dans le reste de ce tutoriel.
Génération d'un niveau
Nous définissons un niveau d'être une grille à deux dimensions de level.columns par des tuiles level.rows, qui ont un certain type. Pour ce tutoriel, nous allons définir le type d'un carreau à une couleur spécifique seulement, mais vous pouvez définir une forme pour un type de tuile spécifique. Alors d'abord, définir le niveau et les types de tuiles possibles.
A notre fonction init (), initialiser le tableau level.tiles:
Nous avons défini notre format de niveau et les couleurs possibles de tuiles, nous pouvons maintenant commencer à générer un niveau. Un premier niveau devrait avoir deux propriétés. Nous allons les définir:
- Le niveau doit être rempli de tuiles de type aléatoire
- Il n'y a pas des allumettes ou des groupes de trois ou plus de tuiles horizontales ou verticales
- Il devrait y avoir au moins un mouvement valide possible
Nous pourrions créer un algorithme intelligent qui insère uniquement des tuiles appropriées dans la grille à deux dimensions, tout en conservant les propriétés définies ci-dessus. Pour ce tutoriel, nous créons un algorithme plus simple, qui utilise des méthodes de force brute pour atteindre nos objectifs. Notre grille à deux dimensions est assez petit pour nous permettre d'utiliser des méthodes de force brute, sans ralentir le jeu vers le bas. Ceci est notre algorithme:
Comme vous pouvez le voir, nous remplissons le tableau de tuiles avec des tuiles aléatoires. Nous vérifions pour voir s'il y a des clusters. S'il y a des grappes, les enlever, jusqu'à ce qu'il n'y a plus de grappes. Remplissez les grappes enlevées avec de nouvelles tuiles aléatoires. Enfin, nous vérifions s'il y a au moins un mouvement valide. S'il y a un mouvement valide, nous fait. S'il n'y avait aucun mouvement valide, le niveau est injouable et nous générons un nouveau niveau.
Implémentons la fonction resolveClusters ():
Nous continuons à enlever les grappes jusqu'à ce qu'il n'y a pas de groupes de gauche. Lors du retrait des grappes, nous changeons les tuiles vers le bas et insérer de nouvelles tuiles au hasard, comme nous lorsqu'un utilisateur supprime une tuile à la main. Nous mettrons en œuvre les findMoves (). fonctions removeClusters () et shiftTiles () plus loin dans ce tutoriel. Trouver des clusters avec la fonction findClusters () sera expliqué ensuite.
Comment trouver des clusters
Une grappe, également appelé un match, est définie par trois ou plusieurs tuiles voisines horizontales ou verticales de même type. Pour rendre les choses faciles, nous créons un algorithme pour trouver les grappes horizontales et un algorithme pour trouver les grappes verticales. Ces deux algorithmes seront les mêmes, avec quelques différences mineures. Pour trouver des clusters horizontaux, nous pourrions regarder une ligne à la fois. A chaque ligne, nous commençons par la tuile dans la première colonne et initialisons notre compteur matchlength à un. A partir de cette première tuile, nous passons à la tuile dans la colonne suivante, et voir si la tuile est du même type. Dans ce cas, nous augmentons notre matchlength et passer à la prochaine tuile, jusqu'à ce que nous sommes à la dernière colonne. Si la tuile a un type différent, nous vérifions si matchlength est supérieur ou égal à trois. Dans ce cas, nous avons trouvé un groupe et nous l'ajouter au tableau des clusters. Si nous sommes à la dernière colonne, nous passons à la ligne suivante et répétez le processus. Pour trouver des grappes verticales, nous faisons la même chose, mais nous passons à travers la grille dans une autre direction.
Comment trouver Moves Disponible
Si nous pouvons échanger deux tuiles voisines horizontales ou verticales et de créer un groupe de trois tuiles ou plus, nous avons trouvé un mouvement valide. Nous créons un algorithme qui utilise des méthodes de force brute pour essayer tous les swaps horizontaux et verticaux, et savoir si les swaps ont fait un cluster ou plus en utilisant la fonction findClusters ().
Suppression des clusters
Nous savons comment trouver des clusters. La seule chose qui reste est de les enlever. Quand on enlève un cluster, un trou apparaît dans la grille avec des tuiles vides. Les tuiles qui sont au-dessus de ce trou devrait être déplacé vers le bas de la grille et de nouvelles tuiles doivent apparaître en haut de la grille. La fonction removeClusters () ci-dessous, utilise les grappes trouvés dans la matrice de grappes et crée des trous dans la grille en définissant le type de tuiles à -1. Une fois que les trous sont créés, l'algorithme calcule combien les tuiles restantes doivent être réorientées vers le bas et stocke ce numéro dans le paramètre de décalage.
Les clusters sont supprimés, mais les tuiles doivent être réorientées et doivent insérer de nouvelles tuiles.
Suppression des clusters et des tuiles changeantes peuvent créer de nouveaux clusters. Ces nouveaux groupes devraient être supprimés. Les fonctions removeClusters () et shiftTiles () doit être appelée à plusieurs reprises dans une séquence d'animation, de supprimer tous les groupes, tout en augmentant le score et l'application des systèmes de combo.
Faire une simple AI Bot
En prime, nous pouvons créer un simple robot d'intelligence artificielle qui joue le jeu pour nous. Nous savons que tous les mouvements possibles en utilisant la fonction findMoves (). Si nous prenons un mouvement aléatoire et faire semblant que nous sommes un joueur qui permute deux tuiles, nous pouvons jouer automatiquement le jeu. Lorsque le jeu est dans un état prêt, nous exécutons le code suivant.
Match-3 Exemple
Voici le jeu fini. Le code peut être étendu pour mettre en œuvre des animations appropriées, un système de combo et plus des mécanismes de jeu. tuiles adjacentes peuvent être permutés en cliquant et en faisant glisser. Le code source complet est disponible sur GitHub. sous licence GPLv3. Consultez mon article Comment charger et dessiner des images avec la toile HTML5 pour apprendre comment ajouter des images au jeu.