Utiliser Canvas pour implémenter un jeu de labyrinthe

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à

mouvement d'objet Ce programme comprend principalement deux aspects :

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

1. Obtenir une photo de la carte

2. Utilisez des cavans pour dessiner des images.

image carrée, parce que nous devrons effectuer une détection de collision mobile plus tard, la forme carrée est plus facile à juger.

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
}

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

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 :

// 移动函数
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)
}

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
}

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)

1. L'expérience de détection de collision n'est pas bonne dans les virages

2. Il y a une trajectoire lorsque fonctionnant dans la situation actuelle, comment supprimer les pistes en mode réponse ?

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!