Vi algunos episodios de videos de Canvas en MOOC antes y siempre quise practicar la escritura de algo. Siento que Snake es relativamente simple. Cuando estaba en la universidad, también escribí una versión de caracteres en lenguaje C. Inesperadamente, todavía encontré muchos problemas.
El efecto final es el siguiente (si la imagen es demasiado grande, tardará demasiado. El software para grabar gif tiene un límite de tiempo...)
Comience por definir el área de juego. Sólo hay dos elementos en la pantalla de Snake: el cuerpo de la serpiente y la manzana, y ambos pueden estar compuestos por cuadrículas cuadradas. Agrega espacios entre cuadrados. ¿Por qué agregar espacios? Puedes imaginar que cuando llenes con éxito todas las cuadrículas, si no hay espacios, será un gran cuadrado sólido... No tienes idea de cómo se ve el cuerpo de la serpiente.
Haz un dibujo.
Las coordenadas de la esquina superior izquierda de la cuadrícula son (0, 0), la abscisa aumenta hacia la derecha y la ordenada aumenta hacia abajo. Esta dirección es la misma que Canvas.
Cada vez que dibujamos una cuadrícula, tenemos que comenzar desde la esquina superior izquierda. Siempre sabemos que las coordenadas de la esquina superior izquierda de Canvas son (0, 0). Suponiendo que la longitud del lado de la cuadrícula es GRID_WIDTH y el ancho. del espacio es GAP_WIDTH, podemos obtener el (i, j)ésimo Las coordenadas de la esquina superior izquierda de la cuadrícula (i*(GRID_WIDTH+GAP_WIDTH)+GAP_WIDTH, j*(GRID_WIDTH+GAP_WIDTH)+GAP_WIDTH) .
Supongamos que el cuerpo de la serpiente está compuesto por tres cuadrículas azules. No podemos dibujar simplemente tres cuadrículas, sino también dos espacios morados. De lo contrario, como se mencionó anteriormente, no sabrá cómo se ve el cuerpo de la serpiente. Como se muestra en la imagen a continuación, aunque se puede jugar sin espacios, la experiencia definitivamente será diferente.
Dibuja espacios entre cuadrículas adyacentes sin dibujar espacios
Ahora podemos intentar dibujar una serpiente. El cuerpo de la serpiente es en realidad una colección de cuadrículas. Cada cuadrícula está representada por una matriz que contiene información de dos posiciones. La serpiente completa se puede representar mediante una matriz bidimensional.
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>blog_snack</title> <style> #canvas { background-color: #000 } </style></; head><body> <canvas id=canvas></canvas> <script> const GRID_WIDTH = 10 // La longitud del lado de la cuadrícula const GAP_WIDTH = 2; // La longitud del lado del espacio const ROW = 10; // ¿Cuántas filas de cuadrículas hay en total y cuántas cuadrículas hay en cada fila? let canvas = document.getElementById('canvas'); = GRID_WIDTH * FILA + GAP_WIDTH * (FILA + 1); lienzo.ancho = GRID_WIDTH * FILA + GAP_WIDTH * (FILA + 1); = canvas.getContext('2d'); let merienda = [ [2, 3], [2, 4], [2, 5], [3, 5], [4, 5], [4, 4], [5, 4], [5, 5] ] // Inicializa uno