Manipulation d'image avec toile HTML5: un puzzle coulissant

Points de base

• L'élément Canvas HTML5 permet l'intégration native du contenu multimédia, y compris les dessins en ligne, les fichiers d'image et les animations, dans les pages Web, et peut être utilisé pour créer des jeux de puzzle coulissants.
• Le dessin du canevas est effectué via un contexte initialisé par la fonction JavaScript getContext(). La fonction drawImage() dans JavaScript est utilisée pour afficher des images sur Canvas, et différentes options de paramètres permettent de redimensionner les images et d'extraire les parties d'image.
• La logique de jeu du puzzle coulissant consiste à créer un tableau bidimensionnel pour représenter le tableau. Chaque élément est un objet avec des coordonnées X et Y qui définissent sa position dans la grille de puzzle. Lorsque la planche est initialisée, chaque pièce de puzzle est située dans un carré en damier en face de sa position correcte.
• Les événements d'entrée utilisateur déclenchent des fonctions qui recalculent le nombre et la taille des carreaux, suivez les mouvements de la souris pour identifier les tuiles cliquées et vérifier si le puzzle est résolu. drawTiles() La fonction révisera la carte à l'aide des tuiles cliquées dans la nouvelle position.

HTML5 contient de nombreuses fonctionnalités qui permettent l'intégration native multimédia dans les pages Web. L'une des fonctions est l'élément Canvas, qui est une toile vierge qui peut remplir des dessins de ligne, des fichiers d'image ou des animations. Dans ce tutoriel, je vais démontrer les capacités de traitement d'image de HTML5 Canvas en créant un jeu de puzzle coulissant. Pour intégrer des toiles dans une page Web, utilisez <canvas></canvas> balise:

<canvas height="480px" width="480px"></canvas>

Les propriétés

width et height définissent la taille de la toile en pixels. Si ces propriétés ne sont pas spécifiées, la largeur est par défaut à 300px et la hauteur par défaut est à 150px. Le dessin canvas est effectué via un contexte initialisé par la fonction JavaScript getContext(). Le contexte bidimensionnel spécifié par W3C est bien appelé "2D". Par conséquent, pour initialiser le contexte d'une toile avec ID "toile", nous avons juste besoin d'appeler:

document.getElementById("canvas").getContext("2d");

L'étape suivante consiste à afficher l'image. JavaScript fournit uniquement une fonction drawImage() pour cela, mais il existe trois façons d'appeler cette fonction. Dans sa forme la plus élémentaire, cette fonction prend trois paramètres: l'objet d'image et les décalages x et y du coin supérieur gauche de la toile.

drawImage(image, x, y);

Deux autres paramètres peuvent également être ajoutés pour redimensionner l'image. width height La forme la plus complexe de

drawImage(image, x, y, width, height);

prend neuf paramètres. Le premier est l'objet d'image. Les quatre paramètres suivants sont la source x, y, la largeur et la hauteur. Les quatre autres paramètres sont la cible x, y, la largeur et la hauteur. Cette fonction extrait une partie de l'image à dessiner sur le toile et la redimensionne si nécessaire. Cela nous permet de traiter les images comme des tables de sprite.

<canvas height="480px" width="480px"></canvas>

Toutes les formes de drawImage() ont des précautions. Si l'image est vide, ou si la dimension horizontale ou verticale est nulle, ou si la hauteur de la source ou la largeur est nulle, alors drawImage() lancera une exception. Si le navigateur ne peut pas décoder l'image ou si l'image n'a pas encore été chargée lorsque la fonction est appelée, drawImage() ne montrera rien. Il s'agit d'utiliser le canevas HTML5 pour le traitement d'image. Jetons maintenant un coup d'œil à la pratique.

document.getElementById("canvas").getContext("2d");

Ce bloc HTML contient une autre fonctionnalité HTML5, Range Entrée, qui permet à l'utilisateur de sélectionner des nombres à l'aide du curseur. Nous verrons plus tard comment les entrées de plage interagissent avec le puzzle. Mais soyez conscient: alors que la plupart des navigateurs prennent en charge les entrées de plage, au moment de la rédaction, deux navigateurs plus populaires - Internet Explorer et Firefox - sont restés non pris en charge. Comme mentionné ci-dessus, pour tirer parti sur toile, nous avons besoin d'un contexte.

drawImage(image, x, y);

Nous avons besoin d'une autre image. Vous pouvez utiliser l'image citée ci-dessous ou toute autre image carrée qui s'adapte (ou peut être redimensionnée pour s'adapter).

drawImage(image, x, y, width, height);

L'auditeur d'événements est utilisé pour s'assurer que l'image a été chargée avant que le navigateur essaie de le dessiner. Si l'image n'est pas prête à être dessinée, Canvas n'affiche pas l'image. Nous obtiendrons la taille de la carte à partir de la toile de puzzle et obtiendrons le nombre de carreaux de l'entrée de plage. Ce curseur a une plage de 3 à 5 et les valeurs représentent le nombre de lignes et de colonnes.

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

Utiliser ces deux nombres, nous pouvons calculer la taille des carreaux.

  简单
  困难
  




  <canvas height="480px" width="480px"></canvas>

Maintenant, nous pouvons créer la carte.

var context = document.getElementById("puzzle").getContext("2d");

Les fonctions

setBoard() sont l'endroit où nous définissons et initialisons les cartes virtuelles. La façon naturelle de représenter un échec est d'utiliser un tableau bidimensionnel. Dans JavaScript, la création d'un tel tableau n'est pas un processus élégant. Nous déclarons d'abord un tableau plat, puis déclarons chaque élément du tableau sous forme de tableau. Ces éléments sont ensuite accessibles tout comme l'accès à un tableau multidimensionnel. Pour un jeu de puzzle coulissant, chaque élément sera un objet avec les coordonnées X et Y qui définissent sa position dans la grille de puzzle. Par conséquent, chaque objet aura deux ensembles de coordonnées. Le premier groupe sera sa position dans le tableau. Cela indique sa position sur le tableau, donc je l'appelle un carré en damier. Chaque carré de planche a un objet dont les propriétés X et Y représentent leur position dans l'image du puzzle. J'appelle cette position une pièce de puzzle. Lorsque les coordonnées du carré de la carte correspondent aux coordonnées de sa pièce de puzzle, la tuile est dans la bonne position pour la résolution de puzzle. Dans ce tutoriel, nous initialisons chaque pièce de puzzle sur un carré en damier en face de sa position correcte dans le puzzle. Par exemple, les carreaux dans le coin supérieur droit seront situés dans le carré d'échecs dans le coin inférieur gauche.

... (Le code suivant est omis car la longueur est trop longue et la logique de base a été décrite plus tôt. Le code complet doit être fourni en fonction du texte d'origine.)

Enfin, redémarrez la carte à l'aide du carreau cliqué dans la nouvelle position.

... (le code suivant est omis)

c'est tout! L'élément Canvas et certaines connaissances JavaScript et mathématiques apportent de puissantes capacités de traitement d'image natives à HTML5.

Vous pouvez trouver une démonstration en direct du puzzle coulissant à https://www.php.cn/link/15fd459bc66aa8401543d8f4d1d80d97 (le lien peut être invalide).

Questions fréquemment posées (FAQ) sur le traitement d'image avec toile HTML5 et puzzles glissants

Comment créer un jeu de puzzle coulissant à l'aide de la toile HTML5?

La création d'un puzzle coulissant avec la toile HTML5 implique plusieurs étapes. Tout d'abord, vous devez créer un élément Canvas dans le fichier HTML. Ensuite, dans le fichier JavaScript, vous devez faire référence à ce canvas et à son contexte 2D, qui vous permettra d'y dessiner. Vous pouvez ensuite charger l'image sur la toile et la diviser en grilles de carreaux. Ces carreaux peuvent être mélangés pour créer l'état de puzzle initial. La logique du jeu peut ensuite être mise en œuvre, notamment en déplaçant les carreaux et en vérifiant les conditions gagnantes.

Comment utiliser l'API Canvas pour traiter les pixels?

L'API

Canvas fournit une méthode appelée getImageData() qui vous permet de récupérer les données de pixels à partir d'une zone spécifiée de toile. Cette méthode renvoie un objet ImageData contenant un tableau de valeurs de pixels. Chaque pixel est représenté par quatre valeurs (rouge, vert, bleu et alpha), vous pouvez donc traiter ces valeurs pour modifier la couleur d'un seul pixel. Pour appliquer ces modifications, vous pouvez utiliser la méthode putImageData().

Quelle est la méthode toDataURL() dans htmlcanvaselement?

La méthode toDataURL() dans htmlCanvaselement est un outil puissant qui vous permet de créer une URL de données représentant l'image affichée dans Canvas. Cette URL de données peut être utilisée comme source d'éléments d'image, enregistrée dans une base de données ou envoyée à un serveur. Cette méthode prend un paramètre facultatif pour spécifier le format d'image. Si aucun paramètre n'est fourni, le format par défaut est PNG.

Comment contribuer au projet de jeu de puzzle coulissant sur GitHub?

GitHub est une plate-forme sur laquelle les développeurs partagent leurs projets et travaillent avec d'autres. Si vous souhaitez contribuer au projet de puzzle coulissant, vous pouvez commencer par le référentiel de forking, qui crée une copie du projet dans votre propre compte GitHub. Vous pouvez ensuite cloner ce référentiel dans votre machine locale, apporter des modifications et repousser ces modifications dans votre référentiel fourchu. Enfin, vous pouvez ouvrir une demande de traction pour suggérer des modifications à votre référentiel d'origine.

Comment utiliser la toile pour le traitement d'image?

Canvas fournit un moyen flexible et puissant de traiter les images. Vous pouvez dessiner l'image sur Canvas, appliquer la transformation et traiter un seul pixel. Par exemple, vous pouvez créer un effet en niveaux de gris en itérant sur les données de pixels et en définissant les valeurs du rouge, du vert et du bleu à la moyenne des valeurs d'origine. Vous pouvez également créer des effets Tan en appliquant des formules spécifiques aux valeurs en rouge, vert et bleu. Après le traitement de l'image, vous pouvez exporter les résultats en utilisant la méthode toDataURL().

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!