En este tutoriales en linea te mostraré el juego de Tetris programado en jаvascript puro, totalmente gratuito y open source. 5x5g6w
Este juego de bloques está programado con jаvascript y utiliza canvas para pintar el juego. También utiliza Bootstrap para el diseño de los botones y la página en general, con un poco de SweetAlert para las ventanas.
SweetAlert es un plugin de jQuery y con el cual podremos dar un aspecto profesional a los mensajes que lancemos a los s acorde a las tendencias actuales. Además, tenemos la posibilidad de configurar el plugin de muchas formas diferentes
Aunque se vea sencillo de hacer, es uno de los trabajos que más ha costado realizar y del cual parzibyte se siente más orgulloso. Fue complejo (para el) comprender toda la lógica para las colisiones, rotaciones, eliminación de filas, movimiento de piezas, límites, etcétera.
Entre las características del juego encontramos:
- Sonidos: música de fondo, sonido cuando la pieza no se puede rotar, cuando se hace una fila completa y cuando el tetrominó toca el suelo
- Colores: cada pieza tiene un color aleatorio elegido en tiempo de ejecución
- Rotaciones: las piezas se pueden rotar para acomodarlas y acumular puntos
- Compatible con móviles: debido a que es web, he agregado unos botones para poder jugarlo en móviles, pero también se puede jugar con el teclado
- Código abierto: puedes modificar el juego, el tablero, la longitud, velocidad, piezas, rotaciones, etcétera.
- Port de tetris: se comporta como cualquier juego de tetris normal
- Pausa del juego: el juego se puede pausar o reanudar en cualquier momento
Veamos entonces los detalles de este juego programado en JS. A lo largo del post te mostraré cómo es que este juego está programado, también te dejaré una demostración y el código completo.
Algoritmo general del juego de Tetris 3s73m
El algoritmo es sencillo. Tenemos un plano cartesiano en donde existen las coordenadas X e Y. Tenemos 3 cosas:
- Tablero de juego: el tablero en donde se dibujará o mostrará todo
- Piezas ya existentes: los puntos o piezas que ya han caído antes; es decir, las figuras que se quedaron ahí
- Pieza actual: la pieza que va bajando actualmente y que el jugador puede mover o rotar
Ahora hacemos lo siguiente: dibujamos el tablero del juego (vacío), luego sobreponemos las piezas existentes y finalmente colocamos la pieza actual (la que va bajando).
En cada movimiento o intento de rotación, verificamos si la pieza no colapsa con la pared o con otra figura abajo. Cuando la pieza se rota, hacemos una simulación para ver si los puntos, después de haber sido rotados, no colapsarán con otra pieza.
Además, cuando se detecta que la pieza ha llegado al suelo, se inicia un temporizador que bajará la siguiente pieza en determinados milisegundos (de este modo el jugador tiene tiempo para mover la pieza).
Antes de mostrar otra figura, se mueven los puntos de la figura actual a las piezas existentes.
Lo demás son colisiones y trabajos con arreglos. Por ejemplo, para verificar si una fila está llena recorremos cada punto del arreglo en determina posición de Y y verificamos si está tomado.
Todo el dibujo del juego lo hacemos en un requestAnimationFrame y dibujamos una matriz sobre Canvas usando jаvascript. Mas detalle en parzibyte.
