Utiliser Canvas pour implémenter un jeu de labyrinthe-Tutoriel H5-php.cn

Cet article présente principalement l'utilisation de Canvas pour implémenter des jeux de labyrinthe. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Avant-propos

( récemment conçu Le modèle est un peu écrasant, et c'est vraiment ennuyeux d'affronter du pur js tout le temps -_-, donc je vais écrire quelque chose d'intéressant pour le pimenter)
Maintenantcanvas ce n'est pas nouveau, mais ce n'est pas couramment utilisé dans les affaires quotidiennes, il n'y a donc pas beaucoup de pratique. Aujourd'hui, je vais partager comment mettre en œuvre un simple canvas labyrinthe. Cet exemple provient de la deuxième édition de "html5 cheats", et le code a été légèrement ajusté.

Comme il y a une étape au milieu lors de l'utilisation de Canvas pour obtenir des informations sur l'image, doit utiliser l'environnement du serveur. J'ai donc d'abord écrit un échantillon et l'ai jeté sur le serveur pour que tout le monde puisse en ressentir l'effet en premier (utiliser le sentiment d'accomplissement comme force motrice hahaha)

Texte

Ce n'est pas difficile de implémentons ce petit jeu. Pensons aux éléments de base d'un jeu de labyrinthe.

Tout d'abord, bien sûr, il doit y avoir une carte, et ensuite il doit y avoir un homme en mouvement Nous utilisons des cavans pour dessiner ces deux-là

continuer Voici le programme pour le

mouvement d'objet Ce programme comprend principalement deux aspects :

1. Laissez l'objet se déplacer selon les instructions que nous avons spécifiées

2. . Détectez si l'objet touche le corps ou exporte.

Dessiner une carte du labyrinthe et des figures en mouvement

Les principales étapes pour dessiner une carte sont :

Obtenir une photo de la carte
Utilisez des cavans pour dessiner des images.

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.

La même chose est vraie pour dessiner un méchant. Cherchez 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, parce que nous devrons effectuer une détection de collision mobile plus tard, la forme carrée est plus facile à juger.

L'étape suivante consiste à écrire la fonction principale pour dessiner le labyrinthe et le méchant

function drawMaze(mazeFile, startingX, startingY) {
  var imgMaze = new Image()
  imgMaze.onload = function () {
    // 画布大小调整
    canvas.width = imgMaze.width
    canvas.height = imgMaze.height

    // 绘制笑脸
    var imgFace = document.getElementById("face")
    context.drawImage(imgMaze, 0, 0)

    x = startingX
    y = startingY
    context.drawImage(imgFace, x, y)
    context.stroke()
  }
  imgMaze.src = mazeFile
}

Copier après la connexion

est l'adresse de l'image du labyrinthe, mazeFile et startingX 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 simplement directement sur la page. La carte du labyrinthe est censée être variable, donc je la présente. en js Si vous voulez toutes les images 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. startingY

Fonction de mouvement

Le principe principal du mouvement est :

Acceptez l'entrée utilisateur spécifiée (ici, il s'agit de la réponse aux touches de direction) et convertissez-la en commande de mouvement correspondante. Ensuite
vérifie périodiquement la commande de mouvement et dessine la position cible correspondante. Pour donner 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 la commande de mouvement actuelle est vérifiée toutes les 100 millisecondes, l'emplacement cible où elle doit être déplacé est dessiné et le processus est répété. Le code est également relativement simple :

// 移动函数
function processKey(e) {
  dx = 0
  dy = 0
  // 上下左右方向键检测
  if (e.keyCode === 38) {
    dy = -1
  }
  if (e.keyCode === 40) {
    dy = 1
  }
  if (e.keyCode === 37) {
    dx = -1
  }
  if (e.keyCode === 39) {
    dx = 1
  }
}

// 绘制帧
function drawFrame() {
  if (dx != 0 || dy != 0) {
    // context.clearRect(x,y,canvas.width,canvas.height)
    // 绘制移动轨迹
    context.beginPath();
    context.fillStyle = "rgb(254,244,207)"
    context.rect(x, y, 15, 15)
    context.fill()
    x += dx
    y += dy
    // 碰撞检测
    if (checkForCollision()) {
      x -= dx
      y -= dy
      dx = 0
      dy = 0
    }
    
    //绘制小人应该移动的地点
    var imgFace = document.getElementById('face')
    context.drawImage(imgFace, x, y)

    if (canvas.height - y < 17) {
      // isFirst = false
      alert('恭喜你通关 游戏结束')
      return false
    }
    // 这里如果重置的话变成非自动移动，也就是每按下一次方向键只前进一步，由于目前体验不好所以先不做重置
    // dx = 0
    // dy = 0
  }
  setTimeout(drawFrame, 20)
}

Copier après la connexion

Dans le code ci-dessus, la fonction de mouvement est relativement simple. La fonction la plus importante des cadres de dessin est la fonction de détection de collision, qui est expliquée en détail ci-dessous.

Détection de collision

Pour détecter si un objet entre en collision avec un mur,

généralement nécessite d'abord d'enregistrer les informations de la carte dans la mémoire, puis de détecter s'il entre en collision avec le mur lors du déplacement de l'objet. Le mur actuel entre en collision, mais puisque l'arrière-plan de notre carte est un labyrinthe en noir et blanc, nous pouvons utiliser la couleur pour détecter la collision . La méthode spécifique est la suivante :

Obtenez la position des coordonnées de l'objet actuel et utilisez pour détecter si la couleur de cette position sur la carte actuelle est noire. Si tel est le cas, on dit. être un mur et le mouvement ne doit pas être effectué. canvas, voici le code :

function checkForCollision() {
  var imageData = context.getImageData(x - 1, y - 1, 15 + 2, 15 + 2)
  var pixels = imageData.data

  for (var i = 0, len = pixels.length; i < len; i++) {
    var red = pixels[i],
        green = pixels[i + 1]
        blue = pixels[i + 2]
        alpha = pixels[i + 3]

    // 检测是否碰到黑色的墙
    if (red === 0 && green === 0 && blue === 0) {
      return true
    }
  }
  return false
}

Copier après la connexion

Ici,

est la largeur du méchant, on détecte la plage 1px des deux côtés. du méchant (correspondant à 15 dans le code, vous pouvez y réfléchir un peu. Pourquoi c'est +2 ici), s'il est noir, c'est qu'une collision est détectée. getImageData(x - 1, y - 1, 15 + 2, 15 + 2)

Le reste

Dans le code, j'ai ajouté quelques autres fonctions, comme demander des réponses, 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 y a également certains domaines qui méritent d'être optimisés, tels que :

L'expérience de détection de collision n'est pas bonne dans les virages
Il y a une trajectoire lorsque fonctionnant dans la situation actuelle, comment supprimer les pistes en mode réponse ?

Les étudiants intéressés peuvent essayer de le mettre en œuvre eux-mêmes.

Résumé

Cet exemple est relativement simple et ne nécessite pas de js élevé, il est donc assez bon de jouer avec.

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. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

API HTML5 Canvas pour créer un jeu de devinettes simple

HTML5 Canvas pour obtenir des effets spéciaux de feux d'artifice

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!