(J'ai été un peu obsédé par les modèles de conception ces derniers temps, et c'est un peu ennuyeux d'affronter du pur js tout le temps -_-. J'ai donc écrit quelque chose d'intéressant pour pimenter le tout)
Canvas n'est pas nouveau maintenant, mais comme il n'est pas couramment utilisé dans les affaires quotidiennes, il n'y a pas beaucoup de pratique. Aujourd'hui, je vais partager comment mettre en œuvre un labyrinthe de canevas simple. Cet exemple provient de la deuxième édition de "html5 cheats", et le code a été légèrement ajusté.
Étant donné qu'il existe une étape intermédiaire lors de l'utilisation de Canvas pour obtenir des informations sur l'image, un environnement serveur doit être utilisé. J'ai donc d'abord écrit un échantillon et l'ai lancé sur le serveur afin que tout le monde puisse d'abord ressentir l'effet (utiliser le sentiment d'accomplissement comme force motrice hahaha)
Cliquez sur moi pour expérimenter
adresse git
texteIl n'est pas difficile de mettre en œuvre ce petit jeu. Pensons aux éléments de base d'un jeu de labyrinthe.
Bien sûr, il doit d’abord y avoir une carte, puis il doit y avoir un méchant en mouvement. Nous utilisons des cavans pour dessiner ces deux-là ;
Vient ensuite le programme de déplacement d'objets. Ce programme comprend principalement deux aspects :
1. Laissez l'objet se déplacer selon les instructions que nous spécifions ;
2. Détectez si l'objet touche le mur ou sort.
Dessiner une carte du labyrinthe et des personnages en mouvement
Les principales étapes pour dessiner une carte sont :
La génération de la carte du labyrinthe peut être obtenue à l'aide d'un générateur de labyrinthe en ligne de Google.
Il en va de même pour dessiner un méchant. Recherchez simplement une image d'un méchant. Cependant, ce à quoi vous devez faire attention ici, c'est que vous devez trouver une image carrée, car nous devrons effectuer une détection de collision mobile plus tard, ainsi que des carrés. sont plus faciles à juger.
Ensuite, nous écrirons les principales fonctions permettant de dessiner des labyrinthes et des méchants.
function drawMaze(mazeFile, StartingX, StartingY) { var imgMaze = new Image() imgMaze.onload = function () { // Ajustement de la taille du canevas canvas.width = imgMaze.width canvas.height = imgMaze.height // Dessine un visage souriant var imgFace = document.getElementById(face) context.drawImage(imgMaze, 0, 0) x = StartingX y = startY context.drawImage(imgFace, x, y) context.Stroke() } imgMaze.src = mazeFile}
mazeFile est l'adresse image du labyrinthe, StartingX et StartingY sont les coordonnées du point de départ. Il y a deux manières d'introduire des images ici. La raison est que je ne change pas souvent les images du méchant, donc je les écris directement sur la page. La carte du labyrinthe est censée être variable, donc je l'introduis dans. js. Si vous le souhaitez, il n'y a aucun problème si vous l'importez directement en utilisant js. Les autres parties sont relativement simples et ne seront pas décrites à nouveau.
fonction de déplacementLes grands principes du mouvement sont :
Accepte les entrées utilisateur spécifiées (dans ce cas, répond aux touches de direction) et les convertit en instructions de mouvement correspondantes. Vérifiez ensuite périodiquement les instructions de mouvement et dessinez la position cible correspondante. Donnez un exemple simple :
Par exemple, chaque fois que la touche de direction vers le haut est enfoncée, il est enregistré qu'elle doit se déplacer vers le haut, puis toutes les 100 millisecondes, elle vérifie la commande de mouvement actuelle, dessine l'emplacement cible où elle doit se déplacer et répète ce processus. Le code est également relativement simple :
// Déplacer la fonction function processKey(e) { dx = 0 dy = 0 // Détection des touches de direction haut, bas, gauche et droite if (e.keyCode === 38) { dy = -1 } if (e.keyCode = == 40) { dy = 1 } if (e.keyCode === 37) { dx = -1 } if (e.keyCode === 39) { dx = 1 }}// Dessiner la fonction de cadre drawFrame() { if (dx != 0 || dy != 0) { // context.clearRect(x,y,canvas.width,canvas.height) // Dessiner le contexte de la trajectoire mobile. beginPath(); contexte.fillStyle = rgb(254,244,207) contexte.rect(x, y, 15, 15) contexte.fill() x += dx y += dy // Détection de collision if (checkForCollision()) { x -= dx y -= dy dx = 0 dy = 0 } //Dessine l'emplacement où le méchant doit se déplacer var imgFace = document.getElementById( 'face') context.drawImage(imgFace, x, y) if (canvas.height - y < 17) { // isFirst = false alert('Félicitations pour avoir terminé le jeu') return false } // S'il est réinitialisé ici, il deviendra un mouvement non automatique, c'est-à-dire que chaque fois que la touche de direction est enfoncée, il n'avancera que d'un pas depuis l'expérience actuelle. n'est pas bon, nous ne le réinitialiserons pas maintenant/ / dx = 0 // dy = 0 } setTimeout(drawFrame, 20)}
Dans le code ci-dessus, la fonction de mouvement est relativement simple. La fonction la plus importante pour dessiner des cadres est la fonction de détection de collision, qui est expliquée en détail ci-dessous.
Détection des collisionsPour détecter si un objet entre en collision avec un mur, il est généralement nécessaire de sauvegarder d'abord les informations de la carte en mémoire, puis de détecter s'il entre en collision avec un mur actuel lors du déplacement de l'objet. Cependant, puisque l'arrière-plan de notre carte est noir et blanc. labyrinthe blanc, nous pouvons utiliser la couleur pour détecter les collisions. La méthode spécifique est la suivante :
Obtenez la position des coordonnées de l'objet actuel et utilisez le canevas pour détecter si la couleur de cette position sur la carte actuelle est noire. Si tel est le cas, il s'agit d'un mur et le mouvement ne doit pas être effectué. Voici le code :
function checkForCollision() { var imageData = context.getImageData(x - 1, y - 1, 15 + 2, 15 + 2) var pixels = imageData.data pour (var i = 0, len = pixels.length; i < len ; i++) { var rouge = pixels[i], vert = pixels[i + 1] bleu = pixels[i + 2] alpha = pixels[i + 3] // Vérifiez s'il heurte un mur noir if (red === 0 && green === 0 && blue === 0) { return true } } return false}
Ici, 15 est la largeur du méchant. Nous détectons la plage 1px des deux côtés du méchant (correspondant à getImageData(x - 1, y - 1, 15 + 2, 15 + 2) dans le code. Vous pouvez y penser. pourquoi c'est + ici 2), s'il est noir, cela signifie qu'une collision est détectée.
le resteDans le code, j'ai ajouté d'autres fonctions, telles que l'invite à répondre, etc. Quant au changement de carte, c'est relativement simple : stockez l'adresse du fichier, les coordonnées du point de départ, le chemin de l'image de réponse, etc. correspondant à la carte dans un objet, puis définissez un tableau de cartes, changez de carte et effectuez un nouveau rendu lorsque vous cliquez dessus. Il reste encore certains domaines à optimiser, tels que :
Les étudiants intéressés peuvent essayer de le mettre en œuvre eux-mêmes.
résuméCet exemple est relativement simple et n'a pas d'exigences élevées pour js. C'est plutôt bien de jouer avec.
Et puis c'est toujours la même fin à chaque fois. S'il y a des erreurs dans le contenu, veuillez le signaler ; si cela vous est utile, vous pouvez l'aimer et l'enregistrer. Veuillez demander l'autorisation avant de réimprimer et indiquer la source. . Si vous avez des questions, vous pouvez communiquer par message privé. Page d'accueil Vous avez une adresse e-mail ~ échappée.
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.