Dirección de descarga del código fuente : https://download.csdn.net/download/sheziqiong/87946018
Dirección de descarga del código fuente : https://download.csdn.net/download/sheziqiong/87946018
1. Estructura general
1.1 Introducción al proyecto
Este proyecto es un juego front-end de Tetris desarrollado en base a html+css+js.
1.2 Estructura del proyecto
El proyecto generalmente se divide en cuatro carpetas: html, css, js, img. img contiene la imagen de fondo. Solo hay index.html en html, que es responsable de la visualización del juego. Solo hay index.css en el archivo css, que es responsable de embellecer index.html. La lógica específica del juego está contenida en el archivo js.
En la carpeta js, const.js define las constantes de todo el juego, como la longitud y el ancho del juego, el color del bloque, las teclas y los valores del teclado, etc. Tetris.js representa un tipo de bloque característico, una posición de bloque y también incluye la transformación de bloques, etc. controller.js implementa la lógica específica del juego, como controlar el paradero del cubo, la variación del cubo, si anotar, si el juego ha terminado, etc. view.js es responsable de la generación dinámica del área de juego y la tabla del siguiente área cuadrada y el dibujo del cuadrado del juego, etc.
2. Realización del proyecto
2.1 implementación de index.html
Index.html primero presenta los archivos css y js relevantes. El cuerpo principal divide la página en tres partes a través de divs: la izquierda es el área de juego y la derecha es el área auxiliar (la esquina superior derecha es el siguiente área de vista previa cuadrada y la esquina inferior derecha es el área de instrucciones de operación).
En el área del juego y en el siguiente área de vista previa del bloque, solo se coloca una etiqueta de tabla y se proporciona una identificación, y luego su estilo se controla a través de index.css, y las filas y columnas se agregan dinámicamente a la tabla a través de view.js, para que pueda basarse dinámicamente en el valor entrante Cambie la longitud y el ancho del área de juego. El área de vista previa es un texto, y la puntuación y la velocidad tienen identificadores, que se pueden cambiar dinámicamente en js según el progreso del juego.
2.2 implementación de index.css
Establezca principalmente el fondo general y controle las posiciones relativas del área de juego, el área de vista previa del siguiente bloque y el área de solicitud de operación. Y el área de juego, el estilo de cada pequeño cuadrado en el siguiente área de bloques.
2.3 Implementación de const.js
Este archivo define algunas constantes que el programa general necesita usar. Una es para facilitar la modificación y la otra es para reemplazar números con cadenas para facilitar la lectura del código. Primero defina el ancho y alto de la interfaz principal del juego y el ancho y alto del área de solicitud del siguiente bloque. Segundo define dónde se genera el bloque inicial. Luego defina las cadenas correspondientes a diferentes tipos de bloques, por ejemplo, WALL representa una pared. También define la correspondencia entre la clave y el valor del teclado utilizado. Finalmente define el color a utilizar.
2.4 implementación de tetris.js
Defina la clase de coordenadas de posición bidimensional, que es conveniente para la representación de coordenadas. Luego se define la clase de bloque, incluidas las coordenadas de puntos importantes, el tipo de bloque, el color del bloque y las coordenadas generales de la forma.
Como todos sabemos, un cuadrado total se compone de cuatro cuadrados atómicos. Entonces, las coordenadas del punto importante marcan la posición de un punto del cuadrado general, y luego los otros tres puntos se pueden obtener a partir de las coordenadas del punto importante y el tipo del cuadrado (generado por la función makeTetris()). El color de cada bloque general se genera aleatoriamente.
La función makeTetris() se genera en función de las coordenadas de puntos importantes mencionadas anteriormente (x, y) y el indicador de tipo de bloque. Hay 21 tipos de Tetris, y las coordenadas de cuatro puntos se generan para cada tipo y se almacenan en una matriz.
La función changeTetris() existe para admitir la deformación del cubo. Primero cambia la bandera a la bandera de su próximo turno. Debido a que solo hay un tipo de Mattoko, los otros cuatro forman un grupo, por lo que la bandera convertida se puede obtener con operaciones simples. Después de obtenerlo, llame al makeTetris() anterior para obtener las cuatro coordenadas del cuadrado general transformado.
La función rechangeTetris() es la operación inversa de la función changeTetris(), para volver a la forma original si el espacio no es suficiente después de simular la rotación. La implementación es similar, pero la dirección del cambio de forma es diferente.
2.5 implementación de view.js
Se encarga principalmente de dibujar la imagen, es decir, generar dinámicamente las filas y columnas de la tabla según el ancho y alto definido en const.js, representando cada pequeño cuadrado. También se dibuja el color de los cuadrados pequeños.
Primero, defina la matriz bidimensional del área de juego y el siguiente área de vista previa del bloque (en lo sucesivo, la siguiente área), y luego, básicamente, realice la función operando la matriz bidimensional.
Función de inicialización init(). Responsable de inicializar las matrices bidimensionales del área de juego y la siguiente área. Una parte del área de juego se inicializa como VACÍO, lo que significa que no hay casillas en este momento, y el borde se inicializa como MURO, lo que significa que es un muro. La siguiente área se inicializa en VACÍO.
función agregar(). Responsable de agregar dinámicamente mesas en la pantalla, es decir, agregar dinámicamente las mesas correspondientes al área de juego y al área siguiente de acuerdo con el ancho y alto definido por const.
función dibujar(). Encargado de dibujar el color de los bloques en el área de juego, y dibujar diferentes colores de acuerdo a los diferentes tipos de bloques (blanco, pared, caído, cayendo).
función dibujarPequeño(). Responsable del dibujo de la siguiente área. Mismo principio que dibujar().
2.6 Implementación de controlador.js
El archivo js es responsable de la implementación lógica específica del juego. Primero se definen algunas variables globales. Por ejemplo, el indicador de tipo de bloque actual, el siguiente tipo de bloque nextFlag. El bloque actual es tetris y el siguiente bloque es nextTetris. Y dos variables móviles, gameOver indica si se puede mover y si el juego ha terminado. Y dos variables velocidad, alcance representa velocidad y puntuación. Finalmente, moveDownId es el valor de retorno del temporizador de la función moveDown que el bloque de control sigue moviéndose hacia abajo, para detener el temporizador, ajustar la velocidad, etc.
función ventana.onload(). Es el punto de entrada del archivo js e ingresa a esta función tan pronto como se carga la página html. Llamó a la función utilizada más tarde. La lógica general es: primero inicialice la matriz bidimensional del área de juego y la siguiente área, y luego agregue dinámicamente la tabla inicial. Luego dibuja los cuadrados del área de juego y la siguiente área. Luego se llama al temporizador y se llama a la función moveDown de vez en cuando para mover el bloque actual hacia abajo. Finalmente, se agregan detectores de eventos.
función addEventListener(). Agregue un detector de eventos de teclado. Tome las medidas correspondientes según las diferentes teclas del teclado. Si está ARRIBA, el bloque se deformará primero, y si no se puede deformar, retrocederá. Si está ABAJO, deje que el cuadrado baje un bit y llame a la función makeTetris() para cambiar las coordenadas de los otros tres cuadrados pequeños, excepto el cuadrado pequeño central. De manera similar, si no puede moverse hacia abajo, cancele la operación. Funciones IZQUIERDA, DERECHA, etc. ESPACIO, simplemente configure moveable=! Pausa de implementos móviles. El número ± cambia la velocidad. Primero, cambie la variable de velocidad en consecuencia, luego detenga el temporizador de la función de movimiento hacia abajo a través del ID del temporizador mencionado anteriormente: moveDownId, y luego cree un nuevo temporizador (porque de lo contrario, la velocidad del temporizador seguirá la anterior). velocidad, es decir, no cambiará). Al mismo tiempo, obtenga el elemento de velocidad correspondiente en el html y modifique el valor.
función moveDown(): Como se mencionó anteriormente, la función moveDown() se llama a través del temporizador para realizar la caída automática del bloque, que es una función relativamente crítica.
Esta función juzgará primero, si no hay pausa, moverá la coordenada x del pequeño cuadrado central de tetris hacia abajo y moverá hacia abajo los otros tres cuadrados pequeños. Luego juzgue si es movible, si no es movible, significa que el bloque ha caído debajo, luego llame a la función newStart() para generar un nuevo bloque para continuar. Si es móvil, llame a la función actualizarTablero() para actualizar la posición del bloque y dibuje la situación actual del bloque a través de la función dibujar().
función actualizarTablero(): responsable de actualizar el arreglo bidimensional del área de juego cada vez que cae la caja.La lógica específica es primero establecer el valor mediano del arreglo igual a NUEVO, es decir, asignar el valor a VACÍO recién caído . Luego marque las coordenadas de posición de los cuatro cuadrados pequeños del tetris actual como NUEVO.
Función isMovable(): responsable de la detección de colisiones. El método específico es, para cada cuadrado pequeño en el cuadrado, primero juzgar si la matriz está fuera de los límites y luego juzgar si la posición de la coordenada es ANTIGUA o PARED, si es así, devolver falso, lo que significa que no se puede mover. (Debido a que la detección de colisiones es anterior a updateBoard(), aún no se cubrirá).
Función newStart(): este método se llama cuando un bloque cae hasta el punto en que no puede seguir cayendo. Primero mueva el bloque hacia arriba un espacio como un todo para compensar el movimiento hacia abajo anterior. Luego, el bloque se actualiza para convertir el bloque en un estado descartado. Y en este momento también llame a clearLine() para borrar la línea completa. Finalmente, también se juzga si el juego ha terminado, y cuando finaliza, se llama a la función newGame () para realizar el trabajo de limpieza relacionado. Si no ha terminado, el nextTetris anterior se cambia al tetris actual, y el el bloque siguiente se regenera y se muestra.
función newGame(): inicializa la matriz, vuelve a dibujar y finaliza el temporizador.
Función isOver(): se utiliza para juzgar si el juego ha terminado, específicamente para verificar si ya hay un bloque caído en la parte superior del área de juego, o si ya hay un bloque en la posición donde se debe colocar el nuevo bloque.
La función clearLine() se encarga de eliminar líneas completas. El método específico es escanear desde la parte inferior del área de juego hacia arriba y contar el número de cuadrados en cada fila.Si una fila está llena, deje que la fila se vacíe. Y deje que todos los cuadrados sobre esta fila continúen moviéndose hacia abajo, llene la posición vacante y comience a escanear nuevamente desde la parte inferior (porque el área debajo puede estar llena nuevamente después de que se elimine). Finalmente, la puntuación se actualiza y se muestra en la pantalla.
3. Visualización del proyecto
Página inicial:
Página con una línea eliminada y cambio de velocidad:
Dirección de descarga del código fuente : https://download.csdn.net/download/sheziqiong/87946018
Dirección de descarga del código fuente : https://download.csdn.net/download/sheziqiong/87946018