Tetris en JavaScript – Open source

En este tutoriales en linea te mostraré el juego de Tetris programado en jаvascript puro, totalmente gratuito y open source.

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. 

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

El algoritmo es sencillo. Tenemos un plano cartesiano en donde existen las coordenadas X e Y. Tenemos 3 cosas:

1. Tablero de juego: el tablero en donde se dibujará o mostrará todo
2. Piezas ya existentes: los puntos o piezas que ya han caído antes; es decir, las figuras que se quedaron ahí
3. 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.

Jugar tetris en linea