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
( 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)
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 lemouvement d'objet Ce programme comprend principalement deux aspects :
1. Laissez l'objet se déplacer selon les instructions que nous avons spécifiées2. . Détectez si l'objet touche le corps ou exporte.
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échantfunction 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)
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!