Ejemplo de implementación rápida de un juego de laberinto de lienzo simple

(He estado un poco obsesionado con los patrones de diseño recientemente, y es un poco aburrido enfrentar js puro todo el tiempo -_-. Así que escribí algo interesante para darle vida)

Canvas no es nuevo ahora, pero debido a que no se usa comúnmente en los negocios diarios, no hay mucha práctica. Hoy compartiré cómo implementar un laberinto de lienzo simple. Este ejemplo proviene de la segunda edición de "trucos html5" y el código se ha ajustado ligeramente.

Debido a que hay un paso intermedio cuando se utiliza el lienzo para obtener información de la imagen, se debe utilizar un entorno de servidor. Así que primero escribí una muestra y la lancé al servidor para que todos pudieran experimentar el efecto primero (use la sensación de logro como fuerza impulsora jajaja)

Haz clic en mí para experimentar

dirección git

No es difícil implementar este pequeño juego. Pensemos en los elementos básicos de un juego de laberinto.

Primero, por supuesto, debe haber un mapa, y luego debe haber un villano en movimiento. Usamos cavans para dibujar a estos dos;

El siguiente es el programa de movimiento de objetos. Este programa incluye principalmente dos aspectos:

1. Deja que el objeto se mueva según las instrucciones que especificamos;

2. Detectar si el objeto toca la pared o sale.

Dibujar un mapa del laberinto y figuras en movimiento.

Los pasos principales para dibujar un mapa son:

1. Obtener una imagen de un mapa
2. Usa cavans para dibujar imágenes.

La generación del mapa del laberinto se puede obtener con la ayuda de un generador de laberintos en línea de Google.

Lo mismo ocurre con el dibujo de un villano. Solo busque una imagen de un villano. Sin embargo, a lo que debe prestar atención aquí es a que necesita encontrar una imagen cuadrada, porque necesitaremos realizar la detección de colisiones móviles más adelante. son más fáciles de juzgar.

A continuación, escribiremos las funciones principales para dibujar laberintos y villanos.

 function drawMaze(mazeFile, StartingX, StartingY) { var imgMaze = new Image() imgMaze.onload = function () { // Ajuste del tamaño del lienzo canvas.width = imgMaze.width canvas.height = imgMaze.height // Dibuja una cara sonriente var imgFace = document.getElementById(face) context.drawImage(imgMaze, 0, 0) x = comenzandoX y = inicioY contexto.drawImage(imgFace, x, y) contexto.stroke() } imgMaze.src = laberintoFile}

mazeFile es la dirección de la imagen del laberinto, comenzandoX y comenzandoY son las coordenadas del punto de partida. Hay dos formas de presentar imágenes aquí. La razón es que no cambio las imágenes del villano con frecuencia, así que las escribo directamente en la página. El mapa del laberinto debe ser variable, así que lo presento. js. Si lo deseas, no hay problema si lo importas directamente usando js. Las otras partes son relativamente simples y no se describirán nuevamente.

Los principios fundamentales del movimiento son:

Acepta la entrada del usuario especificada (en este caso, responde a las teclas de dirección) y la convierte en las instrucciones de movimiento correspondientes. Luego verifique periódicamente las instrucciones de movimiento y dibuje la posición objetivo correspondiente. Da un ejemplo sencillo:

Por ejemplo, cada vez que se presiona la tecla de dirección hacia arriba, se registra que debe moverse hacia arriba y luego, cada 100 milisegundos, verifica el comando de movimiento actual, dibuja la ubicación objetivo donde debe moverse y repite este proceso. El código también es relativamente simple:

 // Función de movimiento function ProcessKey(e) { dx = 0 dy = 0 // Detección de teclas de dirección arriba, abajo, izquierda y derecha if (e.keyCode === 38) { dy = -1 } if (e.keyCode = == 40) { dy = 1 } if (e.keyCode === 37) { dx = -1 } if (e.keyCode === 39) { dx = 1 }}// Dibujar función de marco drawFrame() { if (dx!= 0 || dy!= 0) { // context.clearRect(x,y,canvas.width,canvas.height) // Dibujar contexto de trayectoria en movimiento. comenzarPath(); contexto.fillStyle = rgb(254,244,207) contexto.rect(x, y, 15, 15) contexto.fill() x += dx y += dy // Detección de colisión if (checkForCollision()) { x -= dx y -= dy dx = 0 dy = 0 } //Dibuja la ubicación donde debe moverse el villano var imgFace = document.getElementById( 'cara') context.drawImage(imgFace, x, y) if (canvas.height - y < 17) { // isFirst = false alert('Felicitaciones por completar el juego') return false } // Si se reinicia aquí, se convertirá en un movimiento no automático, es decir, cada vez que se presione la tecla de dirección, solo avanzará un paso desde la experiencia actual. no es bueno, no lo restableceremos ahora/ / dx = 0 // dy = 0 } setTimeout(drawFrame, 20)}

En el código anterior, la función de movimiento es relativamente simple. La función más importante para los marcos de dibujo es la función de detección de colisiones, que se explica en detalle a continuación.

Para detectar si un objeto choca con una pared, generalmente es necesario guardar primero la información del mapa en la memoria y luego detectar si choca con una pared actual al mover el objeto. Sin embargo, dado que el fondo de nuestro mapa es negro y. laberinto blanco, podemos usar el color para detectar colisiones. El método específico es:

Obtenga la posición de coordenadas del objeto actual y use el lienzo para detectar si el color de esta posición en el mapa actual es negro. Si es así, se dice que es una pared y no se debe realizar el movimiento.

 función 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 rojo = píxeles[i], verde = píxeles[i + 1] azul = píxeles[i + 2] alfa = píxeles[i + 3] // Comprueba si golpea una pared negra if (rojo === 0 && verde === 0 && azul === 0) { return true } } return false}

Aquí, 15 es el ancho del villano. Detectamos el rango de 1 px en ambos lados del villano (correspondiente a getImageData (x - 1, y - 1, 15 + 2, 15 + 2) en el código. Puedes pensar en ello. por qué es + aquí 2), si es negro, significa que se detecta una colisión.

En el código, agregué algunas otras funciones, como solicitar respuestas, etc. En cuanto a cambiar el mapa, es relativamente simple: almacene la dirección del archivo, las coordenadas del punto de inicio, la ruta de la imagen de respuesta, etc. correspondientes al mapa en un objeto, luego configure una matriz de mapas, cambie el mapa y vuelva a renderizarlo cuando se haga clic. Todavía hay algunas áreas que vale la pena optimizar, como por ejemplo:

1. La experiencia de detección de colisiones no es buena en las curvas;
2. Hay rastros cuando se ejecuta en la situación actual. ¿Cómo debo eliminar los rastros en el modo de respuesta?

Los estudiantes interesados ​​pueden intentar implementarlo ellos mismos.

Este ejemplo es relativamente simple y no tiene altos requisitos para js. Es bastante bueno jugar con él.

Y luego sigue siendo el mismo final cada vez. Si hay algún error en el contenido, indíquelo; si le resulta útil, puede darle me gusta y guardarlo. Solicite permiso antes de reimprimirlo e indique la fuente. Si tiene alguna pregunta, puede comunicarse a través de un mensaje privado. Página de inicio. Se me escapó una dirección de correo electrónico.

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.